updated vmail-ui

src/App.vue

@@ -1,4 +1,5 @@
 <template>
+<v-app>
   <div id="app">
     <div id="nav">
       <div class="routers">
@@ -29,6 +30,7 @@
       </div>
     </div>
   </div>
+</v-app>
 </template>
 
 <script>

src/classes/admin.js

@@ -14,4 +14,8 @@ export default class Admin {
     GetItem(name) {
         return Axios.get(this.vmailapi.GetUrl() + this.apipath + "/" + name)
     }
+
+    DeleteItem(name) {
+        return Axios.delete(this.vmailapi.GetUrl() + this.apipath + "/" + name)
+    }
 }

src/classes/alias.js

@@ -14,4 +14,8 @@ export default class Alias {
     GetItem(name) {
         return Axios.get(this.vmailapi.GetUrl() + this.apipath + "/" + name)
     }
+
+    DeleteItem(name) {
+        return Axios.delete(this.vmailapi.GetUrl() + this.apipath + "/" + name)
+    }
 }

src/classes/mailbox.js

@@ -14,4 +14,8 @@ export default class Mailbox {
     GetItem(name) {
         return Axios.get(this.vmailapi.GetUrl() + this.apipath + "/" + name)
     }
+
+    DeleteItem(name) {
+        return Axios.delete(this.vmailapi.GetUrl() + this.apipath + "/" + name)
+    }
 }

src/components/HelloWorld.vue

@@ -1,151 +0,0 @@
-<template>
-  <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
-      </v-col>
-
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to Vuetify
-        </h1>
-
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br>please join our online
-          <a
-            href="https://community.vuetifyjs.com"
-            target="_blank"
-          >Discord Community</a>
-        </p>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          What's next?
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Important Links
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Ecosystem
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-row>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-  export default {
-    name: 'HelloWorld',
-
-    data: () => ({
-      ecosystem: [
-        {
-          text: 'vuetify-loader',
-          href: 'https://github.com/vuetifyjs/vuetify-loader',
-        },
-        {
-          text: 'github',
-          href: 'https://github.com/vuetifyjs/vuetify',
-        },
-        {
-          text: 'awesome-vuetify',
-          href: 'https://github.com/vuetifyjs/awesome-vuetify',
-        },
-      ],
-      importantLinks: [
-        {
-          text: 'Documentation',
-          href: 'https://vuetifyjs.com',
-        },
-        {
-          text: 'Chat',
-          href: 'https://community.vuetifyjs.com',
-        },
-        {
-          text: 'Made with Vuetify',
-          href: 'https://madewithvuejs.com/vuetify',
-        },
-        {
-          text: 'Twitter',
-          href: 'https://twitter.com/vuetifyjs',
-        },
-        {
-          text: 'Articles',
-          href: 'https://medium.com/vuetify',
-        },
-      ],
-      whatsNext: [
-        {
-          text: 'Explore components',
-          href: 'https://vuetifyjs.com/components/api-explorer',
-        },
-        {
-          text: 'Select a layout',
-          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
-        },
-        {
-          text: 'Frequently Asked Questions',
-          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
-        },
-      ],
-    }),
-  }
-</script>

src/components/list.vue

@@ -1,26 +1,40 @@
 <template>
   <div class="List">
-    <v-data-table
+    <v-data-table :headers="headers" :items="itemlist" :items-per-page="20" class="elevation-1">
-    :headers="headers"
-    :items="itemlist"
-    :items-per-page="20"
-    class="elevation-1">
       <template v-slot:item.actions="{ item }">
-      <v-icon
+        <v-icon small class="mr-2" @click="editItem(item)">
-        small
-        class="mr-2"
-        @click="editItem(item)"
-      >
           mdi-pencil
         </v-icon>
-      <v-icon
+        <v-icon small @click="deleteItem(item)">
-        small
-        @click="deleteItem(item)"
-      >
           mdi-delete
         </v-icon>
       </template>
     </v-data-table>
+    <v-dialog v-model="dialog" max-width="500px">
+      <v-card>
+        <v-card-title>
+          <span class="headline">{{ formTitle }}</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            Edit Entry
+            <v-row v-for="item in headers" :key="item">
+              <template v-if="item.editable">
+                <v-col cols="16" sm="8" md="6">
+                  <v-checkbox v-if="typeof editedItem[item.value] == 'boolean'" v-model="editedItem[item.value]" v-bind:label="item.text"></v-checkbox>
+                  <v-text-field v-if="typeof editedItem[item.value] == 'string'" v-model="editedItem[item.value]" v-bind:label="item.text"></v-text-field>
+                </v-col>
+              </template>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
+          <v-btn color="blue darken-1" text @click="save">Save</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -39,18 +53,38 @@ export default {
       }
     },
     methods: {
+      createItem(item) {
+        return item;
+      },
       editItem(item) {
-        this.editedIndex = this.itemlist.indexOf(item)
+        this.editedIndex = this.itemlist.indexOf(item);
-        this.editedItem = Object.assign({}, item)
+        this.editedItem = Object.assign({}, item);
-        this.dialog = true
+        this.dialog = true;
       },
-
       deleteItem(item) {
-        const index = this.itemlist.indexOf(item)
+        const index = this.itemlist.indexOf(item);
-        confirm('Are you sure you want to delete this item?') && this.itemlist.splice(index, 1)
+        // Assuming that first elem of item is the primary key
-      }
+        confirm('Are you sure you want to delete this item?') && this.object.DeleteItem(item[Object.keys(item)[0]]).then(() => {
+          this.itemlist.splice(index, 1);
+        });
       },
