From 1f37d93e8b4d5b8b13485f85cb7bf077f753c29e Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Wed, 20 Jan 2021 11:05:05 +0100
Subject: [PATCH] Updated domain aliases display.

---
 frontend/public/index.html                    |   2 +-
 .../src/components/domains/DomainList.vue     | 117 +++++++++++++-----
 frontend/src/components/layout/Navbar.vue     |   5 +-
 frontend/src/styles/variables.scss            |   2 +
 frontend/src/views/Domains.vue                |  31 +++--
 5 files changed, 107 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/styles/variables.scss

diff --git a/frontend/public/index.html b/frontend/public/index.html
index bc5146586..ca149dba4 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
diff --git a/frontend/src/components/domains/DomainList.vue b/frontend/src/components/domains/DomainList.vue
index a23d04c41..2e83c0c49 100644
--- a/frontend/src/components/domains/DomainList.vue
+++ b/frontend/src/components/domains/DomainList.vue
@@ -1,32 +1,40 @@
 <template>
-  <div>
+  <div class="mt-6">
     <v-toolbar flat color="white">
+      <v-spacer></v-spacer>
+      <v-spacer></v-spacer>
       <v-text-field
         v-model="search"
-        append-icon="mdi-magnify"
-        label="Search"
-        single-line
-        hide-details
+        prepend-inner-icon="mdi-magnify"
+        placeholder="Search"
+        filled
+        outlined
+        dense
         ></v-text-field>
-      <v-spacer></v-spacer>
-      <v-btn class="mr-2" fab small>
-        <v-icon>mdi-file-import-outline</v-icon>
-      </v-btn>
-      <v-btn class="mr-2" fab small>
-        <v-icon>mdi-file-export-outline</v-icon>
-      </v-btn>
-      <v-btn fab small color="secondary" :to="{ name: 'DomainAdd' }">
-        <v-icon>mdi-plus</v-icon>
-      </v-btn>
     </v-toolbar>
-    <v-data-table :headers="headers" :items="domains" :search="search" class="elevation-1">
+    <v-data-table v-model="selected"
+                  :headers="headers"
+                  :items="domains"
+                  :search="search"
+                  item-key="name"
+                  class="elevation-1"
+                  show-select
+                  single-expand
+                  show-expand
+                  :expanded.sync="expanded"
+                  @item-expanded="loadAliases"
+                  @click:row="showAliases"
+                  >
+      <template v-slot:item.select="{ }">
+        <v-checkbox />
+      </template>
       <template v-slot:item.name="{ item }">
         <router-link :to="{ name: 'DomainDetail', params: { pk: item.pk } }">
           {{ item.name }}
         </router-link>
       </template>
-      <template v-slot:item.tags="{ }">
-        <v-chip label x-small><translate>Domain</translate></v-chip>
+      <template v-slot:item.domainalias_count="{ item }">
+        {{ item.domainalias_count }} aliases
       </template>
       <template v-slot:item.dns_status="{ item }">
         <v-chip v-if="item.dns_status.checks === 'disabled'"
@@ -51,23 +59,48 @@
           </v-chip>
         </span>
       </template>
+      <template v-slot:item.message_limit="{ item }">
+        <v-progress-linear v-model="item.allocated_quota_in_percent" />
+      </template>
       <template v-slot:item.allocated_quota_in_percent="{ item }">
         <v-progress-linear v-model="item.allocated_quota_in_percent" />
       </template>
       <template v-slot:item.actions="{ item }">
         <div class="text-right">
-          <v-btn icon x-small :to="{ name: 'DomainEdit', params: { domainPk: item.pk }}">
-            <v-icon>mdi-circle-edit-outline</v-icon>
-          </v-btn>
-          <v-btn
-            icon
-            x-small
-            :title="'Delete this domain' | translate"
-            @click="confirmDelete(item)">
-            <v-icon>mdi-delete-outline</v-icon>
-          </v-btn>
+          <v-menu offset-y>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn icon v-bind="attrs" v-on="on">
+                <v-icon>mdi-dots-horizontal</v-icon>
+              </v-btn>
+            </template>
+            <v-list dense>
+              <v-list-item :to="{ name: 'DomainEdit', params: { domainPk: item.pk }}">
+                <v-list-item-icon>
+                  <v-icon>mdi-circle-edit-outline</v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  <v-list-item-title><translate>Edit</translate></v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item @click="confirmDelete(item)" color="red">
+                <v-list-item-icon>
+                  <v-icon color="red">mdi-delete-outline</v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  <v-list-item-title><translate>Delete</translate></v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-menu>
         </div>
       </template>
