@ouestfrance/sipa-bms-ui 8.6.0 → 8.7.0

package/src/composables/search.composable.spec.ts

@@ -6,6 +6,7 @@ import {
 } from './search.composable';
 import { defineComponent, nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
+import { Filter } from '@/models';
 
 vi.mock('vue-router', () => ({
   useRoute: vi.fn(),
@@ -1292,5 +1293,79 @@ describe('search and filter composable', () => {
         ]);
       });
     });
+
+    describe('updateFiltersFromProps', () => {
+      test('should update select options', () => {
+        const wrapper = factory();
+        const filter: Filter = {
+          key: 'filter0',
+          label: 'Zéro',
+          type: 'select',
+          selectOptions: [{ label: 'option1', value: '1' }],
+          value: 1,
+        };
+
+        wrapper.vm.filters = [filter];
+        wrapper.vm.updateFiltersFromProps([{ ...filter, selectOptions: [] }]);
+        expect(wrapper.vm.filters).toStrictEqual([
+          { ...filter, selectOptions: [], value: null },
+        ]);
+      });
+
+      test('should not change filter other than options', () => {
+        const wrapper = factory();
+        const filter: Filter = {
+          key: 'filter0',
+          label: 'Zéro',
+          type: 'select',
+          selectOptions: [{ label: 'option1', value: '1' }],
+        };
+
+        wrapper.vm.filters = [filter];
+        wrapper.vm.updateFiltersFromProps([
+          {
+            key: 'filter0',
+            label: 'new label',
+            type: 'input',
+            selectOptions: [{ label: 'option1', value: '1' }],
+          },
+        ]);
+        expect(wrapper.vm.filters).toStrictEqual([filter]);
+      });
+      test('should keep value if is in new options', () => {
+        const wrapper = factory();
+        const filter: Filter = {
+          key: 'filter0',
+          label: 'Zéro',
+          type: 'select',
+          selectOptions: [
+            { label: 'option1', value: '1' },
+            { label: 'option2', value: '2' },
+          ],
+        };
+
+        wrapper.vm.filters = [filter];
+        wrapper.vm.updateFiltersFromProps([
+          {
+            key: 'filter0',
+            label: 'Zéro',
+            type: 'select',
+            selectOptions: [
+              { label: 'option1', value: '1' },
+              { label: 'option3', value: '3' },
+            ],
+          },
+        ]);
+        expect(wrapper.vm.filters).toStrictEqual([
+          {
+            ...filter,
+            selectOptions: [
+              { label: 'option1', value: '1' },
+              { label: 'option3', value: '3' },
+            ],
+          },
+        ]);
+      });
+    });
   });
 });

package/src/composables/search.composable.ts

@@ -183,6 +183,7 @@ export const useSearch = (
       reflectSearchToUserPref(search.value);
     }
   });
+
   watch(
     () => filters,
     () => {
@@ -233,19 +234,23 @@ export const useSearch = (
     });
   };
 
+  const resetFilterValue = (filter: Filter) => {
+    let resetFilter = { ...filter };
+    const valueKeys = ['value', 'valueFrom', 'valueTo'];
+    valueKeys.forEach((key) => {
+      if (
+        resetFilter[key as keyof Filter] !== null &&
+        resetFilter[key as keyof Filter] !== undefined
+      ) {
+        resetFilter[key as keyof Filter] = null;
+      }
+    });
+    return resetFilter;
+  };
+
   const resetFilters = () => {
     filters.value = filters.value.map((filter) => {
-      let resetFilter = { ...filter };
-      const valueKeys = ['value', 'valueFrom', 'valueTo'];
-      valueKeys.forEach((key) => {
-        if (
-          resetFilter[key as keyof Filter] !== null &&
-          resetFilter[key as keyof Filter] !== undefined
-        ) {
-          resetFilter[key as keyof Filter] = null;
-        }
-      });
-      return resetFilter;
+      return resetFilterValue(filter);
     });
   };
 
@@ -264,6 +269,43 @@ export const useSearch = (
     }
   };
 
