@ouestfrance/sipa-bms-ui 8.48.2 → 8.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.48.2",
+  "version": "8.49.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

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

@@ -3,6 +3,7 @@ import BmsButton from '@/components/button/BmsButton.vue';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
 import { BmsTag } from '@/index';
 import { Save, Trash, Pencil } from 'lucide-vue-next';
+import { ref } from 'vue';
 
 export default {
   title: 'Composants/table/Table',
@@ -1398,3 +1399,72 @@ DoWithRowSelection.args = {
   selectable: true,
   selectedItems: [],
 };
+
+const players = [
+  { name: 'Maignan', position: 'Gardien' },
+  { name: 'Pavard', position: 'Défenseur' },
+  { name: 'Upamecano', position: 'Défenseur' },
+  { name: 'Hernandez', position: 'Défenseur' },
+  { name: 'Camavinga', position: 'Milieu' },
+  { name: 'Tchouameni', position: 'Milieu' },
+  { name: 'Griezmann', position: 'Milieu' },
+  { name: 'Mbappé', position: 'Attaquant' },
+];
+
+const draggableHeaders = [
+  { key: 'name', label: 'Joueur' },
+  { key: 'position', label: 'Poste' },
+];
+
+const DraggableTemplate = () => ({
+  components: { BmsTable },
+  setup() {
+    const items = ref([...players]);
+    const onReorder = (reordered) => { items.value = reordered; };
+    return { items, onReorder, draggableHeaders };
+  },
+  template: `
+    <div>
+      <BmsTable
+        :items="items"
+        :headers="draggableHeaders"
+        :disable-search="true"
+        draggable
+        @reorder="onReorder"
+      />
+      <pre style="margin-top: 1rem; font-size: 0.75rem; color: #666;">Ordre actuel : {{ items.map(i => i.name).join(' → ') }}</pre>
+    </div>
+  `,
+});
+
+export const Draggable = DraggableTemplate.bind({});
+Draggable.storyName = 'Draggable (réordonnancement)';
+
+const DraggableSelectableTemplate = () => ({
+  components: { BmsTable },
+  setup() {
+    const items = ref([...players]);
+    const selectedItems = ref([]);
+    const onReorder = (reordered) => { items.value = reordered; };
+    return { items, selectedItems, onReorder, draggableHeaders };
+  },
+  template: `
+    <div>
+      <BmsTable
+        v-model:selectedItems="selectedItems"
+        :items="items"
+        :headers="draggableHeaders"
+        :disable-search="true"
+        selectable
+        draggable
+        @reorder="onReorder"
+      />
+      <pre style="margin-top: 1rem; font-size: 0.75rem; color: #666;">Ordre : {{ items.map(i => i.name).join(' → ') }}
+Sélection : {{ selectedItems.map(i => i.name).join(', ') || '—' }}</pre>
+    </div>
+  `,
+});
+
+export const DraggableSelectable = DraggableSelectableTemplate.bind({});
+DraggableSelectable.storyName = 'Draggable + Selectable';
+DraggableSelectable.parameters = { chromatic: { disable: true } };

package/src/components/table/BmsTable.vue

@@ -45,6 +45,7 @@ interface UiTableProps {
   selectableDisabled?: boolean;
   selectMode?: SelectMode.DEFAULT | SelectMode.SINGLE;
   customSearch?: (item: unknown, searchValue: string) => boolean;
+  draggable?: boolean;
 }
 
 const props = withDefaults(defineProps<UiTableProps>(), {
@@ -105,6 +106,7 @@ const emits = defineEmits<{
   saveFilter: [value: SavedFilter];
   filterInput: [{ filterKey: string; value: any; e: InputEvent }];
   filterChange: [{ filterKey: string; value: any }];
+  reorder: [items: unknown[]];
 }>();
 
 const selectedItems: Ref<unknown[]> = defineModel('selectedItems', {
@@ -124,7 +126,8 @@ const getFilteredItems = () => {
     ? (item: unknown) => props.customSearch!(item, search.value)
     : (item: unknown) => bmsDefaultSearchFilterFunction(item, search.value);
 
-  return sortItems(filterItems(props.items).filter(applySearch));
+  const filtered = filterItems(props.items).filter(applySearch);
+  return props.draggable ? filtered : sortItems(filtered);
 };
 
 const isMounting = ref(true);
@@ -167,12 +170,27 @@ watch(route, () => {
   }
 });
 
+const pendingSelectionIndices = ref<number[] | null>(null);
+
+const onSelectionIndicesUpdate = (indices: number[]) => {
+  pendingSelectionIndices.value = indices;
+};
+
 watch(
   () => props.items,
   () => {
     if (!isMounting.value) {
       items.value = getFilteredItems();
-      selectedItems.value = [];
+      if (!props.draggable) {
+        selectedItems.value = [];
+      } else if (pendingSelectionIndices.value !== null) {
+        selectedItems.value = pendingSelectionIndices.value
+          .map((i) => items.value[i])
+          .filter(Boolean);
+        pendingSelectionIndices.value = null;
+      } else {
+        selectedItems.value = [];
+      }
     }
   },
 );
@@ -233,12 +251,15 @@ const isTableSmall = computed(() => props.mode === TableMode.SMALL);
   <UiBmsTable
     v-model:selectedItems="selectedItems"
     :loading="loading"
-    :items="currentItems"
+    :items="draggable ? items : currentItems"
     :headers="headers"
     :mode="mode as TableMode"
     :hasFilters="filters.length > 0"
     :sort="sort"
     :selectable="selectable"
+    :draggable="draggable"
+    @reorder="emits('reorder', $event)"
+    @selectionIndicesUpdate="onSelectionIndicesUpdate"
     :selectableDisabled="selectableDisabled"
     :totalSize="totalSize"
     :selectMode="selectMode"

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

@@ -759,3 +759,43 @@ WithChildElements.args = {
   hasFilters: true,
   totalSize: 2,
 };
+
+const players = [
+  { name: 'Maignan', position: 'Gardien' },
+  { name: 'Pavard', position: 'Défenseur' },
+  { name: 'Upamecano', position: 'Défenseur' },
+  { name: 'Hernandez', position: 'Défenseur' },
+  { name: 'Camavinga', position: 'Milieu' },
+  { name: 'Tchouameni', position: 'Milieu' },
+  { name: 'Griezmann', position: 'Milieu' },
+  { name: 'Mbappé', position: 'Attaquant' },
+];
+
+const draggableHeaders = [
+  { key: 'name', label: 'Joueur' },
+  { key: 'position', label: 'Poste' },
+];
+
+export const Draggable = () => ({
+  components: { UiBmsTable },
+  setup() {
+    const items = ref([...players]);
+    const selectedItems = ref([]);
+    const onReorder = (reordered) => { items.value = reordered; };
+    return { items, selectedItems, onReorder, draggableHeaders };
+  },
+  template: `
+    <div>
+      <UiBmsTable
+        v-model:selectedItems="selectedItems"
+        :items="items"
+        :headers="draggableHeaders"
+        :total-size="items.length"
+        draggable
+        @reorder="onReorder"
+      />
+      <pre style="margin-top: 1rem; font-size: 0.75rem; color: #666;">Ordre : {{ items.map(i => i.name).join(' → ') }}</pre>
+    </div>
+  `,
+});
+Draggable.storyName = 'Draggable (réordonnancement)';

package/src/components/table/UiBmsTable.vue

@@ -43,6 +43,7 @@ interface UiBmsTableProps {
   totalSize: number;
   maxSelectedSize?: number;
   selectMode?: SelectMode;
+  draggable?: boolean;
 }
 
 const props = withDefaults(defineProps<UiBmsTableProps>(), {
@@ -66,8 +67,51 @@ const emits = defineEmits<{
   clickHeader: [header: TableHeader];
   selectAll: [];
   clearSelection: [];
+  reorder: [items: unknown[]];
+  selectionIndicesUpdate: [indices: number[]];
 }>();
 
+// Drag & drop
+const dragSourceIndex = ref<number | null>(null);
+const dragTargetIndex = ref<number | null>(null);
+const isDraggingDown = computed(
+  () =>
+    dragSourceIndex.value !== null &&
+    dragTargetIndex.value !== null &&
+    dragSourceIndex.value < dragTargetIndex.value,
+);
+
+const onRowDragStart = (index: number) => {
+  dragSourceIndex.value = index;
+};
+
+const onRowDragOver = (index: number) => {
+  dragTargetIndex.value = index;
+};
+
+const onRowDragEnd = () => {
+  if (
+    dragSourceIndex.value !== null &&
+    dragTargetIndex.value !== null &&
+    dragSourceIndex.value !== dragTargetIndex.value
+  ) {
+    const reordered = [...props.items];
+    const [moved] = reordered.splice(dragSourceIndex.value, 1);
+    reordered.splice(dragTargetIndex.value, 0, moved);
+
+    if (selectedItems.value.length > 0) {
+      const newIndices = reordered
+        .map((item, i) => (selectedItems.value.includes(item) ? i : -1))
+        .filter((i) => i !== -1);
+      emits('selectionIndicesUpdate', newIndices);
+    }
+
+    emits('reorder', reordered);
+  }
+  dragSourceIndex.value = null;
+  dragTargetIndex.value = null;
+};
+
 // Pagination
 const pagination = ref<HTMLInputElement | null>(null);
 const isFocusOnPagination = () =>
@@ -290,6 +334,7 @@ onMounted(() => {
       >
         <thead ref="thead" class="bms-table__header">
           <tr class="bms-table__headers bms-table__row">
+            <th v-if="draggable" class="drag-handle-header"></th>
             <th v-if="selectable">
               <UiBmsInputCheckbox
                 v-if="selectMode !== SelectMode.SINGLE"
@@ -304,9 +349,9 @@ onMounted(() => {
               :style="{
                 '--table-cell-width': header?.width || undefined,
               }"
-              :class="getHeaderClasses(header, sort)"
+              :class="getHeaderClasses(header, draggable ? { key: null, value: SortValue.default } : sort)"
               :key="header.label"
-              @click="emits('clickHeader', header)"
+              @click="!draggable && emits('clickHeader', header)"
             >
               <span class="header-content">
                 {{ header.label }}
@@ -323,7 +368,7 @@ onMounted(() => {
                   </span>
                 </BmsTooltip>
                 <component
-                  v-if="header.sortable"
+                  v-if="header.sortable && !draggable"
                   :is="getSortComponent(header)"
                   :size="18"
                   class="header-content-sort"
@@ -334,7 +379,7 @@ onMounted(() => {
         </thead>
         <tbody class="bms-table__body">
           <template v-if="items.length">
-            <template v-for="item in items" :key="item">
+            <template v-for="(item, index) in items" :key="item">
               <UiBmsTableRow
                 :item="item"
                 :selected-items="selectedItems"
@@ -343,7 +388,16 @@ onMounted(() => {
                 :select-mode="selectMode"
                 :selectable-disabled="selectableDisabled"
                 :dense="mode === TableMode.DENSE || mode === TableMode.SMALL"
+                :draggable="draggable"
+                :class="{
+                  'bms-table__row--drag-insert-after': draggable && dragTargetIndex === index && dragSourceIndex !== index && isDraggingDown,
+                  'bms-table__row--drag-insert-before': draggable && dragTargetIndex === index && dragSourceIndex !== index && !isDraggingDown,
+                }"
                 @select="onItemSelect"
+                @drag-start="onRowDragStart(index)"
+                @drag-over="onRowDragOver(index)"
+                @drag-end="onRowDragEnd"
+                @drop="onRowDragEnd"
               >
                 <template v-for="cell in headers" v-slot:[cell.key]="slotData">
                   <slot :name="cell.key" v-bind="slotData" />
@@ -362,6 +416,7 @@ onMounted(() => {
                     :headers="filteredHeaders"
                     :select-mode="selectMode"
                     :selectable-disabled="selectableDisabled"
+                    :draggable="draggable"
                     @select="onItemSelect"
                   >
                     <template
@@ -379,9 +434,9 @@ onMounted(() => {
             <tr class="bms-table__row">
               <td
                 :colspan="
-                  selectable
-                    ? filteredHeaders.length + 1
-                    : filteredHeaders.length
+                  filteredHeaders.length +
+                  (selectable ? 1 : 0) +
+                  (draggable ? 1 : 0)
                 "
                 class="bms-table__cell bms-table__cell--empty"
               >
@@ -563,6 +618,18 @@ onMounted(() => {
     padding-top: 16px;
   }
 
+  .drag-handle-header {
+    width: 2em;
+  }
+
+  :deep(.bms-table__row--drag-insert-before td) {
+    border-top: 2px solid var(--bms-main-100);
+  }
+
+  :deep(.bms-table__row--drag-insert-after td) {
+    border-bottom: 2px solid var(--bms-main-100);
+  }
+
   .blob {
     visibility: hidden;
     --table-blob-height: 80px;

package/src/components/table/UiBmsTableRow.vue

@@ -6,7 +6,20 @@
       'bms-table__row--disabled': isChildElement,
       'bms-table__row--dense': dense,
     }"
+    :draggable="draggable && gripped"
+    @dragstart="emits('dragStart')"
+    @dragover="draggable && ($event.preventDefault(), emits('dragOver'))"
+    @dragend="gripped = false; emits('dragEnd')"
+    @drop="draggable && ($event.preventDefault(), emits('drop'))"
   >
+    <td
+      v-if="draggable"
+      class="bms-table__row__cell--drag-handle"
+      @mousedown="!isChildElement && (gripped = true)"
+      @mouseup="gripped = false"
+    >
+      <GripVertical v-if="!isChildElement" class="drag-handle-icon" />
+    </td>
     <td v-if="selectable" class="bms-table__row__cell__checkbox">
       <BmsTooltip
         :direction="TooltipDirection.Right"
@@ -76,10 +89,10 @@ import _isEqual from 'lodash/isEqual';
 import _get from 'lodash/get';
 import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
 import BmsTooltip from '../feedback/BmsTooltip.vue';
-import { CornerDownRight } from 'lucide-vue-next';
+import { CornerDownRight, GripVertical } from 'lucide-vue-next';
 import UiBmsTableCell from './UiBmsTableCell.vue';
 import BmsInputRadio from '../form/BmsInputRadio.vue';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 interface Props {
   item: any;
@@ -90,13 +103,23 @@ interface Props {
   selectableDisabled?: boolean;
   dense?: boolean;
   isChildElement?: boolean;
+  draggable?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   dense: false,
   selectableDisabled: false,
+  draggable: false,
 });
 
-const emits = defineEmits<{ select: [item: any] }>();
+const gripped = ref(false);
+
+const emits = defineEmits<{
+  select: [item: any];
+  dragStart: [];
+  dragOver: [];
+  dragEnd: [];
+  drop: [];
+}>();
 
 const currentItem = computed(() =>
   props.isChildElement ? props.item.childElement : props.item,
@@ -163,6 +186,21 @@ const getAlignClass = (header: TableHeader) => {
         margin-right: 1em;
       }
     }
+
+    &--drag-handle {
+      width: 2em;
+      cursor: default;
+
+      .drag-handle-icon {
+        display: block;
+        cursor: grab;
+        color: var(--bms-grey-50);
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+    }
   }
 }
 </style>