feat: add lifecycle filtering and pagination options to lifecycles and jobs tables, improve layout and styling across various components

Author: tacxou

apps/api/src/management/lifecycle/lifecycle-crud.service.ts

@@ -282,9 +282,11 @@ export class LifecycleCrudService extends AbstractLifecycleService {
    */
   public async getRecentChanges(
     options?: FilterOptions,
+    lifecycle?: string,
   ): Promise<[number, Query<Array<Lifecycle>, Lifecycle, any, Lifecycle>[]]> {
-    const total = await this.count({})
-    const result = await this.find<Lifecycle>({}, null, {
+    const searchFilter = lifecycle ? { lifecycle } : {}
+    const total = await this.count(searchFilter)
+    const result = await this.find<Lifecycle>(searchFilter, null, {
       populate: 'refId',
       sort: {
         ...options?.sort,

apps/api/src/management/lifecycle/lifecycle.controller.ts

@@ -3,6 +3,7 @@ import {
   Get,
   HttpStatus,
   Param,
+  Query,
   Req,
   Res,
   UseInterceptors,
@@ -296,8 +297,9 @@ export class LifecycleController extends AbstractController {
   public async getRecentChanges(
     @SearchFilterOptions() searchFilterOptions: FilterOptions,
     @Res() res: Response,
+    @Query('lifecycle') lifecycle?: string,
   ): Promise<Response<Lifecycle[]>> {
-    const [total, data] = await this._service.getRecentChanges(searchFilterOptions);
+    const [total, data] = await this._service.getRecentChanges(searchFilterOptions, lifecycle);
     return res.status(HttpStatus.OK).json({
       statusCode: HttpStatus.OK,
       data,

apps/web/src/composables/useAuditsTable.ts

@@ -42,7 +42,7 @@ export function getAuditOperationLabel(op?: string): string {
     case 'insert':
       return 'Creation'
     case 'update':
-      return 'Mise a jour'
+      return 'Mise à jour'
     case 'delete':
       return 'Suppression'
     case 'replace':

apps/web/src/pages/audits/table.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-q-page.container.q-pa-md
+q-page.container.q-pa-sm
   q-card(bordered square flat style='border-bottom: none;')
     q-card-section.q-pa-none
       q-toolbar(bordered dense style='height: 28px; line-height: 28px;')
@@ -48,6 +48,7 @@ q-page.container.q-pa-md
     v-model:pagination='pagination'
     :loading='loading'
     :filter='search'
+    :rows-per-page-options='[16, 32, 64, 100]'
     :pagination-label='(firstRowIndex, endRowIndex, totalRowsNumber) => `${firstRowIndex}-${endRowIndex} sur ${totalRowsNumber} lignes`'
     @request='onRequest'
   )

apps/web/src/pages/jobs/table.vue

@@ -1,17 +1,23 @@
 <template lang="pug">
-q-page.container
-  q-table(
-    title="Journal des jobs"
-    v-model:expanded="expanded"
-    :rows="rows || []"
-    :columns="columns"
-    :rows-per-page-options="[18, 100, 0]"
-    row-key="jobId"
-    bordered
-    dense
-    flat
-  )
-    template(v-slot:top-right)
+q-page.container.q-pa-sm
+  q-card(bordered square flat style='border-bottom: none;')
+    q-card-section.q-pa-none
+      q-toolbar(bordered dense style='height: 28px; line-height: 28px;')
+        q-toolbar-title Journal des jobs
+        q-btn(
+          icon='mdi-refresh'
+          color='primary'
+          flat
+          round
+          dense
+          :loading='pending'
+          :disable='pending'
+          @click='refreshJobs'
+        )
+
+    q-separator
+    q-toolbar(bordered dense style='height: 28px; line-height: 28px;')
+      q-space
       q-select(
         v-model="stateFilter"
         :options="foptions"
@@ -23,8 +29,22 @@ q-page.container
         style="width: 150px"
         map-options
       )
-        template(v-slot:append)
-          q-icon(name="mdi-filter")
+  q-table(
+    flat
+    bordered
+    dense
+    binary-state-sort
+    v-model:pagination='pagination'
+    v-model:expanded='expanded'
+    :rows='rows || []'
+    :columns='columns'
+    :rows-per-page-options='[16, 32, 64, 100]'
+    :loading='pending'
+    :pagination-label='(firstRowIndex, endRowIndex, totalRowsNumber) => `${firstRowIndex}-${endRowIndex} sur ${totalRowsNumber} lignes`'
+    row-key='jobId'
+    @request='onRequest'
+  )
+    template(v-slot:top-right)
     template(v-slot:no-data)
       div.text-center.q-pa-md
         span Aucune donnée à afficher.
@@ -113,13 +133,23 @@ export default defineComponent({
   },
   async setup() {
     const { monacoOptions } = useDebug()
-    const $route = useRoute()
+    const route = useRoute()
+    const router = useRouter()
+    const pagination = ref({
+      sortBy: 'date',
+      descending: true,
+      page: route.query.page ? parseInt(route.query.page as string, 10) : 1,
+      rowsPerPage: route.query.limit ? parseInt(route.query.limit as string, 10) : 16,
+      rowsNumber: 0,
+    })
     const query = computed(() => {
+      const { page, limit, skip, ...restQuery } = route.query
+
       return {
-        limit: 2000,
-        skip: 0,
+        limit: pagination.value.rowsPerPage,
+        skip: (pagination.value.page - 1) * pagination.value.rowsPerPage,
         'sort[metadata.lastUpdatedAt]': 'desc',
-        ...$route.query,
+        ...restQuery,
       }
     })
 
@@ -131,17 +161,18 @@ export default defineComponent({
     } = await useHttp<any>('/core/jobs', {
       method: 'GET',
       transform: (result) => {
-        const data = result?.data?.map((enr) => {
-          return enr
-        })
-
-        return data || []
+        return result?.data || []
+      },
+      onResponse({ response }) {
+        pagination.value.rowsNumber = response?._data?.total || 0
       },
       query,
     })
 
     return {
       monacoOptions,
+      router,
+      pagination,
       rows,
       pending,
       error,
@@ -181,16 +212,35 @@ export default defineComponent({
     },
   },
   methods: {
+    async onRequest(props): Promise<void> {
+      const { page, rowsPerPage } = props.pagination
+
+      this.pagination.page = page
+      this.pagination.rowsPerPage = rowsPerPage
+
+      await this.router.replace({
+        query: {
+          ...this.$route.query,
+          page: `${page}`,
+          limit: `${rowsPerPage}`,
+        },
+      })
+    },
+    async refreshJobs(): Promise<void> {
+      await this.refresh()
+    },
     updateStateFilter(selection: { value: string | null }): void {
       const query = {
         ...this.$route.query,
+        page: '1',
       }
 
       if (!selection.value) {
         delete query['filters[:state]']
       } else {
         query['filters[:state]'] = selection.value
       }
+      delete query.skip
 
       this.$router.replace({
         query,

apps/web/src/pages/lifecycles/table.vue

@@ -1,16 +1,51 @@
 <template lang="pug">
-  q-page.container
+  q-page.container.q-pa-sm
+    q-card(bordered square flat style='border-bottom: none;')
+      q-card-section.q-pa-none
+        q-toolbar(bordered dense style='height: 28px; line-height: 28px;')
+          q-toolbar-title Derniers cycles déclenchés
+          q-btn(
+            icon='mdi-refresh'
+            color='primary'
+            flat
+            round
+            dense
+            :loading='pending'
+            :disable='pending'
+            @click='refreshLifecycles'
+          )
+      q-separator
+      q-toolbar(bordered dense style='height: 28px; line-height: 28px;')
+        q-space
+        q-select(
+          v-model='selectedLifecycle'
+          :options='lifecycleOptions'
+          dense
+          outlined
+          clearable
+          clear-icon='mdi-close'
+          hide-dropdown-icon
+          label='Filtrer par cycle'
+          style='width: 210px'
+          emit-value
+          map-options
+          option-label='label'
+          option-value='value'
+        )
     q-table(
-      flat bordered dense
-      title="Derniers cycles déclenchés"
+      flat
+      bordered
+      dense
+      binary-state-sort
       :rows="rows || []"
       :columns="columns"
       row-key="_id"
       v-model:pagination="pagination"
       v-model:expanded="expanded"
+      :rows-per-page-options='[16, 32, 64, 100]'
+      :pagination-label='(firstRowIndex, endRowIndex, totalRowsNumber) => `${firstRowIndex}-${endRowIndex} sur ${totalRowsNumber} lignes`'
       :loading="pending"
       :filter="filter"
-      binary-state-sort
       @request="onRequest"
     )
       template(#header="props")
@@ -85,7 +120,7 @@ export default defineComponent({
     const route = useRoute()
     const router = useRouter()
 
-    const { getLifecycleName, getLifecycleIcon, getLifecycleColor } = await useIdentityLifecycles()
+    const { getLifecycleName, getLifecycleIcon, getLifecycleColor, stateList } = await useIdentityLifecycles()
 
     const pagination = ref({
       sortBy: 'desc',
@@ -109,7 +144,7 @@ export default defineComponent({
       query,
       onRequest() {
         pagination.value.page = parseInt(route.query.page as string, 10) || 1
-        pagination.value.rowsPerPage = parseInt(route.query.limit as string, 10) || 18
+        pagination.value.rowsPerPage = parseInt(route.query.limit as string, 10) || 16
       },
       onResponse({ response }) {
         pagination.value.rowsNumber = response._data.total || 0
@@ -120,6 +155,10 @@ export default defineComponent({
     return {
       monacoOptions,
       pagination,
+      lifecycleOptions: computed(() => stateList.value.map((state) => ({
+        label: state?.label || state?.key || 'Inconnu',
+        value: state?.key,
+      }))),
 
       getLifecycleName,
       getLifecycleIcon,
@@ -134,6 +173,21 @@ export default defineComponent({
     }
   },
   computed: {
+    selectedLifecycle: {
+      get(): string | undefined {
+        const lifecycle = this.$route.query.lifecycle
+        return lifecycle ? `${lifecycle}` : undefined
+      },
+      set(v: string | undefined): void {
+        this.$router.replace({
+          query: {
+            ...this.$route.query,
+            lifecycle: v || undefined,
+            page: '1',
+          },
+        })
+      },
+    },
     columns() {
       return [
         {
@@ -164,12 +218,13 @@ export default defineComponent({
     },
   },
   methods: {
+    async refreshLifecycles() {
+      await this.refresh()
+    },
     async onRequest(props) {
       const { page, rowsPerPage: limit, sortBy, descending } = props.pagination
       const filter = props.filter
 
-      console.log('Requesting data with:', { page, limit, sortBy, descending, filter, props })
-
       await this.router.replace({
         query: {
           ...this.router.currentRoute.value.query,