+  const updateFiltersFromProps = (updatedFilters: Filter[]) => {
+    filters.value = filters.value.map((filter) => {
+      const updatedFilter = updatedFilters.find((f) => f.key === filter.key);
+
+      if (updatedFilter) {
+        let mergedFilter = { ...filter };
+
+        if (updatedFilter.autocompleteOptions)
+          mergedFilter.autocompleteOptions = updatedFilter.autocompleteOptions;
+        if (updatedFilter.selectOptions)
+          mergedFilter.selectOptions = updatedFilter.selectOptions;
+
+        const value = filter.value || filter.valueFrom || filter.valueTo;
+
+        const isValueValidSelectOption =
+          updatedFilter.type === 'select' &&
+          updatedFilter.selectOptions?.find((option) => option.value === value);
+
+        const isValueValidAutocompleteOption =
+          updatedFilter.type === 'autocomplete' &&
+          updatedFilter.autocompleteOptions?.find((option) => option === value);
+
+        if (
+          value &&
+          !isValueValidSelectOption &&
+          !isValueValidAutocompleteOption
+        ) {
+          mergedFilter = resetFilterValue(mergedFilter);
+        }
+
+        return mergedFilter;
+      } else {
+        return filter;
+      }
+    });
+  };
+
   return {
     search,
     reflect,
@@ -277,6 +319,7 @@ export const useSearch = (
     resetFilters,
     selectSavedFilter,
     resetAllFilters,
+    updateFiltersFromProps,
   };
 };
 

package/src/plugins/field/FieldComponent.vue

@@ -24,17 +24,17 @@
       </span>
     </div>
 
-    <div v-if="captions?.length" class="field__captions">
+    <div v-if="captions?.length || errors?.length" class="field__captions">
       <div
+        v-if="captions?.length"
         v-for="caption in captions"
         :key="getCaptionIdentifier(caption)"
         class="information field__caption"
       >
         <BmsCaption :caption="caption" />
       </div>
-    </div>
-    <div v-if="errors?.length" class="field__errors">
       <div
+        v-if="errors?.length"
         v-for="error in computedErrors"
         :key="error.label"
         class="field__error"
@@ -186,7 +186,9 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
     --field-padding: 0.5em;
     --field-margin: 0;
     --field-label-font-weight: normal;
-    // color: var(--bms-grey-75);
+    .field__captions {
+      margin-top: 0.5rem;
+    }
   }
 
   &.is-error {

package/src/plugins/field/FieldDatalist.stories.js

@@ -27,15 +27,6 @@ Default.args = {
   })),
 };
 
