@ouestfrance/sipa-bms-ui 7.14.1

package/src/plugins/notifications/NotificationWidget.vue

@@ -0,0 +1,129 @@
+<template>
+  <Teleport to="body">
+    <div class="bms-notifications">
+      <div class="bms-notifications__list">
+        <TransitionGroup name="bms-notifactions-transition">
+          <NotificationItem
+            v-for="notification in notifications"
+            :key="notification.id"
+            :notification="notification"
+            class="bms-notifications__item"
+            @close="close(notification)"
+            @open-details="openDetails(notification)"
+          />
+        </TransitionGroup>
+      </div>
+    </div>
+  </Teleport>
+  <BmsModal
+    :model-value="openNotification"
+    :type="
+      openNotification?.type === NotificationType.error
+        ? StatusType.Danger
+        : StatusType.Default
+    "
+    title="Détails"
+    :buttons="modalButtons"
+    @submit="closeDetails"
+    @close="closeDetails"
+    priority
+  >
+    <template #default>
+      <BmsProblem
+        v-if="isProblem(openNotification?.details)"
+        :problem="openNotification?.details as Problem"
+      />
+      <template v-else>{{ openNotification?.details }}</template>
+    </template>
+  </BmsModal>
+</template>
+
+<script setup lang="ts">
+import { Ref, inject, ref } from 'vue';
+import { BmsNotificationsInstance } from './index';
+import { Notification, NotificationType } from './notification.model';
+import NotificationItem from './NotificationItem.vue';
+import {
+  BmsModal,
+  BmsProblem,
+  ModalActionButton,
+  StatusType,
+  type Problem,
+  isProblem,
+} from '@/index';
+
+const notifications: Notification[] | undefined = inject('notifications');
+const notify: any = inject(BmsNotificationsInstance);
+const openNotification: Ref<Notification | null> = ref(null);
+
+const modalButtons: ModalActionButton[] = [
+  {
+    label: 'Fermer',
+    role: 'submit',
+    action: () => {
+      closeDetails();
+      return Promise.resolve(false);
+    },
+  },
+];
+
+const close = (notification: Notification) => {
+  notify.dismiss(notification.id);
+};
+
+const openDetails = (notification: Notification) => {
+  close(notification);
+  openNotification.value = notification;
+};
+
+const closeDetails = () => {
+  openNotification.value = null;
+};
+</script>
+
+<style lang="scss" scoped>
+.bms-notifications {
+  --bms-notifications-width: 360px;
+  --bms-notifications-margin: 1em 0 0;
+  --bms-notifications-left: initial;
+  --bms-notifications-right: 1em;
+  --bms-notifications-bottom: 1em;
+  --bms-notifications-top: initial;
+  --bms-notifications-transition-duration: 0.4s;
+  --bms-notifications-transition-timing-function: ease-in-out;
+  --bms-notifications-enter-translate: 2em;
+
+  position: fixed;
+  left: var(--bms-notifications-left);
+  right: var(--bms-notifications-right);
+  bottom: var(--bms-notifications-bottom);
+  top: var(--bms-notifications-top);
+  width: 100%;
+  max-width: var(--bms-notifications-width);
+  z-index: 20;
+
+  &__item {
+    &:not(:first-child) {
+      margin: var(--bms-notifications-margin);
+    }
+  }
+}
+
+.bms-notifactions-transition-move,
+.bms-notifactions-transition-enter-active,
+.bms-notifactions-transition-leave-active {
+  transition: all var(--bms-notifications-transition-duration)
+    var(--bms-notifications-transition-timing-function);
+}
+.bms-notifactions-transition-enter-from,
+.bms-notifactions-transition-leave-to {
+  opacity: 0;
+}
+.bms-notifactions-transition-enter-from {
+  transform: translateX(var(--bms-notifications-enter-translate));
+}
+
+.bms-notifactions-transition-leave-active {
+  position: absolute;
+}
+</style>

package/src/plugins/notifications/index.ts

