@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/table/BmsTableFilters.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="filters">
+    <div class="filters__header">
+      <div class="filters__header-title">
+        <FilterIcon />
+        Recherche avancée
+      </div>
+      <span class="input action">
+        <BmsIconButton
+          v-if="canSaveFilters"
+          class="save"
+          tooltipText="Sauvegarder le filtre"
+          @click="save"
+        >
+          <Save />
+        </BmsIconButton>
+        <BmsIconButton
+          class="reset"
+          tooltipText="Vider les champs"
+          @click="reset"
+        >
+          <RefreshCcw />
+        </BmsIconButton>
+      </span>
+    </div>
+    <div class="filters__inputs">
+      <span
+        v-for="filter in modelValue"
+        class="input"
+        :class="{
+          large: isBetweenFilter(filter),
+        }"
+        :key="filter.key"
+      >
+        <component
+          :is="getFilterComponent(filter.type)"
+          :label="filter.label"
+          :inputType="filter.inputType"
+          :modelValue="transformValueForComponent(filter?.value, filter.type)"
+          @update:modelValue="
+            ($event: any) => onFilter(filter.key, $event as string, 'value')
+          "
+          @update:valueFrom="
+            ($event: any) => onFilter(filter.key, $event as string, 'valueFrom')
+          "
+          @update:valueTo="
+            ($event: any) => onFilter(filter.key, $event as string, 'valueTo')
+          "
+          :valueFrom="
+            transformValueForComponent(filter?.valueFrom, filter.type)
+          "
+          :valueTo="transformValueForComponent(filter?.valueTo, filter.type)"
+          :options="getFilterOptions(filter) as any"
+        />
+      </span>
+    </div>
+    <BmsModal
+      v-model="savedModalOpened"
+      title="Sauvegarder votre filtre"
+      submitLabel="Sauvegarder"
+      @submit="onSavedFilterModalSubmit"
+    >
+      <div>
+        Vous pouvez sauvegarder votre recherche pour la retrouver plus
+        facilement.
+      </div>
+      <BmsInputText
+        ref="nameInput"
+        label="Nom de la sauvegarde"
+        v-model="savedFilterName"
+        placeholder="Nom"
+      />
+    </BmsModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Filter as FilterIcon, RefreshCcw, Save } from 'lucide-vue-next';
+import { Filter, FilterType, SavedFilter } from '@/models';
+import BmsSelect from '../form/BmsSelect.vue';
+import BmsAutocomplete from '../form/BmsAutocomplete.vue';
+import { useRoute } from 'vue-router';
+import { v4 as uuid } from 'uuid';
+import { nextTick, Ref, ref, watch } from 'vue';
+import { BmsInputDateTime, BmsInputText, BmsModal } from '@/index';
+import _cloneDeep from 'lodash/cloneDeep';
+import BmsIconButton from '../button/BmsIconButton.vue';
+import BmsBetweenInput from '@/components/form/BmsBetweenInput.vue';
+import { isBetweenFilter } from '@/composables/search.helper';
+
+const route = useRoute();
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: Filter[];
+    canSaveFilters?: boolean;
+  }>(),
+  {
+    canSaveFilters: false,
+  },
+);
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', filters: Filter[]): void;
+  (e: 'saveFilter', value: SavedFilter): void;
+  (e: 'resetFilters'): void;
+}>();
+
+const savedModalOpened: Ref<boolean> = ref<boolean>(false);
+const savedFilterName: Ref<string> = ref<string>('');
+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);
+  if (filter) {
+    switch (filter.type) {
+      case 'boolean':
+        filter.value =
+          inputValue === 'true' ? true : inputValue === 'false' ? false : null;
+        break;
+      case 'select':
+      case 'autocomplete':
+      case 'betweenDate':
+      case 'betweenDateTime':
+      case 'betweenNumber':
+        filter[valueKey as keyof Filter] =
+          inputValue === 'null' ? null : inputValue;
+        break;
+      default:
+        filter.value = inputValue;
+        break;
+    }
+  }
+  $emits('update:modelValue', props.modelValue);
+};
+
+const getFilterComponent = (type: FilterType) => {
+  switch (type) {
+    case 'boolean':
+      return BmsSelect;
+    case 'input':
+      return BmsInputText;
+    case 'inputDate':
+      return BmsInputDateTime;
+    case 'autocomplete':
+      return BmsAutocomplete;
+    case 'select':
+      return BmsSelect;
+    case 'betweenNumber':
+    case 'betweenDate':
+    case 'betweenDateTime':
+      return BmsBetweenInput;
+  }
+};
+
+const getFilterOptions = (
+  filter: Filter,
+): undefined | { label: string; value: string }[] | string[] => {
+  switch (filter.type) {
+    case 'boolean':
+      return [
+        { label: '', value: 'null' },
+        { label: 'Oui', value: 'true' },
+        { label: 'Non', value: 'false' },
+      ];
+    case 'autocomplete':
+      return filter.autocompleteOptions;
+    case 'select':
+      if (filter.selectOptions) {
+        return [{ label: '', value: 'null' }].concat(filter.selectOptions);
+      }
+      return [];
+    default:
+      return [];
+  }
+};
+
+const transformValueForComponent = (value: any, type: FilterType): string => {
+  const hasEmptyValue = (value: any) => value === null || value === undefined;
+  switch (type) {
+    case 'boolean':
+      return hasEmptyValue(value) ? 'null' : value.toString();
+    case 'select':
+      return hasEmptyValue(value) ? 'null' : value;
+    case 'input':
+    case 'inputDate':
+    case 'autocomplete':
+    case 'betweenDate':
+    case 'betweenNumber':
+      return hasEmptyValue(value) ? '' : value;
+    default:
+      return value;
+  }
+};
+
+const reset = () => {
+  $emits('resetFilters');
+};
+
+const save = () => {
+  savedModalOpened.value = true;
+  savedFilterName.value = '';
+};
+
+const onSavedFilterModalSubmit = () => {
+  $emits(
+    'saveFilter',
+    _cloneDeep({
+      id: uuid(),
+      name: savedFilterName.value,
+      route: (route.name as string) || route.path,
+      filters: props.modelValue.map((filter) => ({
+        target: filter.key,
+        value: filter.value,
+      })),
+    }),
+  );
+};
+
+watch(
+  () => savedModalOpened.value,
+  async () => {
+    await nextTick();
+    if (savedModalOpened.value && nameInput.value) {
+      nameInput.value.setFocus();
+    }
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.filters {
+  padding: 16px;
+  background: var(--bms-white);
+  border: 1px solid var(--bms-grey-10);
+  border-radius: var(--bms-border-radius-large);
+  margin-bottom: 16px;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+      gap: 1rem;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__inputs {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 16px;
+    align-items: flex-end;
+    row-gap: 8px;
+
+    .input {
+      width: 25%;
+      &.large {
+        width: 50%;
+      }
+      padding-right: 32px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,29 @@
+import DraggableList from '@/components/table/DraggableList.vue';
+
+export default {
+  title: 'Composants/table/DraggableList',
+  component: DraggableList,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    DraggableList,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <DraggableList v-bind="args">
+    <template #default={row}>{{row.value}}</template>
+    </DraggableList>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: [
+    { key: '1', value: 'titi' },
+    { key: '2', value: 'tutu' },
+  ],
+};

package/src/components/table/DraggableList.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    ref="dropZone"
+    class="draggable-list"
+    @drop="onDrop($event)"
+    @dragover.prevent
+    @dragenter.prevent
+  >
+    <div class="separator" @dragenter="onSeparatorDragEnter"></div>
+    <template v-for="item in modelValue">
+      <div
+        :data-id="item.key"
+        :draggable="gripped"
+        @dragend="endDrag"
+        class="draggable-row"
+        @dragstart="startDrag($event, item.key)"
+      >
+        <GripVertical
+          class="draggable-row__grabber"
+          @mousedown="() => (gripped = true)"
+          @mouseup="() => (gripped = false)"
+        />
+        <slot :row="item"></slot>
+        <BmsIconButton :mode="StatusType.Danger" @click="onRemove(item)">
+          <Trash />
+        </BmsIconButton>
+      </div>
+      <div class="separator" @dragenter="onSeparatorDragEnter"></div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { GripVertical, Trash } from 'lucide-vue-next';
+import { BmsIconButton, StatusType } from '@/index';
+
+const props = defineProps<{
+  modelValue: { key: string; value: any }[];
+}>();
+
+const emits = defineEmits<{ 'update:modelValue': [modelValue: any[]] }>();
+
+const dropZone = ref<HTMLElement | null>(null);
+const gripped = ref(false);
+
+const getElementCentralYPosition = (element: any) => {
+  return (
+    element.getBoundingClientRect().y +
+    element.getBoundingClientRect().height / 2
+  );
+};
+
+const onMouseDownGrip = () => {
+  gripped.value = true;
+};
+
+const startDrag = (evt: any, itemKey: any) => {
+  if (gripped.value) {
+    if (dropZone.value) dropZone.value.style.borderColor = 'var(--bms-main-50)';
+    evt.dataTransfer.dropEffect = 'move';
+    evt.dataTransfer.effectAllowed = 'move';
+    evt.dataTransfer.setData('itemKey', itemKey);
+  }
+};
+
+const removeSeparators = () => {
+  Array.from(document.getElementsByClassName('separator')).forEach(
+    (el: Element) => {
+      (el as HTMLDivElement).classList.remove('visible');
+    },
+  );
+};
+
+const endDrag = () => {
+  removeSeparators();
+  if (dropZone.value) dropZone.value.style.borderColor = 'transparent';
+  gripped.value = false;
+};
+
+const onDrop = (evt: any) => {
+  const itemKey = evt.dataTransfer.getData('itemKey');
+  if (itemKey) {
+    addItemToSelectedList(itemKey, evt);
+  }
+  endDrag();
+};
+
+const onSeparatorDragEnter = (evt: any) => {
+  removeSeparators();
+  evt.target.classList.add('visible');
+};
+
+const addItemToSelectedList = (droppedItemKey: any, event: any) => {
+  const droppedItem = props.modelValue.find((i) => i.key === droppedItemKey);
+  const newSelected: any[] = [];
+  const container = document.getElementsByClassName('draggable-list')[0];
+  const listElements = Array.from(container.children).filter((c) =>
+    c.classList.contains('draggable-row'),
+  );
+  if (listElements.length > 0) {
+    let inserted = false;
+    listElements.forEach((currentItem, i) => {
+      const itemKey = currentItem.getAttribute('data-id');
+      if (itemKey !== droppedItemKey) {
+        // ignore child if same element is being moved
+        if (event.y < getElementCentralYPosition(currentItem) && !inserted) {
+          // above and not inserted
+          newSelected.push(droppedItem);
+          inserted = true;
+        }
+        newSelected.push(props.modelValue[i]);
+      }
+    });
+
+    if (!inserted) {
+      // was not inserted because it is positionned at the end of the list
+      newSelected.push(droppedItem);
+    }
+  } else {
+    newSelected.push(droppedItem);
+  }
+  emits('update:modelValue', newSelected);
+};
+
+const onRemove = (item: any) => {
+  emits(
+    'update:modelValue',
+    props.modelValue.filter((i) => i.key !== item.key),
+  );
+};
+</script>
+
+<style scoped lang="scss">
+.draggable-list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--bms-border-radius);
+  border: 2px dashed transparent;
+  padding: 2em 0.5em;
+
+  .draggable-row {
+    padding: 1em;
+    border: 1px solid var(--bms-grey-25);
+    border-radius: var(--bms-border-radius);
+    display: flex;
+    gap: 1em;
+    align-items: center;
+    justify-content: space-between;
+    .draggable-row__grabber {
+      cursor: grab;
+    }
+  }
+}
+
+.draggable-list-move,
+.draggable-list-enter-active,
+.draggable-list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.separator {
+  width: 100%;
+  margin: 0;
+  transition: all 0.2s ease;
+  height: 2px;
+  margin: 0.5em 0;
+  background-color: transparent;
+  &.visible {
+    margin: 1.5em 0;
+    background: radial-gradient(
+      circle,
+      var(--bms-main-50) 20%,
+      var(--bms-main-10) 100%
+    );
+  }
+}
+</style>