Save zone display format into user settings

model/usersettings.go

@@ -33,6 +33,12 @@ package happydns
 
 import ()
 
+const (
+	ZONEVIEW_GRID = iota
+	ZONEVIEW_LIST
+	ZONEVIEW_RECORDS
+)
+
 // UserSettings represents the settings for an account.
 type UserSettings struct {
 	// Language saves the locale defined by the user.
@@ -43,6 +49,9 @@ type UserSettings struct {
 
 	// FieldHint stores the way form hints are displayed.
 	FieldHint int `json:"fieldhint"`
+
+	// ZoneView keeps the view of the zone wanted by the user.
+	ZoneView int `json:"zoneview"`
 }
 
 func DefaultUserSettings() *UserSettings {
@@ -50,5 +59,6 @@ func DefaultUserSettings() *UserSettings {
 		Language:   "en",
 		Newsletter: false,
 		FieldHint:  2,
+		ZoneView:   ZONEVIEW_GRID,
 	}
 }

ui/src/locales/en.json

@@ -106,20 +106,7 @@
             "title": "View zone"
         },
         "views": {
-            "grid": {
-                "title": "Grid view (easiest)",
-                "label": "Grid"
-            },
-            "list": {
-                "title": "List view (fastest)",
-                "label": "List"
-            },
-            "provider-parameters": "Hosting parameters",
-            "records": {
-                "title": "List records (advanced)",
-                "label": "Records"
-            },
-            "as": "View as:"
+            "provider-parameters": "Hosting parameters"
         },
         "alias-creation": "Add an alias pointing to {0}:",
         "alias-creation-sample": "This will create the alias:",
@@ -276,7 +263,13 @@
         "save": "Save settings",
         "title": "Settings",
         "success": "Continue to enjoy happyDNS.",
-        "success-change": "Your settings has been saved."
+        "success-change": "Your settings has been saved.",
+        "zoneview": {
+            "grid": "Grid view (easiest)",
+            "list": "List view (fastest)",
+            "records": "List with records (advanced)",
+            "title": "View zone as"
+        }
     },
     "record": {
         "A": "IPv4 address",

ui/src/locales/fr.json

@@ -272,7 +272,13 @@
         "save": "Enregistrer les paramètres",
         "title": "Paramètres",
         "success": "Vous pouvez continuer d'apprécier happyDNS.",
-        "success-change": "Vos paramètres ont été sauvegardés."
+        "success-change": "Vos paramètres ont été sauvegardés.",
+        "zoneview": {
+            "grid": "Grille (la plus lisible)",
+            "list": "Liste (la plus rapide)",
+            "records": "Liste avec les enregistrements (avancés)",
+            "title": "Voir comme :"
+        }
     },
     "record": {
         "A": "Adresse IPv4",
@@ -302,4 +308,4 @@
         "ttl": "Temps de cache restant",
         "showDNSSEC": "Afficher les enregistrements DNSSEC dans la réponse (s'il y en a)"
     }
-}
+}

ui/src/views/domain.vue

@@ -79,27 +79,7 @@
           </b-button>
         </b-button-group>
 
-        <hr>
-
-        <b-form class="mt-3">
-          <label class="font-weight-bolder">{{ $t('domains.views.as') }}</label>
-          <b-button-group class="w-100">
-            <b-button :variant="displayFormat === 'grid' ? 'secondary' : 'outline-secondary'" :title="$t('domains.views.grid.title')" @click="toogleGridView()">
-              <b-icon icon="grid-fill" aria-hidden="true" /><br>
-              {{ $t('domains.views.grid.label') }}
-            </b-button>
-            <b-button :variant="displayFormat === 'list' ? 'secondary' : 'outline-secondary'" :title="$t('domains.views.list.title')" @click="toogleListView()">
-              <b-icon icon="list-ul" aria-hidden="true" /><br>
-              {{ $t('domains.views.list.label') }}
-            </b-button>
-            <b-button :variant="displayFormat === 'records' ? 'secondary' : 'outline-secondary'" :title="$t('domains.views.records.title')" @click="toogleRecordsView()">
-              <b-icon icon="menu-button-wide-fill" aria-hidden="true" /><br>
-              {{ $t('domains.views.records.label') }}
-            </b-button>
-          </b-button-group>
-        </b-form>
-
-        <hr>
+        <div class="flex-fill" />
 
         <b-button class="w-100" type="button" variant="outline-danger" @click="detachDomain()">
           <b-icon icon="trash-fill" /> {{ $t('domains.stop') }}
