Skip to content

Commit d3acfab

Browse files
peyronthpeyronth
authored
Merge pull request #703 from Dative-GPI/features/groupings-tiles
add groupings tiles
2 parents 8bfcfdf + 8764e22 commit d3acfab

File tree

15 files changed

+481
-20
lines changed

15 files changed

+481
-20
lines changed

‎dev/storybook/src/mocks/groupings.mock.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { GroupingInfosDTO } from "@dative-gpi/foundation-core-domain/models
33
import { ORGANISATIONS } from "./organisations.mock";
44

55
export const GROUPINGS: GroupingInfosDTO[] = Array.from(Array(80).keys()).map(i => ({
6-
id: `grouping${(i + 1)}`,
6+
id: `${(i + 1)}`,
77
organisationId: ORGANISATIONS[0].id,
88
icon: `mdi-numeric-${(i + 1)%10}-circle`,
99
code: `number.${(i + 1)}`,

‎dev/storybook/src/mocks/subgroupings.mock.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { SubgroupingInfosDTO } from "@dative-gpi/foundation-core-domain/mod
22

33
export const SUBGROUPINGS: SubgroupingInfosDTO[] = [
44
{
5-
id: "subgrouping1",
5+
id: "1",
66
label: "Neige",
77
code: "neige",
88
groupingColor: "#FF9800",
@@ -13,7 +13,7 @@ export const SUBGROUPINGS: SubgroupingInfosDTO[] = [
1313
deviceOrganisationsCount: 5
1414
},
1515
{
16-
id: "subgrouping2",
16+
id: "2",
1717
label: "Remontées mécaniques",
1818
code: "remontees-mecaniques",
1919
groupingColor: "#FF9800",

‎dev/storybook/src/plugins/axiosmock.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ export function mockApp() {
5353
onGetWithRegex("/api/foundation/core/v1/organisations/dative/groupings/1", GROUPINGS[0]);
5454
onGetWithRegex("/api/foundation/core/v1/organisations/dative/groupings/2", GROUPINGS[1]);
5555
onGetWithRegex("/api/foundation/core/v1/organisations/dative/subgroupings", SUBGROUPINGS);
56+
onGetWithRegex("/api/foundation/core/v1/organisations/dative/subgroupings/1", SUBGROUPINGS[0]);
57+
onGetWithRegex("/api/foundation/core/v1/organisations/dative/subgroupings/2", SUBGROUPINGS[1]);
5658
onGetWithRegex("/api/foundation/core/v1/organisations/dative/locations/1", LOCATIONS[0]);
5759
onGetWithRegex("/api/foundation/core/v1/organisations/dative/locations/2", LOCATIONS[1]);
5860
onGetWithRegex("/api/foundation/core/v1/organisations/dative/locations/3", LOCATIONS[2]);

‎dev/storybook/src/stories/core/lists/baseLists/BaseGroupingsList.stories.ts‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import type { Meta, StoryObj } from '@storybook/vue3';
2+
import { addComponentEmits, addSubcomponentsArgTypes } from '@/utils/properties';
23

3-
import FSBaseGroupingsList from "@dative-gpi/foundation-core-components/components/lists/groupings/FSBaseGroupingsList.vue";
44
import FSDataTable from '@dative-gpi/foundation-core-components/components/lists/FSDataTable.vue';
5-
import { addComponentEmits, addSubcomponentsArgTypes } from '@/utils/properties';
5+
import FSBaseGroupingsList from "@dative-gpi/foundation-core-components/components/lists/groupings/FSBaseGroupingsList.vue";
66

77
const meta: Meta<typeof FSBaseGroupingsList> = {
88
title: 'Foundation/Core/Lists/Base Lists/BaseGroupingsList',
99
component: FSBaseGroupingsList,
10-
subcomponents: { FSDataTable },
1110
tags: ['autodocs'],
1211
argTypes: {
1312
...addSubcomponentsArgTypes([FSDataTable], FSBaseGroupingsList),
@@ -26,14 +25,54 @@ export const Default: Story = {
2625
},
2726
template: `
2827
<FSBaseGroupingsList
29-
v-model:modelValue="args.modelValue"
28+
v-model="args.modelValue"
29+
v-bind="args"
30+
/>
31+
`,
32+
}),
33+
args: {
34+
modelValue: [],
35+
groupingFilters: {}
36+
},
37+
};
38+
39+
export const Selectable: Story = {
40+
render: (args) => ({
41+
components: { FSBaseGroupingsList },
42+
setup() {
43+
return { args };
44+
},
45+
template: `
46+
<FSBaseGroupingsList
47+
v-model="args.modelValue"
48+
v-bind="args"
49+
/>
50+
`,
51+
}),
52+
args: {
53+
modelValue: [],
54+
groupingFilters: {},
55+
selectable: true,
56+
},
57+
};
58+
59+
export const SingleSelect: Story = {
60+
render: (args) => ({
61+
components: { FSBaseGroupingsList },
62+
setup() {
63+
return { args };
64+
},
65+
template: `
66+
<FSBaseGroupingsList
67+
v-model="args.modelValue"
3068
v-bind="args"
3169
/>
3270
`,
3371
}),
3472
args: {
3573
modelValue: [],
36-
tableCode: 'groupings1',
37-
itemTo: (item: any) => ({ name: 'Home' })
74+
groupingFilters: {},
75+
selectable: true,
76+
singleSelect: true,
3877
},
3978
};

‎dev/storybook/src/stories/core/lists/baseLists/BaseSubgroupingsList.stories.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const Default: Story = {
4040
},
4141
};
4242

43-
export const Selectable: Story = {
43+
export const NotSelectable: Story = {
4444
render: (args) => ({
4545
components: { FSBaseSubgroupingsList },
4646
setup() {
@@ -56,7 +56,7 @@ export const Selectable: Story = {
5656
args: {
5757
modelValue: [],
5858
tableCode: 'subgroupings1',
59-
selectable: true,
59+
selectable: false,
6060
},
6161
};
6262

‎dev/storybook/src/stories/core/tiles/Grouping.stories.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import type { Meta, StoryObj } from '@storybook/vue3';
2+
import { addComponentEmits, addSubcomponentsArgTypes } from '@/utils/properties';
3+
4+
import FSGroupingTileUI from '@dative-gpi/foundation-shared-components/components/tiles/FSGroupingTileUI.vue';
5+
import FSTile from '@dative-gpi/foundation-shared-components/components/tiles/FSTile.vue';
6+
import FSGroupingTile from "@dative-gpi/foundation-core-components/components/tiles/FSGroupingTile.vue";
7+
8+
const meta: Meta<typeof FSGroupingTile> = {
9+
title: 'Foundation/Core/Tiles/Grouping',
10+
component: FSGroupingTile,
11+
tags: ['autodocs'],
12+
argTypes: {
13+
...addSubcomponentsArgTypes([FSGroupingTileUI, FSTile], FSGroupingTile),
14+
...addComponentEmits(FSGroupingTile),
15+
},
16+
};
17+
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {
22+
render: (args) => ({
23+
components: { FSGroupingTile },
24+
setup() {
25+
return { args };
26+
},
27+
template: `
28+
<FSGroupingTile
29+
v-model="args.modelValue"
30+
v-bind="args"
31+
/>
32+
`,
33+
}),
34+
args: {
35+
modelValue: false,
36+
groupingId: '1',
37+
},
38+
};
39+
40+
export const Selectable: Story = {
41+
render: (args) => ({
42+
components: { FSGroupingTile },
43+
setup() {
44+
return { args };
45+
},
46+
template: `
47+
<FSGroupingTile
48+
v-model="args.modelValue"
49+
v-bind="args"
50+
/>
51+
`,
52+
}),
53+
args: {
54+
modelValue: false,
55+
groupingId: '2',
56+
selectable: true,
57+
},
58+
};

‎dev/storybook/src/stories/core/tiles/Subgrouping.stories.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import type { Meta, StoryObj } from '@storybook/vue3';
2+
import { addComponentEmits, addSubcomponentsArgTypes } from '@/utils/properties';
3+
4+
import FSSubgroupingTileUI from '@dative-gpi/foundation-shared-components/components/tiles/FSSubgroupingTileUI.vue';
5+
import FSTile from '@dative-gpi/foundation-shared-components/components/tiles/FSTile.vue';
6+
import FSSubgroupingTile from "@dative-gpi/foundation-core-components/components/tiles/FSSubgroupingTile.vue";
7+
8+
const meta: Meta<typeof FSSubgroupingTile> = {
9+
title: 'Foundation/Core/Tiles/Subgrouping',
10+
component: FSSubgroupingTile,
11+
tags: ['autodocs'],
12+
argTypes: {
13+
...addSubcomponentsArgTypes([FSSubgroupingTileUI, FSTile], FSSubgroupingTile),
14+
...addComponentEmits(FSSubgroupingTile),
15+
},
16+
};
17+
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {
22+
render: (args) => ({
23+
components: { FSSubgroupingTile },
24+
setup() {
25+
return { args };
26+
},
27+
template: `
28+
<FSSubgroupingTile
29+
v-model="args.modelValue"
30+
v-bind="args"
31+
/>
32+
`,
33+
}),
34+
args: {
35+
modelValue: false,
36+
subgroupingId: '1',
37+
},
38+
};
39+
40+
export const Selectable: Story = {
41+
render: (args) => ({
42+
components: { FSSubgroupingTile },
43+
setup() {
44+
return { args };
45+
},
46+
template: `
47+
<FSSubgroupingTile
48+
v-model="args.modelValue"
49+
v-bind="args"
50+
/>
51+
`,
52+
}),
53+
args: {
54+
modelValue: false,
55+
subgroupingId: '2',
56+
selectable: true,
57+
},
58+
};

‎dev/storybook/src/stories/shared/tiles/Grouping.stories.ts‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Meta, StoryObj } from '@storybook/vue3';
22

33
import { addComponentEmits, addSubcomponentsArgTypes } from '@/utils/properties';
4+
import { GROUPINGS } from '@/mocks/groupings.mock';
45

56
import FSTile from '@dative-gpi/foundation-shared-components/components/tiles/FSTile.vue';
67
import FSSimpleTileUI from '@dative-gpi/foundation-shared-components/components/tiles/FSSimpleTileUI.vue';
@@ -22,10 +23,11 @@ type Story = StoryObj<typeof meta>;
2223

2324
export const Default: Story = {
2425
args: {
25-
label: "Dynasties & Dystopia",
26-
code: "Denzel Curry featuring Gizzle and Bren Joy",
27-
icon: "mdi-group",
28-
color: "warning"
26+
label: GROUPINGS[0].label,
27+
code: GROUPINGS[0].code,
28+
icon: GROUPINGS[0].icon,
29+
iconColor: GROUPINGS[0].color,
30+
subgroupingCount: GROUPINGS[0].subgroupingCount,
2931
},
3032
render: (args) => ({
3133
components: { FSGroupingTileUI, FSLoadTile },
@@ -39,4 +41,33 @@ export const Default: Story = {
3941
/>
4042
`
4143
})
44+
}
45+
46+
export const Variations: Story = {
47+
args: {
48+
label: GROUPINGS[0].label,
49+
code: GROUPINGS[0].code,
50+
icon: GROUPINGS[0].icon,
51+
iconColor: GROUPINGS[0].color,
52+
subgroupingCount: GROUPINGS[0].subgroupingCount,
53+
},
54+
render: () => ({
55+
components: { FSGroupingTileUI },
56+
setup() {
57+
return { groupings: GROUPINGS.slice(0, 6) };
58+
},
59+
template: `
60+
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
61+
<FSGroupingTileUI
62+
v-for="grouping in groupings"
63+
:key="grouping.id"
64+
:label="grouping.label"
65+
:code="grouping.code"
66+
:icon="grouping.icon"
67+
:iconColor="grouping.color"
68+
:subgroupingCount="grouping.subgroupingCount"
69+
/>
70+
</div>
71+
`
72+
})
4273
}

‎dev/storybook/src/stories/shared/tiles/Subgrouping.stories.ts‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import type { Meta, StoryObj } from '@storybook/vue3';
2+
3+
import { addComponentEmits, addSubcomponentsArgTypes } from '@/utils/properties';
4+
import { SUBGROUPINGS } from '@/mocks/subgroupings.mock';
5+
6+
import FSTile from '@dative-gpi/foundation-shared-components/components/tiles/FSTile.vue';
7+
import FSSimpleTileUI from '@dative-gpi/foundation-shared-components/components/tiles/FSSimpleTileUI.vue';
8+
import FSSubgroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSSubgroupingTileUI.vue";
9+
import FSLoadTile from '@dative-gpi/foundation-shared-components/components/tiles/FSLoadTile.vue';
10+
11+
const meta = {
12+
title: 'Foundation/Shared/Tiles/Subgrouping',
13+
component: FSSubgroupingTileUI,
14+
tags: ['autodocs'],
15+
argTypes: {
16+
...addSubcomponentsArgTypes([FSTile, FSSimpleTileUI], FSSubgroupingTileUI),
17+
...addComponentEmits(FSSubgroupingTileUI),
18+
},
19+
} satisfies Meta<typeof FSSubgroupingTileUI>;
20+
21+
export default meta;
22+
type Story = StoryObj<typeof meta>;
23+
24+
export const Default: Story = {
25+
args: {
26+
label: SUBGROUPINGS[1].label,
27+
code: SUBGROUPINGS[1].code,
28+
icon: SUBGROUPINGS[1].icon,
29+
groupingLabel: SUBGROUPINGS[1].groupingLabel,
30+
groupingIcon: SUBGROUPINGS[1].groupingIcon,
31+
groupingColor: SUBGROUPINGS[1].groupingColor,
32+
deviceOrganisationsCount: SUBGROUPINGS[1].deviceOrganisationsCount,
33+
},
34+
render: (args) => ({
35+
components: { FSSubgroupingTileUI, FSLoadTile },
36+
setup() {
37+
return { args };
38+
},
39+
template: `
40+
<FSSubgroupingTileUI
41+
v-model="args.modelValue"
42+
v-bind="args"
43+
/>
44+
`
45+
})
46+
}
47+
48+
export const Variations: Story = {
49+
args: {
50+
label: SUBGROUPINGS[0].label,
51+
code: SUBGROUPINGS[0].code,
52+
icon: SUBGROUPINGS[0].icon,
53+
groupingLabel: SUBGROUPINGS[0].groupingLabel,
54+
groupingIcon: SUBGROUPINGS[0].groupingIcon,
55+
groupingColor: SUBGROUPINGS[0].groupingColor,
56+
deviceOrganisationsCount: SUBGROUPINGS[0].deviceOrganisationsCount,
57+
},
58+
render: () => ({
59+
components: { FSSubgroupingTileUI },
60+
setup() {
61+
return { subgroupings: SUBGROUPINGS };
62+
},
63+
template: `
64+
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
65+
<FSSubgroupingTileUI
66+
v-for="subgrouping in subgroupings"
67+
:key="subgrouping.id"
68+
:label="subgrouping.label"
69+
:code="subgrouping.code"
70+
:icon="subgrouping.icon"
71+
:groupingLabel="subgrouping.groupingLabel"
72+
:groupingIcon="subgrouping.groupingIcon"
73+
:groupingColor="subgrouping.groupingColor"
74+
:deviceOrganisationsCount="subgrouping.deviceOrganisationsCount"
75+
/>
76+
</div>
77+
`
78+
})
79+
}

0 commit comments

Comments
 (0)