From 1962bd844321e2a963d7c41d275529e8572c0cb5 Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Fri, 12 Mar 2021 16:55:55 +0100
Subject: [PATCH] Better domain detail view.

---
 .../components/domains/AdministratorList.vue  |  14 +-
 frontend/src/components/domains/DNSDetail.vue |  44 ++--
 .../src/components/domains/DNSStatusChip.vue  |   4 +-
 .../components/domains/DomainDNSSummary.vue   |  64 -----
 .../src/components/domains/DomainForm.vue     | 246 ++++++++----------
 .../src/components/domains/DomainList.vue     |  15 +-
 frontend/src/router/index.js                  |   8 +
 frontend/src/views/Domain.vue                 |  24 +-
 frontend/src/views/DomainEdit.vue             |  28 ++
 9 files changed, 202 insertions(+), 245 deletions(-)
 delete mode 100644 frontend/src/components/domains/DomainDNSSummary.vue
 create mode 100644 frontend/src/views/DomainEdit.vue

diff --git a/frontend/src/components/domains/AdministratorList.vue b/frontend/src/components/domains/AdministratorList.vue
index 3a0cf4234..70b233f8d 100644
--- a/frontend/src/components/domains/AdministratorList.vue
+++ b/frontend/src/components/domains/AdministratorList.vue
@@ -2,8 +2,8 @@
 <v-card>
   <v-card-title>
     <span class="headline">
-      <translate class="headline">Administrators of </translate>
-      {{ domain.name }}
+      <translate v-if="dialogMode" class="headline">Administrators of {{ domain.name }}</translate>
+      <translate v-else class="headline">Administrators</translate>
     </span>
   </v-card-title>
   <v-card-text>
@@ -52,7 +52,7 @@
       <v-icon small>mdi-plus</v-icon> <translate>Add administrator</translate>
     </v-btn>
   </v-card-text>
-  <v-card-actions>
+  <v-card-actions v-if="dialogMode">
     <v-spacer></v-spacer>
     <v-btn
       color="grey darken-1"
