Add group property to domain to be able to group them in interface

model/domain.go

@@ -50,6 +50,9 @@ type Domain struct {
 	// DomainName is the FQDN of the managed Domain.
 	DomainName string `json:"domain"`
 
+	// Group is a hint string aims to group domains.
+	Group string `json:"group"`
+
 	// ZoneHistory are the identifiers to the Zone attached to the current
 	// Domain.
 	ZoneHistory []int64 `json:"zone_history"`

ui/src/components/hDomaingroupList.vue

@@ -0,0 +1,93 @@
+<!--
+    Copyright or © or Copr. happyDNS (2021)
+
+    contact@happydns.org
+
+    This software is a computer program whose purpose is to provide a modern
+    interface to interact with DNS systems.
+
+    This software is governed by the CeCILL license under French law and abiding
+    by the rules of distribution of free software.  You can use, modify and/or
+    redistribute the software under the terms of the CeCILL license as
+    circulated by CEA, CNRS and INRIA at the following URL
+    "http://www.cecill.info".
+
+    As a counterpart to the access to the source code and rights to copy, modify
+    and redistribute granted by the license, users are provided only with a
+    limited warranty and the software's author, the holder of the economic
+    rights, and the successive licensors have only limited liability.
+
+    In this respect, the user's attention is drawn to the risks associated with
+    loading, using, modifying and/or developing or reproducing the software by
+    the user in light of its specific status of free software, that may mean
+    that it is complicated to manipulate, and that also therefore means that it
+    is reserved for developers and experienced professionals having in-depth
+    computer knowledge. Users are therefore encouraged to load and test the
+    software's suitability as regards their requirements in conditions enabling
+    the security of their systems and/or data to be ensured and, more generally,
+    to use and operate it in the same conditions as regards security.
+
+    The fact that you are presently reading this means that you have had
+    knowledge of the CeCILL license and that you accept its terms.
+  -->
+
+<template>
+  <h-list
+    button
+    :items="groups"
+    :is-active="(group) => group === selectedGroup"
+    @click="selectGroup"
+  >
+    <template #default="{ item }">
+      <i18n v-if="item === 'undefined'" path="domaingroups.no-group" tag="span" />
+      <span v-else>
+        {{ item }}
+      </span>
+    </template>
+  </h-list>
+</template>
+
+<script>
+export default {
+  name: 'hDomaingroupList',
+
+  components: {
+    hList: () => import('@/components/hList')
+  },
+
+  props: {
+    domains: {
+      type: Array,
+      default: null
+    },
+    selectedGroup: {
+      type: String,
+      default: ''
+    }
+  },
+
+  computed: {
+    groups () {
+      const groups = {}
+
+      this.domains.forEach((domain, index) => {
+        if (groups[domain.group] === undefined) {
+          groups[domain.group] = null
+        }
+      })
+
+      return Object.keys(groups)
+    }
+  },
+
+  methods: {
+    selectGroup (group) {
+      if (this.selectedGroup && this.selectedGroup === group) {
+        this.$emit('group-selected', '')
+      } else {
+        this.$emit('group-selected', group)
+      }
+    }
+  }
+}
+</script>

ui/src/locales/en.json

@@ -114,6 +114,11 @@
         "placeholder-new-sub": "new.subdomain",
         "form-new-subdomain": "Add a new subdomain under {0}:"
     },
+    "domaingroups": {
+        "manage": "Manage your domain's groups",
+        "no-group": "Ungroupped",
+        "title": "Your groups"
+    },
     "email": {
         "address": "Email address",
         "instruction": {

ui/src/views/home.vue

@@ -112,6 +112,31 @@
             @provider-selected="filteredProvider = $event"
           />
         </b-card>
+
+        <b-card
+          v-if="$refs.zlist && !$refs.zlist.isLoading"
+          no-body
+          class="mb-3"
+        >
+          <template slot="header">
+            <div class="d-flex justify-content-between">
+              <i18n path="domaingroups.title" />
+              <b-button
+                size="sm"
+                variant="light"
+                :title="$t('domaingroups.manage')"
+                @click="showGroupModal"
+              >
+                <b-icon icon="grid-fill" />
+              </b-button>
+            </div>
+          </template>
+          <h-domaingroup-list
+            :domains="sortedDomains"
+            :selected-group="filteredGroup"
+            @group-selected="filteredGroup = $event"
+          />
+        </b-card>
       </b-col>
     </b-row>
   </b-container>
@@ -123,6 +148,7 @@ import { mapGetters } from 'vuex'
 export default {
 
   components: {
+    hDomaingroupList: () => import('@/components/hDomaingroupList'),
     hListGroupInputNewDomain: () => import('@/components/hListGroupInputNewDomain'),
     hProviderListDomains: () => import('@/components/hProviderListDomains'),
     hProviderList: () => import('@/components/providerList'),
@@ -132,15 +158,15 @@ export default {
   data: function () {
     return {
       noDomainsList: true,
-      filteredGroup: null,
+      filteredGroup: '',
       filteredProvider: null
     }
   },
 
   computed: {
     filteredDomains () {
-      if (this.sortedDomains && this.filteredProvider) {
-        return this.sortedDomains.filter(d => d.id_provider === this.filteredProvider._id)
+      if (this.sortedDomains && (this.filteredProvider || this.filteredGroup)) {
+        return this.sortedDomains.filter(d => (!this.filteredProvider || d.id_provider === this.filteredProvider._id) && (this.filteredGroup === '' || d.group === this.filteredGroup || (this.filteredGroup === 'undefined' && d.group === undefined)))
       } else {
         return this.sortedDomains
       }