add DomainList view and main_domain state

app/src/helpers/dataStore.js

@@ -4,6 +4,7 @@ import api from './api'
 export default {
   state: () => ({
     domains: undefined, // Array
+    main_domain: undefined,
     users: undefined, // basic user data: Object {username: {data}}
     users_details: {}, // precise user data: Object {username: {data}}
     groups: undefined,
@@ -15,6 +16,10 @@ export default {
       state.domains = domains
     },
 
+    'SET_MAIN_DOMAIN' (state, response) {
+      state.main_domain = response.current_main_domain
+    },
+
     'SET_USERS' (state, users) {
       state.users = Object.keys(users).length === 0 ? null : users
     },

app/src/locales/en.json

@@ -225,7 +225,8 @@
         "username": "johndoe",
         "firstname": "John",
         "lastname": "Doe",
-        "groupname": "My group name"
+        "groupname": "My group name",
+        "domain": "my-domain.com"
     },
     "logs": "Logs",
     "logs_operation": "Operations made on system with YunoHost",
@@ -264,6 +265,11 @@
     "restart": "Restart",
     "run": "Run",
     "save": "Save",
+    "search": {
+        "domain": "Search for domains...",
+        "group": "Search for groups...",
+        "user": "Search for users..."
+    },
     "search_for_apps": "Search for apps...",
     "select_all": "Select all",
     "select_none": "Select none",
@@ -319,9 +325,6 @@
     "upnp_disabled": "UPnP is disabled.",
     "upnp_enabled": "UPnP is enabled.",
     "url": "URL",
-    "user": {
-        "search": "User search"
-    },
     "user_email": "Email",
     "user_emailaliases": "Mail aliases",
     "user_emailforward": "Mail forward",

app/src/routes.js

@@ -2,6 +2,7 @@ import Home from './views/Home'
 import Login from './views/Login'
 import { UserList, UserCreate, UserInfo, UserEdit } from './views/user'
 import { GroupList, GroupCreate } from './views/group'
+import { DomainList } from './views/domain'
 
 const routes = [
   { name: 'home', path: '/', component: Home },
@@ -78,6 +79,20 @@ const routes = [
         { name: 'group-create', trad: 'group_new' }
       ]
     }
+  },
+
+  /* ─────────╮
+   │  DOMAIN  │
+   ╰───────── */
+  {
+    name: 'domain-list',
+    path: '/domains',
+    component: DomainList,
+    meta: {
+      breadcrumb: [
+        { name: 'domain-list', trad: 'domains' }
+      ]
+    }
   }
 ]
 

app/src/views/Home.vue

@@ -21,7 +21,7 @@ export default {
     return {
       menu: [
         { id: 0, routeName: 'user-list', icon: 'users', translation: 'users' },
-        { id: 1, routeName: 'domains', icon: 'globe', translation: 'domains' },
+        { id: 1, routeName: 'domain-list', icon: 'globe', translation: 'domains' },
         { id: 2, routeName: 'apps', icon: 'cubes', translation: 'applications' },
         { id: 3, routeName: 'update', icon: 'refresh', translation: 'system_update' },
         { id: 4, routeName: 'services', icon: 'cog', translation: 'services' },

app/src/views/domain/DomainList.vue

@@ -0,0 +1,95 @@
+<template lang="html">
+  <div class="domain-list">
+    <div class="actions">
+      <b-input-group>
+        <b-input-group-prepend is-text>
+          <icon iname="search" />
+        </b-input-group-prepend>
+        <b-form-input id="search-domain" v-model="search" :placeholder="$t('search.domain')" />
+      </b-input-group>
+      <div class="buttons">
+        <b-button variant="success" :to="{name: 'domain-add'}">
+          <icon iname="plus" /> {{ $t('domain_add') }}
+        </b-button>
+      </div>
+    </div>
+
+    <b-list-group v-if="filteredDomains">
+      <b-list-group-item
+        v-for="domain in filteredDomains" :key="domain"
+        :to="{ name: 'domain-info', params: { name: domain }}"
+        class="d-flex justify-content-between align-items-center pr-0"
+      >
+        <div>
+          <h5>
+            {{ domain }}
+            <small v-if="domain === mainDomain">
+              <span class="sr-only">{{ $t('default') }}</span>
+              <icon iname="star" :title="$t('default')" />
+            </small>
+          </h5>
+          <p>https://{{ domain }}</p>
+        </div>
+        <icon iname="chevron-right" class="lg fs-sm ml-auto" />
+      </b-list-group-item>
+    </b-list-group>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DomainList',
+
+  data: () => ({
+    search: ''
+  }),
+
+  computed: {
+    filteredDomains () {
+      const domains = this.$store.state.data.domains
+      const mainDomain = this.mainDomain
+      if (!domains || !mainDomain) return
+      const search = this.search.toLowerCase()
+      return domains
+        .filter(name => name.toLowerCase().includes(search))
+        .sort(prevDomain => prevDomain === mainDomain ? -1 : 1)
+    },
+
+    mainDomain () {
+      return this.$store.state.data.main_domain
+    }
+  },
+
+  methods: {
+  },
+
+  created () {
+    this.$store.dispatch('FETCH_ALL', [
+      { uri: 'domains/main', storeKey: 'main_domain' },
+      { uri: 'domains' }
+    ])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+p {
+  margin: 0
+}
+
+.skeleton {
+  @each $i, $opacity in 1 .75, 2 .5, 3 .25 {
+    .list-group-item:nth-child(#{$i}) { opacity: $opacity; }
+  }
+
+  h5, p {
+    background-color: $skeleton-color;
+    height: 1.5rem;
+    width: 10rem;
+  }
+
+  small {
+    display: none;
+  }
+}
+</style>

app/src/views/domain/index.js

@@ -0,0 +1 @@
+export { default as DomainList } from './DomainList'

app/src/views/group/GroupList.vue

@@ -3,10 +3,9 @@
     <div class="actions">
       <b-input-group>
         <b-input-group-prepend is-text>
-          <label class="sr-only" for="search-group">Search group</label>
           <icon iname="search" />
         </b-input-group-prepend>
-        <b-form-input id="search-group" v-model="search" placeholder="Search group" />
+        <b-form-input id="search-group" v-model="search" :placeholder="$t('search.group')" />
       </b-input-group>
       <div class="buttons">
         <b-button variant="success" :to="{name: 'group-create'}">

app/src/views/user/UserList.vue

@@ -3,10 +3,9 @@
     <div class="actions">
       <b-input-group>
         <b-input-group-prepend is-text>
-          <label class="sr-only" for="search-user">{{ $t('user.search') }}</label>
           <icon iname="search" />
         </b-input-group-prepend>
-        <b-form-input id="search-user" v-model="search" :placeholder="$t('user.search')" />
+        <b-form-input id="search-user" v-model="search" :placeholder="$t('search.user')" />
       </b-input-group>
       <div class="buttons">
         <b-button variant="info" :to="{ name: 'group-list'}">