@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/table/UiFilterButton.vue

@@ -0,0 +1,85 @@
+<template>
+  <span class="filter-button-container">
+    <UiButton
+      class="filter-button"
+      :color="isFilterVisible ? StatusType.Default : StatusType.Information"
+      :mode="isFilterVisible ? 'fill' : 'ghost'"
+      @click="$emits('toggleFilters')"
+    >
+      <FilterIcon />
+    </UiButton>
+    <Transition name="indicator-scale">
+      <span v-if="showIndicator" class="indicator">{{ activeFiltersNb }}</span>
+    </Transition>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { Filter as FilterIcon } from 'lucide-vue-next';
+import { computed } from 'vue';
+import UiButton from '../button/UiButton.vue';
+import { StatusType } from '@/models';
+
+interface UiFilterButtonProps {
+  isFilterVisible: boolean;
+  activeFiltersNb: number;
+}
+
+const props = withDefaults(defineProps<UiFilterButtonProps>(), {
+  isFilterVisible: false,
+  activeFiltersNb: 0,
+});
+
+const $emits = defineEmits<{
+  (e: 'toggleFilters'): void;
+}>();
+
+const showIndicator = computed(
+  () => !props.isFilterVisible && props.activeFiltersNb > 0,
+);
+</script>
+
+<style lang="scss" scoped>
+.filter-button-container {
+  position: relative;
+
+  .filter-button {
+    padding: 0.5em 0;
+    font-size: 20px;
+  }
+  .indicator {
+    position: absolute;
+    pointer-events: none;
+    top: 8px;
+    right: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--bms-main-100);
+    color: #fff;
+    border-radius: 50%;
+    font-size: 0.75em;
+    font-weight: 700;
+  }
+}
+
+.indicator-scale-enter-active {
+  transition: all 0.3s ease 0.2s;
+}
+.indicator-scale-leave-active {
+  transition: all 0.3s ease;
+}
+
+.indicator-scale-enter-from,
+.indicator-scale-leave-to {
+  opacity: 0;
+  transform: scale(50%);
+}
+.indicator-scale-enter-to,
+.indicator-scale-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+</style>

package/src/components/utils/BmsCocarde.stories.js

@@ -0,0 +1,47 @@
+import BmsCocarde from './BmsCocarde.vue';
+
+export default {
+  title: 'Shared/Cocarde',
+  component: BmsCocarde,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsCocarde,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div style="display: flex; gap: 2em;">
+    <div style="display:flex;flex-direction:column;gap:2em">
+      <h2>Round</h2>
+      <strong>X-Large</strong>
+      <BmsCocarde v-bind="args" size="x-large" />
+      <strong>Large</strong>
+      <BmsCocarde v-bind="args" size="large" />
+      <strong>Medium</strong>
+      <BmsCocarde v-bind="args" size="medium" />
+      <strong>Small</strong>
+      <BmsCocarde v-bind="args" size="small" />
+    </div>
+  
+    <div style="display:flex;flex-direction:column;gap:2em">
+      <h2>Square</h2>
+      <strong>X-Large</strong>
+      <BmsCocarde v-bind="args" size="x-large" border="square"/>
+      <strong>Large</strong>
+      <BmsCocarde v-bind="args" size="large" border="square" />
+      <strong>Medium</strong>
+      <BmsCocarde v-bind="args" size="medium" border="square" />
+      <strong>Small</strong>
+      <BmsCocarde v-bind="args" size="small" border="square" />
+    </div>
+  </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  initials: 'FG',
+};

package/src/components/utils/BmsCocarde.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="cocarde" :class="`cocarde--${size} cocarde--${border}`">
+    <p>
+      {{ initials }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CocardeBorder } from '@/models/cocarde.model';
+
+withDefaults(
+  defineProps<{
+    initials: string;
+    size?: 'x-large' | 'large' | 'medium' | 'small';
+    border?: CocardeBorder;
+  }>(),
+  { size: 'medium', border: CocardeBorder.Round },
+);
+</script>
+
+<style scoped lang="scss">
+.cocarde {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--bms-grey-10);
+  color: var(--bms-main-140);
+  background-color: var(--bms-main-10);
+  border-radius: var(--cocarde-border-radius);
+  font-weight: bold;
+  text-transform: uppercase;
+  flex-shrink: 0;
+  width: var(--cocarde-size);
+  height: var(--cocarde-size);
+
+  p {
+    margin: 0;
+    font-size: calc(var(--cocarde-size) / 2);
+  }
+
+  &--round {
+    --cocarde-border-radius: 50%;
+  }
+
+  &--square {
+    --cocarde-border-radius: var(--bms-border-radius-large);
+  }
+
+  &--small {
+    --cocarde-size: 1em;
+  }
+
+  &--medium {
+    --cocarde-size: 2em;
+  }
+
+  &--large {
+    --cocarde-size: 3em;
+  }
+
+  &--x-large {
+    --cocarde-size: 4em;
+  }
+}
+</style>

