@dative-gpi/foundation-core-components 0.0.87 → 0.0.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,40 +1,65 @@
1
1
  <template>
2
- <FSAutocompleteField :toggleSet="!$props.toggleSetDisabled && toggleSet"
3
- :loading="loading"
4
- :items="dataCategories"
2
+ <FSAutocompleteField
3
+ :toggleSet="!$props.toggleSetDisabled && toggleSet"
5
4
  :multiple="$props.multiple"
5
+ :items="dataCategories"
6
+ :loading="loading"
6
7
  :modelValue="$props.modelValue"
7
8
  @update:modelValue="onUpdate"
8
- v-model:search="search"
9
- v-bind="$attrs">
10
- <template #selection="{ item }">
11
- <FSRow align="center-center"
9
+ v-bind="$attrs"
10
+ >
11
+ <template
12
+ #autocomplete-selection="{ item }"
13
+ >
14
+ <FSRow
15
+ v-if="$props.modelValue"
16
+ align="center-center"
12
17
  :wrap="false"
13
- :gap="0">
14
- <FSText>
15
- {{ item.raw.label }}
16
- </FSText>
18
+ >
17
19
  <FSIcon>
18
20
  {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
19
21
  </FSIcon>
22
+ <FSSpan>
23
+ {{ item.raw.label }}
24
+ </FSSpan>
20
25
  </FSRow>
21
26
  </template>
22
- <template #item="{ props, item }">
23
- <v-list-item v-bind="{ ...props, title: '' }">
24
- <FSRow align="center-left">
25
- <FSCheckbox v-if="$props.multiple"
26
- :modelValue="isSelected(item.value)" />
27
- <FSRow :gap="2">
28
- <FSText>
29
- {{ item.raw.label }}
30
- </FSText>
31
- <FSIcon>
32
- {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
33
- </FSIcon>
34
- </FSRow>
27
+ <template
28
+ #autocomplete-item="{ props, item }"
29
+ >
30
+ <v-list-item
31
+ v-bind="{ ...props, title: '' }"
32
+ >
33
+ <FSRow
34
+ align="center-left"
35
+ :wrap="false"
36
+ >
37
+ <FSCheckbox
38
+ v-if="$props.multiple"
39
+ :modelValue="$props.modelValue?.includes(item.value)"
40
+ @click="props.onClick"
41
+ />
42
+ <FSIcon>
43
+ {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
44
+ </FSIcon>
45
+ <FSSpan>
46
+ {{ item.raw.label }}
47
+ </FSSpan>
35
48
  </FSRow>
36
49
  </v-list-item>
37
50
  </template>
51
+ <template
52
+ #toggle-set-item="props"
53
+ >
54
+ <FSButton
55
+ :prependIcon="props.item.correlated ? 'mdi-link' : 'mdi-link-off'"
56
+ :variant="props.getVariant(props.item)"
57
+ :color="props.getColor(props.item)"
58
+ :class="props.getClass(props.item)"
59
+ :label="props.item.label"
60
+ @click="props.toggle(props.item)"
61
+ />
62
+ </template>
38
63
  </FSAutocompleteField>
39
64
  </template>
40
65
 
@@ -46,13 +71,21 @@ import { useDataCategories } from "@dative-gpi/foundation-core-services/composab
46
71
  import { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
47
72
 
48
73
  import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
49
- import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
74
+ import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
75
+ import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
76
+ import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
77
+ import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
78
+ import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
50
79
 
51
80
  export default defineComponent({
52
81
  name: "FSAutocompleteDataCategory",
53
82
  components: {
54
83
  FSAutocompleteField,
55
- FSText
84
+ FSCheckbox,
85
+ FSButton,
86
+ FSIcon,
87
+ FSSpan,
88
+ FSRow
56
89
  },
57
90
  props: {
58
91
  dataCategoriesFilters: {
@@ -80,32 +113,26 @@ export default defineComponent({
80
113
  setup(props, { emit }) {
81
114
  const { getMany: getManyDataCategories, fetching: fetchingDataCategories, entities: dataCategories } = useDataCategories();
82
115
 
116
+ const loading = computed((): boolean => {
117
+ return init.value && fetchingDataCategories.value;
118
+ });
119
+
83
120
  const innerFetch = (search: string | null) => {
84
121
  return getManyDataCategories({ ...props.dataCategoriesFilters, search: search ?? undefined });
85
122
  };
86
123
 
87
- const { toggleSet, search, init, onUpdate } = useAutocomplete(
124
+ const { toggleSet, init, onUpdate } = useAutocomplete(
88
125
  dataCategories,
89
126
  [() => props.dataCategoriesFilters],
90
127
  emit,
91
128
  innerFetch
92
129
  );
93
130
 
94
- const loading = computed((): boolean => {
95
- return init.value && fetchingDataCategories.value;
96
- });
97
-
98
- const isSelected = (id: any) => {
99
- return props.modelValue?.includes(id);
100
- }
101
-
102
131
  return {
103
132
  dataCategories,
104
133
  toggleSet,
105
134
  loading,
106
- search,
107
- onUpdate,
108
- isSelected
135
+ onUpdate
109
136
  };
110
137
  }
111
138
  });
@@ -1,40 +1,75 @@
1
1
  <template>
2
- <FSAutocompleteField :toggleSet="!$props.toggleSetDisabled && toggleSet"
3
- :loading="loading"
4
- :items="dataDefinitions"
2
+ <FSAutocompleteField
3
+ :toggleSet="!$props.toggleSetDisabled && toggleSet"
5
4
  :multiple="$props.multiple"
5
+ :items="dataDefinitions"
6
+ :loading="loading"
6
7
  :modelValue="$props.modelValue"
7
8
  @update:modelValue="onUpdate"
8
- v-model:search="search"
9
- v-bind="$attrs">
10
- <template #selection="{ item }">
11
- <FSRow align="center-center"
9
+ v-bind="$attrs"
10
+ >
11
+ <template
12
+ #autocomplete-selection="{ item }"
13
+ >
14
+ <FSRow
15
+ v-if="$props.modelValue"
16
+ align="center-center"
12
17
  :wrap="false"
13
- :gap="0">
14
- <FSText>
18
+ >
19
+ <FSChip
20
+ v-if="item.raw.unit"
21
+ :label="item.raw.unit"
22
+ />
23
+ <FSSpan>
15
24
  {{ item.raw.label }}
16
- </FSText>
17
- <FSText v-if="item.raw.unit">
18
- ({{ item.raw.unit }})
19
- </FSText>
25
+ </FSSpan>
20
26
  </FSRow>
21
27
  </template>
22
- <template #item="{ props, item }">
23
- <v-list-item v-bind="{ ...props, title: '' }">
24
- <FSRow align="center-left">
25
- <FSCheckbox v-if="$props.multiple"
26
- :modelValue="isSelected(item.value)" />
27
- <FSRow :gap="0">
28
- <FSText>
29
- {{ item.raw.label }}
30
- </FSText>
31
- <FSText v-if="item.raw.unit">
32
- ({{ item.raw.unit }})
33
- </FSText>
34
- </FSRow>
28
+ <template
29
+ #autocomplete-item="{ props, item }"
30
+ >
31
+ <v-list-item
32
+ v-bind="{ ...props, title: '' }"
33
+ >
34
+ <FSRow
35
+ align="center-left"
36
+ :wrap="false"
37
+ >
38
+ <FSCheckbox
39
+ v-if="$props.multiple"
40
+ :modelValue="$props.modelValue?.includes(item.value)"
41
+ @click="props.onClick"
42
+ />
43
+ <FSChip
44
+ v-if="item.raw.unit"
45
+ :label="item.raw.unit"
46
+ />
47
+ <FSSpan>
48
+ {{ item.raw.label }}
49
+ </FSSpan>
35
50
  </FSRow>
36
51
  </v-list-item>
37
52
  </template>
53
+ <template
54
+ #toggle-set-item="props"
55
+ >
56
+ <FSButton
57
+ :variant="props.getVariant(props.item)"
58
+ :color="props.getColor(props.item)"
59
+ :class="props.getClass(props.item)"
60
+ :label="props.item.label"
61
+ @click="props.toggle(props.item)"
62
+ >
63
+ <template
64
+ #prepend
65
+ >
66
+ <FSChip
67
+ v-if="props.item.unit"
68
+ :label="props.item.unit"
69
+ />
70
+ </template>
71
+ </FSButton>
72
+ </template>
38
73
  </FSAutocompleteField>
39
74
  </template>
40
75
 
@@ -46,13 +81,21 @@ import { useDataDefinitions } from "@dative-gpi/foundation-core-services/composa
46
81
  import { DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
47
82
 
48
83
  import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
49
- import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
84
+ import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
85
+ import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
86
+ import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
87
+ import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
88
+ import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
50
89
 
51
90
  export default defineComponent({
52
91
  name: "FSAutocompleteDataDefinition",
53
92
  components: {
54
93
  FSAutocompleteField,
55
- FSText
94
+ FSCheckbox,
95
+ FSButton,
96
+ FSChip,
97
+ FSSpan,
98
+ FSRow
56
99
  },
57
100
  props: {
58
101
  dataDefinitionFilters: {
@@ -80,32 +123,26 @@ export default defineComponent({
80
123
  setup(props, { emit }) {
81
124
  const { getMany: getManyDataDefinitions, fetching: fetchingDataDefinitions, entities: dataDefinitions } = useDataDefinitions();
82
125
 
126
+ const loading = computed((): boolean => {
127
+ return init.value && fetchingDataDefinitions.value;
128
+ });
129
+
83
130
  const innerFetch = (search: string | null) => {
84
131
  return getManyDataDefinitions({ ...props.dataDefinitionFilters, search: search ?? undefined });
85
132
  };
86
133
 
87
- const { toggleSet, search, init, onUpdate } = useAutocomplete(
134
+ const { toggleSet, init, onUpdate } = useAutocomplete(
88
135
  dataDefinitions,
89
136
  [() => props.dataDefinitionFilters],
90
137
  emit,
91
138
  innerFetch
92
139
  );
93
140
 
94
- const loading = computed((): boolean => {
95
- return init.value && fetchingDataDefinitions.value;
96
- });
97
-
98
- const isSelected = (id: any) => {
99
- return props.modelValue?.includes(id);
100
- }
101
-
102
141
  return {
103
142
  dataDefinitions,
104
143
  toggleSet,
105
144
  loading,
106
- search,
107
- onUpdate,
108
- isSelected
145
+ onUpdate
109
146
  };
110
147
  }
111
148
  });
@@ -1,11 +1,58 @@
1
1
  <template>
2
- <FSAutocompleteField :toggleSet="!$props.toggleSetDisabled && toggleSet"
2
+ <FSAutocompleteField
3
+ :toggleSet="!$props.toggleSetDisabled && toggleSet"
4
+ :multiple="$props.multiple"
3
5
  :loading="loading"
4
6
  :items="groups"
5
7
  :modelValue="$props.modelValue"
6
8
  @update:modelValue="onUpdate"
7
- v-model:search="search"
8
- v-bind="$attrs" />
9
+ v-bind="$attrs"
10
+ >
11
+ <template
12
+ #autocomplete-selection="{ item }"
13
+ >
14
+ <FSRow
15
+ v-if="$props.modelValue"
16
+ align="center-center"
17
+ :wrap="false"
18
+ >
19
+ <FSIcon
20
+ v-if="item.raw.icon"
21
+ >
22
+ {{ item.raw.icon }}
23
+ </FSIcon>
24
+ <FSSpan>
25
+ {{ item.raw.label }}
26
+ </FSSpan>
27
+ </FSRow>
28
+ </template>
29
+ <template
30
+ #autocomplete-item="{ props, item }"
31
+ >
32
+ <v-list-item
33
+ v-bind="{ ...props, title: '' }"
34
+ >
35
+ <FSRow
36
+ align="center-left"
37
+ :wrap="false"
38
+ >
39
+ <FSCheckbox
40
+ v-if="$props.multiple"
41
+ :modelValue="$props.modelValue?.includes(item.value)"
42
+ @click="props.onClick"
43
+ />
44
+ <FSIcon
45
+ v-if="item.raw.icon"
46
+ >
47
+ {{ item.raw.icon }}
48
+ </FSIcon>
49
+ <FSSpan>
50
+ {{ item.raw.label }}
51
+ </FSSpan>
52
+ </FSRow>
53
+ </v-list-item>
54
+ </template>
55
+ </FSAutocompleteField>
9
56
  </template>
10
57
 
11
58
  <script lang="ts">
@@ -16,11 +63,19 @@ import { useGroups } from "@dative-gpi/foundation-core-services/composables";
16
63
  import { GroupFilters } from "@dative-gpi/foundation-core-domain/models";
17
64
 
18
65
  import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
66
+ import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
67
+ import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
68
+ import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
69
+ import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
19
70
 
20
71
  export default defineComponent({
21
72
  name: "FSAutocompleteGroup",
22
73
  components: {
23
- FSAutocompleteField
74
+ FSAutocompleteField,
75
+ FSCheckbox,
76
+ FSIcon,
77
+ FSSpan,
78
+ FSRow
24
79
  },
25
80
  props: {
26
81
  groupFilters: {
@@ -33,6 +88,11 @@ export default defineComponent({
33
88
  required: false,
34
89
  default: null
35
90
  },
91
+ multiple: {
92
+ type: Boolean,
93
+ required: false,
94
+ default: false
95
+ },
36
96
  toggleSetDisabled: {
37
97
  type: Boolean,
38
98
  required: false,
@@ -43,26 +103,25 @@ export default defineComponent({
43
103
  setup(props, { emit }) {
44
104
  const { getMany: getManyGroups, fetching: fetchingGroups, entities: groups } = useGroups();
45
105
 
106
+ const loading = computed((): boolean => {
107
+ return init.value && fetchingGroups.value;
108
+ });
109
+
46
110
  const innerFetch = (search: string | null) => {
47
111
  return getManyGroups({ ...props.groupFilters, search: search ?? undefined });
48
112
  };
49
113
 
50
- const { toggleSet, search, init, onUpdate } = useAutocomplete(
114
+ const { toggleSet, init, onUpdate } = useAutocomplete(
51
115
  groups,
52
116
  [() => props.groupFilters],
53
117
  emit,
54
118
  innerFetch
55
119
  );
56
120
 
57
- const loading = computed((): boolean => {
58
- return init.value && fetchingGroups.value;
59
- });
60
-
61
121
  return {
62
- groups,
63
122
  toggleSet,
64
123
  loading,
65
- search,
124
+ groups,
66
125
  onUpdate
67
126
  };
68
127
  }
@@ -1,13 +1,58 @@
1
1
  <template>
2
2
  <FSAutocompleteField
3
3
  :toggleSet="!$props.toggleSetDisabled && toggleSet"
4
+ :multiple="$props.multiple"
4
5
  :loading="loading"
5
6
  :items="locations"
6
7
  :modelValue="$props.modelValue"
7
8
  @update:modelValue="onUpdate"
8
- v-model:search="search"
9
9
  v-bind="$attrs"
10
- />
10
+ >
11
+ <template
12
+ #autocomplete-selection="{ item }"
13
+ >
14
+ <FSRow
15
+ v-if="$props.modelValue"
16
+ align="center-center"
17
+ :wrap="false"
18
+ >
19
+ <FSIcon
20
+ v-if="item.raw.icon"
21
+ >
22
+ {{ item.raw.icon }}
23
+ </FSIcon>
24
+ <FSSpan>
25
+ {{ item.raw.label }}
26
+ </FSSpan>
27
+ </FSRow>
28
+ </template>
29
+ <template
30
+ #autocomplete-item="{ props, item }"
31
+ >
32
+ <v-list-item
33
+ v-bind="{ ...props, title: '' }"
34
+ >
35
+ <FSRow
36
+ align="center-left"
37
+ :wrap="false"
38
+ >
39
+ <FSCheckbox
40
+ v-if="$props.multiple"
41
+ :modelValue="$props.modelValue?.includes(item.value)"
42
+ @click="props.onClick"
43
+ />
44
+ <FSIcon
45
+ v-if="item.raw.icon"
46
+ >
47
+ {{ item.raw.icon }}
48
+ </FSIcon>
49
+ <FSSpan>
50
+ {{ item.raw.label }}
51
+ </FSSpan>
52
+ </FSRow>
53
+ </v-list-item>
54
+ </template>
55
+ </FSAutocompleteField>
11
56
  </template>
12
57
 
13
58
  <script lang="ts">
@@ -18,11 +63,19 @@ import { useLocations } from "@dative-gpi/foundation-core-services/composables";
18
63
  import { LocationFilters } from "@dative-gpi/foundation-core-domain/models";
19
64
 
20
65
  import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
66
+ import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
67
+ import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
68
+ import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
69
+ import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
21
70
 
22
71
  export default defineComponent({
23
72
  name: "FSAutocompleteLocation",
24
73
  components: {
25
- FSAutocompleteField
74
+ FSAutocompleteField,
75
+ FSCheckbox,
76
+ FSIcon,
77
+ FSSpan,
78
+ FSRow
26
79
  },
27
80
  props: {
28
81
  locationFilters: {
@@ -35,7 +88,12 @@ export default defineComponent({
35
88
  required: false,
36
89
  default: null
37
90
  },
38
- toggleSetDisabled: {
91
+ multiple: {
92
+ type: Boolean,
93
+ required: false,
94
+ default: false
95
+ },
96
+ toggleSetDisabled: {
39
97
  type: Boolean,
40
98
  required: false,
41
99
  default: false
@@ -49,7 +107,7 @@ export default defineComponent({
49
107
  return getManyLocations({ ...props.locationFilters, search: search ?? undefined });
50
108
  };
51
109
 
52
- const { toggleSet, search, init, onUpdate } = useAutocomplete(
110
+ const { toggleSet, init, onUpdate } = useAutocomplete(
53
111
  locations,
54
112
  [() => props.locationFilters],
55
113
  emit,
@@ -64,7 +122,6 @@ export default defineComponent({
64
122
  locations,
65
123
  toggleSet,
66
124
  loading,
67
- search,
68
125
  onUpdate
69
126
  };
70
127
  }
@@ -1,11 +1,12 @@
1
1
  <template>
2
- <FSAutocompleteField :toggleSet="!$props.toggleSetDisabled && toggleSet"
3
- :loading="loading"
2
+ <FSAutocompleteField
3
+ :toggleSet="!$props.toggleSetDisabled && toggleSet"
4
4
  :items="manufacturers"
5
+ :loading="loading"
5
6
  :modelValue="$props.modelValue"
6
7
  @update:modelValue="onUpdate"
7
- v-model:search="search"
8
- v-bind="$attrs" />
8
+ v-bind="$attrs"
9
+ />
9
10
  </template>
10
11
 
11
12
  <script lang="ts">
@@ -47,7 +48,7 @@ export default defineComponent({
47
48
  return getManyManufacturers({ ...props.manufacturerFilters, search: search ?? undefined });
48
49
  };
49
50
 
50
- const { toggleSet, search, init, onUpdate } = useAutocomplete(
51
+ const { toggleSet, init, onUpdate } = useAutocomplete(
51
52
  manufacturers,
52
53
  [() => props.manufacturerFilters],
53
54
  emit,
@@ -62,7 +63,6 @@ export default defineComponent({
62
63
  manufacturers,
63
64
  toggleSet,
64
65
  loading,
65
- search,
66
66
  onUpdate
67
67
  };
68
68
  }
@@ -1,11 +1,12 @@
1
1
  <template>
2
- <FSAutocompleteField :toggleSet="!$props.toggleSetDisabled && toggleSet"
2
+ <FSAutocompleteField
3
+ :toggleSet="!$props.toggleSetDisabled && toggleSet"
3
4
  :loading="loading"
4
5
  :items="models"
5
6
  :modelValue="$props.modelValue"
6
7
  @update:modelValue="onUpdate"
7
- v-model:search="search"
8
- v-bind="$attrs" />
8
+ v-bind="$attrs"
9
+ />
9
10
  </template>
10
11
 
11
12
  <script lang="ts">
@@ -43,26 +44,25 @@ export default defineComponent({
43
44
  setup(props, { emit }) {
44
45
  const { getMany: getManyModels, fetching: fetchingModels, entities: models } = useModels();
45
46
 
47
+ const loading = computed((): boolean => {
48
+ return init.value && fetchingModels.value;
49
+ });
50
+
46
51
  const innerFetch = (search: string | null) => {
47
52
  return getManyModels({ ...props.modelFilters, search: search ?? undefined });
48
53
  };
49
54
 
50
- const { toggleSet, search, init, onUpdate } = useAutocomplete(
55
+ const { toggleSet, init, onUpdate } = useAutocomplete(
51
56
  models,
52
57
  [() => props.modelFilters],
53
58
  emit,
54
59
  innerFetch
55
60
  );
56
61
 
57
- const loading = computed((): boolean => {
58
- return init.value && fetchingModels.value;
59
- });
60
-
61
62
  return {
62
63
  models,
63
64
  toggleSet,
64
65
  loading,
65
- search,
66
66
  onUpdate
67
67
  };
68
68
  }
@@ -1,18 +1,19 @@
1
1
  <template>
2
- <FSAutocompleteField :toggleSet="!$props.toggleSetDisabled && toggleSet"
3
- :loading="loading"
2
+ <FSAutocompleteField
3
+ :toggleSet="!$props.toggleSetDisabled && toggleSet"
4
4
  :items="organisationTypes"
5
+ :loading="loading"
5
6
  :modelValue="$props.modelValue"
6
7
  @update:modelValue="onUpdate"
7
- v-model:search="search"
8
- v-bind="$attrs" />
8
+ v-bind="$attrs"
9
+ />
9
10
  </template>
10
11
 
11
12
  <script lang="ts">
12
13
  import { computed, defineComponent, PropType } from "vue";
13
14
 
14
- import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
15
15
  import { useOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
16
+ import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
16
17
  import { OrganisationTypeFilters } from "@dative-gpi/foundation-shared-domain/models";
17
18
 
18
19
  import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
@@ -43,26 +44,25 @@ export default defineComponent({
43
44
  setup(props, { emit }) {
44
45
  const { getMany: getManyOrganisationTypes, fetching: fetchingOrganisationTypes, entities: organisationTypes } = useOrganisationTypes();
45
46
 
47
+ const loading = computed((): boolean => {
48
+ return init.value && fetchingOrganisationTypes.value;
49
+ });
50
+
46
51
  const innerFetch = (search: string | null) => {
47
52
  return getManyOrganisationTypes({ ...props.organisationTypeFilters, search: search ?? undefined });
48
53
  };
49
54
 
50
- const { toggleSet, search, init, onUpdate } = useAutocomplete(
55
+ const { toggleSet, init, onUpdate } = useAutocomplete(
51
56
  organisationTypes,
52
57
  [() => props.organisationTypeFilters],
53
58
  emit,
54
59
  innerFetch
55
60
  );
56
61
 
57
- const loading = computed((): boolean => {
58
- return init.value && fetchingOrganisationTypes.value;
59
- });
60
-
61
62
  return {
62
63
  organisationTypes,
63
64
  toggleSet,
64
65
  loading,
65
- search,
66
66
  onUpdate
67
67
  };
68
68
  }
@@ -1,13 +1,58 @@
1
1
  <template>
2
2
  <FSAutocompleteField
3
3
  :toggleSet="!$props.toggleSetDisabled && toggleSet"
4
+ :multiple="$props.multiple"
4
5
  :loading="loading"
5
6
  :items="roles"
6
7
  :modelValue="$props.modelValue"
7
8
  @update:modelValue="onUpdate"
8
- v-model:search="search"
9
9
  v-bind="$attrs"
10
- />
10
+ >
11
+ <template
12
+ #autocomplete-selection="{ item }"
13
+ >
14
+ <FSRow
15
+ v-if="$props.modelValue"
16
+ align="center-center"
17
+ :wrap="false"
18
+ >
19
+ <FSIcon
20
+ v-if="item.raw.icon"
21
+ >
22
+ {{ item.raw.icon }}
23
+ </FSIcon>
24
+ <FSSpan>
25
+ {{ item.raw.label }}
26
+ </FSSpan>
27
+ </FSRow>
28
+ </template>
29
+ <template
30
+ #autocomplete-item="{ props, item }"
31
+ >
32
+ <v-list-item
33
+ v-bind="{ ...props, title: '' }"
34
+ >
35
+ <FSRow
36
+ align="center-left"
37
+ :wrap="false"
38
+ >
39
+ <FSCheckbox
40
+ v-if="$props.multiple"
41
+ :modelValue="$props.modelValue?.includes(item.value)"
42
+ @click="props.onClick"
43
+ />
44
+ <FSIcon
45
+ v-if="item.raw.icon"
46
+ >
47
+ {{ item.raw.icon }}
48
+ </FSIcon>
49
+ <FSSpan>
50
+ {{ item.raw.label }}
51
+ </FSSpan>
52
+ </FSRow>
53
+ </v-list-item>
54
+ </template>
55
+ </FSAutocompleteField>
11
56
  </template>
12
57
 
13
58
  <script lang="ts">
@@ -18,11 +63,20 @@ import { useRoleOrganisations, useRoleOrganisationTypes } from "@dative-gpi/foun
18
63
  import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
19
64
 
20
65
  import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
66
+ import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
67
+ import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
68
+ import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
69
+ import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
70
+
21
71
 
22
72
  export default defineComponent({
23
73
  name: "FSAutocompleteRole",
24
74
  components: {
25
- FSAutocompleteField
75
+ FSAutocompleteField,
76
+ FSCheckbox,
77
+ FSIcon,
78
+ FSSpan,
79
+ FSRow
26
80
  },
27
81
  props: {
28
82
  roleOrganisationTypeFilters: {
@@ -40,6 +94,11 @@ export default defineComponent({
40
94
  required: false,
41
95
  default: null
42
96
  },
97
+ multiple: {
98
+ type: Boolean,
99
+ required: false,
100
+ default: false
101
+ },
43
102
  toggleSetDisabled: {
44
103
  type: Boolean,
45
104
  required: false,
@@ -65,6 +124,10 @@ export default defineComponent({
65
124
  })));
66
125
  });
67
126
 
127
+ const loading = computed((): boolean => {
128
+ return init.value && (fetchingRoleOrganisationTypes.value || fetchingRoleOrganisations.value);
129
+ });
130
+
68
131
  const innerUpdate = (value: Role[] | Role | null) => {
69
132
  if (Array.isArray(value)) {
70
133
  emit("update:modelValue", value.map(v => v.id));
@@ -91,10 +154,6 @@ export default defineComponent({
91
154
  innerUpdate
92
155
  );
93
156
 
94
- const loading = computed((): boolean => {
95
- return init.value && (fetchingRoleOrganisationTypes.value || fetchingRoleOrganisations.value);
96
- });
97
-
98
157
  return {
99
158
  toggleSet,
100
159
  loading,
@@ -1,56 +1,110 @@
1
1
  <template>
2
- <FSAutocompleteField :toggleSet="!$props.toggleSetDisabled && toggleSet"
3
- :loading="loading"
4
- :items="userOrganisations"
2
+ <FSAutocompleteField
3
+ :toggleSet="!$props.toggleSetDisabled && toggleSet"
5
4
  :multiple="$props.multiple"
5
+ :items="userOrganisations"
6
+ :loading="loading"
6
7
  :modelValue="$props.modelValue"
7
8
  @update:modelValue="onUpdate"
8
- v-model:search="search"
9
- v-bind="$attrs">
10
- <template #selection="{ item }">
11
- <FSRow align="center-center"
12
- :wrap="false">
13
- <FSImage height="26px"
9
+ v-bind="$attrs"
10
+ >
11
+ <template
12
+ #autocomplete-selection="{ item }"
13
+ >
14
+ <FSRow
15
+ v-if="$props.modelValue"
16
+ align="center-center"
17
+ :wrap="false"
18
+ >
19
+ <FSImage
20
+ v-if="item.raw.imageId"
21
+ height="26px"
14
22
  width="26px"
15
- :imageId="item.raw.imageId" />
16
- <FSText>
17
- {{ item.raw.label }}
18
- </FSText>
23
+ :imageId="item.raw.imageId"
24
+ />
25
+ <FSSpan>
26
+ {{ item.raw.name }}
27
+ </FSSpan>
19
28
  </FSRow>
20
29
  </template>
21
- <template #item="{ props, item }">
22
- <v-list-item v-bind="{ ...props, title: '' }">
23
- <FSRow align="center-left">
24
- <FSCheckbox v-if="$props.multiple"
25
- :modelValue="isSelected(item.value)" />
26
- <FSImage height="26px"
30
+ <template
31
+ #autocomplete-item="{ props, item }"
32
+ >
33
+ <v-list-item
34
+ v-bind="{ ...props, title: '' }"
35
+ >
36
+ <FSRow
37
+ align="center-left"
38
+ :wrap="false"
39
+ >
40
+ <FSCheckbox
41
+ v-if="$props.multiple"
42
+ :modelValue="$props.modelValue?.includes(item.value)"
43
+ @click="props.onClick"
44
+ />
45
+ <FSImage
46
+ v-if="item.raw.imageId"
47
+ height="26px"
27
48
  width="26px"
28
- :imageId="item.raw.imageId" />
29
- <FSText>
30
- {{ item.raw.label }}
31
- </FSText>
49
+ :imageId="item.raw.imageId"
50
+ />
51
+ <FSSpan>
52
+ {{ item.raw.name }}
53
+ </FSSpan>
32
54
  </FSRow>
33
55
  </v-list-item>
34
56
  </template>
57
+ <template
58
+ #toggle-set-item="props"
59
+ >
60
+ <FSButton
61
+ :variant="props.getVariant(props.item)"
62
+ :color="props.getColor(props.item)"
63
+ :class="props.getClass(props.item)"
64
+ @click="props.toggle(props.item)"
65
+ >
66
+ <FSRow
67
+ align="center-center"
68
+ :wrap="false"
69
+ >
70
+ <FSImage
71
+ v-if="props.item.imageId"
72
+ height="26px"
73
+ width="26px"
74
+ :imageId="props.item.imageId"
75
+ />
76
+ <FSSpan>
77
+ {{ props.item.name }}
78
+ </FSSpan>
79
+ </FSRow>
80
+ </FSButton>
81
+ </template>
35
82
  </FSAutocompleteField>
36
83
  </template>
37
84
 
38
85
  <script lang="ts">
39
86
  import { computed, defineComponent, PropType } from "vue";
40
- import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
87
+
88
+ import { UserOrganisationFilters, UserOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
41
89
  import { useUserOrganisations } from "@dative-gpi/foundation-core-services/composables";
42
- import { UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
90
+ import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
43
91
 
44
92
  import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
93
+ import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
94
+ import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
45
95
  import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
46
- import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
96
+ import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
97
+ import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
47
98
 
48
99
  export default defineComponent({
49
100
  name: "FSAutocompleteUserOrganisation",
50
101
  components: {
51
102
  FSAutocompleteField,
103
+ FSCheckbox,
104
+ FSButton,
52
105
  FSImage,
53
- FSText
106
+ FSSpan,
107
+ FSRow
54
108
  },
55
109
  props: {
56
110
  userOrganisationFilters: {
@@ -78,6 +132,17 @@ export default defineComponent({
78
132
  setup(props, { emit }) {
79
133
  const { getMany: getManyUserOrganisations, fetching: fetchingUserOrganisations, entities: userOrganisations } = useUserOrganisations();
80
134
 
135
+ const loading = computed((): boolean => {
136
+ return init.value && fetchingUserOrganisations.value;
137
+ });
138
+
139
+ const toggleSetItems = computed((): any[] => {
140
+ return userOrganisations.value.map((userOrganisation: UserOrganisationInfos) => ({
141
+ id: userOrganisation.id,
142
+ label: userOrganisation.name
143
+ }));
144
+ });
145
+
81
146
  const innerFetch = (search: string | null) => {
82
147
  return getManyUserOrganisations({ ...props.userOrganisationFilters, search: search ?? undefined });
83
148
  };
@@ -86,22 +151,18 @@ export default defineComponent({
86
151
  userOrganisations,
87
152
  [() => props.userOrganisationFilters],
88
153
  emit,
89
- innerFetch
154
+ innerFetch,
155
+ null,
156
+ (item: UserOrganisationInfos) => item.id,
157
+ (item: UserOrganisationInfos) => item.name
90
158
  );
91
159
 
92
- const isSelected = (id: any) => {
93
- return props.modelValue?.includes(id);
94
- }
95
- const loading = computed((): boolean => {
96
- return init.value && fetchingUserOrganisations.value;
97
- });
98
-
99
160
  return {
100
161
  userOrganisations,
162
+ toggleSetItems,
101
163
  toggleSet,
102
164
  loading,
103
165
  search,
104
- isSelected,
105
166
  onUpdate
106
167
  };
107
168
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dative-gpi/foundation-core-components",
3
3
  "sideEffects": false,
4
- "version": "0.0.87",
4
+ "version": "0.0.89",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -10,11 +10,11 @@
10
10
  "author": "",
11
11
  "license": "ISC",
12
12
  "dependencies": {
13
- "@dative-gpi/foundation-core-domain": "0.0.87",
14
- "@dative-gpi/foundation-core-services": "0.0.87",
15
- "@dative-gpi/foundation-shared-components": "0.0.87",
16
- "@dative-gpi/foundation-shared-domain": "0.0.87",
17
- "@dative-gpi/foundation-shared-services": "0.0.87",
13
+ "@dative-gpi/foundation-core-domain": "0.0.89",
14
+ "@dative-gpi/foundation-core-services": "0.0.89",
15
+ "@dative-gpi/foundation-shared-components": "0.0.89",
16
+ "@dative-gpi/foundation-shared-domain": "0.0.89",
17
+ "@dative-gpi/foundation-shared-services": "0.0.89",
18
18
  "color": "^4.2.3",
19
19
  "vue": "^3.4.23",
20
20
  "vuedraggable": "^4.1.0"
@@ -24,5 +24,5 @@
24
24
  "sass": "^1.69.5",
25
25
  "sass-loader": "^13.3.2"
26
26
  },
27
- "gitHead": "ae864c1fac5a392f6fcc8e77be26fe1613eb1165"
27
+ "gitHead": "9bacb675fe5a6db96fbb13de6baeb94ac288fcff"
28
28
  }