chore(front): refactor admin settings users

front/src/components/common/ActionTable.vue

@@ -5,6 +5,8 @@ import { ref, computed, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import DangerousButton from '~/components/common/DangerousButton.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Button from '~/components/ui/Button.vue'
 
 import axios from 'axios'
 
@@ -171,23 +173,23 @@ const launchAction = async () => {
               <span v-if="needsRefresh">
                 {{ t('components.common.ActionTable.message.needsRefresh') }}
               </span>
-              <button
+              <Button
-                class="ui basic icon button"
+                tiny
+                icon="bi-arrow-clockwise"
                 :title="labels.refresh"
                 :aria-label="labels.refresh"
                 @click="$emit('refresh')"
-              >
+              />
-                <i class="refresh icon" />
-              </button>
             </div>
 
-            <div
+            <Layout
               v-if="actionUrl && actions.length > 0"
-              class="ui small left floated form"
+              stack
+              no-gap
+              class="ui form"
             >
-              <div class="ui inline fields">
-                <div class="field">
               <label for="actions-select">{{ t('components.common.ActionTable.label.actions') }}</label>
+              <Layout flex>
                 <select
                   id="actions-select"
                   v-model="currentActionName"
@@ -201,8 +203,6 @@ const launchAction = async () => {
                     {{ action.label }}
                   </option>
                 </select>
-                </div>
-                <div class="field">
                 <dangerous-button
                   v-if="selectAll || currentAction?.isDangerous"
                   :disabled="checked.length === 0 || undefined"
@@ -227,16 +227,17 @@ const launchAction = async () => {
                     </span>
                   </template>
                 </dangerous-button>
-                  <button
+                <Button
                   v-else
+                  primary
                   :disabled="checked.length === 0"
                   :aria-label="labels.performAction"
-                    :class="['ui', {disabled: checked.length === 0}, {'loading': isLoading}, 'button']"
+                  :class="[{disabled: checked.length === 0}, {'loading': isLoading}]"
+                  style="margin-top: 7px;"
                   @click="launchAction"
                 >
                   {{ t('components.common.ActionTable.button.go') }}
-                  </button>
+                </Button>
-                </div>
                 <div class="count field">
                   <span v-if="selectAll">
                     {{ t('components.common.ActionTable.button.allSelected', objectsData.count) }}
@@ -265,11 +266,10 @@ const launchAction = async () => {
                     </a>
                   </template>
                 </div>
-              </div>
+              </Layout>
-              <div
+              <Alert
                 v-if="errors.length > 0"
-                role="alert"
+                red
-                class="ui negative message"
               >
                 <h4 class="header">
                   {{ t('components.common.ActionTable.header.error') }}
@@ -282,10 +282,10 @@ const launchAction = async () => {
                     {{ error }}
                   </li>
                 </ul>
-              </div>
+              </Alert>
-              <div
+              <Alert
                 v-if="result"
-                class="ui positive message"
+                green
               >
                 <p>
                   <span>
@@ -297,8 +297,8 @@ const launchAction = async () => {
                   name="action-success-footer"
                   :result="result"
                 />
-              </div>
+              </Alert>
-            </div>
+            </Layout>
           </th>
         </tr>
         <tr>

front/src/components/manage/users/InvitationForm.vue

@@ -8,6 +8,12 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import Layout from '~/components/ui/Layout.vue'
+import Button from '~/components/ui/Button.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+
 interface Invitation {
   code: string
 }
@@ -47,14 +53,14 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
 
 <template>
   <div>
-    <form
+    <Layout
+      form
       class="ui form"
       @submit.prevent="submit"
     >
-      <div
+      <Alert
         v-if="errors.length > 0"
-        role="alert"
+        red
-        class="ui negative message"
       >
         <h4 class="header">
           {{ t('components.manage.users.InvitationForm.header.failure') }}
@@ -67,31 +73,31 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
             {{ error }}
           </li>
         </ul>
-      </div>
+      </Alert>
       <div class="inline fields">
-        <div class="ui field">
+        <Input
-          <label for="invitation-code">{{ t('components.manage.users.InvitationForm.label.invite') }}</label>
-          <input
           v-model="code"
           for="invitation-code"
           name="code"
           type="text"
+          :label="t('components.manage.users.InvitationForm.label.invite')"
           :placeholder="labels.placeholder"
         >
-        </div>
+          <template #input-right>
-        <div class="ui field">
+            <Button
-          <button
+              primary
-            :class="['ui', {loading: isLoading}, 'button']"
+              :class="[{loading: isLoading}]"
               :disabled="isLoading"
               type="submit"
             >
               {{ t('components.manage.users.InvitationForm.button.new') }}
-          </button>
+            </Button>
+          </template>
+        </Input>
       </div>
-      </div>
+    </Layout>
-    </form>
+    <Spacer :size="16" />
     <div v-if="invitations.length > 0">
-      <div class="ui hidden divider" />
       <table class="ui ui basic table">
         <thead>
           <tr>
@@ -118,12 +124,14 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
           </tr>
         </tbody>
       </table>
-      <button
+      <Spacer :size="8"/>
-        class="ui basic button"
+      <Button
+        destructive
+        icon="bi-trash"
         @click="invitations.length = 0"
       >
         {{ t('components.manage.users.InvitationForm.button.clear') }}
-      </button>
+      </Button>
     </div>
   </div>
 </template>

front/src/components/manage/users/InvitationsTable.vue

@@ -11,7 +11,11 @@ import moment from 'moment'
 import axios from 'axios'
 
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Input from '~/components/ui/Input.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Loader from '~/components/ui/Loader.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -100,19 +104,23 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div>
+  <Layout
-    <div class="ui inline form">
+    form
-      <div class="fields">
+    class="ui inline form"
+  >
     <div class="ui field">
       <label for="invitations-search">{{ t('components.manage.users.InvitationsTable.label.search') }}</label>
-          <input
+      <Input
         id="invitations-search"
         v-model="query"
+        search
         name="search"
         type="text"
         :placeholder="labels.searchPlaceholder"
-          >
+      />
     </div>
+    <Layout flex>
+      <Spacer grow />
       <div class="field">
         <label for="invitations-ordering">{{ t('components.manage.users.InvitationsTable.ordering.label') }}</label>
         <select
@@ -147,15 +155,12 @@ const labels = computed(() => ({
           </option>
         </select>
       </div>
-      </div>
+    </Layout>
-    </div>
+  </Layout>
   <div class="dimmable">
-      <div
+    <Loader
       v-if="isLoading"
-        class="ui active inverted dimmer"
+    />
-      >
-        <div class="ui loader" />
-      </div>
     <action-table
       v-if="result"
       :objects-data="result"
@@ -224,17 +229,14 @@ const labels = computed(() => ({
     </action-table>
   </div>
   <div>
-      <pagination
+    <Pagination
       v-if="result && result.count > paginateBy"
       v-model:current="page"
-        :compact="true"
       :paginate-by="paginateBy"
-        :total="result.count"
     />
 
     <span v-if="result && result.results.length > 0">
       {{ t('components.manage.users.InvitationsTable.pagination.results', { start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count }, result.results.length) }}
     </span>
   </div>
-  </div>
 </template>

front/src/components/manage/users/UsersTable.vue

@@ -10,7 +10,11 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
+import Layout from '~/components/ui/Layout.vue'
+import Input from '~/components/ui/Input.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -102,19 +106,25 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div>
+  <Layout
-    <div class="ui inline form">
+    form
+    class="ui form"
+  >
     <div class="fields">
       <div class="ui field">
-          <label for="users-search">{{ t('components.manage.users.UsersTable.label.search') }}</label>
+        <Input
-          <input
           id="users-search"
           v-model="query"
+          search
+          :label="t('components.manage.users.UsersTable.label.search')"
           name="search"
           type="text"
           :placeholder="labels.searchPlaceholder"
-          >
+        />
       </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="users-ordering">{{ t('components.manage.users.UsersTable.ordering.label') }}</label>
           <select
@@ -146,7 +156,7 @@ const labels = computed(() => ({
             </option>
           </select>
         </div>
-      </div>
+      </Layout>
     </div>
     <div class="dimmable">
       <div
@@ -257,17 +267,15 @@ const labels = computed(() => ({
       </action-table>
     </div>
     <div>
-      <pagination
+      <Pagination
         v-if="result && result.count > paginateBy"
         v-model:current="page"
-        :compact="true"
         :paginate-by="paginateBy"
-        :total="result.count"
       />
 
       <span v-if="result && result.results.length > 0">
         {{ t('components.manage.users.UsersTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}, result.results.length) }}
       </span>
     </div>
-  </div>
+  </Layout>
 </template>

front/src/views/admin/users/Base.vue

@@ -2,6 +2,10 @@
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
+import Layout from '~/components/ui/Layout.vue'
+import Tabs from '~/components/ui/Tabs.vue'
+import Tab from '~/components/ui/Tab.vue'
+
 const { t } = useI18n()
 
 const labels = computed(() => ({
@@ -11,28 +15,22 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div
+  <Layout
     v-title="labels.manageUsers"
-    class="main"
+    main
+    stack
   >
-    <nav
+    <Tabs>
-      class="ui secondary pointing menu"
+      <Tab
-      role="navigation"
+        :title="t('views.admin.users.Base.link.users')"
-      :aria-label="labels.secondaryMenu"
-    >
-      <router-link
-        class="ui item"
         :to="{name: 'manage.users.users.list'}"
-      >
+      />
-        {{ t('views.admin.users.Base.link.users') }}
+
-      </router-link>
+      <Tab
-      <router-link
+        :title="t('views.admin.users.Base.link.invitations')"
-        class="ui item"
         :to="{name: 'manage.users.invitations.list'}"
-      >
+      />
-        {{ t('views.admin.users.Base.link.invitations') }}
+    </Tabs>
-      </router-link>
-    </nav>
     <router-view :key="$route.fullPath" />
-  </div>
+  </Layout>
 </template>