Enhancement/Refactor projects page to Vue single file component

app/server/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "cross-env HOT_RELOAD=1 DEBUG=1 webpack-dev-server",
     "build": "webpack",
-    "lint": "eslint --max-warnings=0 static/js",
+    "lint": "eslint --max-warnings=0 'static/js/**/*.{js,vue}'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
@@ -21,10 +21,14 @@
     "vue-shortkey": "^3.1.6"
   },
   "devDependencies": {
+    "babel-eslint": "^10.0.1",
     "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
     "eslint": "^5.3.0",
     "eslint-config-airbnb-base": "^13.0.0",
     "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-vue": "^5.2.2",
+    "vue-template-compiler": "^2.5.16",
     "webpack": "^4.12.0",
     "webpack-bundle-tracker": "^0.4.2-beta",
     "webpack-cli": "^3.2.3",

app/server/static/js/.eslintrc.js

@@ -9,8 +9,10 @@ module.exports = {
   },
   extends: [
     "airbnb-base",
+    "plugin:vue/base",
   ],
   rules: {
+    "no-new": "off",
     "no-param-reassign": "off",
     "no-plusplus": "off",
     "object-shorthand": "off",

app/server/static/js/document_classification.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import annotationMixin from './mixin';
 import HTTP from './http';
-import simpleShortcut from './filter';
+import { simpleShortcut } from './filter';
 
 Vue.use(require('vue-shortkey'), {
   prevent: ['input', 'textarea'],

app/server/static/js/filter.js

@@ -1,7 +1,27 @@
-export default function simpleShortcut(shortcut) {
+export function simpleShortcut(shortcut) {
   let simplified = shortcut === null ? '' : shortcut;
   simplified = simplified.replace('ctrl', 'C');
   simplified = simplified.replace('shift', 'S');
   simplified = simplified.split(' ').join('-');
   return simplified;
 }
+
+export function title(value) {
+  const string = (value || '').toString();
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function daysAgo(dateStr) {
+  const updatedAt = new Date(dateStr);
+  const currentTm = new Date();
+
+  // difference between days(ms)
+  const msDiff = currentTm.getTime() - updatedAt.getTime();
+
+  // convert daysDiff(ms) to daysDiff(day)
+  const daysDiff = Math.floor(msDiff / (1000 * 60 * 60 * 24));
+
+  return daysDiff === 1
+    ? `${daysDiff} day ago`
+    : `${daysDiff} days ago`;
+}

app/server/static/js/label.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import HTTP from './http';
-import simpleShortcut from './filter';
+import { simpleShortcut } from './filter';
 
 Vue.filter('simpleShortcut', simpleShortcut);
 

app/server/static/js/projects.js

@@ -1,120 +1,10 @@
 import Vue from 'vue';
-import axios from 'axios';
+import Projects from './projects.vue';
 
-axios.defaults.xsrfCookieName = 'csrftoken';
-axios.defaults.xsrfHeaderName = 'X-CSRFToken';
-const baseUrl = window.location.href.split('/').slice(0, 3).join('/');
-
-
-const vm = new Vue({ // eslint-disable-line no-unused-vars
+new Vue({
   el: '#projects_root',
-  delimiters: ['[[', ']]'],
-  data: {
-    items: [],
-    isActive: false,
-    isDelete: false,
-    project: null,
-    selected: 'All Project',
-    projectName: '',
-    description: '',
-    projectType: '',
-    descriptionError: '',
-    projectTypeError: '',
-    projectNameError: '',
-  },
-
-  methods: {
-
-    deleteProject() {
-      axios.delete(`${baseUrl}/v1/projects/${this.project.id}`).then(() => {
-        this.isDelete = false;
-        const index = this.items.indexOf(this.project);
-        this.items.splice(index, 1);
-      });
-    },
-
-    setProject(project) {
-      this.project = project;
-      this.isDelete = true;
-    },
-
-    matchType(projectType) {
-      if (projectType === 'DocumentClassification') {
-        return this.selected === 'Text Classification';
-      }
-      if (projectType === 'SequenceLabeling') {
-        return this.selected === 'Sequence Labeling';
-      }
-      if (projectType === 'Seq2seq') {
-        return this.selected === 'Seq2seq';
-      }
-      return false;
-    },
-
-    getDaysAgo(dateStr) {
-      const updatedAt = new Date(dateStr);
-      const currentTm = new Date();
-
-      // difference between days(ms)
-      const msDiff = currentTm.getTime() - updatedAt.getTime();
-
-      // convert daysDiff(ms) to daysDiff(day)
-      const daysDiff = Math.floor(msDiff / (1000 * 60 * 60 * 24));
-
-      return daysDiff;
-    },
-
-    create() {
-      const payload = {
-        name: this.projectName,
-        description: this.description,
-        project_type: this.projectType,
-        guideline: 'Please write annotation guideline.',
-        resourcetype: this.resourceType(),
-      };
-      axios.post(`${baseUrl}/v1/projects`, payload)
-        .then((response) => {
-          window.location = `${baseUrl}/projects/${response.data.id}/docs/create`;
-        })
-        .catch((error) => {
-          this.projectTypeError = '';
-          this.projectNameError = '';
-          this.descriptionError = '';
-          if ('resourcetype' in error.response.data) {
-            this.projectTypeError = error.response.data.resourcetype;
-          }
-          if ('name' in error.response.data) {
-            this.projectNameError = error.response.data.name[0];
-          }
-          if ('description' in error.response.data) {
-            this.descriptionError = error.response.data.description[0];
-          }
-        });
-    },
-
-    resourceType() {
-      if (this.projectType === 'DocumentClassification') {
-        return 'TextClassificationProject';
-      }
-      if (this.projectType === 'SequenceLabeling') {
-        return 'SequenceLabelingProject';
-      }
-      if (this.projectType === 'Seq2seq') {
-        return 'Seq2seqProject';
-      }
-      return '';
-    },
-  },
 
-  computed: {
-    selectedProjects() {
-      return this.items.filter(item => this.selected === 'All Project' || this.matchType(item.project_type));
-    },
-  },
+  components: { Projects },
 
-  created() {
-    axios.get(`${baseUrl}/v1/projects`).then((response) => {
-      this.items = response.data;
-    });
-  },
+  template: '<Projects />',
 });