implement card front-end and back-end

Author: jamesjieye

front-end/package-lock.json

@@ -15,14 +15,19 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.3",
     "@fortawesome/free-solid-svg-icons": "^5.3.0",
     "@fortawesome/vue-fontawesome": "^0.1.1",
+    "autosize": "^4.0.2",
     "axios": "^0.18.0",
+    "blueimp-file-upload": "^9.22.0",
     "bootstrap": "^4.1.3",
+    "date-fns": "^2.0.0-alpha.9",
     "i": "^0.3.6",
     "jquery": "^3.3.1",
+    "jquery-ui": "^1.12.1",
     "lodash": "^4.17.10",
     "noty": "^3.2.0-beta",
     "npm": "^6.4.0",
     "popper.js": "^1.14.4",
+    "showdown": "^1.8.6",
     "sockjs-client": "^1.1.5",
     "vue": "^2.5.17",
     "vue-i18n": "^8.0.0",

front-end/package.json

@@ -14,6 +14,10 @@ export default {
       // Initializing the real time connection
       this.$rt.init(myData.settings.realTimeServerUrl, myData.user.token)
     })
+
+    this.$bus.$on('user.unauthenticated', () => {
+      this.$router.push({name: 'login'})
+    })
   }
 }
 </script>
@@ -22,6 +26,7 @@ export default {
 html, body {
   height: 100%;
   font-size: 14px;
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif !important;
 }
 
 #app, .page {
@@ -89,6 +94,10 @@ textarea.form-control:focus {
       .modal-title {
         font-size: 1rem;
       }
+
+      .close {
+        outline: none !important;
+      }
     }
 
     .modal-body {
@@ -112,4 +121,8 @@ textarea.form-control:focus {
     }
   }
 }
+
+.modal-open .modal-backdrop.show {
+    opacity: .7;
+}
 </style>

front-end/src/App.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="fileinput-button">
+    <font-awesome-icon :icon="icon"  class="icon" v-if="icon"/> {{ label }}
+    <input :id="id" type="file" name="file" multiple>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery'
+import 'jquery-ui/ui/widget'
+import 'blueimp-file-upload/js/jquery.fileupload'
+import 'blueimp-file-upload/js/jquery.iframe-transport'
+
+export default {
+  name: 'Uploader',
+  props: ['id', 'url', 'icon', 'label'],
+  watch: {
+    url () {
+      if (!this.url) {
+        return
+      }
+
+      $('#' + this.id).fileupload({
+        url: this.url,
+        dataType: 'json',
+        add: (e, data) => {
+          this.$emit('uploading', data.files[0])
+          data.submit()
+        },
+        fail: (e, data) => {
+          this.$emit('failed', data._response.jqXHR.responseJSON.message)
+        },
+        done: (e, data) => {
+          this.$emit('uploaded', data.result)
+        },
+        progress: (e, data) => {
+          let progress = parseInt(data.loaded / data.total * 100, 10)
+          this.$emit('progress', progress)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  margin-right: .5rem;
+}
+</style>

front-end/src/components/Uploader.vue

@@ -5,7 +5,10 @@ import store from './store'
 import axios from 'axios'
 import Vuelidate from 'vuelidate'
 import { library as faLibrary } from '@fortawesome/fontawesome-svg-core'
-import { faHome, faSearch, faPlus, faEllipsisH, faUserPlus, faListUl } from '@fortawesome/free-solid-svg-icons'
+import {
+  faHome, faSearch, faPlus, faEllipsisH, faUserPlus, faListUl, faWindowMaximize,
+  faUser, faPaperclip, faArchive, faPencilAlt, faComment, faUndo, faTrashAlt, faSpinner
+} from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { i18n } from './i18n'
 import eventBus from './event-bus'
@@ -25,7 +28,8 @@ axios.interceptors.response.use(
 Vue.use(Vuelidate)
 
 // Set up FontAwesome
-faLibrary.add(faHome, faSearch, faPlus, faEllipsisH, faUserPlus, faListUl)
+faLibrary.add(faHome, faSearch, faPlus, faEllipsisH, faUserPlus, faListUl, faWindowMaximize,
+  faUser, faPaperclip, faArchive, faPencilAlt, faComment, faUndo, faTrashAlt, faSpinner)
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
 Vue.config.productionTip = false