bfg-common 1.3.329 → 1.3.330
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,160 +1,160 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="create-datastore-name">
|
|
3
|
-
<atoms-alert
|
|
4
|
-
v-show="errors.length"
|
|
5
|
-
test-id="datastore-creat-name"
|
|
6
|
-
status="alert-danger"
|
|
7
|
-
:items="errors"
|
|
8
|
-
@remove="onRemoveValidationErrors"
|
|
9
|
-
/>
|
|
10
|
-
|
|
11
|
-
<div class="clr-form-control clr-row">
|
|
12
|
-
<label for="datastore-name" class="clr-control-label clr-col-md-2">{{
|
|
13
|
-
localization.datastoreName
|
|
14
|
-
}}</label>
|
|
15
|
-
|
|
16
|
-
<div class="clr-control-container" :class="nameErrorText && 'clr-error'">
|
|
17
|
-
<div class="flex-align-center">
|
|
18
|
-
<input
|
|
19
|
-
id="datastore-name"
|
|
20
|
-
v-model.trim="form.name.value"
|
|
21
|
-
data-id="datastore-name-input"
|
|
22
|
-
type="text"
|
|
23
|
-
class="clr-input"
|
|
24
|
-
@blur="onBlurInputName"
|
|
25
|
-
@input="onInputName"
|
|
26
|
-
/>
|
|
27
|
-
<atoms-the-icon class="error-icon" name="info-circle" />
|
|
28
|
-
</div>
|
|
29
|
-
|
|
30
|
-
<div class="clr-subtext ng-star-inserted">
|
|
31
|
-
{{ nameErrorText }}
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
|
-
</template>
|
|
37
|
-
|
|
38
|
-
<script lang="ts" setup>
|
|
39
|
-
import { UI_I_ValidationTouchResult } from '~/lib/models/plugins/validation/interfaces'
|
|
40
|
-
import { UI_I_Localization } from '~/lib/models/interfaces'
|
|
41
|
-
import { UI_I_FormValidationDataStore } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
|
|
42
|
-
import { defaultFormFunc } from '~/components/common/wizards/datastore/add/local/createName/lib/config/defaultForm'
|
|
43
|
-
import { checkValidityName } from '~/components/common/wizards/datastore/add/lib/utils'
|
|
44
|
-
|
|
45
|
-
const props = defineProps<{
|
|
46
|
-
localCreateNameSubmit: number
|
|
47
|
-
}>()
|
|
48
|
-
const emits = defineEmits<{
|
|
49
|
-
(event: 'loading', value: boolean): void
|
|
50
|
-
(event: 'submit', value: string): void
|
|
51
|
-
}>()
|
|
52
|
-
|
|
53
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
54
|
-
const { $validation } = useNuxtApp()
|
|
55
|
-
|
|
56
|
-
const validation = $validation.call({})
|
|
57
|
-
const defaultForm: UI_I_FormValidationDataStore = defaultFormFunc(
|
|
58
|
-
localization.value
|
|
59
|
-
)
|
|
60
|
-
const form = ref<UI_I_FormValidationDataStore>(useDeepCopy(defaultForm))
|
|
61
|
-
|
|
62
|
-
const setForm = () => {
|
|
63
|
-
form.value = useDeepCopy(defaultForm)
|
|
64
|
-
validation.setForm(form)
|
|
65
|
-
}
|
|
66
|
-
setForm()
|
|
67
|
-
|
|
68
|
-
const validForm = ref<UI_I_ValidationTouchResult | null>(null)
|
|
69
|
-
|
|
70
|
-
/* Validation for Name input */
|
|
71
|
-
const isInitNameValidation = ref<boolean>(false)
|
|
72
|
-
const onBlurInputName = (): void => {
|
|
73
|
-
validForm.value = validation.touch()
|
|
74
|
-
isInitNameValidation.value = true
|
|
75
|
-
}
|
|
76
|
-
const onInputName = () => {
|
|
77
|
-
validForm.value = validation.touch()
|
|
78
|
-
}
|
|
79
|
-
const nameErrorText = computed<string>(() => {
|
|
80
|
-
if (!isInitNameValidation.value) return ''
|
|
81
|
-
return validForm.value?.errors?.name?.[0] || ''
|
|
82
|
-
})
|
|
83
|
-
/* Validation Name input end */
|
|
84
|
-
|
|
85
|
-
const errors = ref<string[]>([])
|
|
86
|
-
const showValidationErrors = (data: string[]): void => {
|
|
87
|
-
errors.value = data
|
|
88
|
-
}
|
|
89
|
-
const onRemoveValidationErrors = (): void => {
|
|
90
|
-
errors.value = []
|
|
91
|
-
}
|
|
92
|
-
const submit = async (): Promise<void> => {
|
|
93
|
-
const name = form.value.name.value
|
|
94
|
-
|
|
95
|
-
if (!name) {
|
|
96
|
-
validForm.value = validation.touch()
|
|
97
|
-
isInitNameValidation.value = true
|
|
98
|
-
if (nameErrorText.value) return
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
if (name) {
|
|
102
|
-
emits('loading', true)
|
|
103
|
-
|
|
104
|
-
const { valid, msg } = await checkValidityName(name)
|
|
105
|
-
|
|
106
|
-
emits('loading', false)
|
|
107
|
-
|
|
108
|
-
if (!valid) {
|
|
109
|
-
showValidationErrors([msg])
|
|
110
|
-
return
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
onRemoveValidationErrors()
|
|
115
|
-
emits('submit', name)
|
|
116
|
-
}
|
|
117
|
-
watch(
|
|
118
|
-
() => props.localCreateNameSubmit,
|
|
119
|
-
() => {
|
|
120
|
-
submit()
|
|
121
|
-
}
|
|
122
|
-
)
|
|
123
|
-
</script>
|
|
124
|
-
|
|
125
|
-
<style lang="scss" scoped>
|
|
126
|
-
.create-datastore-name {
|
|
127
|
-
&__alert-info {
|
|
128
|
-
:deep(.alert-text) {
|
|
129
|
-
font-size: 11px;
|
|
130
|
-
letter-spacing: normal;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
.clr-form-control {
|
|
134
|
-
display: flex;
|
|
135
|
-
flex-direction: row;
|
|
136
|
-
|
|
137
|
-
.clr-control-container {
|
|
138
|
-
min-height: 48px;
|
|
139
|
-
input {
|
|
140
|
-
width: 375px;
|
|
141
|
-
}
|
|
142
|
-
&.clr-error {
|
|
143
|
-
.clr-subtext,
|
|
144
|
-
.error-icon {
|
|
145
|
-
display: block;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
.clr-subtext,
|
|
149
|
-
.error-icon {
|
|
150
|
-
display: none;
|
|
151
|
-
}
|
|
152
|
-
.error-icon {
|
|
153
|
-
fill: #db2100;
|
|
154
|
-
width: 24px;
|
|
155
|
-
height: 24px;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="create-datastore-name">
|
|
3
|
+
<atoms-alert
|
|
4
|
+
v-show="errors.length"
|
|
5
|
+
test-id="datastore-creat-name"
|
|
6
|
+
status="alert-danger"
|
|
7
|
+
:items="errors"
|
|
8
|
+
@remove="onRemoveValidationErrors"
|
|
9
|
+
/>
|
|
10
|
+
|
|
11
|
+
<div class="clr-form-control clr-row">
|
|
12
|
+
<label for="datastore-name" class="clr-control-label clr-col-md-2">{{
|
|
13
|
+
localization.datastoreName
|
|
14
|
+
}}</label>
|
|
15
|
+
|
|
16
|
+
<div class="clr-control-container" :class="nameErrorText && 'clr-error'">
|
|
17
|
+
<div class="flex-align-center">
|
|
18
|
+
<input
|
|
19
|
+
id="datastore-name"
|
|
20
|
+
v-model.trim="form.name.value"
|
|
21
|
+
data-id="datastore-name-input"
|
|
22
|
+
type="text"
|
|
23
|
+
class="clr-input"
|
|
24
|
+
@blur="onBlurInputName"
|
|
25
|
+
@input="onInputName"
|
|
26
|
+
/>
|
|
27
|
+
<atoms-the-icon class="error-icon" name="info-circle" />
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="clr-subtext ng-star-inserted">
|
|
31
|
+
{{ nameErrorText }}
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
38
|
+
<script lang="ts" setup>
|
|
39
|
+
import { UI_I_ValidationTouchResult } from '~/lib/models/plugins/validation/interfaces'
|
|
40
|
+
import { UI_I_Localization } from '~/lib/models/interfaces'
|
|
41
|
+
import { UI_I_FormValidationDataStore } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
|
|
42
|
+
import { defaultFormFunc } from '~/components/common/wizards/datastore/add/local/createName/lib/config/defaultForm'
|
|
43
|
+
import { checkValidityName } from '~/components/common/wizards/datastore/add/lib/utils'
|
|
44
|
+
|
|
45
|
+
const props = defineProps<{
|
|
46
|
+
localCreateNameSubmit: number
|
|
47
|
+
}>()
|
|
48
|
+
const emits = defineEmits<{
|
|
49
|
+
(event: 'loading', value: boolean): void
|
|
50
|
+
(event: 'submit', value: string): void
|
|
51
|
+
}>()
|
|
52
|
+
|
|
53
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
54
|
+
const { $validation } = useNuxtApp()
|
|
55
|
+
|
|
56
|
+
const validation = $validation.call({})
|
|
57
|
+
const defaultForm: UI_I_FormValidationDataStore = defaultFormFunc(
|
|
58
|
+
localization.value
|
|
59
|
+
)
|
|
60
|
+
const form = ref<UI_I_FormValidationDataStore>(useDeepCopy(defaultForm))
|
|
61
|
+
|
|
62
|
+
const setForm = () => {
|
|
63
|
+
form.value = useDeepCopy(defaultForm)
|
|
64
|
+
validation.setForm(form)
|
|
65
|
+
}
|
|
66
|
+
setForm()
|
|
67
|
+
|
|
68
|
+
const validForm = ref<UI_I_ValidationTouchResult | null>(null)
|
|
69
|
+
|
|
70
|
+
/* Validation for Name input */
|
|
71
|
+
const isInitNameValidation = ref<boolean>(false)
|
|
72
|
+
const onBlurInputName = (): void => {
|
|
73
|
+
validForm.value = validation.touch()
|
|
74
|
+
isInitNameValidation.value = true
|
|
75
|
+
}
|
|
76
|
+
const onInputName = () => {
|
|
77
|
+
validForm.value = validation.touch()
|
|
78
|
+
}
|
|
79
|
+
const nameErrorText = computed<string>(() => {
|
|
80
|
+
if (!isInitNameValidation.value) return ''
|
|
81
|
+
return validForm.value?.errors?.name?.[0] || ''
|
|
82
|
+
})
|
|
83
|
+
/* Validation Name input end */
|
|
84
|
+
|
|
85
|
+
const errors = ref<string[]>([])
|
|
86
|
+
const showValidationErrors = (data: string[]): void => {
|
|
87
|
+
errors.value = data
|
|
88
|
+
}
|
|
89
|
+
const onRemoveValidationErrors = (): void => {
|
|
90
|
+
errors.value = []
|
|
91
|
+
}
|
|
92
|
+
const submit = async (): Promise<void> => {
|
|
93
|
+
const name = form.value.name.value
|
|
94
|
+
|
|
95
|
+
if (!name) {
|
|
96
|
+
validForm.value = validation.touch()
|
|
97
|
+
isInitNameValidation.value = true
|
|
98
|
+
if (nameErrorText.value) return
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (name) {
|
|
102
|
+
emits('loading', true)
|
|
103
|
+
|
|
104
|
+
const { valid, msg } = await checkValidityName(name)
|
|
105
|
+
|
|
106
|
+
emits('loading', false)
|
|
107
|
+
|
|
108
|
+
if (!valid) {
|
|
109
|
+
showValidationErrors([msg])
|
|
110
|
+
return
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
onRemoveValidationErrors()
|
|
115
|
+
emits('submit', name)
|
|
116
|
+
}
|
|
117
|
+
watch(
|
|
118
|
+
() => props.localCreateNameSubmit,
|
|
119
|
+
() => {
|
|
120
|
+
submit()
|
|
121
|
+
}
|
|
122
|
+
)
|
|
123
|
+
</script>
|
|
124
|
+
|
|
125
|
+
<style lang="scss" scoped>
|
|
126
|
+
.create-datastore-name {
|
|
127
|
+
&__alert-info {
|
|
128
|
+
:deep(.alert-text) {
|
|
129
|
+
font-size: 11px;
|
|
130
|
+
letter-spacing: normal;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
.clr-form-control {
|
|
134
|
+
display: flex;
|
|
135
|
+
flex-direction: row;
|
|
136
|
+
|
|
137
|
+
.clr-control-container {
|
|
138
|
+
min-height: 48px;
|
|
139
|
+
input {
|
|
140
|
+
width: 375px;
|
|
141
|
+
}
|
|
142
|
+
&.clr-error {
|
|
143
|
+
.clr-subtext,
|
|
144
|
+
.error-icon {
|
|
145
|
+
display: block;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
.clr-subtext,
|
|
149
|
+
.error-icon {
|
|
150
|
+
display: none;
|
|
151
|
+
}
|
|
152
|
+
.error-icon {
|
|
153
|
+
fill: #db2100;
|
|
154
|
+
width: 24px;
|
|
155
|
+
height: 24px;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
</style>
|
|
@@ -295,7 +295,7 @@ const submit = async (): Promise<void> => {
|
|
|
295
295
|
|
|
296
296
|
emits('loading', true)
|
|
297
297
|
|
|
298
|
-
const { valid, msg } = await checkValidityName(name.value)
|
|
298
|
+
const { valid, msg } = await checkValidityName(name.value, props.mode)
|
|
299
299
|
|
|
300
300
|
emits('loading', false)
|
|
301
301
|
|