-export const WithSelectedItem = Template.bind({});
-WithSelectedItem.args = {
-  currentSelectedItemIndex: 1,
-  options: ['toto', 'titi', 'tutu', 'tirlitititututatoooo'].map((i) => ({
-    label: i,
-    value: i,
-  })),
-};
-
 export const CanAddNewOption = Template.bind({});
 CanAddNewOption.args = {
   options: ['toto', 'titi', 'tutu', 'tirlitititututatoooo'].map((i) => ({

package/src/plugins/field/FieldDatalist.vue

@@ -1,29 +1,21 @@
 <template>
-  <ul
-    class="options-list"
-    data-testid="select-options"
-    @keydown.up="keyUp"
-    @keydown.down="keyDown"
-    @keydown.enter="keyEnter"
-  >
+  <ul class="options-list" data-testid="select-options">
     <li
       v-for="(option, index) in options"
       :key="index"
       :data-testid="option.value"
       :class="{
+        'datalist-option': true,
         selected: index === currentSelectedItemIndex,
         small,
       }"
-      @click.prevent="onClick(option)"
+      @click.stop="onClick(option)"
     >
       <slot name="option" :option="option">
         {{ option.label === null ? 'N/A' : option.label }}
       </slot>
     </li>
-    <li
-      v-if="displayNewOption"
-      @click.prevent="$emits('addNewOption', newOption)"
-    >
+    <li v-if="displayNewOption" @click.stop="$emits('addNewOption', newOption)">
       <slot name="new-option"> {{ newOption }} (nouvelle option) </slot>
     </li>
   </ul>
@@ -31,7 +23,7 @@
 
 <script setup lang="ts">
 import { InputOption } from '@/models';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 export interface Props {
   options: InputOption[];
@@ -52,17 +44,24 @@ const currentSelectedItemIndex = ref<number>(-1);
 const $emits = defineEmits<{
   select: [option: any];
   addNewOption: [option: string];
+  blur: [];
 }>();
 
 const keyDownEventListener = (ev: KeyboardEvent) => {
   if (props.isInputFocused) {
     switch (ev.key) {
       case 'ArrowDown':
+        ev.preventDefault();
         return keyDown();
       case 'ArrowUp':
+        ev.preventDefault();
         return keyUp();
       case 'Enter':
+        ev.preventDefault();
         return keyEnter();
+      case 'Escape':
+        ev.preventDefault();
+        return keyEscape();
       default:
         return;
     }
@@ -96,6 +95,10 @@ const keyEnter = () => {
   }
 };
 
+const keyEscape = () => {
+  $emits('blur');
+};
+
 const onClick = (option: { label: string; value: any }) => {
   $emits('select', option);
 };

package/src/plugins/field/field-component.model.ts

@@ -5,8 +5,8 @@ export interface FieldComponentProps {
   required?: boolean;
   optional?: boolean;
   helperText?: string;
-  errors?: string[] | Caption[];
-  captions?: string[] | Caption[];
+  errors?: (string | Caption)[];
+  captions?: (string | Caption)[];
   disabled?: boolean;
   small?: boolean;
 }

package/src/showroom/pages/autocomplete.vue

@@ -11,7 +11,6 @@
     :can-add-new-option="true"
     @add-new-option="onAddNewOption"
   />
-
   Valeur: {{ inputValueIcon }}
   <BmsAutocomplete
     label="Autocomplete avec icones"
@@ -26,6 +25,20 @@
     :options="optionsText"
     v-model="inputText"
   />
+
+  <BmsSelect
+    label="Select"
+    @blur="console.log('blur')"
+    v-model="select"
+    :options="optionsLabelValue"
+  />
+
+  <BmsMultiSelect
+    label="Multi-select"
+    v-model="multiSelect"
+    :options="optionsLabelValue"
+  />
+  <br />
 </template>
 
 <script setup lang="ts">
@@ -34,6 +47,14 @@ import { Heart, Cat } from 'lucide-vue-next';
 import { range } from 'lodash';
 import { ref } from 'vue';
 import BmsButton from '@/components/button/BmsButton.vue';
+import BmsSelect from '@/components/form/BmsSelect.vue';
+import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
+import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
+import RawAutocomplete from '@/components/form/RawAutocomplete.vue';
+import BmsInputText from '@/components/form/BmsInputText.vue';
+
+const select = ref('');
+const multiSelect = ref([]);
 
 const optionsLabelValue = ref(
   range(0, 30).map((i) =>

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

@@ -1,4 +1,5 @@
 <template>
+  {{ filters }}
   <bms-server-table
     v-model:selectedItems="selectedItems"
     v-model:selectMode="selectMode"
@@ -13,6 +14,8 @@
     :total="totalItems"
     @saveFilter="onSaveFilter"
     @deleteSavedFilter="onDeleteSavedFilter"
+    @filterInput="onFilterInput"
+    @filterChange="onFilterChange"
   >
     <template #default="{ row }: { row: any }">
       <td>
@@ -40,7 +43,7 @@
 <script lang="ts" setup>
 import { Filter, SavedFilter, SelectMode } from '@/models';
 import axios from 'axios';
-import { Ref, ref } from 'vue';
+import { computed, Ref, ref } from 'vue';
 import { isEmptyStringOrNotDefined } from '@/helpers';
 
 const serverHeaders = [
@@ -49,7 +52,27 @@ const serverHeaders = [
   { label: 'Type', key: 'type' },
 ];
 
-const filters = [
+const typeOptions = ref([
+  'Grass',
+  'Poison',
+  'Fire',
+  'Flying',
+  'Water',
+  'Bug',
+  'Normal',
+  'Electric',
+  'Ground',
+  'Fairy',
+  'Fighting',
+  'Psychic',
+  'Rock',
+  'Steel',
+  'Ice',
+  'Ghost',
+  'Dragon',
+]);
+
+const filters = computed(() => [
   {
     label: 'Name',
     key: 'name',
@@ -65,27 +88,9 @@ const filters = [
     label: 'Type',
     key: 'type',
     type: 'autocomplete',
-    autocompleteOptions: [
-      'Grass',
-      'Poison',
-      'Fire',
-      'Flying',
-      'Water',
-      'Bug',
-      'Normal',
-      'Electric',
-      'Ground',
-      'Fairy',
-      'Fighting',
-      'Psychic',
-      'Rock',
-      'Steel',
-      'Ice',
-      'Ghost',
-      'Dragon',
-    ],
+    autocompleteOptions: typeOptions.value,
   },
-];
+]);
 
 const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);
 const selectedItems = ref<any[]>([]);
@@ -102,6 +107,32 @@ const onDeleteSavedFilter = (savedFilter: SavedFilter) => {
   );
 };
 
+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,

package/src/showroom/pages/table.vue

@@ -1,5 +1,7 @@
 <template>
   <BmsBackButton :fallback="{ path: '/' }" />
+  <br />
+  <BmsButton @click="changeChoice">Change choice</BmsButton>
   <bms-table
     :headers="headers"
     :filters="filters"
@@ -13,6 +15,8 @@
     v-model:selectedItems="selectedItems"
     @saveFilter="onSaveFilter"
     @deleteSavedFilter="onDeleteSavedFilter"
+    @filterInput="onFilterInput"
+    @filterChange="onFilterChange"
   >
     <template #choice2="{ row }">
       <BmsTooltip tooltipText="tooltip">
@@ -140,7 +144,6 @@ const items = Array(100)
 
 const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);
 const selectedItems: Ref<any[]> = ref([]);
-
 const onSaveFilter = (savedFilter: SavedFilter) => {
   savedFilters.value.push(savedFilter);
 };
@@ -151,7 +154,28 @@ const onDeleteSavedFilter = (savedFilter: SavedFilter) => {
   );
 };
 
-const filters: Filter[] = [
+const onFilterInput = ({
+  filterKey,
+  e,
+  value,
+}: {
+  filterKey: string;
+  e: InputEvent;
+  value: any;
+}) => {
+  console.log(`Input in filter ${filterKey} with val ${value}`);
+};
+const onFilterChange = ({
+  filterKey,
+  value,
+}: {
+  filterKey: string;
+  value: any;
+}) => {
+  console.log(`Change in filter ${filterKey}  with val`, value);
+};
+
+const filters = ref<Filter[]>([
   {
     label: 'inputText Colonne 1',
     key: 'column1',
@@ -199,5 +223,20 @@ const filters: Filter[] = [
     customFilter: (item: any, value: any, target: string) =>
       item[target] > 0.5 === value,
   },
-];
+]);
+const changeChoice = () => {
+  filters.value = filters.value.map((f) =>
+    f.key === 'choice2'
+      ? {
+          ...f,
+          selectOptions: [
+            { label: 'huey', value: 'huey' },
+            { label: 'riri', value: 'riri' },
+            { label: 'fifi', value: 'fifi' },
+            { label: 'loulou', value: 'loulou' },
+          ],
+        }
+      : f,
+  );
+};
 </script>

package/dist/plugins/field/FieldDatalist.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/src/plugins/field/FieldDatalist.spec.ts

@@ -1,35 +0,0 @@
-import FieldDatalist, { type Props } from '@/plugins/field/FieldDatalist.vue';
-import { mount } from '@vue/test-utils';
-import { field } from '@/plugins/field';
-
-const factory = (props?: Props) => {
-  const wrapper = mount(FieldDatalist, {
-    global: {
-      plugins: [field],
-    },
-    props: {
-      isInputFocused: false,
-      options: [
-        { label: 'titi', value: 'i' },
-        { label: 'toto', value: 'o' },
-        { label: 'tutu', value: 'u' },
-      ],
-      modelValue: '',
-      ...props,
-    },
-    attachTo: document.body,
-  });
-
-  return { wrapper };
-};
-
-describe('FieldDatalist', () => {
-  it('should be able to select with keyboard', async () => {
-    const { wrapper } = factory();
-    const titi = wrapper.get('[data-testid="i"]');
-
-    expect(titi.classes()).toStrictEqual([]);
-    await wrapper.trigger('keydown.down');
-    expect(titi.classes()).toStrictEqual(['selected']);
-  });
-});