@@ -0,0 +1,83 @@
+import { v4 as uuid } from 'uuid';
+import type { App, InjectionKey, Ref } from 'vue';
+import { inject, ref } from 'vue';
+import {
+  Notification,
+  NotificationInstance,
+  NotificationSettings,
+  NotificationType,
+} from './notification.model';
+import NotificationWidget from './NotificationWidget.vue';
+import { Problem } from '@/models';
+
+export const BmsNotificationsInstance =
+  Symbol() as InjectionKey<NotificationInstance>;
+
+export const notifications = {
+  install(app: App, pluginSettings?: NotificationSettings) {
+    const notifications = ref<Notification[]>([]);
+    const settings: NotificationSettings = Object.assign(
+      {},
+      {
+        display: 10,
+        delay: 4000,
+      },
+      pluginSettings,
+    );
+
+    app.provide<Ref<Notification[]>>('notifications', notifications);
+
+    const notify = (
+      type: NotificationType,
+      text: string,
+      time: number,
+      details?: string | Problem,
+    ) => {
+      const newNotification = { type, text, details, id: uuid() };
+
+      notifications.value.push(newNotification);
+      notifications.value = notifications.value.slice(-settings.display);
+
+      if (time > 0) {
+        setTimeout(() => {
+          notifications.value = notifications.value.filter(
+            (notification) => notification.id !== newNotification.id,
+          );
+        }, time);
+      }
+    };
+
+    const dismiss = (id: string) => {
+      notifications.value = notifications.value.filter(
+        (notification) => notification.id !== id,
+      );
+    };
+
+    app.provide<NotificationInstance>(BmsNotificationsInstance, {
+      success: (text: string, details: string = '', time = settings.delay) => {
+        notify(NotificationType.success, text, time, details);
+      },
+      error: (text: string, details: string | Problem = '', time = 0) => {
+        notify(NotificationType.error, text, time, details);
+      },
+      dismiss: (id: string) => {
+        dismiss(id);
+      },
+    });
+
+    app.component('bms-notifications', NotificationWidget);
+  },
+};
+
+export function useNotifications() {
+  const notify = inject(BmsNotificationsInstance, {
+    success: () => {},
+    error: () => {},
+    dismiss: () => {},
+  });
+
+  return {
+    success: notify.success,
+    error: notify.error,
+  };
+}

package/src/plugins/notifications/notification.model.ts

@@ -0,0 +1,24 @@
+import { Problem } from '@/models/problem.model';
+
+export interface Notification {
+  id: string;
+  details?: string | Problem;
+  type: NotificationType;
+  text: string;
+}
+
+export interface NotificationSettings {
+  display: number;
+  delay: number;
+}
+
+export enum NotificationType {
+  success = 'success',
+  error = 'error',
+}
+
+export interface NotificationInstance {
+  success: (text: string, details?: string, time?: number) => void;
+  error: (text: string, details?: string | Problem, time?: number) => void;
+  dismiss: (id: string) => void;
+}

package/src/plugins/notifications/notifications.spec.js

@@ -0,0 +1,78 @@
+import { config, mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, inject, nextTick } from 'vue';
+import { BmsNotificationsInstance, notifications } from './index';
+
+const MyComponent = defineComponent({
+  template: `
+  <bms-notifications></bms-notifications>`,
+  setup() {
+    const notify = inject(BmsNotificationsInstance);
+
+    const notifySuccess = (time, details = '') => {
+      notify.success('This is a success', details, time);
+    };
+    const notifyError = (time, details = '') => {
+      notify.error('This is an error', details, time);
+    };
+    return { notifySuccess, notifyError };
+  },
+});
+
+const intersectionObserverMock = () => ({
+  observe: () => null,
+});
+
+const factory = () => mount(MyComponent, { global: { stubs: ['teleport'] } });
+
+config.global.plugins = [notifications];
+
+describe('Notifications', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.useFakeTimers();
+    window.IntersectionObserver = vi
+      .fn()
+      .mockImplementation(intersectionObserverMock);
+  });
+
+  it('should display success notification', async () => {
+    const wrapper = factory();
+    wrapper.vm.notifySuccess(0);
+    vi.runAllTimers();
+    await nextTick();
+    expect(wrapper.find('.bms-notification--success').exists()).toBeTruthy();
+  });
+  it('should display error notification', async () => {
+    const wrapper = factory();
+    wrapper.vm.notifyError(0);
+    vi.runAllTimers();
+    await nextTick();
+    expect(wrapper.find('.bms-notification--error').exists()).toBeTruthy();
+  });
+
+  it('should display success notification and hide it after some time', async () => {
+    const wrapper = factory();
+    wrapper.vm.notifySuccess(3000);
+    vi.runAllTimers();
+    await nextTick();
+    expect(wrapper.find('.bms-notification--success').exists()).toBeFalsy();
+  });
+  it('should display error notification and hide it after some time', async () => {
+    const wrapper = factory();
+    wrapper.vm.notifyError(3000);
+    vi.runAllTimers();
+    await nextTick();
+    expect(wrapper.find('.bms-notification--error').exists()).toBeFalsy();
+    expect(wrapper.find('.ui-modal').exists()).toBeFalsy();
+  });
+  it('should display modal when click on the see details', async () => {
+    const wrapper = factory();
+    wrapper.vm.notifyError(0, 'details');
+    vi.runAllTimers();
+    await nextTick();
+    expect(wrapper.find('.bms-notification--error').exists()).toBeTruthy();
+    await wrapper.find('.details').trigger('click');
+    expect(wrapper.find('.ui-modal').exists()).toBeTruthy();
+  });
+});

