@dative-gpi/foundation-core-components 1.0.64 → 1.0.66

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,53 +1,84 @@
1
1
  <template>
2
- <div
3
- v-if="!value"
4
- />
5
- <FSText
6
- v-else-if="$props.customProperty.useOnlyAllowedValues && $props.customProperty.allowedValues[meta[$props.customProperty.code]] != null"
7
- :color="getColor($props.customProperty, meta[$props.customProperty.code])"
2
+ <template
3
+ v-if="$props.variant === 'standard'"
8
4
  >
9
- {{ value }}
10
- </FSText>
11
- <FSText
12
- v-else-if="[PropertyDataType.Number, PropertyDataType.String, PropertyDataType.DateTime].includes($props.customProperty.dataType)"
13
- :color="getColor($props.customProperty, meta[$props.customProperty.code])"
5
+ <FSText
6
+ v-if="$props.customProperty.useOnlyAllowedValues"
7
+ :color="getColor($props.customProperty, meta[$props.customProperty.code])"
8
+ >
9
+ {{ value }}
10
+ </FSText>
11
+ <FSText
12
+ v-else-if="[PropertyDataType.Number, PropertyDataType.String, PropertyDataType.DateTime].includes($props.customProperty.dataType)"
13
+ :color="getColor($props.customProperty, meta[$props.customProperty.code])"
14
+ >
15
+ {{ value }}
16
+ </FSText>
17
+ <FSIcon
18
+ v-else-if="[PropertyDataType.Icon].includes($props.customProperty.dataType)"
19
+ :color="getColor($props.customProperty, meta[$props.customProperty.code])"
20
+ >
21
+ {{ value }}
22
+ </FSIcon>
23
+ <FSIconCheck
24
+ v-else-if="[PropertyDataType.Boolean].includes($props.customProperty.dataType) && value"
25
+ :color="getColor($props.customProperty, meta[$props.customProperty.code])"
26
+ :value="value.toLowerCase() === 'true'"
27
+ />
28
+ </template>
29
+ <template
30
+ v-else-if="$props.variant === 'colorless'"
14
31
  >
15
- {{ value }}
16
- </FSText>
17
- <FSIcon
18
- v-else-if="[PropertyDataType.Icon].includes($props.customProperty.dataType)"
19
- :color="getColor($props.customProperty, meta[$props.customProperty.code])"
20
- >
21
- {{ value }}
22
- </FSIcon>
23
- <FSIconCheck
24
- v-else-if="[PropertyDataType.Boolean].includes($props.customProperty.dataType)"
25
- :color="getColor($props.customProperty, meta[$props.customProperty.code])"
26
- :value="value.toLowerCase() === 'true'"
27
- />
32
+ <FSSpan
33
+ v-if="$props.customProperty.useOnlyAllowedValues"
34
+ >
35
+ {{ value }}
36
+ </FSSpan>
37
+ <FSSpan
38
+ v-else-if="[PropertyDataType.Number, PropertyDataType.String, PropertyDataType.DateTime].includes($props.customProperty.dataType)"
39
+ >
40
+ {{ value }}
41
+ </FSSpan>
42
+ <FSIcon
43
+ v-else-if="[PropertyDataType.Icon].includes($props.customProperty.dataType)"
44
+ >
45
+ {{ value }}
46
+ </FSIcon>
47
+ <FSIconCheck
48
+ v-else-if="[PropertyDataType.Boolean].includes($props.customProperty.dataType) && value"
49
+ :value="value.toLowerCase() === 'true'"
50
+ />
51
+ </template>
28
52
  </template>
29
53
 
30
54
  <script lang="ts">
31
55
  import { computed, defineComponent, type PropType } from "vue";
32
56
 
33
57
  import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
34
-
35
58
  import { PropertyDataType } from "@dative-gpi/foundation-shared-domain/enums";
59
+
36
60
  import { type CustomPropertyInfos } from "../../../foundation-core-domain/models";
37
61
  import { getColor } from "./helpers";
38
62
 
39
63
  import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";
40
- import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
41
64
  import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
65
+ import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
66
+ import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
42
67
 
