chore(front): refactor ActionTable to use new table component

front/src/components/admin/SettingsGroup.vue

@@ -9,6 +9,7 @@ import useLogger from '~/composables/useLogger'
 import { useI18n } from 'vue-i18n'
 
 import Section from '~/components/ui/Section.vue'
+import Layout from '~/components/ui/Layout.vue'
 import Toggle from '~/components/ui/Toggle.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
@@ -117,28 +118,6 @@ const save = async () => {
       style="grid-column: 1 / -1;"
       @submit.prevent="save"
     >
-      <Alert
-        v-if="errors.length > 0"
-        red
-      >
-        <h4 class="header">
-          {{ t('components.admin.SettingsGroup.header.error') }}
-        </h4>
-        <ul class="list">
-          <li
-            v-for="(error, key) in errors"
-            :key="key"
-          >
-            {{ error }}
-          </li>
-        </ul>
-      </Alert>
-      <Alert
-        v-if="result"
-        green
-      >
-        {{ t('components.admin.SettingsGroup.message.success') }}
-      </Alert>
       <Spacer :size="16" />
       <div
         v-for="(setting, key) in settings"
@@ -255,13 +234,40 @@ const save = async () => {
         </div>
         <Spacer />
       </div>
+      <Layout flex>
+        <Spacer grow />
         <Button
           type="submit"
-        :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
+          :class="[{'loading': isLoading}]"
           primary
         >
           {{ t('components.admin.SettingsGroup.button.save') }}
         </Button>
+      </Layout>
+      <Spacer />
+      <Alert
+        v-if="errors.length > 0"
+        red
+      >
+        <h4 class="header">
+          {{ group.label }}:
+          {{ t('components.admin.SettingsGroup.header.error') }}
+        </h4>
+        <ul class="list">
+          <li
+            v-for="(error, key) in errors"
+            :key="key"
+          >
+            {{ error }}
+          </li>
+        </ul>
+      </Alert>
+      <Alert
+        v-if="result"
+        green
+      >
+        {{ t('components.admin.SettingsGroup.message.success') }}
+      </Alert>
     </form>
   </Section>
   <Spacer />

front/src/components/common/ActionTable.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { BackendError } from '~/types'
 
-import { ref, computed, reactive, watch } from 'vue'
+import { ref, computed, reactive, watch, useSlots } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import DangerousButton from '~/components/common/DangerousButton.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
+import Table from '~/components/ui/Table.vue'
+import Alert from '~/components/ui/Alert.vue'
 
 import axios from 'axios'
 
@@ -158,42 +161,66 @@ const launchAction = async () => {
 
   isLoading.value = false
 }
+
+const slots = useSlots();
+
+// Count the number of elements inside the "header-cells" slot
+const columnCount = computed(() => {
+  return slots['header-cells'] ? slots['header-cells']().length : 0;
+});
+
+// Compute the correct number of columns
+const gridColumns = computed(() => {
+  let columns = columnCount.value;
+
+  // Add 1 column if for the checkbox if there are more than one action
+  if (props.actions.length > 0) {
+    columns += 1;
+  }
+
+  return Array.from({ length: columns }, () => 'auto');
+})
 </script>
 
 <template>
   <div class="table-wrapper component-action-table">
-    <table class="ui compact very basic unstackable table">
+      <Table
-      <thead>
+      v-if="objectsData.count > 0"
-        <tr>
+      :grid-template-columns="gridColumns"
-          <th colspan="1000">
+      class="ui compact very basic unstackable table"
-            <div
+      >
-              v-if="refreshable"
+      <template #header>
-              class="right floated"
+        <label v-if="actions.length > 0">
+          <div class="ui checkbox">
+            <!-- TODO (wvffle): Check if we don't have to migrate to v-model -->
+            <input
+            type="checkbox"
+            :aria-label="labels.selectAllItems"
+            :disabled="checkable.length === 0"
+            :checked="checkable.length > 0 && checked.length === checkable.length"
+            @change="toggleCheckAll"
             >
-              <span v-if="needsRefresh">
-                {{ t('components.common.ActionTable.message.needsRefresh') }}
-              </span>
-              <Button
-                tiny
-                icon="bi-arrow-clockwise"
-                :title="labels.refresh"
-                :aria-label="labels.refresh"
-                @click="$emit('refresh')"
-              />
           </div>
+        </label>
+        <slot name="header-cells" />
+      </template>
+
+      <div
+        v-if="actionUrl && actions.length > 0 || refreshable"
+        :style="{ gridColumn: `span ${gridColumns.length}`, height: '128px' }"
+      >
 
         <Layout
-              v-if="actionUrl && actions.length > 0"
           stack
           no-gap
-              class="ui form"
+          v-if="actionUrl && actions.length > 0"
         >
           <label for="actions-select">{{ t('components.common.ActionTable.label.actions') }}</label>
-              <Layout flex>
+          <Layout flex class="ui form">
             <select
               id="actions-select"
               v-model="currentActionName"
-                  class="ui dropdown"
+              class="dropdown"
             >
               <option
                 v-for="action in actions"
@@ -267,7 +294,6 @@ const launchAction = async () => {
                 </a>
               </template>
             </div>
-              </Layout>
             <Alert
               v-if="errors.length > 0"
               red
@@ -300,30 +326,36 @@ const launchAction = async () => {
               />
             </Alert>
           </Layout>
-          </th>
+        </Layout>
-        </tr>
+
-        <tr>
+        <Spacer grow />
-          <th v-if="actions.length > 0">
+
-            <div class="ui checkbox">
+        <Layout
-              <!-- TODO (wvffle): Check if we don't have to migrate to v-model -->
+          label
-              <input
+          v-if="refreshable"
-                type="checkbox"
+          class="right floated"
-                :aria-label="labels.selectAllItems"
-                :disabled="checkable.length === 0"
-                :checked="checkable.length > 0 && checked.length === checkable.length"
-                @change="toggleCheckAll"
         >
+          <span v-if="needsRefresh">
+            {{ t('components.common.ActionTable.message.needsRefresh') }}
+          </span>
+          <Button
+            primary
+            icon="bi-arrow-clockwise"
+            :title="labels.refresh"
+            :aria-label="labels.refresh"
+            @click="$emit('refresh')"
+            style="align-self: end;"
+          >
+            {{  labels.refresh }}
+          </Button>
+        </Layout>
       </div>
-          </th>
+
-          <slot name="header-cells" />
+      <template
-        </tr>
-      </thead>
-      <tbody v-if="objectsData.count > 0">
-        <tr
         v-for="(obj, index) in objects"
         :key="index"
       >
-          <td
+        <label
           v-if="actions.length > 0"
           class="collapsing"
         >
@@ -335,13 +367,12 @@ const launchAction = async () => {
             :checked="checked.indexOf(obj[idField]) > -1"
             @click="toggleCheck($event, obj[idField], index)"
           >
-          </td>
+        </label>
         <slot
           name="row-cells"
           :obj="obj"
         />
-        </tr>
+      </template>
-      </tbody>
+    </Table>
-    </table>
   </div>
 </template>