@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/navigation/UiTenantSwitcher.vue

@@ -0,0 +1,161 @@
+<template>
+  <UiPopoverMenu :to="to" :visible="visible">
+    <BmsCard v-if="visible" class="tenantsMenu">
+      <div class="tenantsMenu-search">
+        <BmsInputText
+          ref="searchRef"
+          v-model="search"
+          type="search"
+          autocomplete="off"
+          class="tenantsMenu-search-input"
+          name="search"
+          :placeholder="selectTenantPlaceholder"
+          :clearable="true"
+          @enterKey="onEnterKeyPress"
+        >
+          <template #icon-start>
+            <Search />
+          </template>
+        </BmsInputText>
+      </div>
+
+      <div ref="tenantsListRef" class="tenantsMenu-tenants-list">
+        <template v-if="splittedTenants.favorites.length">
+          <UiTenantLabel
+            :tenant="tenant"
+            v-for="tenant in splittedTenants.favorites"
+            :key="tenant.information"
+            @changeTenant="changeTenant(tenant)"
+            @removeFavorite="onRemoveTenantFromFavorites(tenant)"
+          />
+
+          <hr />
+        </template>
+        <UiTenantLabel
+          v-for="tenant in splittedTenants.tenants"
+          :tenant="tenant"
+          :key="tenant.id"
+          @click="changeTenant(tenant)"
+        />
+      </div>
+    </BmsCard>
+  </UiPopoverMenu>
+</template>
+
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next';
+import UiPopoverMenu from '@/components/layout/UiPopoverMenu.vue';
+import {
+  type ComputedRef,
+  ref,
+  watch,
+  computed,
+  type Ref,
+  nextTick,
+} from 'vue';
+import { Tenant } from '@/models';
+import { BmsCard, BmsInputText, searchString } from '@/index';
+import UiTenantLabel from './UiTenantLabel.vue';
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    to: HTMLElement | null;
+    tenants: Tenant[];
+    selectTenantPlaceholder?: string;
+  }>(),
+  {
+    selectTenantPlaceholder: '',
+  },
+);
+
+const emit = defineEmits<{
+  changeTenant: [tenant: Tenant];
+  removeFavoriteTenant: [tenant: Tenant];
+}>();
+
+const tenantsListRef = ref(null);
+const searchRef: Ref<typeof BmsInputText | null> = ref(null);
+const search = ref('');
+
+const filteredTenants: ComputedRef<Tenant[]> = computed(() => {
+  return props.tenants.filter(
+    (tenant) =>
+      searchString(tenant.label, search.value) ||
+      searchString(tenant.information, search.value),
+  );
+});
+
+const splittedTenants = computed(() => {
+  return filteredTenants.value.reduce(
+    (acc, val) => {
+      val.isFavorite ? acc.favorites.push(val) : acc.tenants.push(val);
+
+      return acc;
+    },
+    { favorites: [], tenants: [] } as {
+      favorites: Tenant[];
+      tenants: Tenant[];
+    },
+  );
+});
+
+const changeTenant = (tenant: Tenant) => {
+  emit('changeTenant', tenant);
+};
+
+const onEnterKeyPress = () => {
+  if (filteredTenants.value.length > 0) {
+    changeTenant(filteredTenants.value[0]);
+  }
+};
+const onRemoveTenantFromFavorites = (tenant: Tenant) => {
+  emit('removeFavoriteTenant', tenant);
+};
+
+watch(
+  () => props.visible,
+  async () => {
+    search.value = '';
+    await nextTick();
+    if (searchRef.value && props.visible) {
+      searchRef.value.setFocus();
+    }
+  },
+);
+</script>
+<style lang="scss" scoped>
+.tenantsMenu {
+  padding: 0;
+  background-color: var(--bms-white);
+  width: 100%;
+
+  &-search {
+    padding: 14px;
+    border-bottom: 1px solid var(--bms-grey-10);
+
+    &-input {
+      margin: 0;
+    }
+  }
+
+  &-tenants {
+    &-list {
+      max-height: 200px;
+      overflow-y: auto;
+      padding-top: 0.5em;
+
+      hr {
+        display: block;
+        appearance: none;
+        color: inherit;
+        border: 0;
+        height: 1px;
+        background: currentColor;
+        opacity: 0.08;
+        margin: 0.5em 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,32 @@
+import BmsEmptyScreen from '@/components/table/BmsEmptyScreen.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Composants/table/EmptyScreen',
+  component: BmsEmptyScreen,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {},
+};
+
+// 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: {
+    BmsEmptyScreen,
+  },
+  // 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: `
+    <BmsEmptyScreen v-bind="args" />
+  `,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  title: 'Not found',
+  description: "The requested data haven't been found",
+};

package/src/components/table/BmsEmptyScreen.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import Empty from '@/assets/empty.svg?component';
+
+const props = defineProps<{
+  title: string;
+  description?: string;
+}>();
+</script>
+
+<template>
+  <div class="empty-screen">
+    <div class="empty-screen__img">
+      <Empty />
+    </div>
+
+    <h1 class="empty-screen__title">{{ props.title }}</h1>
+    <p v-if="props.description" class="empty-screen__description">
+      {{ props.description }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty-screen {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  &__img {
+    font-size: var(--empty-screen-image-size, 1.2em);
+    width: 10em;
+    height: 10em;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__title {
+    font-size: 1.4em;
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 0;
+  }
+
+  &__description {
+    margin-top: 0.5em;
+    font-size: 1em;
+    text-align: center;
+    font-weight: normal;
+  }
+}
+</style>

package/src/components/table/BmsPagination.spec.ts

@@ -0,0 +1,73 @@
+import BmsPagination from '@/components/table/BmsPagination.vue';
+import { field } from '@/plugins/field';
+import { mount, shallowMount } from '@vue/test-utils';
+
+const intersectionObserverMock = () => ({
+  observe: () => null,
+});
+
+const shallowFactory = (props: any) => {
+  return shallowMount(BmsPagination, {
+    global: {
+      plugins: [field],
+    },
+    propsData: { ...props },
+  });
+};
+
+const factory = (props: any) => {
+  return mount(BmsPagination, {
+    global: {
+      plugins: [field],
+    },
+    propsData: { ...props },
+  });
+};
+
+describe('BmsPagination', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    window.IntersectionObserver = vi
+      .fn()
+      .mockImplementation(intersectionObserverMock);
+  });
+  it('should display correctly', () => {
+    const wrapper = shallowFactory({
+      sizes: [25, 50],
+      total: 120,
+      currentPage: 0,
+      currentSize: 25,
+      pages: Math.ceil(120 / 25),
+    });
+
+    expect(wrapper.text()).toContain('Éléments par page : 1 à 25 / 120');
+  });
+
+  it('should emit correct navigation events', async () => {
+    const wrapper = factory({
+      sizes: [25, 50],
+      total: 120,
+      currentPage: 2,
+      currentSize: 25,
+      pages: Math.ceil(120 / 25),
+    });
+
+    const actions = wrapper.find('.bms-pagination__actions').findAll('button');
+    const goToBeginning = actions[0];
+    const goBack = actions[1];
+    const goForward = actions[2];
+    const goToEnding = actions[3];
+
+    await goToBeginning.trigger('click');
+    expect(wrapper.emitted().go[0]).toEqual([0]);
+
+    await goBack.trigger('click');
+    expect(wrapper.emitted().prev[0]).toEqual([]);
+
+    await goForward.trigger('click');
+    expect(wrapper.emitted().next[0]).toEqual([]);
+
+    await goToEnding.trigger('click');
+    expect(wrapper.emitted().go[1]).toEqual([4]);
+  });
+});

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

@@ -0,0 +1,34 @@
+import BmsPagination from '@/components/table/BmsPagination.vue';
+
+export default {
+  title: 'Composants/table/Pagination',
+  component: BmsPagination,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsPagination,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsPagination v-bind="args" :current-size="10"/>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  sizes: [10, 25, 50, 100],
+  total: 120,
+  currentPage: 0,
+  pages: 8,
+};
+
+export const NoEnding = Template.bind({});
+NoEnding.args = {
+  sizes: [10, 25, 50, 100],
+  total: Infinity,
+  currentPage: 0,
+  pages: Infinity,
+};

package/src/components/table/BmsPagination.vue

@@ -0,0 +1,154 @@
+<template>
+  <div ref="container" class="bms-pagination" tabcurrentPage="0">
+    <div class="bms-pagination__select">
+      {{ selectLabel }}
+      <BmsSelect
+        v-model="size"
+        :options="
+          sizes.map((size: number) => ({ label: size.toString(), value: size }))
+        "
+      />
+    </div>
+
+    <div class="bms-pagination__status">
+      <slot
+        :first="size * currentPage + 1"
+        :current-last="lastItemNumber"
+        :last="total"
+      >
+        {{ size * currentPage + 1 }} à {{ lastItemNumber
+        }}<template v-if="total !== Infinity"> / {{ total }}</template>
+        <template v-else> ...</template>
+      </slot>
+    </div>
+
+    <div class="bms-pagination__actions">
+      <BmsIconButton
+        color="neutral"
+        @click="goToFirst"
+        :disabled="currentPage === 0"
+      >
+        <ChevronFirst />
+      </BmsIconButton>
+      <BmsIconButton @click="goToPrevious" :disabled="currentPage === 0">
+        <ChevronLeft />
+      </BmsIconButton>
+      <BmsIconButton
+        @click="goToNext"
+        :disabled="currentPage === pages - 1 || pages === 0"
+      >
+        <ChevronRight />
+      </BmsIconButton>
+      <BmsIconButton
+        @click="goToLast"
+        :disabled="
+          currentPage === pages - 1 || pages === 0 || total === Infinity
+        "
+      >
+        <ChevronLast />
+      </BmsIconButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { BmsSelect } from '@/index';
+
+import {
+  ChevronFirst,
+  ChevronLast,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-vue-next';
+import { computed, ref } from 'vue';
+import BmsIconButton from '../button/BmsIconButton.vue';
+
+interface BmsPaginationProps {
+  currentSize: number;
+  sizes: number[];
+  total: number;
+  currentPage: number;
+  pages: number;
+  selectLabel?: string;
+}
+const props = withDefaults(defineProps<BmsPaginationProps>(), {
+  selectLabel: 'Éléments par page :',
+});
+
+const emit = defineEmits<{
+  (e: 'update:currentSize', value: number): void;
+  (e: 'next'): void;
+  (e: 'prev'): void;
+  (e: 'go', page: number): void;
+}>();
+
+const container = ref<HTMLInputElement | null>(null);
+
+const lastItemNumber = computed(() => {
+  const currentLastIndex = size.value + size.value * props.currentPage;
+
+  return currentLastIndex <= props.total ? currentLastIndex : props.total;
+});
+
+const size = computed({
+  get() {
+    return props.currentSize;
+  },
+  set(value: number) {
+    emit('update:currentSize', value);
+  },
+});
+
+const focusContainer = () => {
+  /*
+    buttons lose focus on disable
+    keep focus on the component after action
+  */
+  container.value?.focus();
+};
+
+const goToFirst = () => {
+  focusContainer();
+  emit('go', 0);
+};
+
+const goToPrevious = () => {
+  if (props.currentPage === 1) {
+    focusContainer();
+  }
+  emit('prev');
+};
+
+const goToNext = () => {
+  if (props.currentPage === props.pages - 1) {
+    focusContainer();
+  }
+  emit('next');
+};
+
+const goToLast = () => {
+  focusContainer();
+  emit('go', props.pages - 1);
+};
+</script>
+
+<style lang="scss" scoped>
+.bms-pagination {
+  font-size: 0.88em;
+  display: flex;
+  gap: 2em;
+  justify-content: flex-end;
+  align-items: baseline;
+
+  &__select {
+    display: flex;
+    gap: 1em;
+    align-items: baseline;
+
+    :deep(.field__wrapper) {
+      min-width: 10em;
+      width: 10em;
+    }
+  }
+}
+</style>