Emaildragdrop

package.json

@@ -19,6 +19,7 @@
     "tweetnacl-util": "^0.15.0",
     "vue": "^2.6.10",
     "vue-context": "^4.0.3",
+    "vue-drag-drop": "^1.1.4",
     "vue-router": "^3.0.3",
     "vue-simple-context-menu": "^3.1.5",
     "vue-socket.io": "^3.0.7",

public/config/config.local

@@ -1,6 +1,6 @@
 export default ({
   tfApiUrl: 'https://radar.threefold.io/api/',
-  jsApiUrl: `http://172.17.0.2/api/actors/`,
+  jsApiUrl: `https://172.17.0.2/web/gedis/http/`,
 
   apiUrl: 'https://ffc-signaling.staging.jimber.org',
   janus: 'http://ffc-video.jimber.staging.org/janus',

src/components/emaillistitem/emaillistitem.html

@@ -2,9 +2,9 @@
   <v-list-item @click="$emit('click')"  @contextmenu.prevent="$refs.menu.open">
     <template v-slot:default="{ active, toggle }">
       <v-row align="center">
-        <v-col cols="2" align="center">
+        <v-col cols="2" align="center" @click="changePriority">
           <v-list-item-action>
-            <v-icon v-if="!email.star" color="grey lighten-1">
+            <v-icon v-if="!email.priority" color="grey lighten-1">
               far fa-star
             </v-icon>
 
@@ -28,10 +28,11 @@
       </v-row>
     </template>
   </v-list-item>
+
   <vue-context ref="menu">
       <v-list three-line>
         <v-list-item v-for="(box, key) in boxes" :key=key>
-            <v-list-item-title @click=moveMail(email.id,box.name)>Move to {{box.name}}</v-list-item-title>
+            <v-list-item-title @click=moveMail(box.name)>Move to {{box.name}}</v-list-item-title>
           </v-list-item>
         </v-list>
       </vue-context>

src/components/emaillistitem/emaillistitem.js

@@ -8,7 +8,6 @@ export default {
   props: ['email'],
   data () {
     return {
-
     }
   },
   computed: {
@@ -22,18 +21,29 @@ export default {
       return div.textContent || div.innerText || ''
     },
     emailDate () {
-      return moment(moment.unix(this.email.date)).from(moment())
+      return moment(moment.unix(this.email.mtime)).from(moment())
     }
   },
   mounted () {
 
   },
   methods: {
     ...mapActions([
-      'updateFolder'
+      'updateFolder',
+      'updatePriority'
     ]),
-    moveMail (id, folder) {
-      this.updateFolder(id, folder)
+    moveMail (folder) {
+      this.updateFolder({
+        mailId: this.email.id,
+        folder: folder
+      })
+    },
+    changePriority () {
+      this.updatePriority({
+        mailId: this.email.id,
+        priority: !this.email.priority
+      })
+      this.email.priority = !this.email.priority
     }
   }
 }

src/components/emailnavigation/emailnavigation.html

@@ -10,14 +10,16 @@
   <v-navigation-drawer permanent class="transparent elevation-0 pl-3">
     <v-list dense class="pl-2">
       <v-list-item-group v-model="selectedBox" color="primary">
-      <v-list-item link v-for="(box, index) in boxes" :key="index" @click="setSelectedBox(box)">
-        <v-list-item-icon>
-          <v-icon small>fas fa-inbox</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>{{box.name}}</v-list-item-title>
-        </v-list-item-content>
-      </v-list-item>
+          <drop v-for="(box, index) in boxes" :key="index" class="drop pr-3" @drop="moveMail(...arguments, box)">
+            <v-list-item link  @click="setSelectedBox(box)">
+              <v-list-item-icon>
+                <v-icon small>{{box.icon}}</v-icon>
+              </v-list-item-icon>
+              <v-list-item-content>
+                <v-list-item-title>{{box.name}}</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </drop>
       </v-list-item-group>
     </v-list>
   </v-navigation-drawer>

src/components/emailnavigation/emailnavigation.js

@@ -1,8 +1,9 @@
 import { mapActions, mapGetters } from 'vuex'
+import { Drag, Drop } from 'vue-drag-drop'
 
 export default {
   name: 'emailnavigation',
-  components: {},
+  components: { Drag, Drop },
   props: [],
   data () {
     return {
@@ -18,8 +19,17 @@ export default {
 
   },
   methods: {
+    ...mapActions([
+      'updateFolder'
+    ]),
     setSelectedBox (box) {
       this.$emit('selectMailBox', box)
+    },
+    moveMail (mailArgument, event, folder) {
+      this.updateFolder({
+        mailId: mailArgument.emailId,
+        folder: folder.name
+      })
     }
   }
 }

src/services/mailService.js

@@ -9,10 +9,7 @@ export default ({
     return Axios.post(`${config.jsApiUrl}mail/list`)
   },
   sendMail (mail) {
-    mail.date = moment(moment.utc()).format('MM/DD/YYYY HH:mm')
     mail.attachments = []
-    mail.headers = ''
-    mail = JSON.stringify(mail)
     return Axios.post(`${config.jsApiUrl}mail/send`, {
       args: {
         mail
@@ -27,11 +24,19 @@ export default ({
     }, headers)
   },
   updateFolder (id, folder) {
-    return Axios.post(`${config.jsApiUrl}mail/update_folder`, {
+    return Axios.post(`${config.jsApiUrl}mail/move_message`, {
       args: {
         mail_id: id,
         folder_name: folder
       }
     })
+  },
+  updatePriority (id, priority) {
+    return Axios.post(`${config.jsApiUrl}mail/update_priority`, {
+      args: {
+        mail_id: id,
+        priority: priority
+      }
+    })
   }
 })

src/store/mailStore.js

@@ -4,11 +4,11 @@ export default ({
   state: {
     mails: [],
     boxes: [
-      { name: 'Inbox' },
-      { name: 'Outbox' },
-      { name: 'Sent' },
-      { name: 'Spam' },
-      { name: 'Trash' }
+      { name: 'Inbox', icon: 'fas fa-envelope-open-text' },
+      { name: 'Outbox', icon: 'far fa-paper-plane' },
+      { name: 'Sent', icon: 'fas fa-paper-plane' },
+      { name: 'Spam', icon: 'far fa-times-circle' },
+      { name: 'Trash', icon: 'fas fa-trash' }
     ]
   },
   actions: {
@@ -36,12 +36,18 @@ export default ({
         console.error(error)
       })
     },
-    updateFolder: (context, mailId, folder) => {
-      mailService.updateFolder(mailId, folder).then((response) => {
+    updateFolder: (context, data) => {
+      mailService.updateFolder(data.mailId, data.folder).then((response) => {
         context.dispatch('getMails')
       }).catch((error) => {
         console.error(error)
       })
+    },
+    updatePriority: (context, data) => {
+      mailService.updatePriority(data.mailId, data.priority).then((response) => {
+      }).catch((error) => {
+        console.error(error)
+      })
     }
   },
   mutations: {

src/views/mails/mails.html

@@ -47,7 +47,13 @@
                   <v-list three-line>
                     <v-list-item-group v-model="selected">
                       <template v-for="(email, index) in filterMailbox">
-                        <email-list-item class="ml-3" :email="email" :key="index" @click="openMail = email" />
+                          <drag :transfer-data="{emailId: email.id}">
+                              <template slot="image" >
+                                  <email-list-item class="ml-3 grey" :email="email" :key="index" @click="openMail = email" />
+                              </template>
+                              <email-list-item class="ml-3" :email="email" :key="index" @click="openMail = email" />
+                          </drag>
+
                         <v-divider class="ml-3"/>
                       </template>
                     </v-list-item-group>

src/views/mails/mails.js

@@ -5,9 +5,11 @@ import { mapGetters, mapActions } from 'vuex'
 import { VueEditor } from 'vue2-editor'
 import { timingSafeEqual } from 'crypto'
 
+import { Drag, Drop } from 'vue-drag-drop'
+
 export default {
   name: 'mails',
-  components: { VueEditor, emailNavigation, fullEmail, emailListItem },
+  components: { VueEditor, emailNavigation, fullEmail, emailListItem, Drag, Drop },
   props: [],
   data () {
     return {