-  props: ["vmailapi", "headers", "itemlist"]
+      close() {
+        this.dialog = false
+        this.$nextTick(() => {
+          this.editedItem = Object.assign({}, this.defaultItem)
+          this.editedIndex = -1
+        })
+      },
+      save() {
+        if (this.editedIndex > -1) {
+          Object.assign(this.desserts[this.editedIndex], this.editedItem)
+        } else {
+          this.desserts.push(this.editedItem)
+        }
+        this.close()
+      },
+    },
+    props: ["headers", "itemlist", "object"]
   }
 </script>
 
@@ -59,14 +93,17 @@ export default {
   h3 {
     margin: 40px 0 0;
   }
+
   ul {
     list-style-type: none;
     padding: 0;
   }
+
   li {
     display: inline-block;
     margin: 0 10px;
   }
+
   a {
     color: #42b983;
   }

src/components/menu.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="text-center">
-    <v-menu offset-y>
+    <v-menu offset-y
+    >
       <template v-slot:activator="{ on, attrs }">
         <v-btn
           color="primary"
@@ -8,13 +9,14 @@
           v-bind="attrs"
           v-on="on"
         >
-          Menu
+          Create
         </v-btn>
       </template>
       <v-list>
         <v-list-item
           v-for="(item, index) in items"
           :key="index"
+          @click="test"
         >
           <v-list-item-title>{{ item.title }}</v-list-item-title>
         </v-list-item>
@@ -29,11 +31,10 @@ export default {
   name: 'Menu',
   data: () => ({
       items: [
-        { title: 'Click Me' },
+        { title: 'Alias' },
-        { title: 'Click Me' },
+        { title: 'Mailbox' },
-        { title: 'Click Me' },
+        { title: 'Domain' },
-        { title: 'Click Me 2' },
+      ]
-      ],
+    })
-    }),
 }
 </script>

src/main.js

@@ -1,11 +1,21 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
+import routes from './router'
-import vuetify from './plugins/vuetify';
+import VueRouter from 'vue-router';
+import Vuetify from 'vuetify/lib';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 Vue.config.silent = true;
 