package/src/plugins/router-history/index.ts

@@ -0,0 +1,23 @@
+import type { App } from 'vue';
+import { watch } from 'vue';
+import { useRouterHistory } from './router-history.composable';
+import { useRoute } from 'vue-router';
+
+export const routerHistoryPlugin = {
+  install(app: App) {
+    app.component('bms-router-history', {
+      setup() {
+        const { addHistoryRoute } = useRouterHistory();
+        const currentRoute = useRoute();
+        watch(currentRoute, () => {
+          addHistoryRoute({ ...currentRoute });
+        });
+      },
+      render() {
+        return '';
+      },
+    });
+  },
+};
+
+export { useRouterHistory };

package/src/plugins/router-history/router-history.composable.spec.ts

@@ -0,0 +1,323 @@
+import { mount } from '@vue/test-utils';
+import { useRouterHistory } from './router-history.composable';
+import { defineComponent } from 'vue';
+import { RouteLocationNamedRaw } from 'vue-router';
+
+const pushMock = vi.fn();
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn().mockImplementation(() => ({ push: pushMock })),
+}));
+
+const factory = (props?: any) => {
+  return mount(
+    defineComponent({
+      setup() {
+        return useRouterHistory();
+      },
+      template: '<div/>',
+    }),
+    { props: props },
+  );
+};
+
+describe('Router History Composable', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    console.warn = vi.fn();
+  });
+  describe('goBack', () => {
+    const wrapper = factory();
+    it('should throw error if no route in history', async () => {
+      wrapper.vm.historyRoutes = [];
+      try {
+        await wrapper.vm.goBack();
+      } catch (e) {
+        expect(e).toBeTruthy();
+        expect(console.warn).toHaveBeenCalled();
+        expect(wrapper.vm.historyRoutes.length).toEqual(0);
+      }
+    });
+    it('should throw error and reset history and go to fallback if available', async () => {
+      wrapper.vm.historyRoutes = [
+        {
+          path: '/id0',
+          name: 'id0',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ];
+      try {
+        await wrapper.vm.goBack({
+          path: 'toto',
+          name: 'toto',
+          query: {},
+          hash: '',
+          params: {},
+        } as any);
+      } catch (e) {
+        expect(e).toBeTruthy();
+        expect(console.warn).not.toHaveBeenCalled();
+        expect(wrapper.vm.historyRoutes.length).toEqual(0);
+        expect(pushMock).toHaveBeenCalledWith({
+          path: 'toto',
+          name: 'toto',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        });
+      }
+    });
+    it('should throw error and reset history and go to / if no fallback available', async () => {
+      wrapper.vm.historyRoutes = [
+        {
+          path: '/id0',
+          name: 'id0',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ];
+      try {
+        await wrapper.vm.goBack();
+      } catch (e) {
+        expect(e).toBeTruthy();
+        expect(console.warn).not.toHaveBeenCalled();
+        expect(wrapper.vm.historyRoutes.length).toEqual(0);
+        expect(pushMock).toHaveBeenCalledWith({ path: '/' });
+      }
+    });
+    it('should push route and remove corresponding historyRoutes', async () => {
+      wrapper.vm.historyRoutes = [
+        {
+          path: '/id0',
+          name: 'id0',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+        {
+          path: '/id1',
+          name: 'id1',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+        {
+          path: '/id2',
+          name: 'id2',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ];
+      await wrapper.vm.goBack();
+      expect(pushMock).toHaveBeenCalledWith({
+        path: '/id1',
+        name: 'id1',
+        matched: [],
+        fullPath: '',
+        query: {},
+        hash: '',
+        meta: {},
+        params: {},
+        redirectedFrom: undefined,
+      });
+      expect(wrapper.vm.historyRoutes).toEqual([
+        {
+          path: '/id0',
+          name: 'id0',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ]);
+    });
+  });
+  describe('addHistoryRoute', () => {
+    const wrapper = factory();
+    it('should add history Route', () => {
+      wrapper.vm.historyRoutes = [
+        {
+          path: '/id0',
+          name: 'id0',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ];
+      wrapper.vm.addHistoryRoute({
+        path: '/id1',
+        name: 'id1',
+        matched: [],
+        fullPath: '',
+        query: {},
+        hash: '',
+        meta: {},
+        params: {},
+        redirectedFrom: undefined,
+      });
+      expect(wrapper.vm.historyRoutes).toEqual([
+        {
+          path: '/id0',
+          name: 'id0',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+        {
+          path: '/id1',
+          name: 'id1',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ]);
+    });
+    it('should add history Route if empty', () => {
+      wrapper.vm.historyRoutes = [];
+      wrapper.vm.addHistoryRoute({
+        path: '/id1',
+        name: 'id1',
+        matched: [],
+        fullPath: '',
+        query: {},
+        hash: '',
+        meta: {},
+        params: {},
+        redirectedFrom: undefined,
+      });
+      expect(wrapper.vm.historyRoutes).toEqual([
+        {
+          path: '/id1',
+          name: 'id1',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ]);
+    });
+    it('should replace history Route if previous route has same name', () => {
+      wrapper.vm.historyRoutes = [
+        {
+          path: '/id0',
+          name: 'name0',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ];
+      wrapper.vm.addHistoryRoute({
+        path: '/id1',
+        name: 'name0',
+        matched: [],
+        fullPath: '',
+        query: {},
+        hash: '',
+        meta: {},
+        params: {},
+        redirectedFrom: undefined,
+      });
+      expect(wrapper.vm.historyRoutes).toEqual([
+        {
+          path: '/id1',
+          name: 'name0',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ]);
+    });
+    it('should replace history Route if previous route has same path', () => {
+      wrapper.vm.historyRoutes = [
+        {
+          path: '/id0',
+          name: 'name0',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ];
+      wrapper.vm.addHistoryRoute({
+        path: '/id0',
+        name: 'name1',
+        matched: [],
+        fullPath: '',
+        query: {},
+        hash: '',
+        meta: {},
+        params: {},
+        redirectedFrom: undefined,
+      });
+      expect(wrapper.vm.historyRoutes).toEqual([
+        {
+          path: '/id0',
+          name: 'name1',
+          matched: [],
+          fullPath: '',
+          query: {},
+          hash: '',
+          meta: {},
+          params: {},
+          redirectedFrom: undefined,
+        },
+      ]);
+    });
+  });
+});

package/src/plugins/router-history/router-history.composable.ts

@@ -0,0 +1,47 @@
+import { Ref, ref } from 'vue';
+import {
+  RouteLocationNormalizedLoaded,
+  RouteLocationRaw,
+  useRouter,
+} from 'vue-router';
+
+const historyRoutes: Ref<RouteLocationNormalizedLoaded[]> = ref([]);
+
+export const useRouterHistory = () => {
+  const router = useRouter();
+
+  const goBack = async (fallback?: RouteLocationRaw) => {
+    if (historyRoutes.value.length === 0) {
+      console.warn(
+        'You need to install the RouterHistory plugin. See Readme#router-history for more info',
+      );
+      throw new Error('History Router plugin is not installed');
+    }
+    if (historyRoutes.value.length > 1) {
+      const target = historyRoutes.value[historyRoutes.value.length - 2];
+      historyRoutes.value = historyRoutes.value.slice(0, -2);
+      await router.push(target);
+    } else {
+      historyRoutes.value = [];
+      await router.push(fallback || { path: '/' });
+    }
+  };
+
+  const addHistoryRoute = (route: RouteLocationNormalizedLoaded) => {
+    const lastRoute = historyRoutes.value.at(-1);
+    if (
+      lastRoute &&
+      ((lastRoute.name && lastRoute.name === route.name) ||
+        (lastRoute.path && lastRoute.path === route.path))
+    ) {
+      historyRoutes.value.pop();
+    }
+    historyRoutes.value.push(route);
+  };
+
+  return {
+    historyRoutes,
+    addHistoryRoute,
+    goBack,
+  };
+};