@ouestfrance/sipa-bms-ui 8.6.0 → 8.8.0

package/src/components/layout/UiPopoverMenu.vue

@@ -133,7 +133,7 @@ const listener = () => {
   width: var(--ui-menu-width, auto);
   width: 400px;
   position: fixed;
-  z-index: 10;
+  z-index: var(--bms-z-index-fixed);
   display: block;
   pointer-events: none;
   opacity: 0;

package/src/components/navigation/BmsMenu.vue

@@ -96,7 +96,7 @@ const toggleMenu = (newMenuState: boolean = true) =>
     margin: 1.5rem;
     padding: 0;
     border-radius: 0.5rem;
-    z-index: 10;
+    z-index: var(--bms-z-index-fixed);
   }
 
   &__copyright {

package/src/components/table/BmsServerTable.vue

@@ -4,7 +4,10 @@ import BmsPagination from '@/components/table/BmsPagination.vue';
 import UiBmsTable from '@/components/table/UiBmsTable.vue';
 import UiFilterButton from '@/components/table/UiFilterButton.vue';
 import { usePagination } from '@/composables/pagination.composable';
-import { useSearch } from '@/composables/search.composable';
+import {
+  reflectFiltersToPath,
+  useSearch,
+} from '@/composables/search.composable';
 import { useSort } from '@/composables/sort.composable';
 import {
   Filter,
@@ -151,12 +154,15 @@ const {
   isSavedFilterActive,
   resetFilters,
   selectSavedFilter,
+  updateFiltersFromProps,
 } = useSearch(props.persistent, props.filters, props.defaultFiltersOpened);
 
 const emits = defineEmits<{
   deleteSavedFilter: [value: SavedFilter];
   saveFilter: [value: SavedFilter];
   'update:selectMode': [selectMode: SelectMode];
+  filterInput: [{ filterKey: string; value: any; e: InputEvent }];
+  filterChange: [{ filterKey: string; value: any }];
 }>();
 
 const loading = ref<boolean>(false);
@@ -196,6 +202,14 @@ watch([currentPage, isMounting], () => {
     fetchData();
   }
 });
+watch(
+  () => props.filters,
+  () => {
+    updateFiltersFromProps(props.filters);
+    reflectFiltersToPath(filters.value);
+  },
+  { deep: true },
+);
 
 watch(
   [() => filters.value, () => sort.value, size, search],
@@ -324,8 +338,9 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
             :canSaveFilters="canSaveFilters"
             @saveFilter="onSaveFilter"
             @resetFilters="resetFilters"
-          >
-          </BmsTableFilters>
+            @filterInput="(filterEvent) => emits('filterInput', filterEvent)"
+            @filterChange="(filterEvent) => emits('filterChange', filterEvent)"
+          />
         </div>
       </Transition>
     </template>

package/src/components/table/BmsTable.vue

@@ -85,11 +85,14 @@ const {
   resetFilters,
   selectSavedFilter,
   resetAllFilters,
+  updateFiltersFromProps,
 } = useSearch(props.persistent, props.filters, props.defaultFiltersOpened);
 
 const emits = defineEmits<{
-  (e: 'deleteSavedFilter', value: SavedFilter): void;
-  (e: 'saveFilter', value: SavedFilter): void;
+  deleteSavedFilter: [value: SavedFilter];
+  saveFilter: [value: SavedFilter];
+  filterInput: [{ filterKey: string; value: any; e: InputEvent }];
+  filterChange: [{ filterKey: string; value: any }];
 }>();
 
 const selectedItems: Ref<unknown[]> = defineModel('selectedItems', {
@@ -116,6 +119,14 @@ const getFilteredItems = () => {
 
 const isMounting = ref(true);
 
+watch(
+  () => props.filters,
+  () => {
+    updateFiltersFromProps(props.filters);
+  },
+  { deep: true },
+);
+
 watchEffect(
   async () => {
     isMounting.value =
@@ -237,6 +248,8 @@ const onSelectAll = () => {
             :canSaveFilters="canSaveFilters"
             @saveFilter="onSaveFilter"
             @reset-filters="resetFilters"
+            @filterInput="(filterEvent) => emits('filterInput', filterEvent)"
+            @filterChange="(filterEvent) => emits('filterChange', filterEvent)"
           />
         </div>
       </Transition>

package/src/components/table/BmsTableFilters.vue

@@ -51,6 +51,14 @@
           "
           :valueTo="transformValueForComponent(filter?.valueTo, filter.type)"
           :options="getFilterOptions(filter) as any"
+          @input="
+            (e: InputEvent) =>
+              $emits('filterInput', {
+                filterKey: filter.key,
+                value: (e.target as HTMLInputElement).value,
+                e,
+              })
+          "
         />
       </span>
     </div>
@@ -101,9 +109,11 @@ const props = withDefaults(
 );
 
 const $emits = defineEmits<{
-  (e: 'update:modelValue', filters: Filter[]): void;
-  (e: 'saveFilter', value: SavedFilter): void;
-  (e: 'resetFilters'): void;
+  'update:modelValue': [filters: Filter[]];
+  saveFilter: [value: SavedFilter];
+  resetFilters: [];
+  filterInput: [{ filterKey: string; value: any; e: InputEvent }];
+  filterChange: [{ filterKey: string; value: any }];
 }>();
 
 const savedModalOpened: Ref<boolean> = ref<boolean>(false);
@@ -112,10 +122,11 @@ const nameInput: Ref<typeof BmsInputText | null> = ref(null);
 
 const onFilter = (key: string, inputValue: string, valueKey: any): void => {
   let filter = props.modelValue.find((f) => f.key === key);
+  let updatedValue;
   if (filter) {
     switch (filter.type) {
       case 'boolean':
-        filter.value =
+        updatedValue =
           inputValue === 'true' ? true : inputValue === 'false' ? false : null;
         break;
       case 'select':
@@ -123,13 +134,14 @@ const onFilter = (key: string, inputValue: string, valueKey: any): void => {
       case 'betweenDate':
       case 'betweenDateTime':
       case 'betweenNumber':
-        filter[valueKey as keyof Filter] =
-          inputValue === 'null' ? null : inputValue;
+        updatedValue = inputValue === 'null' ? null : inputValue;
         break;
       default:
-        filter.value = inputValue;
+        updatedValue = inputValue;
         break;
     }
+    filter[valueKey as keyof Filter] = updatedValue;
+    $emits('filterChange', { filterKey: key, value: updatedValue });
   }
   $emits('update:modelValue', props.modelValue);
 };

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 {
@@ -204,7 +206,7 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
     margin: 0;
     background: var(--bms-white);
     width: 100%;
-    z-index: 100;
+    z-index: var(--bms-z-index-tooltip);
     max-height: 300px;
     overflow-y: auto;
 

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/plugins/notifications/NotificationWidget.vue

@@ -100,7 +100,7 @@ const closeDetails = () => {
   top: var(--bms-notifications-top);
   width: 100%;
   max-width: var(--bms-notifications-width);
-  z-index: 20;
+  z-index: var(--bms-z-index-fixed);
 
   &__item {
     &:not(:first-child) {

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,