+      <template v-slot:expanded-item="{ headers, item }">
+        <td :colspan="headers.length">
+          <span class="mr-4" v-for="alias in aliases[item.name]" :key="alias.name">
+            {{ alias.name }} <v-chip color="success" label x-small>DNS OK</v-chip>
+          </span>
+        </td>
+      </template>
     </v-data-table>
 
   <confirm-dialog v-model="showConfirmDialog"
@@ -91,15 +124,19 @@ export default {
     return {
       headers: [
         { text: 'Name', value: 'name' },
-        { text: 'Tags', value: 'tags' },
+        { text: 'Aliases', value: 'domainalias_count' },
         { text: 'DNS status', value: 'dns_status', sortable: false },
+        { text: 'Sending limit', value: 'message_limit' },
         { text: 'Quota', value: 'allocated_quota_in_percent' },
-        { text: this.$gettext('Actions'), value: 'actions', sortable: false }
+        { text: this.$gettext('Actions'), value: 'actions', sortable: false, align: 'right' }
       ],
       deleteDomainMsg: this.$gettext('Confirm deletion?'),
       selectedDomain: null,
       showConfirmDialog: false,
-      search: ''
+      search: '',
+      selected: [],
+      expanded: [],
+      aliases: {}
     }
   },
   created () {
@@ -121,7 +158,25 @@ export default {
         return 'warning'
       }
       return 'success'
+    },
+    loadAliases ({ item, value }) {
+      if (!value) {
+        return
+      }
+      this.$axios.get(`/domainaliases/?domain=${item.name}`).then(resp => {
+        this.$set(this.aliases, item.name, resp.data)
+      })
+    },
+    showAliases (item) {
+      console.log(item)
+      this.expanded = [{ item }]
     }
   }
 }
 </script>
+
+<style scoped>
+.v-text-field--outlined >>> fieldset {
+  border-color: #BFC5D2;
+}
+</style>
diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue
index 7cef5e51d..ce58c18a6 100644
--- a/frontend/src/components/layout/Navbar.vue
+++ b/frontend/src/components/layout/Navbar.vue
@@ -125,7 +125,7 @@ export default {
           icon: 'mdi-account'
         },
         {
-          icon: 'mdi-magnify',
+          icon: 'mdi-history',
           text: this.$gettext('Logs'),
           to: { name: 'LogList' }
         },
@@ -167,7 +167,8 @@ export default {
 <style lang="scss" scoped>
 .v-list-item {
   &--active {
-    background: rgba(0, 0, 0, 0.30) !important;
+    background: rgba(0, 0, 0, 0.25);
+
   }
 }
 
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
new file mode 100644
index 000000000..36d921938
--- /dev/null
+++ b/frontend/src/styles/variables.scss
@@ -0,0 +1,2 @@
+// Globals
+$body-font-family: 'Rubik', serif;
diff --git a/frontend/src/views/Domains.vue b/frontend/src/views/Domains.vue
index b6c55b7a1..81fe67367 100644
--- a/frontend/src/views/Domains.vue
+++ b/frontend/src/views/Domains.vue
@@ -1,32 +1,31 @@
 <template>
 <div>
-  <v-tabs v-model="tab">
-    <v-tab>Domains</v-tab>
-    <v-tab>Aliases</v-tab>
-  </v-tabs>
-  <v-tabs-items v-model="tab">
-    <v-tab-item>
-      <domain-list />
-    </v-tab-item>
-    <v-tab-item>
-      <domain-alias-list />
-    </v-tab-item>
-  </v-tabs-items>
+  <v-toolbar flat>
+    <v-toolbar-title><translate>Domains</translate></v-toolbar-title>
+    <v-spacer />
+    <v-btn class="mr-2">
+      <v-icon>mdi-file-import-outline</v-icon>
+    </v-btn>
+    <v-btn class="mr-2">
+      <v-icon>mdi-file-export-outline</v-icon>
+    </v-btn>
+    <v-btn color="primary" :to="{ name: 'DomainAdd' }">
+      <v-icon>mdi-plus</v-icon>
+    </v-btn>
+  </v-toolbar>
+  <domain-list />
 </div>
 </template>
 
 <script>
 import DomainList from '@/components/domains/DomainList'
-import DomainAliasList from '@/components/domains/DomainAliasList'
 
 export default {
   components: {
-    DomainList,
-    DomainAliasList
+    DomainList
   },
   data () {
     return {
-      tab: null
     }
   }
 }