From 39dde31291a4cdebaedc3dd573b794ca7000e4a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Val=C3=A8re=20Pique?= <valere.pique@sg.social.gouv.fr>
Date: Wed, 2 Oct 2024 12:14:40 +0200
Subject: [PATCH] feat: add DsfrDataTableV2 and DsfrTabsV2.vue

---
 .talismanrc                                   |   6 +
 packages/shared/src/components/DsfrTabsV2.vue | 175 ++++++++++++
 .../src/components/Table/DsfrDataTableV2.vue  | 270 ++++++++++++++++++
 packages/shared/src/components/index.js       |   2 +
 packages/shared/src/type.ts                   |   7 +
 5 files changed, 460 insertions(+)
 create mode 100644 packages/shared/src/components/DsfrTabsV2.vue
 create mode 100644 packages/shared/src/components/Table/DsfrDataTableV2.vue
 create mode 100644 packages/shared/src/type.ts

diff --git a/.talismanrc b/.talismanrc
index 51a0faafb..f4e4dee3a 100644
--- a/.talismanrc
+++ b/.talismanrc
@@ -249,8 +249,14 @@ fileignoreconfig:
   checksum: e064a2ee73c2ecb4da219f78c7458302383d264330cc7bf645239519f906f64f
 - filename: packages/shared/src/components/Chat.vue
   checksum: f2dbbf72bf098c7abd2c3aee230d220f5a5a106952883c0e116eb49f4f9d4db7
+- filename: packages/shared/src/components/DsfrTabsV2.vue
+  checksum: 960c18a7ad76a91c74e5535240ae6ac4f87bb8aff10155096cd35afe5609cff8
 - filename: packages/shared/src/components/PasswordInput.vue
   checksum: af4fe62dc455e943fcfacaa6ee0495e1ab20f9ed2094ad70c457b7a27ab46759
+- filename: packages/shared/src/components/Table/DsfrDataTableV2.vue
+  checksum: 1fb894ebadcc064a8aa847e72ef0eb4c39a35646bb54a78bbcf9c80f72506774
+- filename: packages/shared/src/type.ts
+  checksum: 8c75e8784ded25a61d6e14cd682bfe67e4ecdde5a6582fb83035fcae39a87b98
 - filename: pg/scripts/01-init.sql
   checksum: 20dd5b8d36b1b0517fe185d30003af7866ef5678eed4e7571a6d9797ec3b2a46
 - filename: pg/scripts/02/02-1-geo-init.sql
