bfg-common 1.4.61 → 1.4.62

package/components/common/wizards/datastore/add/Add.vue

@@ -1,419 +1,289 @@
 <template>
   <div class="new-datastore">
-    <atoms-modal-by-steps
+    <atoms-wizard
+      show
+      :wizard="wizard"
+      :selected-scheme="selectedScheme"
+      :title="localization.newDatastore"
+      :localization="localization"
+      class="add-datastore"
       test-id="add-datastore-wizard"
-      :show="true"
-      :title="localization.common.newDatastore"
-      :step-items="stepItems"
-      :step-position="stepPosition"
-      :loading="loading"
-      @finish="onAddDatastore"
-      @next="onNextStep"
-      @back="back"
-      @change-step="onChangeStep"
+      @change-steps="onChangeSteps"
       @hide="onHideModal"
+      @submit="onFinish"
     >
-      <template #modalBody>
-        <div class="new-datastore__body">
-          <!--          :project="props.mode"-->
-          <common-wizards-datastore-add-types
-            v-show="stepPosition === 0"
-            v-model:type="datastoreType"
-          />
-
-          <common-wizards-datastore-add-local
-            v-show="datastoreType === 'local' && !isShowCompleteBlock"
-            :mode="props.mode"
-            :step-position="stepPosition"
-            :datastore-type="datastoreType"
-            :local-create-name-submit="localCreateNameSubmit"
-            :datacenter-hosts="props.datacenterHosts"
-            :is-main-filter="props.isMainFilter"
-            @loading="(e) => (loading = e)"
-            @submit="onSaveNameAndNextLocal"
-            @main-filter="emits('main-filter', $event)"
-          />
-
-          <common-wizards-datastore-add-shared-storm
-            v-show="datastoreType === 'shared-storm' && !isShowCompleteBlock"
-            :mode="props.mode"
-            :step-position="stepPosition"
-            :datastore-type="datastoreType"
-            :device-selection-submit="deviceSelectionSubmit"
-            :datacenter-hosts="props.datacenterHosts"
-            :is-main-filter="props.isMainFilter"
-            :host-id="props.hostId"
-            @loading="(e) => (loading = e)"
-            @submit="onSaveAndNextSharedStorm"
-            @main-filter="emits('main-filter', $event)"
-          />
-
-          <common-wizards-datastore-add-nfs
-            v-show="datastoreType === 'nfs' && !isShowCompleteBlock"
-            :mode="props.mode"
-            :step-position="stepPosition"
-            :datastore-type="datastoreType"
-            :nfs-configuration-submit="nfsConfigurationSubmit"
-            :host-accessibility-submit="hostAccessibilitySubmit"
-            :hosts="props.nfsHosts"
-            @loading="(e) => (loading = e)"
-            @change-nfs-version="updateNfsVersion"
-            @submit="saveChangesAndNextNfs"
-          />
-
-          <common-wizards-datastore-add-ready-complete
-            v-show="isShowCompleteBlock"
-            :data-ready-view="dataReadyView"
-          />
-        </div>
+      <template #modalBody="{ selectedStep }">
+        <common-wizards-datastore-add-types
+          v-if="selectedStep.id === 0"
+          v-model="form"
+          v-model:datastore-type="datastoreType"
+          :project="props.project"
+        />
+
+        <common-wizards-datastore-add-local
+          v-if="selectedStep.id === 1"
+          v-model="form"
+          :project="props.project"
+          :step-id="selectedStep.id"
+          :datastore-type="datastoreType"
+          :alert-messages="alertMessages[1]"
+          :messages-fields="selectedStep.fields"
+          @hide-alert="onHideAlert"
+        />
+
+        <common-wizards-datastore-add-shared-storm
+          v-show="datastoreType === 'shared-storm'"
+          v-model="form"
+          :project="props.project"
+          :step-id="selectedStep.id"
+          :datastore-type="datastoreType"
+          :alert-messages="alertMessages[selectedStep.id]"
+          :messages-fields="selectedStep.fields"
+          :hosts="props.nfsHosts"
+          :is-main-filter="props.isMainFilter"
+          :host-id="props.hostId"
+          @hide-alert="onHideAlert"
+          @main-filter="emits('main-filter', $event)"
+        />
+
+        <common-wizards-datastore-add-nfs
+          v-show="datastoreType === 'nfs'"
+          v-model="form"
+          :project="props.project"
+          :step-id="selectedStep.id"
+          :alert-messages="alertMessages[selectedStep.id]"
+          :messages-fields="selectedStep.fields"
+          :hosts="props.nfsHosts"
+        />
+
+        <common-wizards-datastore-add-ready-complete
+          v-show="selectedStep.id === 11"
+          :data-ready-view="dataReadyView"
+        />
       </template>
