@ouestfrance/sipa-bms-ui 7.14.1

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

@@ -0,0 +1,422 @@
+import BmsServerTable from '@/components/table/BmsServerTable.vue';
+import { SelectMode } from '@/models/table.model';
+import { http, HttpResponse } from 'msw';
+
+export default {
+  title: 'Composants/table/ServerTable',
+  component: BmsServerTable,
+  argTypes: {
+    disableSearch: {
+      control: { type: 'boolean' },
+    },
+    headers: {},
+  },
+};
+
+const mswRequestHandler = () =>
+  http.get('https://fakeapi.com/items?size=25&page=0', () =>
+    HttpResponse.json(
+      [
+        {
+          col1: 'Value1',
+          col2: 'Value2',
+          col3: 'Value3',
+        },
+        {
+          col1: 'Value4',
+          col2: 'Value5',
+          col3: 'Value6',
+        },
+      ],
+      { headers: { 'X-Total': 4 } },
+    ),
+  );
+
+const Template = (args) => ({
+  components: {
+    BmsServerTable,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsServerTable v-bind="args">
+    </BmsServerTable>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+Default.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  url: 'https://fakeapi.com/items',
+};
+
+export const withFilters = Template.bind({});
+withFilters.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+withFilters.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  filters: [
+    {
+      label: 'Input',
+      key: 'col1',
+      type: 'input',
+      value: 'Val',
+    },
+    {
+      label: 'Select',
+      key: 'col2',
+      type: 'select',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'col3',
+      type: 'boolean',
+    },
+  ],
+  url: 'https://fakeapi.com/items',
+  defaultFiltersOpened: true,
+};
+
+export const WithSavedFilters = Template.bind({});
+WithSavedFilters.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+WithSavedFilters.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  filters: [
+    {
+      label: 'Input',
+      key: 'col1',
+      type: 'input',
+      value: 'Val',
+    },
+    {
+      label: 'Select',
+      key: 'col2',
+      type: 'select',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'col3',
+      type: 'boolean',
+    },
+  ],
+  url: 'https://fakeapi.com/items',
+  canSaveFilters: true,
+  defaultFiltersOpened: true,
+  savedFilters: [
+    {
+      id: 'uuid',
+      name: 'Saved Filter',
+      route: 'path',
+      filters: [
+        {
+          label: 'Input',
+          key: 'col1',
+          type: 'input',
+          value: 'Val',
+        },
+        {
+          label: 'Select',
+          key: 'col2',
+          type: 'select',
+          selectOptions: [
+            {
+              label: 'option1',
+              value: 'option1',
+            },
+            {
+              label: 'option2',
+              value: 'option2',
+            },
+          ],
+        },
+        {
+          label: 'Boolean',
+          key: 'col3',
+          type: 'boolean',
+        },
+      ],
+    },
+  ],
+};
+
+export const WithCustomRequest = Template.bind({});
+WithCustomRequest.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  request: () => {
+    return new Promise((resolve) =>
+      resolve({
+        data: [
+          {
+            col1: 'Value1',
+            col2: 'Value2',
+            col3: 'Value3',
+          },
+          {
+            col1: 'Value1',
+            col2: 'Value2',
+            col3: 'Value3',
+          },
+        ],
+        total: 100,
+      }),
+    );
+  },
+};
+
+export const Selectable = Template.bind({});
+Selectable.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+Selectable.args = {
+  url: 'https://fakeapi.com/items',
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  selectable: true,
+};
+
+export const Selected = Template.bind({});
+Selected.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+Selected.args = {
+  url: 'https://fakeapi.com/items',
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  selectable: true,
+};
+
+export const AllSelected = Template.bind({});
+AllSelected.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+AllSelected.args = {
+  url: 'https://fakeapi.com/items',
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectable: true,
+  maxSelectedSize: 2,
+};
+
+export const SelectAllMode = Template.bind({});
+SelectAllMode.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+SelectAllMode.args = {
+  url: 'https://fakeapi.com/items',
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  selectedItems: [],
+  selectMode: SelectMode.ALL,
+  selectable: true,
+  maxSelectedSize: 2,
+  size: 2,
+  page: 1,
+};