@dative-gpi/foundation-shared-components 0.0.147 → 0.0.149
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.
- package/components/fields/FSTranslateField.vue +43 -4
- package/components/selects/FSSelectAutoRefresh.vue +61 -0
- package/components/selects/FSSelectDashboardVariableType.vue +46 -0
- package/components/selects/FSSelectDateSetting.vue +37 -35
- package/components/selects/FSSelectDays.vue +61 -0
- package/package.json +4 -4
- package/components/selects/FSSelectTimeZone.vue +0 -67
|
@@ -56,7 +56,8 @@
|
|
|
56
56
|
v-for="(language, index) in languages"
|
|
57
57
|
:editable="$props.editable"
|
|
58
58
|
:key="index"
|
|
59
|
-
|
|
59
|
+
:modelValue="getTranslation(language.code)"
|
|
60
|
+
@update:modelValue="setTranslation(language.code, $event)"
|
|
60
61
|
>
|
|
61
62
|
<template
|
|
62
63
|
#label
|
|
@@ -134,10 +135,15 @@ export default defineComponent({
|
|
|
134
135
|
required: false,
|
|
135
136
|
default: null
|
|
136
137
|
},
|
|
138
|
+
property: {
|
|
139
|
+
type: String as PropType<string>,
|
|
140
|
+
required: false,
|
|
141
|
+
default: "label"
|
|
142
|
+
},
|
|
137
143
|
translations: {
|
|
138
|
-
type:
|
|
144
|
+
type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
|
|
139
145
|
required: false,
|
|
140
|
-
default: () =>
|
|
146
|
+
default: () => []
|
|
141
147
|
},
|
|
142
148
|
buttonColor: {
|
|
143
149
|
type: String as PropType<ColorBase>,
|
|
@@ -155,7 +161,7 @@ export default defineComponent({
|
|
|
155
161
|
const { getMany: getManyLanguages, fetching: fetchingLanguages, entities: languages } = useLanguages();
|
|
156
162
|
const { getColors } = useColors();
|
|
157
163
|
|
|
158
|
-
const innerTranslations = ref(props.translations
|
|
164
|
+
const innerTranslations = ref(props.translations);
|
|
159
165
|
const dialog = ref(false);
|
|
160
166
|
|
|
161
167
|
const lights = getColors(ColorEnum.Light);
|
|
@@ -172,6 +178,37 @@ export default defineComponent({
|
|
|
172
178
|
};
|
|
173
179
|
});
|
|
174
180
|
|
|
181
|
+
const getTranslation = (languageCode: string): string => {
|
|
182
|
+
if (!innerTranslations.value) {
|
|
183
|
+
return "";
|
|
184
|
+
}
|
|
185
|
+
const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
|
|
186
|
+
if (!translation || !translation[props.property]) {
|
|
187
|
+
return "";
|
|
188
|
+
}
|
|
189
|
+
return translation[props.property];
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
const setTranslation = (languageCode: string, value: string): void => {
|
|
193
|
+
if (!innerTranslations.value) {
|
|
194
|
+
innerTranslations.value = [{
|
|
195
|
+
languageCode,
|
|
196
|
+
[props.property]: value
|
|
197
|
+
}]
|
|
198
|
+
return;
|
|
199
|
+
}
|
|
200
|
+
const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
|
|
201
|
+
if (translation) {
|
|
202
|
+
translation[props.property] = value;
|
|
203
|
+
}
|
|
204
|
+
else {
|
|
205
|
+
innerTranslations.value.push({
|
|
206
|
+
languageCode,
|
|
207
|
+
[props.property]: value
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
};
|
|
211
|
+
|
|
175
212
|
const onSubmit = (): void => {
|
|
176
213
|
dialog.value = false;
|
|
177
214
|
if (props.editable) {
|
|
@@ -190,6 +227,8 @@ export default defineComponent({
|
|
|
190
227
|
languages,
|
|
191
228
|
dialog,
|
|
192
229
|
style,
|
|
230
|
+
getTranslation,
|
|
231
|
+
setTranslation,
|
|
193
232
|
onSubmit
|
|
194
233
|
};
|
|
195
234
|
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSSelectField
|
|
3
|
+
:items="autoRefreshes"
|
|
4
|
+
:clearable="false"
|
|
5
|
+
:modelValue="$props.modelValue"
|
|
6
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
7
|
+
v-bind="$attrs"
|
|
8
|
+
/>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script lang="ts">
|
|
12
|
+
import { computed, PropType, defineComponent } from "vue";
|
|
13
|
+
|
|
14
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
15
|
+
import { AutoRefresh } from "@dative-gpi/foundation-shared-domain/models";
|
|
16
|
+
|
|
17
|
+
import FSSelectField from "../fields/FSSelectField.vue";
|
|
18
|
+
|
|
19
|
+
export default defineComponent({
|
|
20
|
+
name: "FSSelectAutoRefresh",
|
|
21
|
+
components: {
|
|
22
|
+
FSSelectField
|
|
23
|
+
},
|
|
24
|
+
props: {
|
|
25
|
+
modelValue: {
|
|
26
|
+
type: Number as PropType<AutoRefresh>,
|
|
27
|
+
required: false,
|
|
28
|
+
default: AutoRefresh.FifteenSeconds
|
|
29
|
+
},
|
|
30
|
+
useNone: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
required: false,
|
|
33
|
+
default: false
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
emits: ["update:modelValue"],
|
|
37
|
+
setup(props) {
|
|
38
|
+
const { $tr } = useTranslationsProvider();
|
|
39
|
+
|
|
40
|
+
const autoRefreshes = computed((): { id: AutoRefresh; label: string }[] => {
|
|
41
|
+
const items = [
|
|
42
|
+
{ id: AutoRefresh.FifteenSeconds, label: $tr("ui.auto-refresh.fifteen-seconds", "Fifteen seconds") },
|
|
43
|
+
{ id: AutoRefresh.ThirtySeconds, label: $tr("ui.auto-refresh.thirty-seconds", "Thirty seconds") },
|
|
44
|
+
{ id: AutoRefresh.OneMinute, label: $tr("ui.auto-refresh.one-minute", "One minute") },
|
|
45
|
+
{ id: AutoRefresh.FiveMinutes, label: $tr("ui.auto-refresh.five-minutes", "Five minutes") },
|
|
46
|
+
{ id: AutoRefresh.FifteenMinutes, label: $tr("ui.auto-refresh.fifteen-minutes", "Fifteen minutes") },
|
|
47
|
+
{ id: AutoRefresh.ThirtyMinutes, label: $tr("ui.auto-refresh.thirty-minutes", "Thirty minutes") },
|
|
48
|
+
{ id: AutoRefresh.OneHour, label: $tr("ui.auto-refresh.one-hour", "One hour") },
|
|
49
|
+
];
|
|
50
|
+
if (props.useNone) {
|
|
51
|
+
items.unshift({ id: AutoRefresh.None, label: $tr("ui.auto-refresh.none", "None") });
|
|
52
|
+
}
|
|
53
|
+
return items;
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
return {
|
|
57
|
+
autoRefreshes
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
</script>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSSelectField
|
|
3
|
+
:items="dashboardVariableTypes"
|
|
4
|
+
:clearable="false"
|
|
5
|
+
:modelValue="$props.modelValue"
|
|
6
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
7
|
+
v-bind="$attrs"
|
|
8
|
+
/>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script lang="ts">
|
|
12
|
+
import { computed, PropType, defineComponent } from "vue";
|
|
13
|
+
|
|
14
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
15
|
+
import { DashboardVariableType } from "@dative-gpi/foundation-shared-domain/models";
|
|
16
|
+
|
|
17
|
+
import FSSelectField from "../fields/FSSelectField.vue";
|
|
18
|
+
|
|
19
|
+
export default defineComponent({
|
|
20
|
+
name: "FSSelectDashboardVariableType",
|
|
21
|
+
components: {
|
|
22
|
+
FSSelectField
|
|
23
|
+
},
|
|
24
|
+
props: {
|
|
25
|
+
modelValue: {
|
|
26
|
+
type: Number as PropType<DashboardVariableType>,
|
|
27
|
+
required: false,
|
|
28
|
+
default: DashboardVariableType.Number
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
emits: ["update:modelValue"],
|
|
32
|
+
setup() {
|
|
33
|
+
const { $tr } = useTranslationsProvider();
|
|
34
|
+
|
|
35
|
+
const dashboardVariableTypes = computed((): { id: DashboardVariableType; label: string }[] => ([
|
|
36
|
+
{ id: DashboardVariableType.Number, label: $tr("ui.dashboard-variable-type.number", "Number") },
|
|
37
|
+
{ id: DashboardVariableType.String, label: $tr("ui.dashboard-variable-type.string", "String") },
|
|
38
|
+
{ id: DashboardVariableType.TimeStep, label: $tr("ui.dashboard-variable-type.time-step", "Time step") }
|
|
39
|
+
]));
|
|
40
|
+
|
|
41
|
+
return {
|
|
42
|
+
dashboardVariableTypes
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
</script>
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<FSSelectField
|
|
3
|
-
:editable="$props.editable"
|
|
4
3
|
:items="dateSettings"
|
|
5
|
-
:hideHeader="true"
|
|
6
4
|
:clearable="false"
|
|
7
5
|
:modelValue="$props.modelValue"
|
|
8
6
|
@update:modelValue="$emit('update:modelValue', $event)"
|
|
@@ -31,17 +29,18 @@ export default defineComponent({
|
|
|
31
29
|
},
|
|
32
30
|
modelValue: {
|
|
33
31
|
type: Number as PropType<DateSetting>,
|
|
34
|
-
required:
|
|
32
|
+
required: false,
|
|
33
|
+
default: DateSetting.LastDay
|
|
35
34
|
},
|
|
36
35
|
lastPeriod: {
|
|
37
36
|
type: Boolean,
|
|
38
37
|
required: false,
|
|
39
38
|
default: false
|
|
40
39
|
},
|
|
41
|
-
|
|
40
|
+
useNone: {
|
|
42
41
|
type: Boolean,
|
|
43
42
|
required: false,
|
|
44
|
-
default:
|
|
43
|
+
default: false
|
|
45
44
|
}
|
|
46
45
|
},
|
|
47
46
|
emits: ["update:modelValue"],
|
|
@@ -51,41 +50,44 @@ export default defineComponent({
|
|
|
51
50
|
const dateSettings = computed((): { id: DateSetting, label: string }[] => {
|
|
52
51
|
if (props.variant === "before-after") {
|
|
53
52
|
return [
|
|
54
|
-
{ id: DateSetting.Pick, label: $tr("ui.
|
|
55
|
-
{ id: DateSetting.MinutesBeforeAfter, label: $tr("ui.
|
|
56
|
-
{ id: DateSetting.HoursBeforeAfter, label: $tr("ui.
|
|
57
|
-
{ id: DateSetting.DaysBeforeAfter, label: $tr("ui.
|
|
58
|
-
{ id: DateSetting.WeeksBeforeAfter, label: $tr("ui.
|
|
59
|
-
{ id: DateSetting.MinutesBefore, label: $tr("ui.
|
|
60
|
-
{ id: DateSetting.HoursBefore, label: $tr("ui.
|
|
61
|
-
{ id: DateSetting.DaysBefore, label: $tr("ui.
|
|
62
|
-
{ id: DateSetting.WeeksBefore, label: $tr("ui.
|
|
53
|
+
{ id: DateSetting.Pick, label: $tr("ui.date-setting.pick-dates", "Pick dates") },
|
|
54
|
+
{ id: DateSetting.MinutesBeforeAfter, label: $tr("ui.date-setting.x-minutes-before-after-hour", "x Minutes before/after") },
|
|
55
|
+
{ id: DateSetting.HoursBeforeAfter, label: $tr("ui.date-setting.x-hours-before-after-hour", "x Hours before/after") },
|
|
56
|
+
{ id: DateSetting.DaysBeforeAfter, label: $tr("ui.date-setting.x-days-before-after-hour", "x Days before/after") },
|
|
57
|
+
{ id: DateSetting.WeeksBeforeAfter, label: $tr("ui.date-setting.x-weeks-before-after-hour", "x Weeks before/after") },
|
|
58
|
+
{ id: DateSetting.MinutesBefore, label: $tr("ui.date-setting.x-minutes-before", "x Minutes before") },
|
|
59
|
+
{ id: DateSetting.HoursBefore, label: $tr("ui.date-setting.x-hours-before", "x Hours before") },
|
|
60
|
+
{ id: DateSetting.DaysBefore, label: $tr("ui.date-setting.x-days-before", "x Days before") },
|
|
61
|
+
{ id: DateSetting.WeeksBefore, label: $tr("ui.date-setting.x-weeks-before", "x Weeks before") },
|
|
63
62
|
];
|
|
64
63
|
}
|
|
65
64
|
let dateSettings = [
|
|
66
|
-
{ id: DateSetting.Pick, label: $tr("ui.
|
|
67
|
-
{ id: DateSetting.CurrentHour, label: $tr("ui.
|
|
68
|
-
{ id: DateSetting.CurrentDay, label: $tr("ui.
|
|
69
|
-
{ id: DateSetting.CurrentWeek, label: $tr("ui.
|
|
70
|
-
{ id: DateSetting.CurrentMonth, label: $tr("ui.
|
|
71
|
-
{ id: DateSetting.CurrentYear, label: $tr("ui.
|
|
72
|
-
{ id: DateSetting.LastDay, label: $tr("ui.
|
|
73
|
-
{ id: DateSetting.LastWeek, label: $tr("ui.
|
|
74
|
-
{ id: DateSetting.LastMonth, label: $tr("ui.
|
|
75
|
-
{ id: DateSetting.LastYear, label: $tr("ui.
|
|
76
|
-
{ id: DateSetting.SinceLastDay, label: $tr("ui.
|
|
77
|
-
{ id: DateSetting.SinceLastWeek, label: $tr("ui.
|
|
78
|
-
{ id: DateSetting.SinceLastMonth, label: $tr("ui.
|
|
79
|
-
{ id: DateSetting.SinceLastYear, label: $tr("ui.
|
|
80
|
-
{ id: DateSetting.PastHours, label: $tr("ui.
|
|
81
|
-
{ id: DateSetting.PastDays, label: $tr("ui.
|
|
82
|
-
{ id: DateSetting.PastWeeks, label: $tr("ui.
|
|
83
|
-
{ id: DateSetting.PastMonths, label: $tr("ui.
|
|
84
|
-
{ id: DateSetting.PastYears, label: $tr("ui.
|
|
85
|
-
{ id: DateSetting.Expression, label: $tr("ui.
|
|
65
|
+
{ id: DateSetting.Pick, label: $tr("ui.date-setting.pick-dates", "Pick dates") },
|
|
66
|
+
{ id: DateSetting.CurrentHour, label: $tr("ui.date-setting.this-hour", "This hour") },
|
|
67
|
+
{ id: DateSetting.CurrentDay, label: $tr("ui.date-setting.this-day", "This day") },
|
|
68
|
+
{ id: DateSetting.CurrentWeek, label: $tr("ui.date-setting.this-week", "This week") },
|
|
69
|
+
{ id: DateSetting.CurrentMonth, label: $tr("ui.date-setting.this-month", "This month") },
|
|
70
|
+
{ id: DateSetting.CurrentYear, label: $tr("ui.date-setting.this-year", "This year") },
|
|
71
|
+
{ id: DateSetting.LastDay, label: $tr("ui.date-setting.last-day", "Last day") },
|
|
72
|
+
{ id: DateSetting.LastWeek, label: $tr("ui.date-setting.last-week", "Last week") },
|
|
73
|
+
{ id: DateSetting.LastMonth, label: $tr("ui.date-setting.last-month", "Last month") },
|
|
74
|
+
{ id: DateSetting.LastYear, label: $tr("ui.date-setting.last-year", "Last year") },
|
|
75
|
+
{ id: DateSetting.SinceLastDay, label: $tr("ui.date-setting.since-last-day", "Since last day") },
|
|
76
|
+
{ id: DateSetting.SinceLastWeek, label: $tr("ui.date-setting.since-last-week", "Since last week") },
|
|
77
|
+
{ id: DateSetting.SinceLastMonth, label: $tr("ui.date-setting.since-last-month", "Since last month") },
|
|
78
|
+
{ id: DateSetting.SinceLastYear, label: $tr("ui.date-setting.since-last-year", "Since last year") },
|
|
79
|
+
{ id: DateSetting.PastHours, label: $tr("ui.date-setting.past-x-hours", "Past x hours") },
|
|
80
|
+
{ id: DateSetting.PastDays, label: $tr("ui.date-setting.past-x-days", "Past x days") },
|
|
81
|
+
{ id: DateSetting.PastWeeks, label: $tr("ui.date-setting.past-x-weeks", "Past x weeks") },
|
|
82
|
+
{ id: DateSetting.PastMonths, label: $tr("ui.date-setting.past-x-months", "Past x months") },
|
|
83
|
+
{ id: DateSetting.PastYears, label: $tr("ui.date-setting.past-x-years", "Past x years") },
|
|
84
|
+
{ id: DateSetting.Expression, label: $tr("ui.date-setting.expression", "Expression") }
|
|
86
85
|
];
|
|
87
86
|
if (props.lastPeriod) {
|
|
88
|
-
dateSettings.push({ id: DateSetting.LastPeriod, label: $tr("ui.
|
|
87
|
+
dateSettings.push({ id: DateSetting.LastPeriod, label: $tr("ui.date-setting.last-period", "Last period") });
|
|
88
|
+
}
|
|
89
|
+
if (props.useNone) {
|
|
90
|
+
dateSettings.unshift({ id: DateSetting.None, label: $tr("ui.date-setting.none", "None") });
|
|
89
91
|
}
|
|
90
92
|
return dateSettings;
|
|
91
93
|
})
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSSelectField
|
|
3
|
+
:clearable="false"
|
|
4
|
+
:items="days"
|
|
5
|
+
:modelValue="$props.modelValue"
|
|
6
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
7
|
+
v-bind="$attrs"
|
|
8
|
+
/>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script lang="ts">
|
|
12
|
+
import { computed, PropType, defineComponent } from "vue";
|
|
13
|
+
|
|
14
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
15
|
+
import { Days } from "@dative-gpi/foundation-shared-domain/models";
|
|
16
|
+
|
|
17
|
+
import FSSelectField from "../fields/FSSelectField.vue";
|
|
18
|
+
|
|
19
|
+
export default defineComponent({
|
|
20
|
+
name: "FSSelectDays",
|
|
21
|
+
components: {
|
|
22
|
+
FSSelectField
|
|
23
|
+
},
|
|
24
|
+
props: {
|
|
25
|
+
modelValue: {
|
|
26
|
+
type: Number as PropType<Days>,
|
|
27
|
+
required: false,
|
|
28
|
+
default: Days.Monday
|
|
29
|
+
},
|
|
30
|
+
useAllDays: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
required: false,
|
|
33
|
+
default: true
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
emits: ["update:modelValue"],
|
|
37
|
+
setup(props) {
|
|
38
|
+
const { $tr } = useTranslationsProvider();
|
|
39
|
+
|
|
40
|
+
const days = computed((): { id: Days; label: string }[] => {
|
|
41
|
+
const items = [
|
|
42
|
+
{ id: Days.Monday, label: $tr("ui.days.monday", "Monday") },
|
|
43
|
+
{ id: Days.Tuesday, label: $tr("ui.days.tuesday", "Tuesday") },
|
|
44
|
+
{ id: Days.Wednesday, label: $tr("ui.days.wednesday", "Wednesday") },
|
|
45
|
+
{ id: Days.Thursday, label: $tr("ui.days.thursday", "Thursday") },
|
|
46
|
+
{ id: Days.Friday, label: $tr("ui.days.friday", "Friday") },
|
|
47
|
+
{ id: Days.Saturday, label: $tr("ui.days.saturday", "Saturday") },
|
|
48
|
+
{ id: Days.Sunday, label: $tr("ui.days.sunday", "Sunday") }
|
|
49
|
+
];
|
|
50
|
+
if (props.useAllDays) {
|
|
51
|
+
items.unshift({ id: Days.AllDays, label: $tr("ui.days.all-days", "All days") });
|
|
52
|
+
}
|
|
53
|
+
return items;
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
return {
|
|
57
|
+
days
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-shared-components",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.149",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"author": "",
|
|
11
11
|
"license": "ISC",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@dative-gpi/foundation-shared-domain": "0.0.
|
|
14
|
-
"@dative-gpi/foundation-shared-services": "0.0.
|
|
13
|
+
"@dative-gpi/foundation-shared-domain": "0.0.149",
|
|
14
|
+
"@dative-gpi/foundation-shared-services": "0.0.149",
|
|
15
15
|
"@fontsource/montserrat": "^5.0.16",
|
|
16
16
|
"@lexical/clipboard": "^0.12.5",
|
|
17
17
|
"@lexical/history": "^0.12.5",
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"sass": "^1.69.5",
|
|
33
33
|
"sass-loader": "^13.3.2"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "530e113f98626a38763ac4afcc4d828d69bcfc2d"
|
|
36
36
|
}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<FSSelectField
|
|
3
|
-
itemTitle="id"
|
|
4
|
-
:items="timeZones"
|
|
5
|
-
:modelValue="$props.modelValue"
|
|
6
|
-
@update:modelValue="$emit('update:modelValue', $event)"
|
|
7
|
-
v-bind="$attrs"
|
|
8
|
-
>
|
|
9
|
-
<template
|
|
10
|
-
#append-inner
|
|
11
|
-
>
|
|
12
|
-
<slot
|
|
13
|
-
name="append-inner"
|
|
14
|
-
>
|
|
15
|
-
<FSChip
|
|
16
|
-
v-if="offset"
|
|
17
|
-
variant="standard"
|
|
18
|
-
:color="ColorEnum.Dark"
|
|
19
|
-
:label="offset"
|
|
20
|
-
/>
|
|
21
|
-
</slot>
|
|
22
|
-
</template>
|
|
23
|
-
</FSSelectField>
|
|
24
|
-
</template>
|
|
25
|
-
|
|
26
|
-
<script lang="ts">
|
|
27
|
-
import { computed, defineComponent, onMounted, PropType } from "vue";
|
|
28
|
-
|
|
29
|
-
import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
|
|
30
|
-
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
31
|
-
|
|
32
|
-
import FSSelectField from "../fields/FSSelectField.vue";
|
|
33
|
-
import FSChip from "../FSChip.vue";
|
|
34
|
-
|
|
35
|
-
export default defineComponent({
|
|
36
|
-
name: "FSSelectTimeZone",
|
|
37
|
-
components: {
|
|
38
|
-
FSSelectField,
|
|
39
|
-
FSChip
|
|
40
|
-
},
|
|
41
|
-
props: {
|
|
42
|
-
modelValue: {
|
|
43
|
-
type: String as PropType<string | null>,
|
|
44
|
-
required: false,
|
|
45
|
-
default: null
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
emits: ["update:modelValue"],
|
|
49
|
-
setup(props) {
|
|
50
|
-
const { getMany: getTimeZones, entities: timeZones } = useTimeZones();
|
|
51
|
-
|
|
52
|
-
const offset = computed((): string | undefined => {
|
|
53
|
-
return timeZones.value.find((entity) => entity.id === props.modelValue)?.offset;
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
onMounted(() => {
|
|
57
|
-
getTimeZones();
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
return {
|
|
61
|
-
ColorEnum,
|
|
62
|
-
timeZones,
|
|
63
|
-
offset
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
</script>
|