-    </atoms-modal-by-steps>
+    </atoms-wizard>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_VerticalStepItem } from '~/components/atoms/lib/models/interfaces'
 import type {
-  UI_T_DatastoreType,
-  UI_T_NfsType,
-  UI_T_WizardDatastoreMode,
-} from '~/components/common/wizards/datastore/add/lib/models/types'
+  UI_I_WizardStep,
+  UI_I_ValidationReturn,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import Wizard from '~/components/atoms/wizard/lib/utils/utils'
+import {
+  stepsFunc,
+  stepsSchemeInitial,
+} from '~/components/common/wizards/datastore/add/lib/config/steps'
+
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_T_DatastoreType } from '~/components/common/wizards/datastore/add/lib/models/types'
 import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
-import type {
-  UI_I_LunDisk,
-  UI_I_SelectHostOptions,
-} from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
-import { stepItemsFunc } from '~/components/common/wizards/datastore/add/lib/config/stepItems'
+import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
+import type { UI_I_CreateDatastoreHosts } from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/models/interfaces'
+import type { UI_I_ChangeStepsSchemes } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+import { E_DatastoreTypeKode } from '~/components/common/wizards/datastore/add/lib/models/enums'
 import { constructDataReadyViewFunc } from '~/components/common/wizards/datastore/add/readyComplete/lib/config/propertiesDetails'
