Skip to content
Permalink
Browse files

Merge pull request #158 from CatalystCode/enhancement/fix-vue-eslint-…

…errors

Enhancement/Fix all Vue ESlint errors
  • Loading branch information
Hironsan committed Apr 13, 2019
2 parents f0bf653 + d8b23a7 commit 21471bd6ae26c693d2f6e682356a6e7f6437503d
@@ -9,7 +9,7 @@ module.exports = {
},
extends: [
"airbnb-base",
"plugin:vue/base",
"plugin:vue/recommended",
],
rules: {
"no-new": "off",
@@ -18,6 +18,6 @@ module.exports = {
"object-shorthand": "off",
"prefer-destructuring": "off",
"prefer-template": "off",
"vue/max-attributes-per-line": 3,
},
};
// https://travishorn.com/setting-up-eslint-on-vs-code-with-airbnb-javascript-style-guide-6eb78a535ba6
@@ -6,26 +6,73 @@ Vue.use(require('vue-shortkey'), {
});

Vue.component('annotator', {
template: '<div @click="setSelectedRange">'
+ ' <span v-for="r in chunks"'
+ ' v-bind:class="{tag: id2label[r.label].text_color}"'
+ ' v-bind:style="{ color: id2label[r.label].text_color, backgroundColor: id2label[r.label].background_color }"'
+ ' >{{ text.slice(r.start_offset, r.end_offset) }}<button class="delete is-small"'
+ ' v-if="id2label[r.label].text_color"'
+ ' @click="removeLabel(r)"></button></span>'
+ ' </div>',
props: {
labels: Array, // [{id: Integer, color: String, text: String}]
text: String,
entityPositions: Array, // [{'startOffset': 10, 'endOffset': 15, 'label_id': 1}]
labels: {
type: Array, // [{id: Integer, color: String, text: String}]
default: () => [],
},
text: {
type: String,
default: '',
},
entityPositions: {
type: Array, // [{'startOffset': 10, 'endOffset': 15, 'label_id': 1}]
default: () => [],
},
},

data() {
return {
startOffset: 0,
endOffset: 0,
};
},

computed: {
sortedEntityPositions() {
/* eslint-disable vue/no-side-effects-in-computed-properties */
this.entityPositions = this.entityPositions.sort((a, b) => a.start_offset - b.start_offset);
return this.entityPositions;
/* eslint-enable vue/no-side-effects-in-computed-properties */
},

chunks() {
const res = [];
let left = 0;
for (let i = 0; i < this.sortedEntityPositions.length; i++) {
const e = this.sortedEntityPositions[i];
const l = this.makeLabel(left, e.start_offset);
res.push(l);
res.push(e);
left = e.end_offset;
}
const l = this.makeLabel(left, this.text.length);
res.push(l);

return res;
},

id2label() {
const id2label = {};
// default value;
id2label[-1] = {
text_color: '',
background_color: '',
};
for (let i = 0; i < this.labels.length; i++) {
const label = this.labels[i];
id2label[label.id] = label;
}
return id2label;
},
},

watch: {
entityPositions() {
this.resetRange();
},
},

methods: {
setSelectedRange() {
let start;
@@ -103,48 +150,14 @@ Vue.component('annotator', {
},
},

watch: {
entityPositions() {
this.resetRange();
},
},

computed: {
sortedEntityPositions() {
this.entityPositions = this.entityPositions.sort((a, b) => a.start_offset - b.start_offset);
return this.entityPositions;
},

chunks() {
const res = [];
let left = 0;
for (let i = 0; i < this.sortedEntityPositions.length; i++) {
const e = this.sortedEntityPositions[i];
const l = this.makeLabel(left, e.start_offset);
res.push(l);
res.push(e);
left = e.end_offset;
}
const l = this.makeLabel(left, this.text.length);
res.push(l);

return res;
},

id2label() {
const id2label = {};
// default value;
id2label[-1] = {
text_color: '',
background_color: '',
};
for (let i = 0; i < this.labels.length; i++) {
const label = this.labels[i];
id2label[label.id] = label;
}
return id2label;
},
},
template: '<div @click="setSelectedRange">'
+ ' <span v-for="r in chunks"'
+ ' v-bind:class="{tag: id2label[r.label].text_color}"'
+ ' v-bind:style="{ color: id2label[r.label].text_color, backgroundColor: id2label[r.label].background_color }"'
+ ' >{{ text.slice(r.start_offset, r.end_offset) }}<button class="delete is-small"'
+ ' v-if="id2label[r.label].text_color"'
+ ' @click="removeLabel(r)"></button></span>'
+ ' </div>',
});

const vm = new Vue({ // eslint-disable-line no-unused-vars
@@ -6,7 +6,19 @@ Vue.use(require('vue-shortkey'));

const vm = new Vue({ // eslint-disable-line no-unused-vars
el: '#mail-app',

delimiters: ['[[', ']]'],

directives: {
'todo-focus': (el, binding) => {
if (binding.value) {
el.focus();
}
},
},

mixins: [annotationMixin],

data: {
newTodo: '',
editedTodo: null,
@@ -53,14 +65,6 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
[],
],
},
mixins: [annotationMixin],
directives: {
'todo-focus': (el, binding) => {
if (binding.value) {
el.focus();
}
},
},

methods: {
addTodo() {
@@ -7,14 +7,23 @@ Vue.filter('simpleShortcut', simpleShortcut);

const vm = new Vue({ // eslint-disable-line no-unused-vars
el: '#mail-app',

delimiters: ['[[', ']]'],

data: {
labels: [],
newLabel: null,
editedLabel: null,
messages: [],
},

created() {
HTTP.get('labels').then((response) => {
this.labels = response.data;
this.sortLabels();
});
},

methods: {
generateColor() {
const color = (Math.random() * 0xFFFFFF | 0).toString(16); // eslint-disable-line no-bitwise
@@ -114,10 +123,4 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
Object.assign(label, this.beforeEditCache);
},
},
created() {
HTTP.get('labels').then((response) => {
this.labels = response.data;
this.sortLabels();
});
},
});
@@ -7,12 +7,9 @@ Vue.use(require('vue-shortkey'));

const vm = new Vue({ // eslint-disable-line no-unused-vars
el: '#mail-app',

delimiters: ['[[', ']]'],
data: {
newTodo: '',
editedTodo: null,
},
mixins: [annotationMixin],

directives: {
'todo-focus': (el, binding) => {
if (binding.value) {
@@ -21,6 +18,13 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
},
},

mixins: [annotationMixin],

data: {
newTodo: '',
editedTodo: null,
},

methods: {
addTodo() {
const value = this.newTodo && this.newTodo.trim();

0 comments on commit 21471bd

Please sign in to comment.
You can’t perform that action at this time.