@@ -208,7 +188,6 @@ export default {
 
   data: function () {
     return {
-      displayFormat: 'grid',
       importInProgress: false,
       propagationInProgress: false,
       selectedDiff: [],
@@ -219,6 +198,17 @@ export default {
   },
 
   computed: {
+    displayFormat () {
+      switch (this.user_getSettings.zoneview) {
+        case 1:
+          return 'list'
+        case 2:
+          return 'records'
+        default:
+          return 'grid'
+      }
+    },
+
     domain () {
       return this.domains_getDetailed[this.$route.params.domain]
     },
@@ -298,7 +288,8 @@ export default {
     },
 
     ...mapGetters('domains', ['domains_getDetailed', 'sortedDomains']),
-    ...mapGetters('providers', ['providers_getAll'])
+    ...mapGetters('providers', ['providers_getAll']),
+    ...mapGetters('user', ['user_getSettings'])
   },
 
   watch: {
@@ -311,9 +302,6 @@ export default {
   },
 
   created () {
-    if (localStorage && localStorage.getItem('displayFormat')) {
-      this.displayFormat = localStorage.getItem('displayFormat')
-    }
     this.$store.dispatch('domains/getAllMyDomains')
     this.$store.dispatch('providers/getAllMyProviders')
     this.updateDomainInfo()
@@ -383,27 +371,6 @@ export default {
         })
     },
 
-    toogleGridView () {
-      this.displayFormat = 'grid'
-      if (localStorage) {
-        localStorage.setItem('displayFormat', 'grid')
-      }
-    },
-
-    toogleListView () {
-      this.displayFormat = 'list'
-      if (localStorage) {
-        localStorage.setItem('displayFormat', 'list')
-      }
-    },
-
-    toogleRecordsView () {
-      this.displayFormat = 'records'
-      if (localStorage) {
-        localStorage.setItem('displayFormat', 'records')
-      }
-    },
-
     showDiff () {
       this.zoneDiff = null
       this.$bvModal.show('modal-applyZone')

ui/src/views/me.vue

@@ -55,6 +55,24 @@
               :options="[{value: 0, text: $t('settings.fieldhint.hide')}, {value: 1, text: $t('settings.fieldhint.tooltip')}, {value: 2, text: $t('settings.fieldhint.focused')}, {value: 3, text: $t('settings.fieldhint.always')}]"
             />
           </b-form-group>
+          <b-form-group
+            :label="$t('settings.zoneview.title')"
+          >
+            <b-button-group class="w-100">
+              <b-button :variant="!settings.zoneview ? 'secondary' : 'outline-secondary'" @click="setSetting('zoneview', 0)">
+                <b-icon icon="grid-fill" aria-hidden="true" /><br>
+                {{ $t('settings.zoneview.grid') }}
+              </b-button>
+              <b-button :variant="settings.zoneview === 1 ? 'secondary' : 'outline-secondary'" @click="setSetting('zoneview', 1)">
+                <b-icon icon="list-ul" aria-hidden="true" /><br>
+                {{ $t('settings.zoneview.list') }}
+              </b-button>
+              <b-button :variant="settings.zoneview === 2 ? 'secondary' : 'outline-secondary'" @click="setSetting('zoneview', 2)">
+                <b-icon icon="menu-button-wide-fill" aria-hidden="true" /><br>
+                {{ $t('settings.zoneview.records') }}
+              </b-button>
+            </b-button-group>
+          </b-form-group>
           <div class="d-flex justify-content-around">
             <b-button type="submit" variant="primary">
               {{ $t('settings.save') }}
@@ -177,6 +195,7 @@
 
 <script>
 import axios from 'axios'
+import Vue from 'vue'
 import PasswordChecks from '@/mixins/passwordChecks'
 import Languages from '@/mixins/languages'
 
@@ -247,6 +266,10 @@ export default {
           })
     },
 
+    setSetting (setting, value) {
+      Vue.set(this.settings, setting, value)
+    },
+
     saveSettings () {
       axios
         .post('/api/users/' + encodeURIComponent(this.loggedUser.id.toString(16)) + '/settings', this.settings)