@ouestfrance/sipa-bms-ui 8.5.4 → 8.7.0

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/components/table/UiBmsTable.stories.js

@@ -1,6 +1,7 @@
 import UiBmsTable from '@/components/table/UiBmsTable.vue';
 import { Save, Trash } from 'lucide-vue-next';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
+import { ColumnType } from '@/models/table.model';
 
 import template from '@/documentation/template_internal_component.mdx';
 
@@ -379,6 +380,42 @@ SelectableDisabled.args = {
   selectableDisabled: true,
   totalSize: 2,
 };
+export const Typed = Template.bind({});
+Typed.args = {
+  headers: [
+    {
+      label: 'Column boolean',
+      key: 'col1',
+      align: 'start',
+      columnType: ColumnType.Boolean,
+    },
+    {
+      label: 'Column date',
+      key: 'col2',
+      align: 'center',
+      columnType: ColumnType.Date,
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: true,
+      col2: '2024-10-10T12:00:00Z',
+      col3: 'Value3',
+    },
+    {
+      col1: false,
+      col2: '2025-01-01T18:00:00Z',
+      col3: 'Value3',
+    },
+  ],
+  hasFilters: true,
+  totalSize: 2,
+};
 
 const TemplateWithActionColumn = (args) => ({
   components: {

package/src/components/table/UiBmsTableCell.vue

@@ -0,0 +1,25 @@
+<template>
+  <template v-if="cell.columnType === ColumnType.Boolean">
+    <BmsChip v-if="cellValue" :color="ChipColor.Green">Oui</BmsChip>
+    <BmsChip v-else>Non</BmsChip>
+  </template>
+  <template v-else-if="cell.columnType === ColumnType.Date">
+    <BmsRelativeTime :relativeTo="relativeToTime" />
+  </template>
+  <template v-else>
+    {{ cellValue }}
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ChipColor, ColumnType, TableHeader } from '@/models';
+import _get from 'lodash/get';
+import BmsChip from '../form/BmsChip.vue';
+import { computed } from 'vue';
+import BmsRelativeTime from '../utils/BmsRelativeTime.vue';
+
+const props = defineProps<{ cell: TableHeader; item: any }>();
+
+const cellValue = computed(() => _get(props.item, props.cell.key) ?? '');
+const relativeToTime = computed(() => new Date(cellValue.value)?.getTime());
+</script>

package/src/components/table/UiBmsTableRow.stories.js

@@ -1,4 +1,5 @@
 import UiBmsTableRow from '@/components/table/UiBmsTableRow.vue';
+import { ColumnType } from '@/models/table.model';
 
 export default {
   title: 'Composants/table/UiBmsTableRow',
@@ -141,3 +142,32 @@ IsChildElement.args = {
     },
   },
 };
+
+export const Typed = Template.bind({});
+Typed.args = {
+  headers: [
+    {
+      label: 'Column boolean',
+      key: 'col1',
+      align: 'start',
+      columnType: ColumnType.Boolean,
+    },
+    {
+      label: 'Column date',
+      key: 'col2',
+      align: 'center',
+      columnType: ColumnType.Date,
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  selectedItems: [],
+  item: {
+    col1: true,
+    col2: '2022-01-01',
+    col3: 'Value3',
+  },
+};

package/src/components/table/UiBmsTableRow.vue

@@ -37,7 +37,7 @@
             :row="item.childElement"
             :isChildElement="isChildElement"
           >
-            {{ _get(item.childElement, cell.key) || '' }}
+            <UiBmsTableCell :item="item.childElement" :cell="cell" />
           </slot>
         </div>
         <div v-else-if="cell?.action" class="bms-table__row__cell--action">
@@ -53,7 +53,7 @@
           :row="item"
           :isChildElement="isChildElement"
         >
-          {{ _get(item, cell.key) || '' }}
+          <UiBmsTableCell :item="item" :cell="cell" />
         </slot>
       </td>
     </slot>
@@ -68,6 +68,7 @@ import _get from 'lodash/get';
 import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
 import BmsTooltip from '../feedback/BmsTooltip.vue';
 import { CornerDownRight } from 'lucide-vue-next';
+import UiBmsTableCell from './UiBmsTableCell.vue';
 
 interface Props {
   item: any;

package/src/components/utils/BmsRelativeTime.vue

@@ -25,7 +25,7 @@ const timeout = ref<any>();
 const date = ref<string>();
 
 const formattedDate = computed(() => {
-  return new Date(props.relativeTo).toLocaleString();
+  return new Date(props.relativeTo)?.toLocaleString() ?? '';
 });
 
 onMounted(() => {

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/models/table.model.ts

@@ -1,6 +1,12 @@
 import { InputType } from './form.model';
 import { Sort, SortFunction } from './sort.model';
 
+export enum ColumnType {
+  Boolean = 'Boolean',
+  Date = 'Date',
+  String = 'String',
+}
+
 export interface TableHeader {
   label: string;
   key: string;
@@ -10,6 +16,7 @@ export interface TableHeader {
   sortable?: boolean;
   sortFunction?: SortFunction;
   action?: boolean;
+  columnType?: ColumnType;
 }
 
 export interface ServerTableRequestParams {

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;
 }