+Vue.use(VueRouter);
+Vue.use(Vuetify);
+
+const router = new VueRouter({
+  routes
+})
+
+const vuetify = new Vuetify();
+
 new Vue({
   router,
   vuetify,

src/plugins/vuetify.js

@@ -1,7 +0,0 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify/lib';
-
-Vue.use(Vuetify);
-
-export default new Vuetify({
-});

src/router/index.js

@@ -1,48 +1,30 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import Admin from '../views/Admin.vue'
 import Mailbox from '../views/Mailbox.vue'
 import Alias from '../views/Alias.vue'
 import Log from '../views/Log.vue'
 
-Vue.use(VueRouter)
-
 const routes = [
   {
     path: '/',
-      name: 'Home',
     component: Home,
-      props: true
   },
   {
     path: '/admin',
-      name: 'Admin',
     component: Admin,
-      props: true
   },
   {
     path: '/alias',
-      name: 'Alias',
     component: Alias,
-      props: true
   },
   {
     path: '/mailbox',
-      name: 'Mailbox',
     component: Mailbox,
-      props: true
   },
   {
     path: '/log',
-      name: 'Log',
     component: Log,
-      props: true
   }
 ]
 
-const router = new VueRouter({
+export default routes
-  routes
-})
-
-export default router

src/views/Admin.vue

@@ -13,13 +13,13 @@ export default {
   data() {
     return {
       attrs : [
-        {text: "Username",    value:"username"},
+        {text: "Username",    value:"username",   sortable: true,   editable: true},
-        {text: "Created",     value:"created"},
+        {text: "Created",     value:"created",    sortable: true,   editable: true},
-        {text: "Modified",    value:"modified"},
+        {text: "Modified",    value:"modified",   sortable: true,   editable: true},
-        {text: "Active",      value:"active"},
+        {text: "Active",      value:"active",     sortable: true,   editable: true},
-        {text: "Superadmin",  value:"superadmin"},
+        {text: "Superadmin",  value:"superadmin", sortable: true,   editable: true},
-        {text: "Phone",       value:"phone"},
+        {text: "Phone",       value:"phone",      sortable: true,   editable: true},
-        {text: "Actions",     value:"actions", sortable: false},
+        {text: "Actions",     value:"actions",    sortable: false,  editable: false},
       ],
       itemlist: [],
       item: {}
@@ -34,6 +34,14 @@ export default {
     admin.GetList().then(response => {
       this.itemlist = response.data;
     })
+  },
+  methods: {
+    DeleteItem (name) {
+      this.admin = new Admin(this.vmailapi.GetUrl());
+      this.admin.DeleteItem(name).then(response => {
+        return response;
+      });
+    }
   }
 }
 </script>

src/views/Alias.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="alias">
-    <List :vmailapi="vmailapi" :headers="attrs" :itemlist="itemlist"/>
+    <List :vmailapi="vmailapi" :headers="attrs" :itemlist="itemlist" :object="alias"/>
   </div>
 </template>
 
@@ -13,13 +13,13 @@ export default {
   data() {
     return {
       attrs : [
-        {text: "Address",     value:"address"},
+        {text: "Address",     value:"address",    sortable: true,   editable: true},
-        {text: "Destination", value:"goto"},
+        {text: "Destination", value:"goto",       sortable: true,   editable: true},
-        {text: "Domain",      value:"domain"},
+        {text: "Domain",      value:"domain",     sortable: true,   editable: true},
-        {text: "Created",     value:"created"},
+        {text: "Created",     value:"created",    sortable: true,   editable: true},
-        {text: "Modified",    value:"modified"},
+        {text: "Modified",    value:"modified",   sortable: true,   editable: true},
-        {text: "Active",      value:"active"},
+        {text: "Active",      value:"active",     sortable: true,   editable: true},
-        {text: "Actions",     value:"actions", sortable: false},
+        {text: "Actions",     value:"actions",    sortable: false,  editable: false},
       ],
       itemlist: [],
       item: {}
@@ -30,10 +30,18 @@ export default {
   },
   props: ["vmailapi"],
   mounted () {
-    let alias = new Alias(this.vmailapi.GetUrl())
+    this.alias = new Alias(this.vmailapi.GetUrl())
-    alias.GetList().then(response => {
+    this.alias.GetList().then(response => {
       this.itemlist = response.data;
     })
+  },
+  methods: {
+    DeleteItem (name) {
+      this.alias = new Alias(this.vmailapi.GetUrl());
+      this.alias.DeleteItem(name).then(response => {
+        return response;
+      });
+    }
   }
 }
 </script>

src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="Home">
     <h1>Vmail Application</h1>
+    Here is Vmail app, which provides administration of ressources relative to dovecot and postfix
   </div>
 </template>
 

src/views/Mailbox.vue

@@ -13,17 +13,17 @@ export default {
   data() {
     return {
       attrs : [
-        {text: "Username",    value:"username"},
+        {text: "Username",    value:"username",   sortable: true,   editable: true},
-        {text: "Name",        value:"name"},
+        {text: "Name",        value:"name",       sortable: true,   editable: true},
-        {text: "Maildir",     value:"maildir"},
+        {text: "Maildir",     value:"maildir",    sortable: true,   editable: true},
-        {text: "Quota",       value:"quota"},
+        {text: "Quota",       value:"quota",      sortable: true,   editable: true},
-        {text: "Created",     value:"created"},
+        {text: "Created",     value:"created",    sortable: true,   editable: true},
-        {text: "Modified",    value:"modified"},
+        {text: "Modified",    value:"modified",   sortable: true,   editable: true},
-        {text: "Active",      value:"active"},
+        {text: "Active",      value:"active",     sortable: true,   editable: true},
-        {text: "Domain",      value:"domain"},
+        {text: "Domain",      value:"domain",     sortable: true,   editable: true},
-        {text: "LocalPart",   value:"localpart"},
+        {text: "LocalPart",   value:"localpart",  sortable: true,   editable: true},
-        {text: "Phone",       value:"phone"},
+        {text: "Phone",       value:"phone",      sortable: true,   editable: true},
-        {text: "Actions",     value:"actions", sortable: false},
+        {text: "Actions",     value:"actions",    sortable: false,  editable: false},
       ],
       itemlist: [],
       item: {}
@@ -38,6 +38,14 @@ export default {
     mailbox.GetList().then(response => {
       this.itemlist = response.data;
     })
+  },
+  methods: {
+    DeleteItem (name) {
+      this.mailbox = new Mailbox(this.vmailapi.GetUrl());
+      this.mailbox.DeleteItem(name).then(response => {
+        return response;
+      });
+    }
   }
 }
 </script>