feat: implement search functionality in keyrings controller

- Added search capability to the KeyringsController, allowing users to filter keyrings based on name and roles using a query parameter.
- Introduced a static searchFields property to define searchable fields.
- Updated the settings page to include a new route for managing API keyrings.

Author: tacxou

apps/api/src/core/keyrings/keyrings.controller.ts

@@ -1,4 +1,4 @@
-import { Body, Controller, Delete, Get, HttpStatus, Param, Post, Res } from '@nestjs/common';
+import { Body, Controller, Delete, Get, HttpStatus, Param, Post, Query, Res } from '@nestjs/common';
 import { AbstractController } from '~/_common/abstracts/abstract.controller';
 import { Types } from 'mongoose';
 import { ApiParam, ApiTags } from '@nestjs/swagger';
@@ -28,6 +28,11 @@ export class KeyringsController extends AbstractController {
     // suspendedAt: 1,
   };
 
+  protected static readonly searchFields: PartialProjectionType<any> = {
+    name: 1,
+    roles: 1,
+  };
+
   public constructor(private readonly _service: KeyringsService) {
     super();
   }
@@ -48,10 +53,18 @@ export class KeyringsController extends AbstractController {
     @Res() res: Response,
     @SearchFilterSchema() searchFilterSchema: FilterSchema,
     @SearchFilterOptions() searchFilterOptions: FilterOptions,
+    @Query('search') search: string,
   ): Promise<Response> {
-    //TODO: search tree by parentId
+    const searchFilter = {}
+
+    if (search && search.trim().length > 0) {
+      searchFilter['$or'] = Object.keys(KeyringsController.searchFields).map((key) => {
+        return { [key]: { $regex: `^${search}`, $options: 'i' } }
+      }).filter(item => item !== undefined)
+    }
+
     const [data, total] = await this._service.findAndCount(
-      searchFilterSchema,
+      { ...searchFilter, ...searchFilterSchema },
       KeyringsController.projection,
       searchFilterOptions,
     );
@@ -62,22 +75,6 @@ export class KeyringsController extends AbstractController {
     });
   }
 
-  @Get(':_id([0-9a-fA-F]{24})')
-  @ApiParam({ name: '_id', type: String })
-  @ApiReadResponseDecorator(KeyringsDto)
-  public async read(
-    @Param('_id', ObjectIdValidationPipe) _id: Types.ObjectId,
-    @Res() res: Response,
-  ): Promise<Response> {
-    const data = await this._service.findById(_id, {
-      token: 0,
-    });
-    return res.status(HttpStatus.OK).json({
-      statusCode: HttpStatus.OK,
-      data,
-    });
-  }
-
   @Delete(':_id([0-9a-fA-F]{24})')
   @ApiParam({ name: '_id', type: String })
   @ApiDeletedResponseDecorator(KeyringsDto)

apps/web/src/pages/settings.vue

@@ -95,6 +95,12 @@ export default defineNuxtComponent({
         label: 'Tâches planifiés',
         _acl: '/core/cron',
       },
+      {
+        route: '/settings/keyrings',
+        icon: 'mdi-key-chain',
+        label: 'trousseau de clés API',
+        _acl: '/core/keyrings',
+      },
       {
         route: '/settings/health',
         icon: 'mdi-heart-pulse',

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

@@ -0,0 +1,147 @@
+<template lang="pug">
+.sesame-page
+  .sesame-page-content
+    sesame-core-twopan.col(
+      table-title='Trousseau de clés API'
+      :simple='true'
+      :loading='pending'
+      :rows='keyrings?.data || []'
+      :total='keyrings?.total || 0'
+      :columns='columns'
+      :visible-columns='visibleColumns'
+      :refresh='refresh'
+      row-key='_id'
+    )
+      template(#top-table)
+        sesame-core-pan-filters(:columns='columns' mode='simple' placeholder='Rechercher par nom, rôle, réseau autorisé...')
+      template(v-slot:row-actions='{ row }')
+        q-btn(
+          :disable='!hasPermission("/core/keyrings", "delete")'
+          color='negative'
+          icon='mdi-delete'
+          size='sm'
+          flat
+          round
+          dense
+          @click='deleteKeyring(row)'
+        )
+          q-tooltip.text-body2.bg-negative.text-white(
+            v-if="!hasPermission('/core/keyrings', 'delete')"
+            anchor="top middle"
+            self="center middle"
+          ) Vous n'avez pas les permissions nécessaires pour effectuer cette action
+</template>
+
+<script lang="ts">
+export default defineNuxtComponent({
+  name: 'SettingsKeyringsPage',
+  data() {
+    return {
+      visibleColumns: ['name', 'allowedNetworks', 'roles', 'suspendedAt'],
+      columns: [
+        {
+          name: 'name',
+          label: 'Nom',
+          field: (row) => row.name,
+          align: 'left',
+          sortable: true,
+        },
+        {
+          name: 'allowedNetworks',
+          label: 'Réseaux autorisés',
+          field: (row) => (Array.isArray(row.allowedNetworks) ? row.allowedNetworks.join(', ') : ''),
+          align: 'left',
+          sortable: false,
+        },
+        {
+          name: 'roles',
+          label: 'Rôles',
+          field: (row) => (Array.isArray(row.roles) ? row.roles.join(', ') : ''),
+          align: 'left',
+          sortable: false,
+        },
+        {
+          name: 'suspendedAt',
+          label: 'Suspendu le',
+          field: (row) => (row.suspendedAt ? this.$dayjs(row.suspendedAt).format('DD/MM/YYYY HH:mm:ss') : 'N/A'),
+          align: 'left',
+          sortable: true,
+        },
+      ],
+    }
+  },
+  async setup() {
+    const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination()
+    const { hasPermission } = useAccessControl()
+    const paginationOptions = useHttpPaginationOptions()
+
+    const {
+      data: keyrings,
+      error,
+      pending,
+      refresh,
+      execute,
+    } = await useHttp<any>('/core/keyrings', {
+      method: 'get',
+      ...paginationOptions,
+    })
+    if (error.value) {
+      console.error(error.value)
+      throw showError({
+        statusCode: 500,
+        statusMessage: 'Internal Server Error',
+      })
+    }
+
+    useHttpPaginationReactive(paginationOptions, execute)
+
+    return {
+      keyrings,
+      pending,
+      refresh,
+      hasPermission,
+    }
+  },
+  methods: {
+    async deleteKeyring(keyring: Record<string, any>): Promise<void> {
+      this.$q
+        .dialog({
+          title: 'Confirmation',
+          message: 'Voulez-vous vraiment supprimer cette clé API ?',
+          persistent: true,
+          ok: {
+            push: true,
+            color: 'positive',
+            label: 'Supprimer',
+          },
+          cancel: {
+            push: true,
+            color: 'negative',
+            label: 'Annuler',
+          },
+        })
+        .onOk(() => {
+          this.$http
+            .delete(`/core/keyrings/${keyring._id}`)
+            .then(() => {
+              this.$q.notify({
+                message: 'La clé API a été supprimée.',
+                color: 'positive',
+                position: 'top-right',
+                icon: 'mdi-check-circle-outline',
+              })
+              this.refresh()
+            })
+            .catch((error: any) => {
+              this.$q.notify({
+                message: `Impossible de supprimer la clé API : ${error?.response?._data?.message || 'erreur inconnue'}`,
+                color: 'negative',
+                position: 'top-right',
+                icon: 'mdi-alert-circle-outline',
+              })
+            })
+        })
+    },
+  },
+})
+</script>