+import * as validation from '~/components/common/wizards/datastore/add/lib/validations'
 
 const props = defineProps<{
-  // TODO refactoring to project
-  mode: UI_T_WizardDatastoreMode
-  finishFunc: (
-    datastoreForm: UI_I_CreateDatastoreForm,
-    datastoreType: UI_T_DatastoreType,
-    version: UI_T_NfsType
-  ) => Promise<void>
-  datacenterHosts?: UI_I_SelectHostOptions[]
-  nfsHosts?: any
-  isMainFilter?: boolean
+  project: UI_T_Project
+  nfsHosts?: UI_I_CreateDatastoreHosts
   hostId?: string
+  isMainFilter?: boolean
 }>()
 const emits = defineEmits<{
   (event: 'hide'): void
-  (event: 'global-refresh'): void
+  (event: 'finish', value: any): void
   (event: 'main-filter', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const loading = ref<boolean>(false)
-const datastoreType = ref<UI_T_DatastoreType>(
-  // props.mode === 'procurator' ? 'local' : 'shared-storm'
-  'shared-storm'
+const wizard: Wizard = new Wizard(
+  stepsFunc(localization.value),
+  stepsSchemeInitial
 )
-const nfsVersion = ref<UI_T_NfsType>('nfs-3')
 
-const stepPosition = ref<number>(0)
-const dataReadyView = ref<any>([])
-
-const datastoreForm = ref<UI_I_CreateDatastoreForm>({
-  local: {
-    name: '',
-    hosts: [],
-    type_code: 1,
-  },
-  sharedStorm: {
-    name: '',
-    dev_names: [],
-    hosts: [],
-    pool_name: '',
-    type_code: 2,
-  },
-  nfs: {
-    name: '',
-    server: '',
-    folder: '',
-    readonly: false,
-    version: nfsVersion.value,
-    type_code: 4,
-    hosts: [],
-  },
+const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
+const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
+
+// const datastoreType = ref<UI_T_DatastoreType>(
+//   props.project === 'procurator' ? 'local' : 'shared-storm'
+// )
+const datastoreType = ref<UI_T_DatastoreType>('shared-storm')
+const form = ref<UI_I_CreateDatastoreForm>({
+  name: 'Datastore',
+  lunDisk: [],
+  hosts: props.hostId ? [props?.hostId] : [],
+  type_code: E_DatastoreTypeKode[datastoreType.value],
+  nfsVersion: 'nfs-3',
+  readonly: false,
+  server: '',
+  folder: '',
 })
 
-const stepItems = computed<UI_I_VerticalStepItem[]>(() =>
-  stepItemsFunc(localization.value, datastoreType.value, props.mode)
-)
-
-let cashStep = -1
-const onNextStep = (force = false): void => {
-  const isValid = checkSubmit(force)
+const validationFunc = async (
+  value: UI_I_WizardStep[],
+  currentStep: UI_I_WizardStep,
+  nextStep: UI_I_WizardStep
+): Promise<UI_I_ValidationReturn> => {
+  let stepHasError = false
+
+  if (wizard.isValidateForStep(1, currentStep.id, nextStep.id)) {
+    const nameValidation = await validation.checkDatastoreNameAsync(
+      localization.value,
+      value,
+      form.value,
+      1,
+      'datastoreName',
+      wizard,
+      props.project
+    )
+
+    value = nameValidation.newValue
+
+    stepHasError = nameValidation.stepHasError
+  }
 
-  if (!isValid) {
-    return
+  if (wizard.isValidateForStep(2, currentStep.id, nextStep.id)) {
+    const nameValidation = await validation.checkDatastoreNameAsync(
+      localization.value,
+      value,
+      form.value,
+      2,
+      'datastoreName',
+      wizard,
+      props.project
+    )
+
+    value = nameValidation.newValue
+
+    const lunDiskValidation = validation.checkSelectedLunDiskSync(
+      localization.value,
+      form.value,
+      wizard,
+      value,
+      props.project,
+      props.hostId
+    )
+
+    value = lunDiskValidation.newValue
+
+    stepHasError = nameValidation.stepHasError || lunDiskValidation.stepHasError
   }
 
-  const isDisabled = stepItems.value[cashStep]?.disabled
-  if (cashStep !== -1 && !isDisabled) {
-    stepPosition.value = cashStep
-    cashStep = -1
-    return
+  if (wizard.isValidateForStep(5, currentStep.id, nextStep.id)) {
+    const nameValidation = await validation.checkDatastoreNameAsync(
+      localization.value,
+      value,
+      form.value,
+      5,
+      'name',
+      wizard,
+      props.project
+    )
+    value = nameValidation.newValue
+
+    const folderValidation = validation.checkNfsFolderSync(
+      localization.value,
+      form.value.folder,
+      wizard,
+      value
+    )
+    value = folderValidation.newValue
+
+    const serverValidation = validation.checkNfsServerSync(
+      localization.value,
+      form.value.server,
+      wizard,
+      value
+    )
+    value = serverValidation.newValue
+
+    stepHasError =
+      nameValidation.stepHasError ||
+      folderValidation.stepHasError ||
+      serverValidation.stepHasError
   }
 
-  stepItems.value[stepPosition.value].complete = true
-  stepItems.value[stepPosition.value + 1].disabled = false
-  stepPosition.value++
-}
+  if (wizard.isValidateForStep(6, currentStep.id, nextStep.id)) {
+    const nameValidation = await validation.checkHostsAccessibilitySync(
+      localization.value,
+      form.value.hosts,
+      wizard,
+      value
+    )
 
-const back = (): void => {
-  stepPosition.value--
-}
+    value = nameValidation.newValue
 
-const onChangeStep = (key: number): void => {
-  if (key < stepPosition.value) {
-    stepPosition.value = key
-    return
+    stepHasError = nameValidation.stepHasError
   }
 
-  const isValid = checkSubmit()
-
-  if (!isValid) {
-    cashStep = key
-    return
+  return {
+    newValue: value,
+    stepHasError,
   }
-
-  stepPosition.value = key
-}
-const onHideModal = (): void => {
-  emits('hide')
 }
 
-const updateNfsVersion = (event: UI_T_NfsType): void => {
-  nfsVersion.value = event
-  const { name, server, folder, hosts } = datastoreForm.value.nfs
-  saveChangesAndNextNfs({ name, server, folder, hosts }, false)
-}
-
-const localCreateNameSubmit = ref<number>(0)
-
-const nfsConfigurationSubmit = ref<number>(0)
-const hostAccessibilitySubmit = ref<number>(0)
-
-const deviceSelectionSubmit = ref<number>(0)
-
-const checkSubmit = (force = false): boolean => {
-  if (datastoreType.value === 'local') {
-    if (stepPosition.value === 1 && !force) {
-      localCreateNameSubmit.value++
-      return false
-    }
-  }
-
-  if (datastoreType.value === 'shared-storm') {
-    if (stepPosition.value === 1 && !force) {
-      deviceSelectionSubmit.value++
-      return false
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
+  wizard.changeSteps(value, validationFunc)
+
+// Choosing Scheme
+watch(
+  datastoreType,
+  (newValue: UI_T_DatastoreType) => {
+    const schemes: UI_I_ChangeStepsSchemes = {
+      procurator: {
+        local: 0,
+        'shared-storm': 1,
+        nfs: 2,
+      },
+      sphere: {
+        'shared-storm': 3,
+        nfs: 4,
+      },
     }
-  }
 
-  if (datastoreType.value === 'nfs') {
-    if (stepPosition.value === 2 && !force) {
-      nfsConfigurationSubmit.value++
-      return false
-    }
+    const projectSchemes = schemes[props.project]
 
-    if (props.mode === 'sphere' && stepPosition.value === 3 && !force) {
-      hostAccessibilitySubmit.value++
-      return false
+    if (projectSchemes && projectSchemes[newValue] !== undefined) {
+      wizard.changeScheme(projectSchemes[newValue] as number)
     }
-    // if (
-    //   ((stepPosition.value === 4 && nfsVersion.value === 'nfs-4.1') ||
-    //     (stepPosition.value === 3 && nfsVersion.value === 'nfs-3')) &&
-    //   !force
-    // ) {
-    //   hostAccessibilitySubmit.value++
-    //   return false
-    // }
-  }
-
-  return true
-}
-
-const isWizardModeForSphere = computed<boolean>(() => props.mode === 'sphere')
-
-const onSaveNameAndNextLocal = (event: any): void => {
-  const { local } = datastoreForm.value
-
-  if (isWizardModeForSphere.value) {
-    local.name = event.name
-    local.hosts.push(event.host)
-  }
-
-  if (!isWizardModeForSphere.value) {
-    local.name = event
-  }
-
-  dataReadyView.value = constructDataReadyViewFunc(
-    localization.value,
-    'local',
-    event,
-    isWizardModeForSphere.value
-  )
-
-  onNextStep(true)
-}
-
-const onSaveAndNextSharedStorm = (event: any): void => {
-  const { sharedStorm } = datastoreForm.value
-  sharedStorm.name = event.name
-  sharedStorm.dev_names = event.lunDisk.map((lun: UI_I_LunDisk) => lun.name)
-  sharedStorm.hosts = [event.host]
+  },
+  { deep: true, immediate: true }
+)
 
-  dataReadyView.value = constructDataReadyViewFunc(
+const dataReadyView = computed<UI_I_DetailsItem>(() =>
+  constructDataReadyViewFunc(
     localization.value,
-    'shared-storm',
-    event,
-    isWizardModeForSphere.value
+    form.value,
+    props.project,
+    props.nfsHosts
   )
+)
 
-  onNextStep(true)
+const onHideAlert = (stepId: number): void => {
+  wizard.hideAlertMessagesByStepId(stepId)
 }
-const saveChangesAndNextNfs = (event: any, next = true): void => {
-  const { nfs } = datastoreForm.value
-  nfs.name = event.name
-  nfs.folder = event.folder
-  nfs.server = event.server
-  nfs.hosts = event.hosts
-
-  // TODO refactoring
-  const hostsNames = props.nfsHosts
-    ? props.nfsHosts.items
-        .filter((host) => event.hosts.includes(host.id))
-        .map((host) => host.host)
-    : []
-
-  dataReadyView.value = constructDataReadyViewFunc(
-    localization.value,
-    'nfs',
-    {
-      ...event,
-      hosts: hostsNames,
-      version: nfsVersion.value,
-    },
-    isWizardModeForSphere.value
-  )
-
-  next && onNextStep(true)
+const onHideModal = (): void => {
+  emits('hide')
 }
-
-const isShowCompleteBlock = computed<boolean>(() => {
-  // TODO refactoring
-  const localStep = datastoreType.value === 'local' && stepPosition.value === 2
-
-  const sharesStep =
-    datastoreType.value === 'shared-storm' &&
-    (props.mode === 'procurator'
-      ? stepPosition.value === 3
-      : stepPosition.value === 2)
-
-  let nfsFirst
-  if (props.mode === 'procurator') {
-    nfsFirst =
-      datastoreType.value === 'nfs' &&
-      nfsVersion.value === 'nfs-3' &&
-      stepPosition.value === 3
-  } else {
-    nfsFirst =
-      datastoreType.value === 'nfs' &&
-      nfsVersion.value === 'nfs-3' &&
-      stepPosition.value === 4
-  }
-
-  let nfsSecond
-  if (props.mode === 'procurator') {
-    nfsSecond =
-      datastoreType.value === 'nfs' &&
-      nfsVersion.value === 'nfs-4.1' &&
-      stepPosition.value === 3
-  } else {
-    nfsSecond =
-      datastoreType.value === 'nfs' &&
-      nfsVersion.value === 'nfs-4.1' &&
-      stepPosition.value === 4
-  }
-
-  return localStep || sharesStep || nfsFirst || nfsSecond
-})
-
-const onAddDatastore = async (): Promise<void> => {
-  loading.value = true
-
-  props
-    .finishFunc(datastoreForm.value, datastoreType.value, nfsVersion.value)
-    .then(() => {
-      emits('global-refresh')
-      loading.value = false
-      onHideModal()
-    })
+const onFinish = (): void => {
+  emits('finish', form.value)
 }
-
-// const createDatastoreFromLocal = async (): Promise<API_UI_I_Error> => {
-//   const { local } = datastoreForm.value
-//
-//   return await createDatastore<Omit<UI_I_CreateDatastoreBodyRequest, 'pool_name'>>(
-//     local
-//   )
-// }
-// const createDatastoreFromSharedStorm = async (): Promise<API_UI_I_Error> => {
-//   const {
-//     sharedStorm: { dev_names: disks, ...sendData },
-//   } = datastoreForm.value
-//
-//   const { data, msg } = await getStoragePoolName<{ dev_names: string[] }>(
-//     '/psm/api/v1/storage/lvm/create',
-//     { dev_names: disks }
-//   )
-//
-//   if (!data && msg) return msg
-//
-//   sendData.pool_name = data?.pool_name || ''
-//
-//   return await createDatastore(sendData)
-// }
-
-// const createDatastoreFromNfs = async (): Promise<API_UI_I_Error> => {
-//   const {
-//     nfs: { server, folder, readonly, name, type_code: type },
-//   } = datastoreForm.value
-//
-//   const sendDataOne = {
-//     server,
-//     folder,
-//     readonly,
-//     version: nfsVersion.value === 'nfs-4.1' ? 4.1 : 3.0,
-//   }
-//
-//   const { data, msg } = await getStoragePoolName<UI_I_NfsPoolNameForm>(
-//     '/psm/api/v1/storage/cnfs',
-//     sendDataOne
-//   )
-//
-//   if (!data && msg) return msg
-//
-//   const sendDataTwo = {
-//     name,
-//     type_code: type,
-//     pool_name: data?.pool_name || '',
-//   }
-//
-//   return await createDatastore(sendDataTwo)
-// }
+// watch(
+//   () => props.isLoading,
+//   (newValue) => {
+//     wizard.setLoader(newValue)
+//   },
+//   { immediate: true }
+// )
 </script>
 
 <style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-
+@import 'assets/scss/common/mixins.scss';
 .new-datastore {
   &__body {
     @include flex($dir: column);