@ouestfrance/sipa-bms-ui 8.8.1 → 8.9.1

package/src/showroom/pages/server-table.vue

@@ -1,5 +1,4 @@
 <template>
-  {{ filters }}
   <bms-server-table
     v-model:selectedItems="selectedItems"
     v-model:selectMode="selectMode"
@@ -14,8 +13,6 @@
     :total="totalItems"
     @saveFilter="onSaveFilter"
     @deleteSavedFilter="onDeleteSavedFilter"
-    @filterInput="onFilterInput"
-    @filterChange="onFilterChange"
   >
     <template #default="{ row }: { row: any }">
       <td>
@@ -41,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Filter, SavedFilter, SelectMode } from '@/models';
+import { Filter, InputType, SavedFilter, SelectMode } from '@/models';
 import axios from 'axios';
 import { computed, Ref, ref } from 'vue';
 import { isEmptyStringOrNotDefined } from '@/helpers';
@@ -52,27 +49,19 @@ const serverHeaders = [
   { label: 'Type', key: 'type' },
 ];
 
-const typeOptions = ref([
-  'Grass',
-  'Poison',
-  'Fire',
-  'Flying',
-  'Water',
-  'Bug',
-  'Normal',
-  'Electric',
-  'Ground',
-  'Fairy',
-  'Fighting',
-  'Psychic',
-  'Rock',
-  'Steel',
-  'Ice',
-  'Ghost',
-  'Dragon',
-]);
+const pokemonTypeAutocompleteRequest = async (
+  abortController: AbortController,
+) => {
+  const { data } = await axios.get('http://localhost:3000/pokemon-types', {
+    signal: abortController.signal,
+  });
+
+  return {
+    data,
+  };
+};
 
-const filters = computed(() => [
+const filters: Filter[] = [
   {
     label: 'Name',
     key: 'name',
@@ -82,15 +71,15 @@ const filters = computed(() => [
     label: 'Number',
     key: 'idBetween',
     type: 'betweenNumber',
-    inputType: 'number',
+    inputType: InputType.NUMBER,
   },
   {
     label: 'Type',
     key: 'type',
-    type: 'autocomplete',
-    autocompleteOptions: typeOptions.value,
+    type: 'autocompleteServer',
+    autocompleteRequest: pokemonTypeAutocompleteRequest,
   },
-]);
+];
 
 const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);
 const selectedItems = ref<any[]>([]);
@@ -106,33 +95,6 @@ const onDeleteSavedFilter = (savedFilter: SavedFilter) => {
     (filter) => filter.id !== savedFilter.id,
   );
 };
-
-const onFilterInput = ({
-  filterKey,
-  e,
-}: {
-  filterKey: string;
-  e: InputEvent;
-}) => {
-  typeOptions.value = [];
-  console.log(
-    `user filtered key ${filterKey} with val ${(e.target as HTMLInputElement)?.value}`,
-  );
-};
-
-const onFilterChange = ({
-  filterKey,
-  e,
-}: {
-  filterKey: string;
-  e: InputEvent;
-}) => {
-  typeOptions.value = [];
-  console.log(
-    `user filtered key ${filterKey} changed with val ${(e.target as HTMLInputElement)?.value}`,
-  );
-};
-
 const customFetchData = async (
   params: any,
   abortController: AbortController,
@@ -170,22 +132,4 @@ const customFetchData = async (
     data,
   };
 };
-
-const customQueryBuilder = (
-  size: number,
-  _: number,
-  page: number,
-  search: string,
-) => {
-  const params: any = {
-    size: '' + size,
-    page: '' + (page + 1),
-  };
-
-  if (search) {
-    params['beer_name'] = search;
-  }
-
-  return params;
-};
 </script>

package/src/showroom/server.js

@@ -8,6 +8,30 @@ app.use(cors());
 
 const port = 3000;
 
+app.get('/pokemon-types', (req, res) => {
+  res.send({
+    data: [
+      { label: 'Grass', value: 'Grass' },
+      { label: 'Poison', value: 'Poison' },
+      { label: 'Fire', value: 'Fire' },
+      { label: 'Flying', value: 'Flying' },
+      { label: 'Water', value: 'Water' },
+      { label: 'Bug', value: 'Bug' },
+      { label: 'Normal', value: 'Normal' },
+      { label: 'Electric', value: 'Electric' },
+      { label: 'Ground', value: 'Ground' },
+      { label: 'Fairy', value: 'Fairy' },
+      { label: 'Fighting', value: 'Fighting' },
+      { label: 'Psychic', value: 'Psychic' },
+      { label: 'Rock', value: 'Rock' },
+      { label: 'Steel', value: 'Steel' },
+      { label: 'Ice', value: 'Ice' },
+      { label: 'Ghost', value: 'Ghost' },
+      { label: 'Dragon', value: 'Dragon' },
+    ],
+  });
+});
+
 app.get('/pokemons', (req, res) => {
   let data = pokemons;
   let total = 0;