@@ -71,7 +71,13 @@ import domains from '@/api/domains'
 import { bus } from '@/main'
 
 export default {
-  props: ['domain'],
+  props: {
+    domain: Object,
+    dialogMode: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       accounts: [],
diff --git a/frontend/src/components/domains/DNSDetail.vue b/frontend/src/components/domains/DNSDetail.vue
index 537bef85c..85726d681 100644
--- a/frontend/src/components/domains/DNSDetail.vue
+++ b/frontend/src/components/domains/DNSDetail.vue
@@ -1,7 +1,10 @@
 <template>
 <v-card>
   <v-card-title>
-    <translate class="headline">DNS configuration overview for {{ domain.name }}</translate>
+    <span class="headline">DNS</span>
+    <v-btn icon :title="'DNS configuration help'|translate" @click="showConfigHelp = true">
+      <v-icon>mdi-information-outline</v-icon>
+    </v-btn>
   </v-card-title>
   <v-card-text>
     <translate class="overline">MX records</translate>
@@ -90,25 +93,37 @@
         </v-chip>
       </v-col>
     </v-row>
+    <v-row>
+      <v-col cols="6"><translate>DKIM key</translate></v-col>
+      <v-col cols="6">
+        <div v-if="domain.dkim_public_key">
+          <v-btn color="primary" small>
+            <translate>Show key</translate>
+          </v-btn>
+          <v-btn icon><v-icon>mdi-refresh</v-icon></v-btn>
+        </div>
+        <translate v-else>Not generated</translate>
+      </v-col>
+    </v-row>
   </v-card-text>
-  <v-card-actions>
-    <v-spacer></v-spacer>
-    <v-btn
-      color="grey darken-1"
-      text
-      @click="close"
-      >
-      <translate>Close</translate>
-    </v-btn>
-  </v-card-actions>
+  <v-dialog v-model="showConfigHelp"
+            max-width="800px"
+            persistent
+            >
+    <domain-dns-config :domain="domain" @close="showConfigHelp = false" />
+  </v-dialog>
 </v-card>
 </template>
 
 <script>
 import domains from '@/api/domains'
+import DomainDNSConfig from './DomainDNSConfig'
 
 export default {
   props: ['domain'],
+  components: {
+    'domain-dns-config': DomainDNSConfig
+  },
   data () {
     return {
       detail: {},
@@ -116,14 +131,11 @@ export default {
         { text: this.$gettext('Name'), value: 'name' },
         { text: this.$gettext('Address'), value: 'address' },
         { text: this.$gettext('Updated'), value: 'updated' }
-      ]
+      ],
+      showConfigHelp: false
     }
   },
   methods: {
-    close () {
-      this.$emit('close')
-      this.detail = {}
-    }
   },
   watch: {
     domain: {
diff --git a/frontend/src/components/domains/DNSStatusChip.vue b/frontend/src/components/domains/DNSStatusChip.vue
index 42b0b50ea..ee8879dcf 100644
--- a/frontend/src/components/domains/DNSStatusChip.vue
+++ b/frontend/src/components/domains/DNSStatusChip.vue
@@ -1,7 +1,5 @@
 <template>
-<v-chip :color="chipType"
-        @click="$emit('click', $event)"
-        small>
+<v-chip :color="chipType" small>
   {{ label }}
 </v-chip>
 </template>
diff --git a/frontend/src/components/domains/DomainDNSSummary.vue b/frontend/src/components/domains/DomainDNSSummary.vue
deleted file mode 100644
index 2786d8cf7..000000000
--- a/frontend/src/components/domains/DomainDNSSummary.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-<v-card>
-  <v-card-title>
-    <span class="headline">DNS</span>
-    <v-btn icon :title="'DNS configuration help'|translate" @click="showConfigHelp = true">
-      <v-icon>mdi-information-outline</v-icon>
-    </v-btn>
-  </v-card-title>
-
-  <v-card-text>
-    <v-row>
-      <v-col cols="6"><translate>Status</translate></v-col>
-      <v-col cols="6">
-        <dns-status-chip :status="domain.dns_global_status" @click="showDetail = true" />
-      </v-col>
-    </v-row>
-    <v-row>
-      <v-col cols="6"><translate>DKIM key</translate></v-col>
-      <v-col cols="6">
-        <div v-if="domain.dkim_public_key">
-          <v-btn color="primary" small>
-            <translate>Show key</translate>
-          </v-btn>
-          <v-btn icon><v-icon>mdi-refresh</v-icon></v-btn>
-        </div>
-        <translate v-else>Not generated</translate>
-      </v-col>
-    </v-row>
-  </v-card-text>
-
-  <v-dialog v-model="showConfigHelp"
-            max-width="800px"
-            persistent
-            >
-    <domain-dns-config :domain="domain" @close="showConfigHelp = false" />
-  </v-dialog>
-  <v-dialog v-model="showDetail"
-            persistent
-            max-width="800px">
-    <dns-detail @close="showDetail = false" :domain="domain" />
-  </v-dialog>
-</v-card>
-</template>
-
-<script>
-import DomainDNSConfig from './DomainDNSConfig'
-import DNSDetail from './DNSDetail'
-import DNSStatusChip from './DNSStatusChip'
-
-export default {
-  components: {
-    'dns-detail': DNSDetail,
-    'dns-status-chip': DNSStatusChip,
-    'domain-dns-config': DomainDNSConfig
-  },
-  props: ['domain'],
-  data () {
-    return {
-      showConfigHelp: false,
-      showDetail: false
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/domains/DomainForm.vue b/frontend/src/components/domains/DomainForm.vue
index 8e2c7653a..91d59b351 100644
--- a/frontend/src/components/domains/DomainForm.vue
+++ b/frontend/src/components/domains/DomainForm.vue
@@ -1,129 +1,119 @@
 <template>
-  <v-layout>
-    <v-flex>
-      <v-card>
-        <v-card-title>
-          <h1 class="headline"><translate>Edit domain</translate></h1>
-        </v-card-title>
-        <v-card-text>
-          <v-expansion-panels v-model="panel">
-            <v-expansion-panel>
-              <v-expansion-panel-header v-slot="{ open }">
-                <v-row no-gutters>
-                  <v-col cols="4">
-                    <translate>General</translate>
-                  </v-col>
-                  <v-col
-                    cols="8"
-                    class="text--secondary"
-                    >
-                    <v-fade-transition leave-absolute>
-                      <span v-if="open"></span>
-                      <v-row
-                        v-else
-                        no-gutters
-                        style="width: 100%"
-                        >
-                        <v-col cols="6">
-                          <translate>Name: </translate> {{ editedDomain.name }}
-                        </v-col>
-                        <v-col cols="6">
-                          <translate>Type: </translate> {{ editedDomain.type }}
-                        </v-col>
-                      </v-row>
-                    </v-fade-transition>
-                  </v-col>
-                </v-row>
-              </v-expansion-panel-header>
-              <v-expansion-panel-content>
-                <domain-general-form ref="generalForm" :domain="editedDomain" />
-              </v-expansion-panel-content>
-            </v-expansion-panel>
-            <v-expansion-panel>
-              <v-expansion-panel-header v-slot="{ open }">
-                <v-row no-gutters>
-                  <v-col cols="4">
-                    <translate>DNS</translate>
-                  </v-col>
-                  <v-col
-                    cols="8"
-                    class="text--secondary"
-                    >
-                    <v-fade-transition leave-absolute>
-                      <span v-if="open"></span>
-                      <v-row
-                        v-else
-                        no-gutters
-                        style="width: 100%"
-                        >
-                        <v-col cols="6">
-                          <translate class="mr-2">DNS checks</translate>
-                          <v-icon color="success" v-if="editedDomain.enable_dns_checks">mdi-check-circle-outline</v-icon>
-                          <v-icon v-else>mdi-close-circle-outline</v-icon>
-                        </v-col>
-                        <v-col cols="6">
-                          <translate class="mr-2">DKIM signing</translate>
-                          <v-icon color="success" v-if="editedDomain.enable_dkim">mdi-check-circle-outline</v-icon>
-                          <v-icon v-else>mdi-close-circle-outline</v-icon>
-                        </v-col>
-                      </v-row>
-                    </v-fade-transition>
-                  </v-col>
-                </v-row>
-              </v-expansion-panel-header>
-              <v-expansion-panel-content>
-                <domain-dns-form ref="dnsForm" :domain="editedDomain" />
-              </v-expansion-panel-content>
-            </v-expansion-panel>
-            <v-expansion-panel>
-              <v-expansion-panel-header v-slot="{ open }">
-                <v-row no-gutters>
-                  <v-col cols="4">
-                    <translate>Limitations</translate>
-                  </v-col>
-                  <v-col
-                    cols="8"
-                    class="text--secondary"
-                    >
-                    <v-fade-transition leave-absolute>
-                      <span v-if="open"></span>
-                      <v-row
-                        v-else
-                        no-gutters
-                        style="width: 100%"
-                        >
-                        <v-col cols="6">
-                          <translate class="mr-2">Quota: </translate> {{ domain.quota }}
-                        </v-col>
-                        <v-col cols="6" v-if="domain.message_sending_limit">
-                          <translate class="mr-2">Sending limit: </translate> {{ domain.message_sending_limit }}
-                        </v-col>
-                        <v-col cols="6" v-else>
-                          <translate class="mr-2">No sending limit</translate>
-                        </v-col>
-                      </v-row>
-                    </v-fade-transition>
-                  </v-col>
-                </v-row>
-              </v-expansion-panel-header>
-              <v-expansion-panel-content>
-                <domain-limitations-form :domain="editedDomain" />
-              </v-expansion-panel-content>
-            </v-expansion-panel>
-          </v-expansion-panels>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="grey darken-1" text @click="close">
-            <translate>Cancel</translate>
-          </v-btn>
-          <v-btn color="primary darken-1" text @click="save">
-            <translate>Save</translate>
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-flex>
-  </v-layout>
+<div>
+  <v-expansion-panels v-model="panel">
+    <v-expansion-panel>
+      <v-expansion-panel-header v-slot="{ open }">
+        <v-row no-gutters>
+          <v-col cols="4">
+            <translate>General</translate>
+          </v-col>
+          <v-col
+            cols="8"
+            class="text--secondary"
+            >
+            <v-fade-transition leave-absolute>
+              <span v-if="open"></span>
+              <v-row
+                v-else
+                no-gutters
+                style="width: 100%"
+                >
+                <v-col cols="6">
+                  <translate>Name: </translate> {{ editedDomain.name }}
+                </v-col>
+                <v-col cols="6">
+                  <translate>Type: </translate> {{ editedDomain.type }}
+                </v-col>
+              </v-row>
+            </v-fade-transition>
+          </v-col>
+        </v-row>
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <domain-general-form ref="generalForm" :domain="editedDomain" />
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+    <v-expansion-panel>
+      <v-expansion-panel-header v-slot="{ open }">
+        <v-row no-gutters>
+          <v-col cols="4">
+            <translate>DNS</translate>
+          </v-col>
+          <v-col
+            cols="8"
+            class="text--secondary"
+            >
+            <v-fade-transition leave-absolute>
+              <span v-if="open"></span>
+              <v-row
+                v-else
+                no-gutters
+                style="width: 100%"
+                >
+                <v-col cols="6">
+                  <translate class="mr-2">DNS checks</translate>
+                  <v-icon color="success" v-if="editedDomain.enable_dns_checks">mdi-check-circle-outline</v-icon>
+                  <v-icon v-else>mdi-close-circle-outline</v-icon>
+                </v-col>
+                <v-col cols="6">
+                  <translate class="mr-2">DKIM signing</translate>
+                  <v-icon color="success" v-if="editedDomain.enable_dkim">mdi-check-circle-outline</v-icon>
+                  <v-icon v-else>mdi-close-circle-outline</v-icon>
+                </v-col>
+              </v-row>
+            </v-fade-transition>
+          </v-col>
+        </v-row>
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <domain-dns-form ref="dnsForm" :domain="editedDomain" />
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+    <v-expansion-panel>
+      <v-expansion-panel-header v-slot="{ open }">
+        <v-row no-gutters>
+          <v-col cols="4">
+            <translate>Limitations</translate>
+          </v-col>
+          <v-col
+            cols="8"
+            class="text--secondary"
+            >
+            <v-fade-transition leave-absolute>
+              <span v-if="open"></span>
+              <v-row
+                v-else
+                no-gutters
+                style="width: 100%"
+                >
+                <v-col cols="6">
+                  <translate class="mr-2">Quota: </translate> {{ domain.quota }}
+                </v-col>
+                <v-col cols="6" v-if="domain.message_sending_limit">
+                  <translate class="mr-2">Sending limit: </translate> {{ domain.message_sending_limit }}
+                </v-col>
+                <v-col cols="6" v-else>
+                  <translate class="mr-2">No sending limit</translate>
+                </v-col>
+              </v-row>
+            </v-fade-transition>
+          </v-col>
+        </v-row>
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <domain-limitations-form :domain="editedDomain" />
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
+  <div class="mt-4 d-flex justify-end">
+    <v-btn color="grey lighten-1" @click="$router.go(-1)">
+      <translate>Cancel</translate>
+    </v-btn>
+    <v-btn class="ml-4" color="primary darken-1" @click="save">
+      <translate>Save</translate>
+    </v-btn>
+  </div>
+</div>
 </template>
 
 <script>
@@ -146,11 +136,6 @@ export default {
     }
   },
   methods: {
-    close () {
-      this.$emit('close')
-      this.editedDomain = {}
-      this.panel = 0
-    },
     async save () {
       if (this.$refs.generalForm !== undefined) {
         const valid = await this.$refs.generalForm.$refs.observer.validate()
@@ -159,7 +144,6 @@ export default {
         }
       }
       this.$store.dispatch('domains/updateDomain', this.editedDomain).then(resp => {
-        this.close()
         bus.$emit('notification', { msg: this.$gettext('Domain updated') })
       })
     }
diff --git a/frontend/src/components/domains/DomainList.vue b/frontend/src/components/domains/DomainList.vue
index abd6f2f71..5104b9d48 100644
--- a/frontend/src/components/domains/DomainList.vue
+++ b/frontend/src/components/domains/DomainList.vue
@@ -55,7 +55,7 @@
           </v-btn>
         </td>
         <td>
-          <dns-status-chip :status="item.dns_global_status" @click="openDNSDetail(item)" />
+          <dns-status-chip :status="item.dns_global_status" />
         </td>
         <td>
           <v-progress-linear v-model="item.allocated_quota_in_percent" />
@@ -102,12 +102,6 @@
             max-width="800px">
     <dns-detail @close="showDNSdetail = false" :domain="selectedDomain" />
   </v-dialog>
-  <v-dialog v-model="showDomainForm"
-            persistent
-            max-width="800px"
-            >
-    <domain-form :domain="selectedDomain" @close="showDomainForm = false" />
-  </v-dialog>
   <v-dialog v-model="showAliasForm"
             persistent
             max-width="800px">
@@ -124,6 +118,7 @@
     <administrator-list
       :domain="selectedDomain"
       @close="showAdminList = false"
+      dialog-mode
       />
   </v-dialog>
 </v-card>
@@ -138,7 +133,6 @@ import ConfirmDialog from '@/components/layout/ConfirmDialog'
 import DNSDetail from '@/components/domains/DNSDetail'
 import DNSStatusChip from './DNSStatusChip'
 import DomainAliasForm from '@/components/domains/DomainAliasForm'
-import DomainForm from '@/components/domains/DomainForm'
 import MenuItems from '@/components/tools/MenuItems'
 
 export default {
@@ -148,7 +142,6 @@ export default {
     'dns-detail': DNSDetail,
     'dns-status-chip': DNSStatusChip,
     DomainAliasForm,
-    DomainForm,
     MenuItems
   },
   computed: mapGetters({
@@ -176,7 +169,6 @@ export default {
       showConfirmDialog: false,
       showAliasForm: false,
       showDNSdetail: false,
-      showDomainForm: false,
       search: '',
       selected: [],
       expanded: [],
@@ -219,8 +211,7 @@ export default {
       this.closeDomainAliasForm()
     },
     editDomain (domain) {
-      this.selectedDomain = domain
-      this.showDomainForm = true
+      this.$router.push({ name: 'DomainEdit', params: { id: domain.pk } })
     },
     editDomainAlias (domain, alias) {
       this.selectedDomain = domain
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index e802aa136..93ab5b3e3 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -33,6 +33,14 @@ const routes = [
       requiresAuth: true
     }
   },
+  {
+    path: '/domains/:id/edit',
+    name: 'DomainEdit',
+    component: () => import('../views/DomainEdit.vue'),
+    meta: {
+      requiresAuth: true
+    }
+  },
   {
     path: '/parameters/:app',
     name: 'ParametersEdit',
diff --git a/frontend/src/views/Domain.vue b/frontend/src/views/Domain.vue
index 09e9f5260..775057f4d 100644
--- a/frontend/src/views/Domain.vue
+++ b/frontend/src/views/Domain.vue
@@ -2,18 +2,21 @@
 <div>
   <v-toolbar flat>
     <v-toolbar-title><translate>Domain</translate> {{ domain.name }}</v-toolbar-title>
-    <v-btn color="primary" icon @click="showEditForm = true"><v-icon>mdi-circle-edit-outline</v-icon></v-btn>
-    <v-btn icon @click="showAdminList = true" :title="'Show administrator list'|translate">
-      <v-icon>mdi-account-supervisor</v-icon>
+    <v-btn color="primary" icon :to="{ name: 'DomainEdit', params: { id: domain.pk } }">
+      <v-icon>mdi-circle-edit-outline</v-icon>
     </v-btn>
   </v-toolbar>
   <v-layout>
     <v-row>
       <v-col cols="6">
         <domain-summary :domain="domain" />
+        <div class="mt-4" />
+        <administrator-list
+          :domain="domain"
+          />
       </v-col>
       <v-col cols="6">
-        <domain-dns-summary :domain="domain" />
+        <dns-detail :domain="domain" />
       </v-col>
     </v-row>
   </v-layout>
@@ -33,31 +36,22 @@
             >
     <domain-form :domain="domain" @close="showEditForm = false" />
   </v-dialog>
-  <v-dialog v-model="showAdminList"
-            persistent
-            max-width="800px"
-            >
-    <administrator-list
-      :domain="domain"
-      @close="showAdminList = false"
-      />
-  </v-dialog>
 </div>
 </template>
 
 <script>
 import domains from '@/api/domains'
 import AdministratorList from '@/components/domains/AdministratorList'
+import DNSDetail from '@/components/domains/DNSDetail'
 import DomainForm from '@/components/domains/DomainForm'
-import DomainDNSSummary from '@/components/domains/DomainDNSSummary'
 import DomainSummary from '@/components/domains/DomainSummary'
 import TimeSerieChart from '@/components/tools/TimeSerieChart'
 
 export default {
   components: {
     AdministratorList,
+    'dns-detail': DNSDetail,
     DomainForm,
-    'domain-dns-summary': DomainDNSSummary,
     DomainSummary,
     TimeSerieChart
   },
diff --git a/frontend/src/views/DomainEdit.vue b/frontend/src/views/DomainEdit.vue
new file mode 100644
index 000000000..537e0d34a
--- /dev/null
+++ b/frontend/src/views/DomainEdit.vue
@@ -0,0 +1,28 @@
+<template>
+<div>
+  <span class="text-h4"><translate>Edit domain</translate></span>
+  <div class="mt-4" />
+  <domain-form :domain="domain" />
+</div>
+</template>
+
+<script>
+import domains from '@/api/domains'
+import DomainForm from '@/components/domains/DomainForm'
+
+export default {
+  components: {
+    DomainForm
+  },
+  data () {
+    return {
+      domain: {}
+    }
+  },
+  mounted () {
+    domains.getDomain(this.$route.params.id).then(resp => {
+      this.domain = resp.data
+    })
+  }
+}
+</script>