package/src/components/utils/BmsProblem.stories.js

@@ -0,0 +1,82 @@
+import BmsProblem from '@/components/utils/BmsProblem.vue';
+
+export default {
+  title: 'Composants/utils/BmsProblem',
+  component: BmsProblem,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsProblem,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsProblem v-bind="args"/>
+  `,
+});
+
+export const GenericProblem = Template.bind({});
+GenericProblem.args = {
+  expanded: true,
+  problem: {
+    type: 'https://problems.bms.live/fake-problem/bo/loop-problem',
+    title: '[FAKE] Une boucle de redirection a été detectée',
+    status: 400,
+    loop: '/ -> /another-url -> /',
+  },
+};
+
+export const ProblemWithCorrelationId = Template.bind({});
+ProblemWithCorrelationId.args = {
+  expanded: true,
+  problem: {
+    type: 'https://problems.bms.live/fake-problem/bo/loop-problem',
+    title: '[FAKE] Une boucle de redirection a été detectée',
+    status: 400,
+    loop: '/ -> /another-url -> /',
+    correlationId: '8cba6864-6a4d-438e-acf5-d721ec4c79af',
+  },
+};
+
+export const ProblemWithViolation = Template.bind({});
+ProblemWithViolation.args = {
+  expanded: true,
+  problem: {
+    name: 'siteHostRepresentation',
+    violations: {
+      host: [
+        {
+          violationType:
+            'sipa.cms.admin.site.interfaces.representation.validator.SiteHostValid',
+          objectType:
+            'sipa.cms.admin.site.interfaces.representation.SiteHostRepresentation',
+          rejectedValue: 'ouest-france.int.bms.live',
+          type: 'https://problems.bms.live/cms/generic-violation',
+          title: 'Elément invalide',
+          status: 400,
+          detail: 'Create a site host containing bms.live is forbidden',
+        },
+      ],
+    },
+    type: 'https://problems.bms.live/cms/validation-error',
+    title: 'Erreur de validation',
+    status: 400,
+    correlationId: '8cba6864-6a4d-438e-acf5-d721ec4c79af',
+    detail:
+      '1 erreur(s) détecté(s) lors de la validation de siteHostRepresentation',
+  },
+};
+
+export const ProblemWithDiagrams = Template.bind({});
+ProblemWithDiagrams.args = {
+  expanded: true,
+  problem: {
+    type: 'https://problems.bms.live/fake-problem/bo/loop-problem',
+    title: '[FAKE] Une boucle de redirection a été detectée',
+    status: 400,
+    loop: '/ -> /another-url -> /',
+    diagrams: ['https://placeholder.pics/svg/200'],
+  },
+};

package/src/components/utils/BmsProblem.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="ui-problem">
+    <h2>{{ problem.title }}</h2>
+    <details :open="expanded">
+      <summary>Plus de détails</summary>
+      <div class="ui-problem__details">
+        <div class="ui-problem__table">
+          <template v-if="problem.detail">
+            <div>
+              <BmsTooltip tooltip-text="Copier la valeur">
+                <strong
+                  class="copyLabel"
+                  @click="onCopyToClipboard(problem.detail)"
+                >
+                  Détails
+                </strong>
+              </BmsTooltip>
+            </div>
+            <div>
+              <div class="ui-debugger-line">
+                <span class="line-value">{{ problem.detail }}</span>
+                <BmsIconButton
+                  class="copyToClipboardButton"
+                  @click="onCopyToClipboard(problem.detail)"
+                >
+                  <Clipboard />
+                </BmsIconButton>
+              </div>
+            </div>
+          </template>
+
+          <template v-if="problem.status">
+            <div>
+              <strong>Code HTTP</strong>
+            </div>
+            <div>
+              <div class="ui-debugger-line">{{ problem.status }}</div>
+            </div>
+          </template>
+
+          <template v-if="problem.correlationId">
+            <div>
+              <BmsTooltip tooltip-text="Copier la valeur">
+                <strong
+                  class="copyLabel"
+                  @click="onCopyToClipboard(problem.correlationId)"
+                >
+                  Correlation ID
+                </strong>
+              </BmsTooltip>
+            </div>
+            <div>
+              <div class="ui-debugger-line">
+                <span class="line-value">{{ problem.correlationId }}</span>
+                <BmsIconButton
+                  class="copyToClipboardButton"
+                  @click="onCopyToClipboard(problem.detail)"
+                >
+                  <Clipboard />
+                </BmsIconButton>
+              </div>
+            </div>
+          </template>
+
+          <div>
+            <strong>Plus d'informations</strong>
+          </div>
+          <div>
+            <div class="ui-debugger-line">
+              <a :href="problem.type">{{ problem.type }}</a>
+            </div>
+          </div>
+
+          <template v-for="k in keysToShow" :key="k">
+            <div>{{ k }}</div>
+            <div>
+              <div class="ui-debugger-line line-value">
+                {{ (problem as any)[k] }}
+              </div>
+            </div>
+          </template>
+
+          <template v-for="diagram in problem.diagrams" :key="diagram">
+            <div>Diagramme</div>
+            <div>
+              <div class="ui-debugger-line">
+                <a target="_blank" :href="diagram">
+                  <img :src="diagram" />
+                </a>
+              </div>
+            </div>
+          </template>
+
+          <template v-if="violationFirstMessage">
+            <div>Message</div>
+            <div>
+              <div class="ui-debugger-line">{{ violationFirstMessage }}</div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </details>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Problem } from '@/models/problem.model';
+import { Clipboard } from 'lucide-vue-next';
+import { type ComputedRef, computed } from 'vue';
+import { useClipboard } from '@/composables/clipboard.composable';
+import { BmsIconButton, BmsTooltip } from '@/index';
+
+const { copyToClipboard } = useClipboard();
+
+const props = withDefaults(
+  defineProps<{ expanded?: boolean; problem: Problem }>(),
+  {
+    expanded: false,
+  },
+);
+
+const commonKeys: string[] = [
+  'type',
+  'title',
+  'status',
+  'detail',
+  'diagrams',
+  '__detail',
+  'violations',
+  'correlationId',
+];
+
+const keysToShow: ComputedRef<string[]> = computed(() =>
+  Object.keys(props.problem).filter((key) => !commonKeys.includes(key)),
+);
+
+const violationFirstMessage: ComputedRef<string> = computed(() => {
+  if (props.problem.violations) {
+    const violations = Object.values(props.problem.violations);
+    if (violations.length > 0 && violations[0].length > 0) {
+      return violations[0][0].detail;
+    }
+  }
+  return '';
+});
+
+const onCopyToClipboard = async (text: string): Promise<void> => {
+  await copyToClipboard(text);
+};
+</script>
+
+<style lang="scss" scoped>
+.ui-problem {
+  position: relative;
+
+  h2 {
+    font-size: 1.2em;
+    font-weight: bold;
+    margin-bottom: 1em;
+    color: var(--bms-red-100);
+  }
+
+  summary {
+    padding: 0.65em;
+    font-weight: bold;
+    cursor: pointer;
+  }
+
+  &__details {
+    border-radius: 4px;
+    box-shadow:
+      0 4px 8px var(--bms-grey-10),
+      0 0 0 1px var(--bms-red-10);
+    border-bottom: 2px solid var(--bms-red-100);
+    padding: 1em;
+    overflow: auto;
+    max-height: 350px;
+  }
+
+  &__table {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5em 1em;
+
+    > :nth-child(2n + 1) {
+      text-align: end;
+      align-self: center;
+    }
+
+    .copyLabel {
+      cursor: pointer;
+    }
+
+    :deep(.copyToClipboardButton) {
+      visibility: hidden;
+      margin-left: 0.5em;
+    }
+
+    .line-value {
+      white-space: pre-line;
+    }
+
+    .ui-debugger-line {
+      display: flex;
+      align-items: center;
+
+      span {
+        margin: 0;
+      }
+
+      &:hover {
+        :deep(.copyToClipboardButton) {
+          visibility: inherit;
+        }
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+</style>

package/src/components/utils/BmsRelativeTime.spec.ts

@@ -0,0 +1,41 @@
+import BmsRelativeTime from '@/components/utils/BmsRelativeTime.vue';
+import { shallowMount } from '@vue/test-utils';
+import { vi } from 'vitest';
+
+const factory = (props = {}) => {
+  return shallowMount(BmsRelativeTime, {
+    propsData: { ...props },
+  });
+};
+
+describe('BmsRelativeTime', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it('shoudl correctly call the timeout', () => {
+    // under 60 seconds, calling every 10seconds
+    // over : every 30 seconds
+
+    const delay = 60000;
+    const delta = 40;
+    const time = Date.now() - delta * 1000;
+    const wrapper = factory({ relativeTo: time });
+
+    vi.advanceTimersByTime(delay);
+    // MARTY, GO TO THE FUTURE : ${delay}s !
+
+    expect(wrapper.emitted()).toHaveProperty('change');
+    expect(wrapper.emitted().change).toEqual([
+      [delta],
+      [delta + 10],
+      [delta + 20],
+      [delta + 50],
+    ]);
+    // 4 because the first call on mounted, the next two at every 10s because it's under 60s, and the last one at 50s (0+10+10+30);
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+  });
+});

package/src/components/utils/BmsRelativeTime.stories.js

@@ -0,0 +1,48 @@
+import BmsRelativeTime from '@/components/utils/BmsRelativeTime.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Composants/utils/RelativeTime',
+  component: BmsRelativeTime,
+  argTypes: {
+    relativeTo: {
+      control: { type: 'number' },
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    BmsRelativeTime,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+    <div style="width: 400px; text-align: center;">
+      <p>
+        <BmsRelativeTime :relative-to="Date.now()" />
+      </p>
+      <p>
+        <BmsRelativeTime :relative-to="Date.now() - 60000" />
+      </p>
+      <p>
+        <BmsRelativeTime :relative-to="Date.now() - 7200000" />
+      </p>
+      <p>
+        <BmsRelativeTime :relative-to="Date.now() - 86400000" />
+      </p>
+      <p>
+        <BmsRelativeTime :relative-to="1000" />
+      </p>
+    </div>
+  `,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Primary.args = {};

package/src/components/utils/BmsRelativeTime.vue

@@ -0,0 +1,57 @@
+<template>
+  <span v-if="relativeTo" class="ui-relative-time">
+    <BmsTooltip :tooltip-text="formattedDate">
+      {{ date }}
+    </BmsTooltip>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { relativeDate } from '@/helpers/date.helper';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import BmsTooltip from '@/components/feedback/BmsTooltip.vue';
+
+interface BmsRelativeTimeProps {
+  relativeTo?: number;
+}
+
+const props = withDefaults(defineProps<BmsRelativeTimeProps>(), {
+  relativeTo: Date.now(),
+});
+
+const emit = defineEmits(['change']);
+
+const timeout = ref<any>();
+const date = ref<string>();
+
+const formattedDate = computed(() => {
+  return new Date(props.relativeTo).toLocaleString();
+});
+
+onMounted(() => {
+  setDate();
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(timeout.value);
+});
+
+const setDate = () => {
+  if (!props.relativeTo) {
+    return;
+  }
+
+  const { diff, value } = relativeDate({
+    to: props.relativeTo,
+  });
+
+  const timeoutDelay = diff < 60 ? 10000 : 30000;
+
+  date.value = value;
+  emit('change', diff);
+
+  timeout.value = setTimeout(() => {
+    setDate();
+  }, timeoutDelay);
+};
+</script>

package/src/composables/clipboard.composable.ts

@@ -0,0 +1,14 @@
+import { useNotifications } from '@/plugins/notifications';
+
+export const useClipboard = () => {
+  const { success } = useNotifications();
+
+  const copyToClipboard = async (text: string): Promise<void> => {
+    await navigator.clipboard.writeText(text);
+    success('Copié dans le presse-papier');
+  };
+
+  return {
+    copyToClipboard,
+  };
+};

package/src/composables/index.ts

@@ -0,0 +1,5 @@
+export * from './clipboard.composable';
+export * from './pagination.composable';
+export * from './search.composable';
+export * from './userPref.composable';
+export * from './sort.composable';