bfg-common 1.4.58 → 1.4.60

package/components/common/wizards/datastore/add/nfs/accessibility/tablesView/TablesView.vue

@@ -2,7 +2,7 @@
   <div class="data-table-view">
     <div>
       <atoms-table-data-grid
-        v-model:selected-row="selected"
+        v-model:selected-row="selectedHostsIdLocal"
         v-model:page-size="pagination.pageSize"
         v-model:page="pagination.page"
         type="checkbox"
@@ -14,8 +14,6 @@
         :total-pages="props.totalPages"
         :items-per-page="itemsPerPage"
         :loading="loading"
-        @filtering="filtering"
-        @sorting="sorting"
       >
         <template #icon="{ item }">
           <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
@@ -35,77 +33,33 @@ import type {
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
 import type { T_HostsAccessibilityTab } from '~/components/common/wizards/datastore/add/nfs/accessibility/lib/models/types'
-import type {
+import {
   I_CompatibleHostsTable,
   I_IncompatibleHostsTable,
 } from '~/components/common/wizards/datastore/add/nfs/accessibility/lib/models/interfaces'
-import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
 import * as compatibleTable from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/config/compatibleTable'
 import * as incompatibleTable from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/config/incompatibleTable'
 
 const props = defineProps<{
   dataTable: I_CompatibleHostsTable[] | I_IncompatibleHostsTable[]
-  selectedRow: number[]
   tableType: T_HostsAccessibilityTab
   totalItems: number
   totalPages: number
-  pagination: UI_I_Pagination
-}>()
-const emits = defineEmits<{
-  (event: 'update:selected-row', value: number[]): void
-  (event: 'pagination', value: UI_I_Pagination): void
-  (event: 'sort', value: string): void
 }>()
+const selectedHostsIdLocal = defineModel<string[]>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const loading = computed<boolean>(() => false)
 
-const selected = computed<number[]>({
-  get() {
-    return props.selectedRow
-  },
-  set(value) {
-    emits('update:selected-row', value)
-  },
-})
-
-const filtering = (e: [string, string][]): void => {
-  console.log(e, 111)
-}
-const sorting = (e: [number, boolean]): void => {
-  const [column, status] = e
-  const direction = status ? 'desc' : 'asc'
-
-  const sort = `${column}.${direction}`
-
-  emits('sort', sort)
-}
-
 const pagination = ref<UI_I_Pagination>({
   page: 1,
   pageSize: 1,
 })
-watch(
-  () => props.pagination,
-  (newValue) => {
-    pagination.value = newValue
-  },
-  { immediate: true }
-)
-watch(
-  pagination,
-  (newValue) => {
-    emits('pagination', newValue)
-  },
-  { deep: true, immediate: true }
-)
-interface TablesView {
-  'compatible-hosts': any
-  'incompatible-hosts': any
-}
-const tables: TablesView = {
+
+const tables: any = {
   'compatible-hosts': compatibleTable,
   'incompatible-hosts': incompatibleTable,
 }
@@ -113,20 +67,9 @@ const tables: TablesView = {
 const headItems = computed<UI_I_HeadItem[]>(() =>
   tables[props.tableType].headItems(localization.value)
 )
-
-const bodyItems = ref<UI_I_BodyItem[][]>([])
-watch(
-  () => props.dataTable,
-  (newValue) => {
-    if (!newValue?.length) {
-      bodyItems.value = []
-      return
-    }
-
-    bodyItems.value = tables[props.tableType].bodyItems(newValue)
-  },
-  { deep: true, immediate: true }
-)
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  return tables[props.tableType].bodyItems(props.dataTable)
+})
 </script>
 
 <style lang="scss" scoped>

package/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/config/compatibleTable.ts

@@ -3,8 +3,8 @@ import type {
   UI_I_BodyItem,
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { I_CompatibleHostsTable } from '~/components/common/wizards/datastore/add/nfs/accessibility/lib/models/interfaces'
 import { constructHeadItem } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+import type { I_CompatibleHostsTable } from '~/components/common/wizards/datastore/add/nfs/accessibility/lib/models/interfaces'
 import { compatibleHostsTableKeys } from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/config/tableKeys'
 import {
   hostIconByState,

package/components/common/wizards/datastore/add/nfs/configuration/Configuration.vue

@@ -2,11 +2,11 @@
   <div class="configuration">
     <div>
       <atoms-alert
-        v-show="errors.length"
-        test-id="configuration-error"
+        v-show="props.alertMessages?.length"
+        test-id="configure-error-alert"
         status="alert-danger"
-        :items="errors"
-        @remove="onCloseAlertDanger"
+        :items="props.alertMessages"
+        @remove="onHideAlert"
       />
 
       <atoms-alert
@@ -30,12 +30,12 @@
           <div class="flex-align-center">
             <input
               id="configuration-name-input"
-              v-model="form.name.value"
+              v-model="model.name"
               data-id="configuration-name-input"
               type="text"
               class="clr-input"
-              @blur="onBlurInputName"
-              @input="onInputName"
+              @blur="initValidation(true, ['name'])"
+              @input="initValidation(false, ['name'])"
             />
             <atoms-the-icon class="error-icon" name="info-circle" />
           </div>
@@ -58,12 +58,12 @@
           <div class="flex-align-center">
             <input
               id="configuration-folder-input"
-              v-model="form.folder.value"
+              v-model="model.folder"
               data-id="configuration-folder-input"
               type="text"
               class="clr-input"
-              @blur="onBlurInputFolder"
-              @input="onInputFolder"
+              @blur="initValidation(true, ['folder'])"
+              @input="initValidation(false, ['folder'])"
             />
             <atoms-the-icon class="error-icon" name="info-circle" />
           </div>
@@ -90,13 +90,13 @@
         >
           <div class="flex-align-center input-action-wrapper">
             <input
-              id="configuration-server-input"
-              v-model="form.server.value"
-              data-id="configuration-server-input"
+              id="configuration-folder-input"
+              v-model="model.server"
+              data-id="configuration-folder-input"
               type="text"
               class="clr-input"
-              @blur="onBlurInputServer"
-              @input="onInputServer"
+              @blur="initValidation(true, ['server'])"
+              @input="initValidation(false, ['server'])"
             />
             <atoms-the-icon class="error-icon" name="info-circle" />
           </div>
@@ -111,231 +111,74 @@
             E.g: nas, nas.it.com or 192.168.0.1
           </div>
         </div>
-
-        <!--      <button-->
-        <!--        v-show="props.nfsVersion === 'nfs-4.1' && false"-->
-        <!--        class="btn btn-sm nd-mt-0"-->
-        <!--        @click="onAddServerToList"-->
-        <!--      >-->
-        <!--        {{ localization.add }}-->
-        <!--      </button>-->
-      </div>
-
-      <div
-        v-show="props.nfsVersion === 'nfs-4.1' && false"
-        class="configuration__servers-list"
-      >
-        <common-wizards-datastore-add-nfs-configuration-servers-list
-          v-model:data-table="dataServers"
-        />
-      </div>
-    </div>
-
-    <div v-if="false" class="clr-form-control clr-row mt-1">
-      <label for="" class="clr-control-label clr-col-md-2">{{
-        localization.localization.accessMode
-      }}</label>
-
-      <div class="clr-col-md-10 clr-col-12 clr-checkbox-wrapper">
-        <input
-          id="playback-compression"
-          v-model="accessMode"
-          data-id="playback-compression-checkbox"
-          type="checkbox"
-        />
-        <label for="playback-compression" class="clr-control-label">{{
-          localization.localization.mountNfsReadOnly
-        }}</label>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_ValidationTouchResult } from '~/lib/models/plugins/validation/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_DataServersListItem,
-  UI_I_FormValidationConfiguration,
-} from '~/components/common/wizards/datastore/add/nfs/configuration/serversList/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 import type {
-  UI_T_NfsType,
-  UI_T_WizardDatastoreMode,
-} from '~/components/common/wizards/datastore/add/lib/models/types'
-import type { UI_I_ConfigurationSendDataNfs } from '~/components/common/wizards/datastore/add/nfs/configuration/lib/models/interfaces'
-import { defaultFormFunc } from '~/components/common/wizards/datastore/add/nfs/configuration/lib/config/defaultForm'
-import { checkValidityName } from '~/components/common/wizards/datastore/add/lib/utils'
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+} from '~/lib/models/interfaces'
+import type { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
+import type { UI_I_InitialValidationFields } from '~/components/common/wizards/datastore/add/nfs/configuration/lib/models/interfaces'
 
 const props = defineProps<{
-  mode: UI_T_WizardDatastoreMode
-  nfsVersion: UI_T_NfsType
-  nfsConfigurationSubmit: number
+  project: UI_T_Project
+  alertMessages: string[]
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
 }>()
-const localization = computed<UI_I_Localization>(() => useLocal())
+const model = defineModel<any>()
 const emits = defineEmits<{
-  (event: 'loading', value: boolean): void
-  (event: 'next', value: UI_I_ConfigurationSendDataNfs): void
+  (event: 'hide-alert', value: number): void
 }>()
-const { $validation } = useNuxtApp()
-
-const validation = $validation.call({})
-const defaultForm: UI_I_FormValidationConfiguration = defaultFormFunc(
-  localization.value
-)
-const form = ref<UI_I_FormValidationConfiguration>(useDeepCopy(defaultForm))
-const setForm = () => {
-  form.value = useDeepCopy(defaultForm)
-  validation.setForm(form)
-}
-setForm()
-
-const validForm = ref<UI_I_ValidationTouchResult | null>(null)
-
-/* Validation for Name input */
-const isInitNameValidation = ref<boolean>(false)
-const onBlurInputName = (): void => {
-  validForm.value = validation.touch()
-  isInitNameValidation.value = true
-}
-const onInputName = (): void => {
-  validForm.value = validation.touch()
-}
-
-const nameErrorText = computed<string>(() => {
-  if (!isInitNameValidation.value) return ''
-  return validForm.value?.errors?.name?.[0] || ''
-})
-/* Validation Name input end */
-
-/* Validation for Folder input */
-const isInitFolderValidation = ref<boolean>(false)
-const onBlurInputFolder = (): void => {
-  validForm.value = validation.touch()
-  isInitFolderValidation.value = true
-}
-const onInputFolder = (): void => {
-  validForm.value = validation.touch()
-}
-
-const folderErrorText = computed<string>(() => {
-  if (!isInitFolderValidation.value) return ''
-  return validForm.value?.errors?.folder?.[0] || ''
-})
-/* Validation Folder input end */
 
-/* Validation for Server input */
-const isInitServerValidation = ref<boolean>(false)
-const onBlurInputServer = (): void => {
-  validForm.value = validation.touch()
-  isInitServerValidation.value = true
-}
-const onInputServer = (): void => {
-  validForm.value = validation.touch()
-  isInitServerValidation.value = true
-}
+const localization = computed<UI_I_Localization>(() => useLocal())
 
-const serverErrorText = computed<string>(() => {
-  // if (!isInitServerValidation.value || dataServers.value.length) return ''
-  if (!isInitServerValidation.value) return ''
-  return validForm.value?.errors?.server?.[0] || ''
+const initValidationFields = ref<UI_I_InitialValidationFields>({
+  name: false,
+  folder: false,
+  server: false,
 })
-
-/* Validation Folder Server end */
-
-const accessMode = ref<boolean>(false)
-
-const dataServers = ref<UI_I_DataServersListItem[]>([])
-// const onAddServerToList = (): void => {
-//   const { server } = form.value
-//   // const { nfsVersion } = props
-//
-//   if (!dataServers.value.length && !server.value) {
-//     validForm.value = validation.touch()
-//     isInitServerValidation.value = true
-//
-//     return
-//   }
-//
-//   // if (dataServers.value.length && !server.value) return
-//
-//   const data: UI_I_DataServersListItem = {
-//     server_name: server.value,
-//   }
-//
-//   const hasEqualItem = !!dataServers.value.find(
-//     (server: UI_I_DataServersListItem) => server.server_name === data.server_name
-//   )
-//
-//   !hasEqualItem && dataServers.value.push(data)
-//
-//   // if (nfsVersion === 'nfs-4.1') server.value = ''
-// }
-
-const alertInfo = ref<boolean>(props.mode === 'procurator')
-
-const resetValidation = (): void => {
-  isInitNameValidation.value =
-    isInitFolderValidation.value =
-    isInitServerValidation.value =
-      false
-  validForm.value = null
-  errors.value = []
+const initValidation = (onlyBlur = false, types: string[]): void => {
+  onlyBlur && types.forEach((type) => (initValidationFields.value[type] = true))
 }
 
-watch(
-  () => props.nfsConfigurationSubmit,
-  () => {
-    submit()
-  }
-)
-const submit = async (): Promise<void> => {
-  const { name, server, folder } = form.value
-
-  validForm.value = validation.touch()
-  isInitNameValidation.value =
-    isInitFolderValidation.value =
-    isInitServerValidation.value =
-      true
-
-  if (nameErrorText.value || folderErrorText.value || serverErrorText.value) {
-    return
+/* Validation error text for Name input field */
+const nameErrorText = computed<string>(() => {
+  if (props.messagesFields?.name?.field && !model.value.name) {
+    return props.messagesFields.name.field
   }
 
-  emits('loading', true)
-
-  const { valid, msg } = await checkValidityName(name.value, props.mode)
-
-  emits('loading', false)
+  if (!initValidationFields.value.name) return ''
+  return !model.value.name ? localization.value.common.specifyDatastoreName : ''
+})
 
-  if (!valid) {
-    showValidationErrors(msg)
-    return
+/* Validation error text for Folder input field */
+const folderErrorText = computed<string>(() => {
+  if (props.messagesFields.folder?.field && !model.value.folder) {
+    return props.messagesFields.folder.field
   }
 
-  // if (server.value) onAddServerToList()
-
-  resetValidation()
+  if (!initValidationFields.value.folder) return ''
+  return !model.value.folder ? localization.value.common.specifyFolderName : ''
+})
 
-  const configurationData: UI_I_ConfigurationSendDataNfs = {
-    name: name.value,
-    folder: folder.value,
-    server: server.value,
+/* Validation error text for Server input field */
+const serverErrorText = computed<string>(() => {
+  if (props.messagesFields.server?.field && !model.value.server) {
+    return props.messagesFields.server.field
   }
 
-  emits('next', configurationData)
-  // if (props.nfsVersion !== 'nfs-4.1') {
-  //   dataServers.value = []
-  // }
-}
-
-const errors = ref<string[]>([])
-
-const showValidationErrors = (errorText: string): void => {
-  errors.value = [errorText]
-}
-const onCloseAlertDanger = (): void => {
-  errors.value = []
+  if (!initValidationFields.value.server) return ''
+  return !model.value.server ? localization.value.common.specifyServerName : ''
+})
+const onHideAlert = (): void => {
+  emits('hide-alert', 5)
 }
+const alertInfo = ref<boolean>(props.project === 'procurator')
 </script>
 
 <style lang="scss" scoped>

package/components/common/wizards/datastore/add/nfs/configuration/lib/models/interfaces.ts

@@ -1,12 +1,5 @@
-import type { UI_I_DataServersListItem } from '~/components/common/wizards/datastore/add/nfs/configuration/serversList/lib/models/interfaces'
-
-// export interface I_ServerNfs {
-//   server_name: string
-// }
-export interface UI_I_ConfigurationSendDataNfs {
-  name: string
-  folder: string
-  server: UI_I_DataServersListItem[]
-
-  // readonly: boolean
+export interface UI_I_InitialValidationFields {
+  name: boolean
+  folder: boolean
+  server: boolean
 }

package/components/common/wizards/datastore/add/nfs/version/Version.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="nfs-version">
     <common-select-radio-group
-      v-model="selectedVersion"
+      v-model="selectedNfsVersionLocal"
       :options="nfsVersion"
     />
   </section>
@@ -13,30 +13,14 @@ import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/mode
 import type { UI_T_NfsType } from '~/components/common/wizards/datastore/add/lib/models/types'
 import { nfsVersionFunc } from '~/components/common/wizards/datastore/add/nfs/version/lib/config/versionOptions'
 
-const props = defineProps<{
-  version: UI_T_NfsType
-}>()
-const emits = defineEmits<{
-  (event: 'update:version', value: UI_T_NfsType): void
-}>()
+const selectedNfsVersionLocal = defineModel<UI_T_NfsType>()
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const nfsVersion = ref<UI_I_RadioOption[]>(nfsVersionFunc(localization.value))
-
-const selectedVersion = computed<UI_T_NfsType>({
-  get() {
-    return props.version
-  },
-  set(newValue) {
-    emits('update:version', newValue)
-  },
-})
 </script>
 
 <style lang="scss" scoped>
 .nfs-version {
-  //&__desc {
-  //  margin-left: 22px;
-  //}
 }
 </style>

package/components/common/wizards/datastore/add/nfs/version/lib/config/versionOptions.ts

@@ -1,5 +1,5 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
 export const nfsVersionFunc = (
   localization: UI_I_Localization
 ): UI_I_RadioOption[] => {
@@ -8,14 +8,14 @@ export const nfsVersionFunc = (
       label: 'NFS 3',
       value: 'nfs-3',
       disabled: false,
-      description: localization.common.nfsVersionDesc1,
+      description: localization.nfsVersionDesc1,
       testId: 'datastore-nfs-version-3',
     },
     {
       label: 'NFS 4.1',
       value: 'nfs-4.1',
       disabled: false,
-      description: localization.common.nfsVersionDesc2,
+      description: localization.nfsVersionDesc2,
       testId: 'datastore-nfs-version-4.1',
     },
   ]

package/components/common/wizards/datastore/add/readyComplete/ReadyComplete.vue

@@ -1,14 +1,8 @@
 <template>
   <div class="ready-complete">
-    <div class="ready-complete__desc">{{ localization.common.readyCompleteDesc }}</div>
-
     <common-details-list :items="properties" class="ready-complete__list list">
       <template #default="{ item }">
-        <common-details-item
-          :has-children="true"
-          :test-id="item.testId"
-          open-by-default
-        >
+        <common-details-item :has-children="true" open-by-default>
           <template #stackBlockKey>
             <span class="list__labels">
               {{ localization.common.chosenDatastoreName }}
@@ -55,13 +49,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
+import { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
   dataReadyView: UI_I_DetailsItem[]
 }>()
-// console.log(props)
 
 const localization = computed<UI_I_Localization>(() => useLocal())