bfg-common 1.2.200 → 1.2.201

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.
Files changed (62) hide show
  1. package/assets/localization/local_be.json +1 -3
  2. package/assets/localization/local_en.json +1 -3
  3. package/assets/localization/local_hy.json +1 -3
  4. package/assets/localization/local_kk.json +1 -3
  5. package/assets/localization/local_ru.json +1 -3
  6. package/assets/localization/local_zh.json +1 -3
  7. package/assets/scss/common/icons/icons-2.scss +222 -222
  8. package/components/atoms/switch/Switch.vue +107 -107
  9. package/components/atoms/wizard/Wizard.vue +1 -0
  10. package/components/atoms/wizard/utils/utils.ts +486 -538
  11. package/components/common/BadBrowser.vue +114 -114
  12. package/components/common/adapterManager/AddAdapterWarningModal.vue +82 -82
  13. package/components/common/adapterManager/NoActiveAdaptersModal.vue +62 -62
  14. package/components/common/adapterManager/NoConnectedActiveAdaptersModal.vue +62 -62
  15. package/components/common/browse/blocks/Title.vue +66 -66
  16. package/components/common/diagramMain/modals/editSettings/tabs/port/PortProperties.vue +202 -202
  17. package/components/common/diagramMain/modals/remove/RemoveModal.vue +226 -226
  18. package/components/common/feedback/Feedback.vue +261 -261
  19. package/components/common/feedback/VisitPortal.vue +53 -53
  20. package/components/common/help/navbar/left/utils/constructAccordion.ts +27 -27
  21. package/components/common/recursionTree/RecursionTree.vue +201 -201
  22. package/components/common/vm/actions/add/Add.vue +568 -687
  23. package/components/common/vm/actions/add/utils.ts +238 -118
  24. package/components/common/vm/actions/addOld/Add.vue +690 -0
  25. package/components/common/vm/actions/addOld/FolderTreeView.vue +83 -0
  26. package/components/common/vm/actions/addOld/utils.ts +118 -0
  27. package/components/common/vm/actions/clone/Clone.vue +545 -545
  28. package/components/common/vm/actions/clone/select/options/Options.vue +65 -65
  29. package/components/common/vm/actions/clone/utils.ts +43 -43
  30. package/components/common/vm/actions/common/customizeHardware/CustomizeHardware.vue +9 -6
  31. package/components/common/vm/actions/common/customizeHardware/CustomizeHardwareOld.vue +267 -0
  32. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CoresPerSocket.vue +109 -109
  33. package/components/common/vm/actions/common/customizeHardware/virtualHardware/limit/Limit.vue +234 -234
  34. package/components/common/vm/actions/common/customizeHardware/virtualHardware/limit/config/options.ts +28 -28
  35. package/components/common/vm/actions/common/customizeHardware/virtualHardware/memory/Memory.vue +316 -316
  36. package/components/common/vm/actions/common/customizeHardware/virtualHardware/memory/config/memoryOptions.ts +35 -35
  37. package/components/common/vm/actions/common/customizeHardware/virtualHardware/reservation/Reservation.vue +235 -235
  38. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue +197 -197
  39. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/CopyPaste.vue +51 -51
  40. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/RemoteConsoleOptions.vue +253 -253
  41. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/Keymap.vue +55 -55
  42. package/components/common/vm/actions/common/select/name/Name.vue +10 -5
  43. package/components/common/vm/actions/common/select/name/NameOld.vue +215 -0
  44. package/components/common/vm/actions/common/select/storage/Storage.vue +6 -4
  45. package/components/common/vm/actions/common/select/storage/StorageOld.vue +194 -0
  46. package/components/common/vm/actions/common/select/storage/config/config.ts +154 -154
  47. package/components/common/vm/utils/powerActions.ts +55 -55
  48. package/components/common/wizards/datastore/add/nfs/kerberosAuthentication/KerberosAuthentication.vue +54 -54
  49. package/components/layout/theHeader/utils/localization.ts +32 -32
  50. package/composables/useLocal.ts +38 -38
  51. package/minify.js +146 -146
  52. package/models/interfaces.ts +49 -49
  53. package/models/store/interfaces.ts +37 -37
  54. package/models/store/storage/interfaces.ts +32 -32
  55. package/models/store/types.ts +43 -43
  56. package/modules/fixContentBuild/utils/methods.ts +114 -114
  57. package/package.json +1 -1
  58. package/public/spice-console/application/codec.js +257 -257
  59. package/public/spice-console/lib/rasterEngine.js +907 -907
  60. package/public/spice-console/network/spicechannel.js +369 -369
  61. package/utils/contentBuild.ts +34 -34
  62. package/utils/sendTask.ts +77 -77
