refactor: simplify navigation items in settings and add cron page

Author: tacxou

apps/web/src/pages/settings.vue

@@ -12,35 +12,11 @@
         <q-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500" bordered :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'">
           <q-scroll-area class="fit">
             <q-list>
-              <q-item clickable @click="$router.push('/settings/agents')">
+              <q-item v-for="item in navItems" :key="item.route" clickable @click="$router.push(item.route)" :active="$route.path === item.route">
                 <q-item-section avatar>
-                  <q-icon name="mdi-account" />
+                  <q-icon :name="item.icon" />
                 </q-item-section>
-                <q-item-section> Utilisateurs </q-item-section>
-              </q-item>
-            </q-list>
-            <q-list>
-              <q-item clickable @click="$router.push('/settings/password-policy')">
-                <q-item-section avatar>
-                  <q-icon name="mdi-form-textbox-password" />
-                </q-item-section>
-                <q-item-section> Politique de mot de passe </q-item-section>
-              </q-item>
-            </q-list>
-            <q-list>
-              <q-item clickable @click="$router.push('/settings/smtp')">
-                <q-item-section avatar>
-                  <q-icon name="mdi-mail" />
-                </q-item-section>
-                <q-item-section> Serveur SMTP </q-item-section>
-              </q-item>
-            </q-list>
-            <q-list>
-              <q-item clickable @click="$router.push('/settings/sms')">
-                <q-item-section avatar>
-                  <q-icon name="mdi-message-processing" />
-                </q-item-section>
-                <q-item-section> Serveur SMS </q-item-section>
+                <q-item-section> {{ item.label }} </q-item-section>
               </q-item>
             </q-list>
           </q-scroll-area>
@@ -59,4 +35,12 @@
 <script setup>
 import { ref } from 'vue'
 const drawer = ref(false)
+
+const navItems = [
+  { route: '/settings/agents', icon: 'mdi-account', label: 'Utilisateurs' },
+  { route: '/settings/password-policy', icon: 'mdi-form-textbox-password', label: 'Politique de mot de passe' },
+  { route: '/settings/smtp', icon: 'mdi-mail', label: 'Serveur SMTP' },
+  { route: '/settings/sms', icon: 'mdi-message-processing', label: 'Serveur SMS' },
+  { route: '/settings/cron', icon: 'mdi-clipboard-list', label: 'Tâches planifiés' },
+]
 </script>

apps/web/src/pages/settings/agents.vue

@@ -14,14 +14,13 @@ q-page.container
     :fieldsList="fieldsList"
     :selected="selected"
     :pending="pending"
+    :pagination="pagination"
     :refresh="refreshEvent"
     :error="error"
     :titleKey=["username"]
     :crud="crud"
     :actions="actions"
     :defaultRightPanelButton="true"
-    hide-pagination
-    hidePanModeSwitch
   )
     //- template(#top-left)
     //- sesame-table-top-left(:selected="selected" @updateLifestep="updateLifestep($event)" @clear="selected = []")
@@ -72,16 +71,16 @@ const $q = useQuasar()
 const { handleError } = useErrorHandling()
 const form = ref<any>(null)
 
-// onMounted(() => {
-//   // initializePagination(agents.value?.total)
-// })
+onMounted(() => {
+  initializePagination(agents.value?.total)
+})
 
-// const { pagination, onRequest, initializePagination } = usePagination()
+const { pagination, onRequest, initializePagination } = usePagination()
 
-// const queryWithoutRead = computed(() => {
-//   const { read, ...rest } = route.query
-//   return rest
-// })
+const queryWithoutRead = computed(() => {
+  const { read, ...rest } = route.query
+  return rest
+})
 
 const {
   data: agents,
@@ -90,9 +89,10 @@ const {
   error,
 } = await useHttp<Response>('/core/agents', {
   method: 'get',
-  query: {
-    limit: 99999,
-  },
+  query: queryWithoutRead,
+  // query: {
+  //   limit: 99999,
+  // },
 })
 
 if (error.value) {
@@ -105,7 +105,7 @@ if (error.value) {
 const columns = ref<QTableProps['columns']>([
   {
     name: 'username',
-    label: 'Nom d\'utilisateur',
+    label: "Nom d'utilisateur",
     field: (row: Agent) => row.username,
     align: 'left',
     sortable: true,
@@ -124,11 +124,7 @@ const columns = ref<QTableProps['columns']>([
     align: 'left',
   },
 ])
-const visibleColumns = ref<QTableProps['visibleColumns']>([
-  'username',
-  'email',
-  'actions',
-])
+const visibleColumns = ref<QTableProps['visibleColumns']>(['username', 'email', 'actions'])
 const columnsType = ref([
   { name: 'username', type: 'text' },
   { name: 'email', type: 'text' },
@@ -171,20 +167,24 @@ const actions = {
     validations.value = {}
   },
   create: async (row: Agent) => {
-
     // console.log('row', row)
 
     const sanitizedAgent = { ...row }
     delete sanitizedAgent.metadata
 
-    const { data: result, pending, error, refresh } = await useHttp(`/core/agents`, {
+    const {
+      data: result,
+      pending,
+      error,
+      refresh,
+    } = await useHttp(`/core/agents`, {
       method: 'POST',
       body: { ...sanitizedAgent },
-    });
+    })
     if (error.value) {
       handleError({
         error: error.value,
-        message: 'Erreur lors de la création'
+        message: 'Erreur lors de la création',
       })
       validations.value = error.value.data.validations
     } else {
@@ -201,14 +201,19 @@ const actions = {
     const sanitizedAgent = { ...row }
     delete sanitizedAgent.metadata
 
-    const { data: result, pending, error, refresh } = await useHttp(`/core/agents/${row._id}`, {
+    const {
+      data: result,
+      pending,
+      error,
+      refresh,
+    } = await useHttp(`/core/agents/${row._id}`, {
       method: 'PATCH',
       body: sanitizedAgent,
-    });
+    })
     if (error.value) {
       handleError({
         error: error.value,
-        message: 'Erreur lors de la sauvegarde'
+        message: 'Erreur lors de la sauvegarde',
       })
       validations.value = error.value.data.validations
     } else {
@@ -224,7 +229,7 @@ const actions = {
   delete: async (row: Agent) => {
     $q.dialog({
       dark: true,
-      title: 'Suppresion d\'un l\'agent',
+      title: "Suppresion d'un l'agent",
       message: `Vous êtes sur le point de supprimer l\'agent <b>${row.username}</b>. Êtes-vous sûr ?`,
       persistent: true,
       html: true,
@@ -239,9 +244,14 @@ const actions = {
         label: 'Annuler',
       },
     }).onOk(async () => {
-      const { data: result, pending, error, refresh } = await useHttp(`/core/agents/${row._id}`, {
+      const {
+        data: result,
+        pending,
+        error,
+        refresh,
+      } = await useHttp(`/core/agents/${row._id}`, {
         method: 'DELETE',
-      });
+      })
       if (error.value) {
         handleError({
           error: error.value,
@@ -256,7 +266,6 @@ const actions = {
           icon: 'mdi-check-circle-outline',
         })
       }
-
     })
     return row
   },
@@ -282,8 +291,7 @@ const actions = {
       // }
     }
     return null
-  }
-
+  },
 }
 
 const fieldsList = computed(() => {

apps/web/src/pages/settings/cron.vue

@@ -0,0 +1,3 @@
+<template lang="pug">
+  div cron
+</template>