43
68
  export default defineComponent({
44
69
  name: "FSMetaValue",
45
70
  components: {
46
71
  FSIconCheck,
47
- FSText,
48
- FSIcon
72
+ FSIcon,
73
+ FSSpan,
74
+ FSText
49
75
  },
50
76
  props: {
77
+ variant: {
78
+ type: String as PropType<"standard" | "colorless">,
79
+ required: false,
80
+ default: "standard"
81
+ },
51
82
  customProperty: {
52
83
  type: Object as PropType<CustomPropertyInfos>,
53
84
  required: true
@@ -62,14 +93,15 @@ export default defineComponent({
62
93
 
63
94
  const value = computed((): string => {
64
95
  if (props.customProperty.useOnlyAllowedValues) {
65
- if (props.customProperty.allowedValues[props.meta[props.customProperty.code]] != null) {
66
- return props.customProperty.allowedValues[props.meta[props.customProperty.code]];
67
- }
96
+ return props.customProperty.allowedValues[props.meta[props.customProperty.code]] ?? "";
68
97
  }
69
98
  switch (props.customProperty.dataType) {
70
99
  case PropertyDataType.DateTime: {
71
100
  return epochToLongTimeFormat(parseInt(props.meta[props.customProperty.code]));
72
101
  }
102
+ case PropertyDataType.Boolean: {
103
+ return props.meta[props.customProperty.code];
104
+ }
73
105
  default: {
74
106
  return props.meta[props.customProperty.code];
75
107
  }
@@ -11,6 +11,7 @@
11
11
  :itemsCount="($props.modelValue || []).length"
12
12
  @update:entityType="$emit('update:entityType', $event); $emit('update:modelValue', [])"
13
13
  :showEntities="$props.showEntities"
14
+ :showCount="$props.showCount"
14
15
  @click:select="dialog = true"
15
16
  >
16
17
  <template
@@ -112,6 +113,11 @@ export default defineComponent({
112
113
  type: Boolean,
113
114
  required: false,
114
115
  default: true
116
+ },
117
+ showCount: {
118
+ type: Boolean,
119
+ required: false,
120
+ default: true
115
121
  }
116
122
  },
117
123
  emits: ["update:modelValue", "update:entityType"],
@@ -140,4 +146,4 @@ export default defineComponent({
140
146
  }
141
147
  }
142
148
  });
143
- </script>
149
+ </script>
@@ -17,7 +17,13 @@
17
17
  v-bind="slotData"
18
18
  />
19
19
  </template>
20
-
20
+ <template
21
+ #header.imageId-title
22
+ >
23
+ <FSIcon>
24
+ mdi-panorama-variant-outline
25
+ </FSIcon>
26
+ </template>
21
27
  <template
22
28
  #item.icon="{ item }"
23
29
  >
@@ -25,7 +31,6 @@
25
31
  {{ item.icon }}
26
32
  </FSIcon>
27
33
  </template>
28
-
29
34
  <template
30
35
  #item.imageId="{ item }"
31
36
  >
@@ -36,7 +41,6 @@
36
41
  :imageId="item.imageId"
37
42
  />
38
43
  </template>
39
-
40
44
  <template
41
45
  #item.tags="{ item }"
42
46
  >
@@ -46,7 +50,6 @@
46
50
  :tags="item.tags"
47
51
  />
48
52
  </template>
49
-
50
53
  <template
51
54
  #item.modelsLabels="{ item }"
52
55
  >
@@ -17,7 +17,13 @@
17
17
  v-bind="slotData"
18
18
  />
19
19
  </template>
20
-
20
+ <template
21
+ #header.imageId-title
22
+ >
23
+ <FSIcon>
24
+ mdi-panorama-variant-outline
25
+ </FSIcon>
26
+ </template>
21
27
  <template
22
28
  #item.icon="{ item }"
23
29
  >
@@ -25,7 +31,6 @@
25
31
  {{ item.icon }}
26
32
  </FSIcon>
27
33
  </template>
28
-
29
34
  <template
30
35
  #item.imageId="{ item }"
31
36
  >
@@ -36,7 +41,6 @@
36
41
  :imageId="item.imageId"
37
42
  />
38
43
  </template>
39
-
40
44
  <template
41
45
  #item.tags="{ item }"
42
46
  >
@@ -46,7 +50,6 @@
46
50
  :tags="item.tags"
47
51
  />
48
52
  </template>
49
-
50
53
  <template
51
54
  #item.modelsLabels="{ item }"
52
55
  >
@@ -55,7 +58,6 @@
55
58
  :tags="item.modelsLabels.map((d: any) => d.label)"
56
59
  />
57
60
  </template>
58
-
59
61
  <template
60
62
  #item.tile="{ item }"
61
63
  >
@@ -16,7 +16,13 @@
16
16
  v-bind="slotData"
17
17
  />
18
18
  </template>
19
-
19
+ <template
20
+ #header.imageId-title
21
+ >
22
+ <FSIcon>
23
+ mdi-panorama-variant-outline
24
+ </FSIcon>
25
+ </template>
20
26
  <template
21
27
  #item.icon="{ item }"
22
28
  >
@@ -24,7 +30,6 @@
24
30
  {{ item.icon }}
25
31
  </FSIcon>
26
32
  </template>
27
-
28
33
  <template
29
34
  #item.imageId="{ item }"
30
35
  >
@@ -35,7 +40,6 @@
35
40
  :imageId="item.imageId"
36
41
  />
37
42
  </template>
38
-
39
43
  <template
40
44
  #item.tags="{ item }"
41
45
  >
@@ -45,7 +49,6 @@
45
49
  :tags="item.tags"
46
50
  />
47
51
  </template>
48
-
49
52
  <template
50
53
  #item.modelsLabels="{ item }"
51
54
  >
@@ -54,7 +57,6 @@
54
57
  :tags="item.modelsLabels.map((d: any) => d.label)"
55
58
  />
56
59
  </template>
57
-
58
60
  <template
59
61
  #item.tile="{ item }"
60
62
  >
@@ -1,7 +1,9 @@
1
1
  <template>
2
2
  <FSDataTable
3
3
  :loading="fetchingDeviceOrganisations"
4
+ :singleSelect="$props.singleSelect"
4
5
  :headersOptions="headersOptions"
6
+ :showSelect="$props.editable"
5
7
  :tableCode="$props.tableCode"
6
8
  :items="deviceOrganisations"
7
9
  :itemTo="$props.itemTo"
@@ -18,6 +20,13 @@
18
20
  v-bind="slotData"
19
21
  />
20
22
  </template>
23
+ <template
24
+ #header.imageId-title
25
+ >
26
+ <FSIcon>
27
+ mdi-panorama-variant-outline
28
+ </FSIcon>
29
+ </template>
21
30
  <template
22
31
  #header.connectable-title
23
32
  >
@@ -131,21 +140,32 @@
131
140
  :meta="item.meta"
132
141
  />
133
142
  </template>
134
-
143
+ <template
144
+ v-for="(property, index) in customProperties"
145
+ #[`filter.meta.${property.code}`]="{ filter }"
146
+ :key="index"
147
+ >
148
+ <FSMetaValue
149
+ v-if="filter.text !== '—'"
150
+ variant="colorless"
151
+ :customProperty="property"
152
+ :meta="{ [property.code]: filter.text }"
153
+ />
154
+ </template>
135
155
  <template
136
156
  #item.tile="{ item, toggleSelect }"
137
157
  >
138
158
  <FSDeviceOrganisationTileUI
139
- v-bind="item"
140
- :modelValue="isSelected(item.id)"
141
- :singleSelect="singleSelect"
142
- :deviceStatuses="item.status.statuses"
159
+ :to="$props.itemTo && $props.itemTo(item)"
143
160
  :deviceConnectivity="item.connectivity"
161
+ :deviceStatuses="item.status.statuses"
144
162
  :deviceWorstAlert="item.worstAlert"
163
+ :singleSelect="$props.singleSelect"
145
164
  :deviceAlerts="item.alerts"
146
- :to="$props.itemTo && $props.itemTo(item)"
147
165
  :alertTo="$props.alertTo"
166
+ :modelValue="isSelected(item.id)"
148
167
  @update:modelValue="toggleSelect(item)"
168
+ v-bind="item"
149
169
  />
150
170
  </template>
151
171
  </FSDataTable>
@@ -159,39 +179,37 @@ import _ from "lodash";
159
179
  import { alphanumericSort, connectivityLabel } from "@dative-gpi/foundation-shared-components/utils";
160
180
  import { ConnectivityStatus, PropertyEntity } from "@dative-gpi/foundation-shared-domain/enums";
161
181
 
162
- import { useCustomProperties, useDeviceOrganisations } from "@dative-gpi/foundation-core-services/composables";
163
182
  import type { DeviceConnectivityDetails, DeviceOrganisationAlert, DeviceOrganisationFilters, DeviceOrganisationInfos} from "@dative-gpi/foundation-core-domain/models";
183
+ import { useCustomProperties, useDeviceOrganisations } from "@dative-gpi/foundation-core-services/composables";
164
184
 
165
- import FSDataTable from "../FSDataTable.vue";
166
185
  import FSMetaValue from "../../customProperties/FSMetaValue.vue";
186
+ import FSDataTable from "../FSDataTable.vue";
167
187
 
168
- import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
169
- import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
170
- import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";
171
- import FSWorstAlert from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSWorstAlert.vue";
172
- import FSConnectivity from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSConnectivity.vue";
173
- import FSStatusesCarousel from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSStatusesCarousel.vue";
174
188
  import FSDeviceOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDeviceOrganisationTileUI.vue";
189
+ import FSStatusesCarousel from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSStatusesCarousel.vue";
190
+ import FSConnectivity from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSConnectivity.vue";
191
+ import FSWorstAlert from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSWorstAlert.vue";
192
+ import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";
193
+ import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
194
+ import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
175
195
 
176
-
177
196
  export default defineComponent({
178
197
  name: "FSBaseDeviceOrganisationsList",
179
198
  components: {
180
- FSConnectivity,
181
- FSDataTable,
182
199
  FSDeviceOrganisationTileUI,
200
+ FSStatusesCarousel,
201
+ FSConnectivity,
202
+ FSWorstAlert,
203
+ FSDataTable,
183
204
  FSIconCheck,
184
- FSImage,
185
205
  FSMetaValue,
186
- FSStatusesCarousel,
187
206
  FSTagGroup,
188
- FSWorstAlert
207
+ FSImage
189
208
  },
190
209
  props: {
191
- modelValue: {
192
- type: Array as PropType<string[]>,
193
- default: () => [],
194
- required: false
210
+ tableCode: {
211
+ type: String,
212
+ required: true
195
213
  },
196
214
  deviceOrganisationFilters: {
197
215
  type: Object as PropType<DeviceOrganisationFilters>,
@@ -212,14 +230,20 @@ export default defineComponent({
212
230
  required: false,
213
231
  default: null
214
232
  },
233
+ editable: {
234
+ type: Boolean,
235
+ required: false,
236
+ default: true
237
+ },
215
238
  singleSelect: {
216
239
  type: Boolean,
217
240
  required: false,
218
241
  default: false
219
242
  },
220
- tableCode: {
221
- type: String,
222
- required: true
243
+ modelValue: {
244
+ type: Array as PropType<string[]>,
245
+ default: () => [],
246
+ required: false
223
247
  }
224
248
  },
225
249
  emits: ["update:modelValue"],
@@ -278,15 +302,25 @@ export default defineComponent({
278
302
  worstAlert: {
279
303
  sort: (a: DeviceOrganisationAlert, b: DeviceOrganisationAlert) => alphanumericSort(a?.criticity, b?.criticity)
280
304
  },
281
- // ...customProperties.value.reduce((acc, cp) => ({
282
- // ...acc,
283
- // [`meta.${cp.code}`]: {
284
- // innerValue: (item: DeviceOrganisationInfos) => {
285
- // return item
286
- // },
287
- // sort: (a: string, b: string) => alphanumericSort(a, b)
288
- // }
289
- // }), {})
305
+ ...customProperties.value.reduce((acc, cp) => ({
306
+ ...acc,
307
+ [`meta.${cp.code}`]: {
308
+ fixedFilters: cp.useOnlyAllowedValues ? [{
309
+ value: (null as string | null),
310
+ text: "—"
311
+ }].concat(Object.keys(cp.allowedValues).map(av => ({
312
+ value: av,
313
+ text: av
314
+ }))): undefined,
315
+ methodFilterRaw: (value: any, item: DeviceOrganisationInfos) => {
316
+ if (cp.useOnlyAllowedValues) {
317
+ return (!Object.keys(cp.allowedValues).includes(item.meta[cp.code])) && !value || item.meta[cp.code] === value;
318
+ }
319
+ return !item.meta[cp.code] && !value || item.meta[cp.code] === value;
320
+ },
321
+ sort: (a: string, b: string) => alphanumericSort(a, b)
322
+ }
323
+ }), {})
290
324
  }));
291
325
 
292
326
  const isSelected = (id: string): boolean => {
@@ -17,6 +17,13 @@
17
17
  v-bind="slotData"
18
18
  />
19
19
  </template>
20
+ <template
21
+ #header.imageId-title
22
+ >
23
+ <FSIcon>
24
+ mdi-panorama-variant-outline
25
+ </FSIcon>
26
+ </template>
20
27
  <template
21
28
  #item.imageId="{ item }"
22
29
  >
@@ -16,6 +16,13 @@
16
16
  v-bind="slotData"
17
17
  />
18
18
  </template>
19
+ <template
20
+ #header.imageId-title
21
+ >
22
+ <FSIcon>
23
+ mdi-panorama-variant-outline
24
+ </FSIcon>
25
+ </template>
19
26
  <template
20
27
  #header.connectable-title
21
28
  >
@@ -18,6 +18,13 @@
18
18
  v-bind="slotData"
19
19
  />
20
20
  </template>
21
+ <template
22
+ #header.imageId-title
23
+ >
24
+ <FSIcon>
25
+ mdi-panorama-variant-outline
26
+ </FSIcon>
27
+ </template>
21
28
  <template
22
29
  #item.imageId="{ item }"
23
30
  >
@@ -18,6 +18,13 @@
18
18
  v-bind="slotData"
19
19
  />
20
20
  </template>
21
+ <template
22
+ #header.imageId-title
23
+ >
24
+ <FSIcon>
25
+ mdi-panorama-variant-outline
26
+ </FSIcon>
27
+ </template>
21
28
  <template
22
29
  #item.imageId="{ item }"
23
30
  >
@@ -84,9 +91,8 @@
84
91
  </template>
85
92
 
86
93
  <script lang="ts">
87
- import type { PropType} from "vue";
88
- import { defineComponent, watch } from "vue";
89
- import type { RouteLocation } from "vue-router";
94
+ import { defineComponent, type PropType, watch } from "vue";
95
+ import { type RouteLocation } from "vue-router";
90
96
  import _ from "lodash";
91
97
 
92
98
  import type { UserOrganisationFilters, UserOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dative-gpi/foundation-core-components",
3
3
  "sideEffects": false,
4
- "version": "1.0.64",
4
+ "version": "1.0.66",
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": "1.0.64",
14
- "@dative-gpi/foundation-core-services": "1.0.64",
15
- "@dative-gpi/foundation-shared-components": "1.0.64",
16
- "@dative-gpi/foundation-shared-domain": "1.0.64",
17
- "@dative-gpi/foundation-shared-services": "1.0.64"
13
+ "@dative-gpi/foundation-core-domain": "1.0.66",
14
+ "@dative-gpi/foundation-core-services": "1.0.66",
15
+ "@dative-gpi/foundation-shared-components": "1.0.66",
16
+ "@dative-gpi/foundation-shared-domain": "1.0.66",
17
+ "@dative-gpi/foundation-shared-services": "1.0.66"
18
18
  },
19
19
  "peerDependencies": {
20
20
  "@dative-gpi/bones-ui": "^0.0.75",
@@ -26,5 +26,5 @@
26
26
  "sass": "1.71.1",
27
27
  "sass-loader": "13.3.2"
28
28
  },
29
- "gitHead": "2774a6e01e85f2b27b543f3fdd91a9370b95fbee"
29
+ "gitHead": "84d2d567d51959856200d302f7972b04bc56675a"
30
30
  }