diff --git a/packages/shared/src/components/DsfrTabsV2.vue b/packages/shared/src/components/DsfrTabsV2.vue
new file mode 100644
index 000000000..e8ef2294d
--- /dev/null
+++ b/packages/shared/src/components/DsfrTabsV2.vue
@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, computed } from "vue";
+
+const props = defineProps<{
+  tabs: {
+    label: string;
+    tabPanelId: string;
+    tabId: string;
+  }[];
+  modelValue: number;
+}>();
+
+const emits = defineEmits<{
+  "update:modelValue": [number];
+}>();
+
+const activeTab = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+  },
+});
+const tabsStyle = ref({ "--tabs-height": "100px" });
+
+const $el = ref<HTMLElement | null>(null);
+const tablist = ref<HTMLUListElement | null>(null);
+
+const renderTabs = () => {
+  if (activeTab.value < 0) {
+    return;
+  }
+  if (!tablist.value || !tablist.value.offsetHeight) {
+    return;
+  }
+  const tablistHeight = tablist.value.offsetHeight;
+  const selectedTab = $el.value?.querySelector(".fr-tabs__panel");
+  if (!selectedTab || !(selectedTab as HTMLElement).offsetHeight) {
+    return;
+  }
+  const selectedTabHeight = (selectedTab as HTMLElement).offsetHeight;
+  tabsStyle.value["--tabs-height"] = `${tablistHeight + selectedTabHeight}px`;
+};
+
+const animationDirection = ref("right");
+
+const selectTab = (index: number) => {
+  unobservePanel();
+  animationDirection.value = activeTab.value > index ? "left" : "right";
+  activeTab.value = index;
+};
+
+const selectPrevious = () => {
+  unobservePanel();
+  const newIndex =
+    activeTab.value === 0 ? props.tabs.length - 1 : activeTab.value - 1;
+  animationDirection.value = "left";
+  activeTab.value = newIndex;
+};
+const selectNext = () => {
+  unobservePanel();
+  const newIndex =
+    activeTab.value === props.tabs.length - 1 ? 0 : activeTab.value + 1;
+  animationDirection.value = "right";
+  activeTab.value = newIndex;
+};
+const selectFirst = () => {
+  unobservePanel();
+  animationDirection.value = "left";
+  activeTab.value = 0;
+};
+const selectLast = () => {
+  unobservePanel();
+  animationDirection.value = "right";
+  activeTab.value = props.tabs.length - 1;
+};
+
+const observePanel = () => {
+  const panel = $el.value?.querySelector(".fr-tabs__panel");
+  if (panel) {
+    resizeObserver.value?.observe(panel);
+  }
+};
+
+const unobservePanel = () => {
+  const panel = $el.value?.querySelector(".fr-tabs__panel");
+  if (panel) {
+    resizeObserver.value?.unobserve(panel);
+  }
+};
+
+const resizeObserver = ref<ResizeObserver | null>(null);
+onMounted(() => {
+  if (window.ResizeObserver) {
+    resizeObserver.value = new window.ResizeObserver(() => {
+      renderTabs();
+    });
+  }
+  observePanel();
+});
+
+onUnmounted(() => {
+  unobservePanel();
+});
+
+const animationEnd = () => {
+  renderTabs();
+  observePanel();
+};
+</script>
+
+<template>
+  <div ref="$el" class="fr-tabs" :style="tabsStyle">
+    <ul
+      ref="tablist"
+      class="fr-tabs__list"
+      role="tablist"
+      aria-label="[A modifier | nom du système d'onglet]"
+    >
+      <dsfr-tab-item
+        v-for="(tab, index) in tabs"
+        :key="tab.tabId"
+        :label="tab.label"
+        :tab-id="tab.tabId"
+        :tab-panel-id="tab.tabPanelId"
+        :selected="activeTab === index"
+        @click="selectTab(index)"
+        @next="selectNext()"
+        @previous="selectPrevious()"
+        @first="selectFirst()"
+        @last="selectLast()"
+      />
+    </ul>
+    <transition
+      :name="`translate-fade-${animationDirection}`"
+      mode="out-in"
+      @after-leave="animationEnd"
+    >
+      <slot />
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.translate-fade-right-enter-active,
+.translate-fade-right-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.translate-fade-right-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.translate-fade-right-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.translate-fade-left-enter-active,
+.translate-fade-left-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.translate-fade-left-enter-from {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.translate-fade-left-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+</style>
diff --git a/packages/shared/src/components/Table/DsfrDataTableV2.vue b/packages/shared/src/components/Table/DsfrDataTableV2.vue
new file mode 100644
index 000000000..916d0774a
--- /dev/null
+++ b/packages/shared/src/components/Table/DsfrDataTableV2.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts" generic="T extends Row">
+import type { Component } from "vue";
+import { computed } from "vue";
+
+export type Primitive = string | number | boolean;
+
+export type Row = {
+  [key: string]: Primitive | Row;
+};
+
+export type NestedKeys<T> = {
+  [K in keyof T]: K extends string | number
+    ? T[K] extends Primitive
+      ? K
+      : T[K] extends Row
+        ? K | `${K}.${NestedKeys<T[K]>}`
+        : never
+    : never;
+}[keyof T];
+
+export type Titles<T> = {
+  key: NestedKeys<T>;
+  label: string;
+  options?: {
+    isSortable?: boolean;
+    cellComponent?: Component;
+  };
+}[];
+
+type RowId = keyof T;
+
+const props = withDefaults(
+  defineProps<{
+    tableTitle?: string;
+    data: T[];
+    size?: "sm" | "md" | "sg";
+    titles: Titles<T>;
+    sortDirection?: "asc" | "desc";
+    sort?: string;
+    isSelectable?: boolean;
+    isSortable?: boolean;
+    isBordered?: boolean;
+    rowId: keyof T;
+    selected?: Array<T[RowId]>;
+    emptyPlaceholder?: string;
+  }>(),
+  {
+    sort: "",
+    sortDirection: "asc",
+    tableTitle: "",
+    size: "md",
+    isSelectable: false,
+    isSortable: false,
+    isBordered: false,
+    selected: () => [],
+    emptyPlaceholder: "No data",
+  },
+);
+
+const emits = defineEmits<{
+  "update:sort": [NestedKeys<T>];
+  "update:sort-direction": ["asc" | "desc"];
+  "update:selected": [Array<T[RowId]>];
+  sort: [{ sort: NestedKeys<T>; direction: "asc" | "desc" }];
+}>();
+
+const selectedSync = computed({
+  get() {
+    return props.selected;
+  },
+  set(value) {
+    emits("update:selected", value);
+  },
+});
+
+const handleSort = (key: NestedKeys<T>) => {
+  if (props.sort === key) {
+    const direction = props.sortDirection === "asc" ? "desc" : "asc";
+    emits("update:sort-direction", direction);
+    emits("sort", { sort: key, direction });
+  } else {
+    emits("update:sort", key);
+    emits("update:sort-direction", "asc");
+    emits("sort", { sort: key, direction: "asc" });
+  }
+};
+
+const valueFromObject = (
+  string: string,
+  obj: unknown,
+): string | boolean | number | null => {
+  if (obj === null || typeof obj !== "object" || Array.isArray(obj)) {
+    return null;
+  }
+  const [key, ...rest] = string.split(".");
+  if (rest.length) {
+    return valueFromObject(rest.join("."), obj[key]);
+  }
+  return obj[key] === undefined ? null : obj[key];
+};
+
+const isSelected = (id: T[RowId]) => props.selected.includes(id);
+
+const handleCheckboxChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (target.checked) {
+    const tr = target.closest("tr");
+    if (tr) {
+      const { height } = tr.getBoundingClientRect();
+      tr.style.setProperty("--row-height", `${height}px`);
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    class="fr-table fr-table"
+    :style="{
+      '--table-offset': 0,
+    }"
+    :class="{
+      [`fr-table--${props.size}`]: true,
+      'fr-table--bordered': props.isBordered,
+    }"
+    data-fr-js-table="true"
+    data-fr-js-table-actionee="true"
+  >
+    <div
+      class="fr-table__wrapper"
+      data-fr-js-table-wrapper="true"
+      :style="{
+        '--table-offset': props.tableTitle ? 'calc(32px + 1rem)' : '1rem',
+      }"
+    >
+      <div class="fr-table__container">
+        <div class="fr-table__content">
+          <table data-fr-js-table-element="true">
+            <caption v-if="props.tableTitle">
+              {{
+                props.tableTitle
+              }}
+            </caption>
+            <thead>
+              <tr>
+                <th
+                  v-if="isSelectable"
+                  class="fr-cell--fixed"
+                  role="columnheader"
+                  scope="col"
+                >
+                  <span class="fr-sr-only">Sélectionner</span>
+                </th>
+                <th
+                  v-for="title in titles"
+                  :key="title.key"
+                  scope="col"
+                  :class="{
+                    'fr-th--is-selectable': props.isSortable,
+                  }"
+                  v-on="
+                    props.isSortable && title.options?.isSortable
+                      ? {
+                          click: () => handleSort(title.key),
+                        }
+                      : {}
+                  "
+                >
+                  <div class="fr-table__header">
+                    {{ title.label }}
+                    <span
+                      v-if="props.isSortable && title.options?.isSortable"
+                      :class="{
+                        [title.key === sort && sortDirection === 'desc'
+                          ? 'fr-icon-arrow-down-line'
+                          : 'fr-icon-arrow-up-line']: true,
+                        'fr-table--is-not-sorted': title.key !== sort,
+                      }"
+                      aria-hidden="true"
+                    />
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(row, index) in data"
+                :key="row[props.rowId] as RowId"
+                :data-row-key="index + 1"
+                :aria-selected="isSelected(row[props.rowId] as T[RowId])"
+              >
+                <th
+                  v-if="props.isSelectable"
+                  class="fr-cell--fixed"
+                  scope="row"
+                >
+                  <div class="fr-checkbox-group fr-checkbox-group--sm">
+                    <input
+                      id="table-select-checkbox--${index}"
+                      v-model="selectedSync"
+                      :value="row[props.rowId] as T[RowId]"
+                      type="checkbox"
+                      name="row-select"
+                      @change="handleCheckboxChange"
+                    />
+                    <label
+                      class="fr-label"
+                      for="table-select-checkbox--${index}"
+                    >
+                      Sélectionner la ligne {{ index + 1 }}
+                    </label>
+                  </div>
+                </th>
+                <td v-for="title in titles" :key="title.key">
+                  <slot
+                    :name="`cell-${title.key}`"
+                    :cell="row[title.key]"
+                    :row="row"
+                  >
+                    <component
+                      :is="title.options.cellComponent"
+                      v-if="title.options?.cellComponent"
+                      :cell="row[title.key]"
+                      :row="row"
+                    />
+                    <span v-else>{{
+                      typeof title.key === "string" && title.key.includes(".")
+                        ? valueFromObject(String(title.key), row)
+                        : row[title.key]
+                    }}</span>
+                  </slot>
+                </td>
+              </tr>
+              <tr v-if="data.length === 0">
+                <td
+                  :colspan="titles.length + +isSelectable"
+                  class="fr-cell--empty"
+                >
+                  {{ emptyPlaceholder }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fr-table .fr-table--is-not-sorted {
+  color: var(--grey-625-425);
+}
+.fr-table .fr-cell--empty {
+  text-align: center;
+}
+
+.fr-table .fr-th {
+  display: flex;
+  justify-content: space-between;
+}
+.fr-table .fr-th--is-selectable {
+  cursor: pointer;
+}
+
+.fr-table__header {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/packages/shared/src/components/index.js b/packages/shared/src/components/index.js
index 5cf8fbca1..91ac55dbe 100644
--- a/packages/shared/src/components/index.js
+++ b/packages/shared/src/components/index.js
@@ -1,5 +1,6 @@
 import FileUpload from "./FileUpload.vue";
 import Chat from "./Chat.vue";
+import DsfrDataTableV2 from "./Table/DsfrDataTableV2.vue";
 import TableWithBackendPagination from "./Table/TableWithBackendPagination.vue";
 import ValidationModal from "./ValidationModal.vue";
 import EigStatusBadge from "./eig/EigStatusBadge.vue";
@@ -16,6 +17,7 @@ import MessageEtat from "./messages/MessageEtat.vue";
 export {
   FileUpload,
   Chat,
+  DsfrDataTableV2,
   TableWithBackendPagination,
   ValidationModal,
   EigStatusBadge,
diff --git a/packages/shared/src/type.ts b/packages/shared/src/type.ts
new file mode 100644
index 000000000..4cf0777f7
--- /dev/null
+++ b/packages/shared/src/type.ts
@@ -0,0 +1,7 @@
+import type {
+  NestedKeys as ImportedNestedKeys,
+  Titles as ImportedTitles,
+} from "./components/Table/DsfrDataTableV2.vue";
+
+export type NestedKeys<T> = ImportedNestedKeys<T>;
+export type Titles<T> = ImportedTitles<T>;