@@ -1,538 +1,486 @@
1
- import { ref, computed, Ref, ComputedRef } from 'vue'
2
- import { useDeepCopy } from '~/composables/deepCopy'
3
- import {
4
- UI_I_ErrorFields,
5
- UI_I_Loader,
6
- UI_I_ValidationReturn,
7
- UI_I_WizardStep,
8
- } from '~/components/atoms/wizard/models/interfaces'
9
- import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/models/enums'
10
-
11
- export default class Wizard {
12
- private _initialSteps: Ref<UI_I_WizardStep[]>
13
- private _initialStepsScheme: Ref<number[][]>
14
- private _steps: Ref<UI_I_WizardStep[]>
15
- private _stepsScheme: Ref<number[][]>
16
- private _selectedSchemeId: Ref<number>
17
- private _wizardLoader: Ref<UI_I_Loader>
18
- private _waitingStepId: Ref<number>
19
- selectedScheme: ComputedRef<number[]>
20
- alertMessages: ComputedRef<string[][]>
21
-
22
- constructor(steps: UI_I_WizardStep[], stepsSchemeInitial: number[][]) {
23
- this._steps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
24
- this._initialSteps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
25
- this._stepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
26
- this._initialStepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
27
- this._selectedSchemeId = ref<number>(0)
28
- this._wizardLoader = ref<UI_I_Loader>({
29
- status: false,
30
- messages: [],
31
- })
32
- this._waitingStepId = ref<number>(-1)
33
- this.selectedScheme = computed<number[]>(
34
- () => this._stepsScheme.value[this._selectedSchemeId.value]
35
- )
36
- this.alertMessages = computed<string[][]>(() =>
37
- this._steps.value.map((step: UI_I_WizardStep) =>
38
- Object.values(step.fields).reduce(
39
- (result: string[], obj: UI_I_ErrorFields) =>
40
- obj.alert ? [...result, obj.alert] : result,
41
- []
42
- )
43
- )
44
- )
45
- }
46
-
47
- get steps(): UI_I_WizardStep[] {
48
- return this._steps.value
49
- }
50
-
51
- set steps(newSteps: UI_I_WizardStep[]) {
52
- this._steps.value = newSteps
53
- }
54
-
55
- set stepsScheme(newStepsScheme: number[][]) {
56
- this._stepsScheme.value = newStepsScheme
57
- }
58
-
59
- get stepsScheme(): number[][] {
60
- return this._stepsScheme.value
61
- }
62
-
63
- set selectedSchemeId(newSelectedSchemeId: number) {
64
- this._selectedSchemeId.value = newSelectedSchemeId
65
- }
66
-
67
- get selectedSchemeId(): number {
68
- return this._selectedSchemeId.value
69
- }
70
-
71
- set waitingStepId(id: number) {
72
- this._waitingStepId.value = id
73
- }
74
-
75
- get waitingStepId(): number {
76
- return this._waitingStepId.value
77
- }
78
-
79
- get wizardLoader(): UI_I_Loader {
80
- return this._wizardLoader.value
81
- }
82
-
83
- get nextAvailableStep(): number {
84
- const currentStepIndex = this.selectedScheme.value.indexOf(
85
- this.selectedStepId
86
- )
87
- return this.selectedScheme.value[currentStepIndex + 1]
88
- }
89
-
90
- setLoader(status: boolean, messages?: string[]): void {
91
- this._wizardLoader.value.status = status
92
-
93
- if (!messages && this._wizardLoader.value.messages.length > 0) {
94
- this._wizardLoader.value.messages = []
95
- return
96
- }
97
- if (!messages) return
98
-
99
- messages.length > 0 && (this._wizardLoader.value.messages = messages)
100
- }
101
-
102
- changeScheme(schemeId: number): void {
103
- this.selectedSchemeId = schemeId
104
- this.resetAfterSelected()
105
- }
106
-
107
- goToFirstInvalidStep(): void {
108
- const firstInvalidStep: UI_I_WizardStep | undefined = this.steps.find(
109
- (step: UI_I_WizardStep) => this.isInvalid(step.status)
110
- )
111
-
112
- if (!firstInvalidStep) return
113
-
114
- const firstInvalidStepId: number = firstInvalidStep.id
115
-
116
- this.steps = this.steps.map((step: UI_I_WizardStep): UI_I_WizardStep => {
117
- if (step.id === firstInvalidStepId) {
118
- return { ...step, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
119
- }
120
- if (step.status === UI_E_WIZARD_STATUS.SELECTED) {
121
- return { ...step, status: UI_E_WIZARD_STATUS.COMPLETED }
122
- }
123
-
124
- return step
125
- })
126
- }
127
-
128
- goToFirstStoppageStep(stoppageStepId: number): void {
129
- console.log('goToFirstStoppageStep', stoppageStepId)
130
- }
131
-
132
- hasMessage(stepId: number, field: string): boolean {
133
- return (
134
- !!this.steps[stepId].fields?.[field].field ||
135
- !!this.steps[stepId].fields?.[field].alert
136
- )
137
- }
138
-
139
- setValidationError(stepId: number, field: string, message: string): void {
140
- const invalidStep: UI_I_WizardStep | undefined = this.steps.find(
141
- (step: UI_I_WizardStep): boolean => step.id === stepId
142
- )
143
-
144
- if (!invalidStep) return
145
-
146
- invalidStep.fields[field].field = message
147
-
148
- if (message) {
149
- invalidStep.isValid = false
150
-
151
- if (this.isSelected(invalidStep.status)) {
152
- invalidStep.status = UI_E_WIZARD_STATUS.INVALID_SELECTED
153
- return
154
- }
155
-
156
- invalidStep.status = UI_E_WIZARD_STATUS.INVALID
157
- } else {
158
- invalidStep.isValid = true
159
- if (this.isSelected(invalidStep.status)) {
160
- invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
161
- } else {
162
- invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
163
- }
164
- }
165
- }
166
-
167
- setAlertMessage(stepId: number, field: string, message: string): void {
168
- this.steps[stepId].fields[field].alert = message
169
- }
170
-
171
- removeAlertMessage(
172
- stepId: number,
173
- field: string,
174
- value?: UI_I_WizardStep[]
175
- ): UI_I_WizardStep[] {
176
- const invalidStep: UI_I_WizardStep = this.steps[stepId]
177
-
178
- invalidStep.fields[field].alert = ''
179
- if (!value) return this.steps
180
-
181
- return value.map(
182
- (step: UI_I_WizardStep): UI_I_WizardStep =>
183
- step.id === invalidStep.id ? invalidStep : step
184
- )
185
- }
186
-
187
- private removeValidationError(
188
- stepId: number,
189
- field: string,
190
- nextStep: boolean,
191
- value?: UI_I_WizardStep[]
192
- ): UI_I_WizardStep[] {
193
- const invalidStep: UI_I_WizardStep = this.steps[stepId]
194
-
195
- if (!invalidStep) return this.steps
196
-
197
- invalidStep.fields[field].field = ''
198
-
199
- const messages: UI_I_ErrorFields[] = Object.values(
200
- invalidStep.fields
201
- ).filter((message: UI_I_ErrorFields): boolean => message.field !== '')
202
-
203
- invalidStep.isValid = !messages.length
204
-
205
- if (nextStep && invalidStep.isValid && this.isInvalid(invalidStep.status)) {
206
- invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
207
- }
208
-
209
- if (
210
- !nextStep &&
211
- invalidStep.isValid &&
212
- invalidStep.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
213
- ) {
214
- invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
215
- }
216
-
217
- if (nextStep) this.goToFirstInvalidStep()
218
-
219
- if (!value) return this.steps
220
-
221
- return value.map(
222
- (step: UI_I_WizardStep): UI_I_WizardStep =>
223
- step.id === invalidStep.id ? invalidStep : step
224
- )
225
- }
226
-
227
- hideAlertMessagesByStepId(stepId: number): UI_I_WizardStep[] {
228
- const modifiedStep: UI_I_WizardStep = this.steps[stepId]
229
-
230
- for (const field in modifiedStep.fields) {
231
- modifiedStep.fields[field].alert = ''
232
- }
233
-
234
- return (this.steps = this.steps.map((step: UI_I_WizardStep) =>
235
- step.id === stepId ? modifiedStep : step
236
- ))
237
- }
238
-
239
- changeStep(value: UI_I_WizardStep[]): void {
240
- this.steps = this.steps.map(
241
- (step: UI_I_WizardStep): UI_I_WizardStep => ({
242
- ...step,
243
- ...(value.find(
244
- (stepFind: UI_I_WizardStep): boolean => stepFind.id === step.id
245
- ) || step),
246
- })
247
- )
248
- }
249
-
250
- isSelected(status: UI_E_WIZARD_STATUS): boolean {
251
- return (
252
- status === UI_E_WIZARD_STATUS.SELECTED ||
253
- status === UI_E_WIZARD_STATUS.INVALID_SELECTED
254
- )
255
- }
256
-
257
- isInvalid(status: UI_E_WIZARD_STATUS): boolean {
258
- return (
259
- status === UI_E_WIZARD_STATUS.INVALID ||
260
- status === UI_E_WIZARD_STATUS.INVALID_SELECTED
261
- )
262
- }
263
-
264
- get selectedStepId(): number {
265
- const selectedStep: UI_I_WizardStep | undefined = this.steps.find(
266
- (step: UI_I_WizardStep) =>
267
- step.status === UI_E_WIZARD_STATUS.SELECTED ||
268
- step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
269
- )
270
-
271
- return selectedStep !== undefined ? selectedStep.id : this.steps[0].id
272
- }
273
-
274
- async changeSteps(
275
- value: UI_I_WizardStep[],
276
- validationFunc?: (
277
- value: UI_I_WizardStep[],
278
- currentStep: UI_I_WizardStep,
279
- nextStep: UI_I_WizardStep
280
- ) => Promise<UI_I_ValidationReturn>,
281
- finalValidationFunc?: (
282
- value: UI_I_WizardStep[],
283
- currentStep: UI_I_WizardStep,
284
- nextStep: UI_I_WizardStep
285
- ) => Promise<UI_I_ValidationReturn>
286
- ): Promise<void> {
287
- const currentStep: UI_I_WizardStep | undefined = this.steps.find(
288
- (step: UI_I_WizardStep) => this.isSelected(step.status)
289
- )
290
-
291
- const nextStep: UI_I_WizardStep | undefined = value.find(
292
- (step: UI_I_WizardStep) => this.isSelected(step.status)
293
- )
294
-
295
- if (!currentStep || !nextStep) return
296
- if (currentStep.id > nextStep.id) return this.changeStep(value)
297
-
298
- if (validationFunc) {
299
- const validation: UI_I_ValidationReturn = await validationFunc(
300
- value,
301
- currentStep,
302
- nextStep
303
- )
304
-
305
- if (
306
- validation.stepHasError ||
307
- validation.stepShouldStop?.ifFromAnyStep ||
308
- validation.stepShouldStop?.ifOnCurrentStep
309
- ) {
310
- validation.stepShouldStop?.ifFromAnyStep &&
311
- currentStep.id < validation.stepShouldStop?.stoppageStepId &&
312
- this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
313
-
314
- validation.stepShouldStop?.ifOnCurrentStep &&
315
- this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
316
-
317
- validation.stepHasError && this.goToFirstInvalidStep()
318
-
319
- return
320
- } else if (this.isLastStep() && finalValidationFunc) {
321
- const finalValidation: UI_I_ValidationReturn =
322
- await finalValidationFunc(value, currentStep, nextStep)
323
-
324
- if (
325
- finalValidation.stepHasError ||
326
- finalValidation.stepShouldStop?.ifFromAnyStep ||
327
- finalValidation.stepShouldStop?.ifOnCurrentStep
328
- ) {
329
- finalValidation.stepShouldStop?.ifFromAnyStep &&
330
- currentStep.id < finalValidation.stepShouldStop?.stoppageStepId &&
331
- this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
332
-
333
- finalValidation.stepShouldStop?.ifOnCurrentStep &&
334
- this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
335
-
336
- finalValidation.stepHasError && this.goToFirstInvalidStep()
337
-
338
- return
339
- } else {
340
- currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
341
- }
342
-
343
- this.changeStep(finalValidation.newValue)
344
-
345
- return
346
- } else {
347
- currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
348
- }
349
-
350
- this.changeStep(validation.newValue)
351
-
352
- return
353
- }
354
-
355
- this.changeStep(value)
356
- }
357
-
358
- selectStepHard(stepId: number): void {
359
- const newSteps = this.steps.map((st: UI_I_WizardStep) => {
360
- if (st.id < stepId) return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
361
-
362
- if (st.id === stepId)
363
- return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
364
-
365
- return st
366
- })
367
-
368
- this.changeStep(newSteps)
369
- }
370
-
371
- isValidateForStep(
372
- step: number,
373
- currentStepId: number,
374
- nextStepId: number
375
- ): boolean {
376
- return (
377
- nextStepId > step &&
378
- currentStepId <= step &&
379
- this.selectedScheme.value.includes(step)
380
- )
381
- }
382
-
383
- setValidation(
384
- stepId: number,
385
- field: string,
386
- message: {
387
- fieldMessage?: string
388
- alertMessage?: string
389
- }
390
- ): true {
391
- message.fieldMessage &&
392
- this.setValidationError(stepId, field, message.fieldMessage)
393
- message.alertMessage &&
394
- this.setAlertMessage(stepId, field, message.alertMessage)
395
-
396
- return true
397
- }
398
-
399
- removeValidationLocal(stepId: number, field: string): void {
400
- this.setValidationError(stepId, field, '')
401
- this.setAlertMessage(stepId, field, '')
402
- }
403
-
404
- removeValidation(
405
- stepId: number,
406
- field: string,
407
- value: UI_I_WizardStep[]
408
- ): UI_I_WizardStep[] {
409
- let newValue: UI_I_WizardStep[] = this.removeValidationError(
410
- stepId,
411
- field,
412
- true,
413
- value
414
- )
415
-
416
- newValue = this.removeAlertMessage(stepId, field, newValue)
417
- return newValue
418
- }
419
-
420
- reset(): void {
421
- this.steps = useDeepCopy(this._initialSteps.value)
422
- this.stepsScheme = useDeepCopy(this._initialStepsScheme.value)
423
- this.selectedSchemeId = 0
424
- }
425
-
426
- setEmptyErrorFields(fields: { [key: string]: UI_I_ErrorFields }): {
427
- [key: string]: UI_I_ErrorFields
428
- } {
429
- const keys: string[] = Object.keys(fields)
430
- const obj: { [key: string]: UI_I_ErrorFields } = {}
431
-
432
- keys.forEach((key: string): void => {
433
- obj[key] = {
434
- alert: '',
435
- field: '',
436
- }
437
- })
438
-
439
- return obj
440
- }
441
-
442
- resetAfterSelected(): void {
443
- this.steps = this.steps.map(
444
- (step: UI_I_WizardStep): UI_I_WizardStep =>
445
- step.id > this.selectedStepId
446
- ? {
447
- ...step,
448
- status: UI_E_WIZARD_STATUS.INACTIVE,
449
- isValid: true,
450
- fields: this.setEmptyErrorFields(step.fields),
451
- }
452
- : step
453
- )
454
- }
455
-
456
- activeStepId(): number {
457
- const activeStep = this.steps.find(
458
- (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.ACTIVE
459
- )?.id
460
-
461
- const invalidStep = this.steps.find(
462
- (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.INVALID
463
- )?.id
464
-
465
- return activeStep || invalidStep || 0
466
- }
467
-
468
- wasCompleted(): boolean {
469
- return this.activeStepId() > this.selectedStepId
470
- }
471
-
472
- isLastStep(): boolean {
473
- return (
474
- this.selectedScheme.value[this.selectedScheme.value.length - 2] ===
475
- this.selectedStepId
476
- )
477
- }
478
-
479
- isSelectedScheme(schemeId: number): boolean {
480
- return schemeId === this.selectedSchemeId
481
- }
482
-
483
- getStepIdByFieldName(fieldName: string): number {
484
- return this.steps.find((step) => step.fields[fieldName])?.id || -1
485
- }
486
-
487
- setDynamicValidationField(fieldName: string | string[]): void {
488
- const fields: {
489
- [key: string]: UI_I_ErrorFields
490
- } = this.steps[this.selectedStepId].fields
491
-
492
- if (typeof fieldName === 'string') {
493
- fields[fieldName] = {
494
- alert: '',
495
- field: '',
496
- }
497
- } else {
498
- fieldName.forEach((name: string) => {
499
- fields[name] = {
500
- alert: '',
501
- field: '',
502
- }
503
- })
504
- }
505
-
506
- this.steps = this.steps.map((step: UI_I_WizardStep) =>
507
- step.id === this.selectedStepId
508
- ? {
509
- ...step,
510
- fields,
511
- }
512
- : step
513
- )
514
- }
515
-
516
- removeDynamicValidationField(fieldName: string | string[]): void {
517
- const newFields: {
518
- [key: string]: UI_I_ErrorFields
519
- } = this.steps[this.selectedStepId].fields
520
-
521
- if (typeof fieldName === 'string') {
522
- delete newFields[fieldName]
523
- } else {
524
- fieldName.forEach((name: string) => {
525
- delete newFields[name]
526
- })
527
- }
528
-
529
- this.steps = this.steps.map((step: UI_I_WizardStep) =>
530
- step.id === this.selectedStepId
531
- ? {
532
- ...step,
533
- fields: newFields,
534
- }
535
- : step
536
- )
537
- }
538
- }
1
+ import { ref, computed, Ref, ComputedRef } from 'vue'
2
+ import { useDeepCopy } from '~/composables/deepCopy'
3
+ import {
4
+ UI_I_ErrorFields,
5
+ UI_I_Loader,
6
+ UI_I_ValidationReturn,
7
+ UI_I_WizardStep,
8
+ } from '~/components/atoms/wizard/models/interfaces'
9
+ import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/models/enums'
10
+
11
+ export default class Wizard {
12
+ private _initialSteps: Ref<UI_I_WizardStep[]>
13
+ private _initialStepsScheme: Ref<number[][]>
14
+ private _steps: Ref<UI_I_WizardStep[]>
15
+ private _stepsScheme: Ref<number[][]>
16
+ private _selectedSchemeId: Ref<number>
17
+ private _wizardLoader: Ref<UI_I_Loader>
18
+ private _waitingStepId: Ref<number>
19
+ selectedScheme: ComputedRef<number[]>
20
+ alertMessages: ComputedRef<string[][]>
21
+
22
+ constructor(steps: UI_I_WizardStep[], stepsSchemeInitial: number[][]) {
23
+ this._steps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
24
+ this._initialSteps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
25
+ this._stepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
26
+ this._initialStepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
27
+ this._selectedSchemeId = ref<number>(0)
28
+ this._wizardLoader = ref<UI_I_Loader>({
29
+ status: false,
30
+ messages: [],
31
+ })
32
+ this._waitingStepId = ref<number>(-1)
33
+ this.selectedScheme = computed<number[]>(
34
+ () => this._stepsScheme.value[this._selectedSchemeId.value]
35
+ )
36
+ this.alertMessages = computed<string[][]>(() =>
37
+ this._steps.value.map((step: UI_I_WizardStep) =>
38
+ Object.values(step.fields).reduce(
39
+ (result: string[], obj: UI_I_ErrorFields) =>
40
+ obj.alert ? [...result, obj.alert] : result,
41
+ []
42
+ )
43
+ )
44
+ )
45
+ }
46
+
47
+ get steps(): UI_I_WizardStep[] {
48
+ return this._steps.value
49
+ }
50
+
51
+ set steps(newSteps: UI_I_WizardStep[]) {
52
+ this._steps.value = newSteps
53
+ }
54
+
55
+ set stepsScheme(newStepsScheme: number[][]) {
56
+ this._stepsScheme.value = newStepsScheme
57
+ }
58
+
59
+ get stepsScheme(): number[][] {
60
+ return this._stepsScheme.value
61
+ }
62
+
63
+ set selectedSchemeId(newSelectedSchemeId: number) {
64
+ this._selectedSchemeId.value = newSelectedSchemeId
65
+ }
66
+
67
+ get selectedSchemeId(): number {
68
+ return this._selectedSchemeId.value
69
+ }
70
+
71
+ set waitingStepId(id: number) {
72
+ this._waitingStepId.value = id
73
+ }
74
+
75
+ get waitingStepId(): number {
76
+ return this._waitingStepId.value
77
+ }
78
+
79
+ get wizardLoader(): UI_I_Loader {
80
+ return this._wizardLoader.value
81
+ }
82
+
83
+ get nextAvailableStep(): number {
84
+ const currentStepIndex = this.selectedScheme.value.indexOf(
85
+ this.selectedStepId
86
+ )
87
+ return this.selectedScheme.value[currentStepIndex + 1]
88
+ }
89
+
90
+ setLoader(status: boolean, messages?: string[]): void {
91
+ this._wizardLoader.value.status = status
92
+
93
+ if (!messages && this._wizardLoader.value.messages.length > 0) {
94
+ this._wizardLoader.value.messages = []
95
+ return
96
+ }
97
+ if (!messages) return
98
+
99
+ messages.length > 0 && (this._wizardLoader.value.messages = messages)
100
+ }
101
+
102
+ changeScheme(schemeId: number): void {
103
+ this.selectedSchemeId = schemeId
104
+ this.resetAfterSelected()
105
+ }
106
+
107
+ goToFirstInvalidStep(): void {
108
+ const firstInvalidStep: UI_I_WizardStep | undefined = this.steps.find(
109
+ (step: UI_I_WizardStep) => this.isInvalid(step.status)
110
+ )
111
+
112
+ if (!firstInvalidStep) return
113
+
114
+ const firstInvalidStepId: number = firstInvalidStep.id
115
+
116
+ this.steps = this.steps.map((step: UI_I_WizardStep): UI_I_WizardStep => {
117
+ if (step.id === firstInvalidStepId) {
118
+ return { ...step, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
119
+ }
120
+ if (step.status === UI_E_WIZARD_STATUS.SELECTED) {
121
+ return { ...step, status: UI_E_WIZARD_STATUS.COMPLETED }
122
+ }
123
+
124
+ return step
125
+ })
126
+ }
127
+
128
+ goToFirstStoppageStep(stoppageStepId: number): void {
129
+ console.log('goToFirstStoppageStep', stoppageStepId)
130
+ }
131
+
132
+ hasMessage(stepId: number, field: string): boolean {
133
+ return (
134
+ !!this.steps[stepId].fields?.[field].field ||
135
+ !!this.steps[stepId].fields?.[field].alert
136
+ )
137
+ }
138
+
139
+ setValidationError(stepId: number, field: string, message: string): void {
140
+ const invalidStep: UI_I_WizardStep | undefined = this.steps.find(
141
+ (step: UI_I_WizardStep): boolean => step.id === stepId
142
+ )
143
+
144
+ if (!invalidStep) return
145
+
146
+ invalidStep.fields[field].field = message
147
+
148
+ if (message) {
149
+ invalidStep.isValid = false
150
+
151
+ if (this.isSelected(invalidStep.status)) {
152
+ invalidStep.status = UI_E_WIZARD_STATUS.INVALID_SELECTED
153
+ return
154
+ }
155
+
156
+ invalidStep.status = UI_E_WIZARD_STATUS.INVALID
157
+ } else {
158
+ invalidStep.isValid = true
159
+ if (this.isSelected(invalidStep.status)) {
160
+ invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
161
+ } else {
162
+ invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
163
+ }
164
+ }
165
+ }
166
+
167
+ setAlertMessage(stepId: number, field: string, message: string): void {
168
+ this.steps[stepId].fields[field].alert = message
169
+ }
170
+
171
+ removeAlertMessage(
172
+ stepId: number,
173
+ field: string,
174
+ value?: UI_I_WizardStep[]
175
+ ): UI_I_WizardStep[] {
176
+ const invalidStep: UI_I_WizardStep = this.steps[stepId]
177
+
178
+ invalidStep.fields[field].alert = ''
179
+ if (!value) return this.steps
180
+
181
+ return value.map(
182
+ (step: UI_I_WizardStep): UI_I_WizardStep =>
183
+ step.id === invalidStep.id ? invalidStep : step
184
+ )
185
+ }
186
+
187
+ private removeValidationError(
188
+ stepId: number,
189
+ field: string,
190
+ nextStep: boolean,
191
+ value?: UI_I_WizardStep[]
192
+ ): UI_I_WizardStep[] {
193
+ const invalidStep: UI_I_WizardStep = this.steps[stepId]
194
+
195
+ if (!invalidStep) return this.steps
196
+
197
+ invalidStep.fields[field].field = ''
198
+
199
+ const messages: UI_I_ErrorFields[] = Object.values(
200
+ invalidStep.fields
201
+ ).filter((message: UI_I_ErrorFields): boolean => message.field !== '')
202
+
203
+ invalidStep.isValid = !messages.length
204
+
205
+ if (nextStep && invalidStep.isValid && this.isInvalid(invalidStep.status)) {
206
+ invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
207
+ }
208
+
209
+ if (
210
+ !nextStep &&
211
+ invalidStep.isValid &&
212
+ invalidStep.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
213
+ ) {
214
+ invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
215
+ }
216
+
217
+ if (nextStep) this.goToFirstInvalidStep()
218
+
219
+ if (!value) return this.steps
220
+
221
+ return value.map(
222
+ (step: UI_I_WizardStep): UI_I_WizardStep =>
223
+ step.id === invalidStep.id ? invalidStep : step
224
+ )
225
+ }
226
+
227
+ hideAlertMessagesByStepId(stepId: number): UI_I_WizardStep[] {
228
+ const modifiedStep: UI_I_WizardStep = this.steps[stepId]
229
+
230
+ for (const field in modifiedStep.fields) {
231
+ modifiedStep.fields[field].alert = ''
232
+ }
233
+
234
+ return (this.steps = this.steps.map((step: UI_I_WizardStep) =>
235
+ step.id === stepId ? modifiedStep : step
236
+ ))
237
+ }
238
+
239
+ changeStep(value: UI_I_WizardStep[]): void {
240
+ this.steps = this.steps.map(
241
+ (step: UI_I_WizardStep): UI_I_WizardStep => ({
242
+ ...step,
243
+ ...(value.find(
244
+ (stepFind: UI_I_WizardStep): boolean => stepFind.id === step.id
245
+ ) || step),
246
+ })
247
+ )
248
+ }
249
+
250
+ isSelected(status: UI_E_WIZARD_STATUS): boolean {
251
+ return (
252
+ status === UI_E_WIZARD_STATUS.SELECTED ||
253
+ status === UI_E_WIZARD_STATUS.INVALID_SELECTED
254
+ )
255
+ }
256
+
257
+ isInvalid(status: UI_E_WIZARD_STATUS): boolean {
258
+ return (
259
+ status === UI_E_WIZARD_STATUS.INVALID ||
260
+ status === UI_E_WIZARD_STATUS.INVALID_SELECTED
261
+ )
262
+ }
263
+
264
+ get selectedStepId(): number {
265
+ const selectedStep: UI_I_WizardStep | undefined = this.steps.find(
266
+ (step: UI_I_WizardStep) =>
267
+ step.status === UI_E_WIZARD_STATUS.SELECTED ||
268
+ step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
269
+ )
270
+
271
+ return selectedStep !== undefined ? selectedStep.id : this.steps[0].id
272
+ }
273
+
274
+ async changeSteps(
275
+ value: UI_I_WizardStep[],
276
+ validationFunc?: (
277
+ value: UI_I_WizardStep[],
278
+ currentStep: UI_I_WizardStep,
279
+ nextStep: UI_I_WizardStep
280
+ ) => Promise<UI_I_ValidationReturn>,
281
+ finalValidationFunc?: (
282
+ value: UI_I_WizardStep[],
283
+ currentStep: UI_I_WizardStep,
284
+ nextStep: UI_I_WizardStep
285
+ ) => Promise<UI_I_ValidationReturn>
286
+ ): Promise<void> {
287
+ const currentStep: UI_I_WizardStep | undefined = this.steps.find(
288
+ (step: UI_I_WizardStep) => this.isSelected(step.status)
289
+ )
290
+
291
+ const nextStep: UI_I_WizardStep | undefined = value.find(
292
+ (step: UI_I_WizardStep) => this.isSelected(step.status)
293
+ )
294
+
295
+ if (!currentStep || !nextStep) return
296
+ if (currentStep.id > nextStep.id) return this.changeStep(value)
297
+
298
+ if (validationFunc) {
299
+ const validation: UI_I_ValidationReturn = await validationFunc(
300
+ value,
301
+ currentStep,
302
+ nextStep
303
+ )
304
+
305
+ if (
306
+ validation.stepHasError ||
307
+ validation.stepShouldStop?.ifFromAnyStep ||
308
+ validation.stepShouldStop?.ifOnCurrentStep
309
+ ) {
310
+ validation.stepShouldStop?.ifFromAnyStep &&
311
+ currentStep.id < validation.stepShouldStop?.stoppageStepId &&
312
+ this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
313
+
314
+ validation.stepShouldStop?.ifOnCurrentStep &&
315
+ this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
316
+
317
+ validation.stepHasError && this.goToFirstInvalidStep()
318
+
319
+ return
320
+ } else if (this.isLastStep() && finalValidationFunc) {
321
+ const finalValidation: UI_I_ValidationReturn =
322
+ await finalValidationFunc(value, currentStep, nextStep)
323
+
324
+ if (
325
+ finalValidation.stepHasError ||
326
+ finalValidation.stepShouldStop?.ifFromAnyStep ||
327
+ finalValidation.stepShouldStop?.ifOnCurrentStep
328
+ ) {
329
+ finalValidation.stepShouldStop?.ifFromAnyStep &&
330
+ currentStep.id < finalValidation.stepShouldStop?.stoppageStepId &&
331
+ this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
332
+
333
+ finalValidation.stepShouldStop?.ifOnCurrentStep &&
334
+ this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
335
+
336
+ finalValidation.stepHasError && this.goToFirstInvalidStep()
337
+
338
+ return
339
+ } else {
340
+ currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
341
+ }
342
+
343
+ this.changeStep(finalValidation.newValue)
344
+
345
+ return
346
+ } else {
347
+ currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
348
+ }
349
+
350
+ this.changeStep(validation.newValue)
351
+
352
+ return
353
+ }
354
+
355
+ this.changeStep(value)
356
+ }
357
+
358
+ selectStepHard(stepId: number): void {
359
+ const newSteps = this.steps.map((st: UI_I_WizardStep) => {
360
+ if (st.id < stepId) return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
361
+
362
+ if (st.id === stepId)
363
+ return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
364
+
365
+ return st
366
+ })
367
+
368
+ this.changeStep(newSteps)
369
+ }
370
+
371
+ isValidateForStep(
372
+ step: number,
373
+ currentStepId: number,
374
+ nextStepId: number
375
+ ): boolean {
376
+ return (
377
+ nextStepId > step &&
378
+ currentStepId <= step &&
379
+ this.selectedScheme.value.includes(step)
380
+ )
381
+ }
382
+
383
+ setValidation(
384
+ stepId: number,
385
+ field: string,
386
+ message: {
387
+ fieldMessage?: string
388
+ alertMessage?: string
389
+ }
390
+ ): true {
391
+ message.fieldMessage &&
392
+ this.setValidationError(stepId, field, message.fieldMessage)
393
+ message.alertMessage &&
394
+ this.setAlertMessage(stepId, field, message.alertMessage)
395
+
396
+ return true
397
+ }
398
+
399
+ removeValidationLocal(stepId: number, field: string): void {
400
+ this.setValidationError(stepId, field, '')
401
+ this.setAlertMessage(stepId, field, '')
402
+ }
403
+
404
+ removeValidation(
405
+ stepId: number,
406
+ field: string,
407
+ value: UI_I_WizardStep[]
408
+ ): UI_I_WizardStep[] {
409
+ let newValue: UI_I_WizardStep[] = this.removeValidationError(
410
+ stepId,
411
+ field,
412
+ true,
413
+ value
414
+ )
415
+
416
+ newValue = this.removeAlertMessage(stepId, field, newValue)
417
+ return newValue
418
+ }
419
+
420
+ reset(): void {
421
+ this.steps = useDeepCopy(this._initialSteps.value)
422
+ this.stepsScheme = useDeepCopy(this._initialStepsScheme.value)
423
+ this.selectedSchemeId = 0
424
+ }
425
+
426
+ setEmptyErrorFields(fields: { [key: string]: UI_I_ErrorFields }): {
427
+ [key: string]: UI_I_ErrorFields
428
+ } {
429
+ const keys: string[] = Object.keys(fields)
430
+ const obj: { [key: string]: UI_I_ErrorFields } = {}
431
+
432
+ keys.forEach((key: string): void => {
433
+ obj[key] = {
434
+ alert: '',
435
+ field: '',
436
+ }
437
+ })
438
+
439
+ return obj
440
+ }
441
+
442
+ resetAfterSelected(): void {
443
+ this.steps = this.steps.map(
444
+ (step: UI_I_WizardStep): UI_I_WizardStep =>
445
+ step.id > this.selectedStepId
446
+ ? {
447
+ ...step,
448
+ status: UI_E_WIZARD_STATUS.INACTIVE,
449
+ isValid: true,
450
+ fields: this.setEmptyErrorFields(step.fields),
451
+ }
452
+ : step
453
+ )
454
+ }
455
+
456
+ activeStepId(): number {
457
+ const activeStep = this.steps.find(
458
+ (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.ACTIVE
459
+ )?.id
460
+
461
+ const invalidStep = this.steps.find(
462
+ (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.INVALID
463
+ )?.id
464
+
465
+ return activeStep || invalidStep || 0
466
+ }
467
+
468
+ wasCompleted(): boolean {
469
+ return this.activeStepId() > this.selectedStepId
470
+ }
471
+
472
+ isLastStep(): boolean {
473
+ return (
474
+ this.selectedScheme.value[this.selectedScheme.value.length - 2] ===
475
+ this.selectedStepId
476
+ )
477
+ }
478
+
479
+ isSelectedScheme(schemeId: number): boolean {
480
+ return schemeId === this.selectedSchemeId
481
+ }
482
+
483
+ getStepIdByFieldName(fieldName: string): number {
484
+ return this.steps.find((step) => step.fields[fieldName])?.id || -1
485
+ }
486
+ }