bfg-common 1.6.113 → 1.6.114

package/components/common/configure/advancedSystemSettings/tableView/TableView.vue

@@ -1,18 +1,21 @@
 <template>
   <component
     :is="currentComponent"
-    v-model:settings="settings"
-    v-model:invalid-fields="invalidFields"
     :data-table="props.data?.items || []"
     :total-items="props.data?.total_items || 0"
     :total-pages="props.data?.total_pages || 1"
     :is-edit="props.isEdit"
+    :is-loading="props.isLoading"
+    @change-setting="onChangeSetting"
+    @update-invalid-fields="onUpdateInvalidFields"
   />
 </template>
 
 <script lang="ts" setup>
 import type { API_UI_I_DataTable } from '~/lib/models/table/interfaces'
 import type { UI_I_AdvancedSystemSetting } from '~/store/inventory/modules/configure/advancedSystemSettings/lib/models/interfaces'
+import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
+import type { UI_I_AdvancedSystemSettingsEditData } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/interfaces'
 
 const settings = defineModel<API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>>(
   'settings',
@@ -24,6 +27,7 @@ const invalidFields = defineModel<string[]>('invalid-fields', {
 const props = withDefaults(
   defineProps<{
     data: API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>
+    isLoading: boolean
     isEdit?: boolean
   }>(),
   { isEdit: false }
@@ -37,4 +41,25 @@ const currentComponent = computed(() =>
     ? defineAsyncComponent(() => import('./new/New.vue'))
     : defineAsyncComponent(() => import('./old/Old.vue'))
 )
+
+const onChangeSetting = (
+  value: UI_I_AdvancedSystemSettingsEditData['value'],
+  key: string
+): void => {
+  settings.value.items = settings.value.items.map((item) => {
+    if (item.key === key) {
+      item.value = value
+    }
+    return item
+  })
+}
+
+const invalidFieldsLocal = ref<UI_I_ArbitraryObject<string>>({})
+const onUpdateInvalidFields = (value: string, key: string): void => {
+  invalidFieldsLocal.value[key] = value
+  if (invalidFields.value)
+    invalidFields.value = Object.values(invalidFieldsLocal.value).filter(
+      (error) => error
+    )
+}
 </script>

package/components/common/configure/advancedSystemSettings/tableView/{old/field → field}/Field.vue

@@ -1,67 +1,37 @@
 <template>
-  <atoms-tooltip-error :has-error="invalid">
-    <template #elem>
-      <div v-if="props.data.type === 'number'">
-        <input
-          v-model="valueLocal"
-          type="number"
-          :class="{ 'has-error': invalid }"
-          @input="onChangeSetting($event)"
-        />
-      </div>
-      <div v-if="props.data.type === 'string'">
-        <input
-          v-model="valueLocal"
-          type="text"
-          :class="{ 'has-error': invalid }"
-          @input="onChangeSetting($event)"
-        />
-      </div>
-      <div v-if="props.data.type === 'boolean'" class="select">
-        <select
-          v-model="valueLocal"
-          @change="onChangeSetting($event)"
-          :class="{ 'has-error': invalid }"
-        >
-          <option value="false">false</option>
-          <option value="true">true</option>
-        </select>
-      </div>
-      <!--      <div v-if="props.data.type === 'select'" class="select">-->
-      <!--        <select-->
-      <!--          v-model="valueLocal"-->
-      <!--          @change="onChangeSetting($event)"-->
-      <!--          :class="{ 'has-error': invalid }"-->
-      <!--        >-->
-      <!--          <option-->
-      <!--            v-for="item2 in props.data.options"-->
-      <!--            :key="item2.key"-->
-      <!--            :value="item2.key"-->
-      <!--          >-->
-      <!--            {{ item2.value }}-->
-      <!--          </option>-->
-      <!--        </select>-->
-      <!--      </div>-->
-    </template>
-    <template #content>
-      {{ errorMessage }}
-    </template>
-  </atoms-tooltip-error>
+  <component
+    :is="currentComponent"
+    v-model:value="valueLocal"
+    :data="props.data"
+    :invalid="invalid"
+    :error-message="errorMessage"
+    @change="onChangeSetting"
+  />
 </template>
 
 <script setup lang="ts">
 import type { UI_I_AdvancedSystemSettingsEditData } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/interfaces'
-import { E_Format } from '~/components/common/configure/advancedSystemSettings/tableView/old/field/lib/models/enums'
+import { UI_E_Format } from '~/components/common/configure/advancedSystemSettings/tableView/field/lib/models/enums'
 import { allRegExp } from '~/lib/config/regExp'
 
 const props = defineProps<{
   data: UI_I_AdvancedSystemSettingsEditData
 }>()
+
 const emits = defineEmits<{
   (event: 'change', value: UI_I_AdvancedSystemSettingsEditData['value']): void
   (event: 'error-message', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const valueLocal = ref<UI_I_AdvancedSystemSettingsEditData['value']>(
   props.data.value
 )
@@ -118,7 +88,7 @@ const onChangeSetting = (event: Event): void => {
   if (invalid.value) return
 
   if (validation.Format) {
-    const format = E_Format[validation.Format]
+    const format = UI_E_Format[validation.Format]
     invalid.value = !allRegExp[format].test(value)
     errorMessage.value = invalid.value ? `Value must be ${format}` : ''
   }

package/components/common/configure/advancedSystemSettings/tableView/field/New.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="w-full">
+    <ui-input
+      v-if="props.data.type === 'number'"
+      v-model="valueLocal"
+      :class="['w-full', { 'has-error': props.invalid }]"
+      :test-id="`advanced-system-settings-${props.data.key}`"
+      :error="props.errorMessage"
+      error-type="tooltip"
+      type="number"
+      size="sm"
+      @input="emits('change', $event)"
+    />
+    <ui-input
+      v-if="props.data.type === 'string'"
+      v-model="valueLocal"
+      :class="['w-full', { 'has-error': props.invalid }]"
+      :test-id="`advanced-system-settings-${props.data.key}`"
+      type="text"
+      size="sm"
+      @input="emits('change', $event)"
+    />
+    <ui-select
+      v-if="props.data.type === 'boolean'"
+      v-model="currentSelectValue"
+      :items="selectItems"
+      :test-id="`advanced-system-settings-${props.data.key}`"
+      select-width="100%"
+      size="sm"
+      @input="emits('change', $event)"
+    />
+  </div>
+
+  <!--      <div v-if="props.data.type === 'select'" class="select">-->
+  <!--        <select-->
+  <!--          v-model="valueLocal"-->
+  <!--          @change="onChangeSetting($event)"-->
+  <!--          :class="{ 'has-error': invalid }"-->
+  <!--        >-->
+  <!--          <option-->
+  <!--            v-for="item2 in props.data.options"-->
+  <!--            :key="item2.key"-->
+  <!--            :value="item2.key"-->
+  <!--          >-->
+  <!--            {{ item2.value }}-->
+  <!--          </option>-->
+  <!--        </select>-->
+  <!--      </div>-->
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_AdvancedSystemSettingsEditData } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/interfaces'
+import { selectOptions } from '~/components/common/configure/advancedSystemSettings/tableView/field/lib/config'
+
+const valueLocal = defineModel<any>('value', {
+  required: true,
+})
+const props = defineProps<{
+  data: UI_I_AdvancedSystemSettingsEditData
+  invalid: boolean
+  errorMessage: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_AdvancedSystemSettingsEditData['value']): void
+}>()
+
+const currentSelectValue = computed<number[] | null>({
+  get() {
+    return {
+      text: String(valueLocal.value),
+      value: String(valueLocal.value),
+    }
+  },
+  set(newValue: UI_I_Dropdown) {
+    valueLocal.value = newValue.value.toLowerCase() === 'true'
+  },
+})
+
+const selectItems = ref<UI_I_Dropdown[]>(selectOptions)
+</script>
+
+<style scoped lang="scss">
+.has-error {
+  border: 1px solid #db2100;
+}
+</style>

package/components/common/configure/advancedSystemSettings/tableView/field/Old.vue

@@ -0,0 +1,73 @@
+<template>
+  <atoms-tooltip-error :has-error="props.invalid">
+    <template #elem>
+      <div v-if="props.data.type === 'number'">
+        <input
+          v-model="valueLocal"
+          type="number"
+          :class="{ 'has-error': props.invalid }"
+          @input="emits('change', $event)"
+        />
+      </div>
+      <div v-if="props.data.type === 'string'">
+        <input
+          v-model="valueLocal"
+          type="text"
+          :class="{ 'has-error': props.invalid }"
+          @input="emits('change', $event)"
+        />
+      </div>
+      <div v-if="props.data.type === 'boolean'" class="select">
+        <select
+          v-model="valueLocal"
+          :class="{ 'has-error': props.invalid }"
+          @input="emits('change', $event)"
+        >
+          <option value="false">false</option>
+          <option value="true">true</option>
+        </select>
+      </div>
+      <!--      <div v-if="props.data.type === 'select'" class="select">-->
+      <!--        <select-->
+      <!--          v-model="valueLocal"-->
+      <!--          @change="onChangeSetting($event)"-->
+      <!--          :class="{ 'has-error': invalid }"-->
+      <!--        >-->
+      <!--          <option-->
+      <!--            v-for="item2 in props.data.options"-->
+      <!--            :key="item2.key"-->
+      <!--            :value="item2.key"-->
+      <!--          >-->
+      <!--            {{ item2.value }}-->
+      <!--          </option>-->
+      <!--        </select>-->
+      <!--      </div>-->
+    </template>
+    <template #content>
+      {{ props.errorMessage }}
+    </template>
+  </atoms-tooltip-error>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_AdvancedSystemSettingsEditData } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/interfaces'
+
+const valueLocal = defineModel<any>('value', {
+  required: true,
+})
+const props = defineProps<{
+  data: UI_I_AdvancedSystemSettingsEditData
+  invalid: boolean
+  errorMessage: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_AdvancedSystemSettingsEditData['value']): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.has-error {
+  border: 1px solid #db2100;
+}
+</style>

package/components/common/configure/advancedSystemSettings/tableView/field/lib/config/index.ts

@@ -0,0 +1,10 @@
+export const selectOptions = [
+  {
+    text: 'True',
+    value: 'true',
+  },
+  {
+    text: 'False',
+    value: 'false',
+  },
+]

package/components/common/configure/advancedSystemSettings/tableView/field/lib/models/enums.ts

@@ -0,0 +1,14 @@
+export enum UI_E_Format {
+  'unix path' = 'unixPath',
+  'win path' = 'winPath',
+  'mac' = 'mac',
+  'ip4' = 'ip4',
+  'ip6' = 'ip6',
+  'url' = 'url',
+  'uuid' = 'uuid',
+  'semver' = 'semver',
+  'domain' = 'domain',
+  'base64' = 'base64',
+  'regex' = 'regex',
+  'hex color' = 'hexColor',
+}

package/components/common/configure/advancedSystemSettings/tableView/new/New.vue

@@ -1,72 +1,29 @@
 <template>
-  <div class="device-table-container">
-    <ui-data-table
-      :data="data"
-      :options="options"
-      :total-pages="props.totalPages"
-      :total-items="props.totalItems"
-      :texts="texts"
-      :default-layout="false"
-      :skeleton="tableSkeleton"
-      test-id="compute-resource-table"
-      class="device-table"
-      size="sm"
-      @select-row="onSelectRow"
-    >
-      <template #icon="{ item }">
-        <span :class="['device-table__icon', item.data.iconClassName]" />
-        <span class="device-table__text text-ellipsis">
-          {{ item.text }}
-        </span>
-      </template>
-
-      <template #progress="{ item }">
-        <div class="progress flex items-center justify-between w-full">
-          <div class="progress-line">
-            <div
-              v-if="item.data"
-              :style="`width: ${item.data}%`"
-              class="progress-line-fill"
-            ></div>
-          </div>
-          <div
-            :class="[
-              'progress-text',
-              {
-                'progress-full': item.data === 100,
-              },
-            ]"
-          >
-            {{ item.text }}
-          </div>
-        </div>
-      </template>
-
-      <template #status="{ item }">
-        <ui-chip
-          :test-id="item.data.testId"
-          :color="item.data.chipColor"
-          size="sm"
-          rounded
-        >
-          <ui-icon
-            :name="item.data.icon"
-            width="14px"
-            height="14px"
-            class="chip-icon"
-          ></ui-icon>
-          {{ item.text }}
-        </ui-chip>
-      </template>
-
-      <template #skeleton-header>
-        <div class="flex justify-between items-center">
-          <ui-skeleton-item width="80" height="20" />
-          <ui-skeleton-item width="88" height="28" border-radius="6" />
-        </div>
-      </template>
-    </ui-data-table>
-  </div>
+  <ui-data-table
+    :data="data"
+    :options="options"
+    :total-pages="props.totalPages"
+    :total-items="props.totalItems"
+    :texts="texts"
+    :skeleton="tableSkeleton"
+    :loading="props.isLoading"
+    :size="tableSize"
+    test-id="advanced-system-settings-table"
+  >
+    <template #value="{ item }">
+      <common-configure-advanced-system-settings-table-view-field
+        :data="item.data"
+        @change="emits('change-setting', $event, item.data.key)"
+        @error-message="emits('update-invalid-fields', $event, item.data.key)"
+      />
+    </template>
+    <template v-if="props.isEdit" #footerActions>
+      <p class="table-items-count-text">
+        {{ tableBodyItems.length }}
+        {{ localization.advancedSystemSettings.keysCountText }}
+      </p>
+    </template>
+  </ui-data-table>
 </template>
 
 <script lang="ts" setup>
@@ -76,22 +33,34 @@ import type {
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
   UI_I_TableTexts,
+  UI_I_DataTableSkeleton,
+  UI_I_DataTableOptions,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_AdvancedSystemSetting } from '~/store/inventory/modules/configure/advancedSystemSettings/lib/models/interfaces'
+import type { UI_I_AdvancedSystemSettingsEditData } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/interfaces'
 import {
-  options,
+  optionsFunc,
   getHeaderDataFunc,
   getBodyDataFunc,
-} from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/hostTable'
+} from '~/components/common/configure/advancedSystemSettings/tableView/new/lib/config'
 
-const selectedDataLocal = defineModel<number | null>({ required: true })
 const props = defineProps<{
-  dataTable: any[]
+  dataTable: UI_I_AdvancedSystemSetting[]
   totalItems: number
   totalPages: number
+  isLoading: boolean
   isEdit: boolean
 }>()
 
+const emits = defineEmits<{
+  (
+    event: 'change-setting',
+    value1: UI_I_AdvancedSystemSettingsEditData['value'],
+    value2: string
+  ): void
+  (event: 'update-invalid-fields', value1: string, value2: string): void
+}>()
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const texts = computed<UI_I_TableTexts>(() => ({
@@ -110,84 +79,45 @@ const texts = computed<UI_I_TableTexts>(() => ({
 }))
 
 const tableSkeleton = ref<UI_I_DataTableSkeleton>({
-  columnsCount: 4,
+  columnsCount: 3,
   headColumns: [],
   bodyColumns: [],
   withoutPagination: true,
 })
 
 const data = computed<UI_I_DataTable>(() => ({
-  id: 'compute-resource-host-table',
-  title: `${localization.value.common.hosts} (${props.totalItems})`,
-  header: deviceHeadItems.value,
-  body: deviceBodyItems.value,
+  id: 'advanced-system-settings-table',
+  header: tableHeadItems.value,
+  body: tableBodyItems.value,
 }))
 
-const deviceHeadItems = computed<UI_I_DataTableHeader[]>(() =>
-  getHeaderDataFunc(localization.value)
+const tableSize = computed<string>(() => (props.isEdit ? 'sm' : 'md'))
+
+const options = computed<UI_I_DataTableOptions>(() => optionsFunc(props.isEdit))
+
+const tableHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value, props.isEdit)
 )
 
-const deviceBodyItems = ref<UI_I_DataTableBody[]>([])
+const tableBodyItems = ref<UI_I_DataTableBody[]>([])
 watch(
   () => props.dataTable,
-  (newValue: UI_T_ComputeResourceTableItem[]) => {
+  (newValue: UI_I_AdvancedSystemSetting[]) => {
     if (!newValue?.length) {
-      deviceBodyItems.value = []
+      tableBodyItems.value = []
       return
     }
 
-    deviceBodyItems.value = getBodyDataFunc(newValue, localization.value)
+    tableBodyItems.value = getBodyDataFunc(newValue, props.isEdit)
   },
   { deep: true, immediate: true }
 )
-
-const onSelectRow = (value: UI_I_DataTableBody[]): void => {
-  selectedDataLocal.value = value?.[0].row
-}
 </script>
 
 <style lang="scss" scoped>
-.device-table-container {
-  margin: 20px 0 24px;
-  :deep(.column-manager-button.sm span) {
-    font-weight: 500;
-  }
-  :deep(.table-title .title-container h6) {
-    font-size: 12px;
-  }
-  .device-table {
-    &__icon {
-      margin-right: 4px;
-    }
-    &__text {
-      font-size: 12px;
-    }
-  }
-  .progress {
-    &-line {
-      height: 12px;
-      width: 100%;
-      background: #e9ebed8f;
-      border-radius: 6px;
-
-      &-fill {
-        height: 12px;
-        min-width: 12px;
-        background: #008fd6;
-        border-radius: 6px;
-      }
-    }
-
-    &-text {
-      width: 53px;
-      min-width: 53px;
-      margin-left: 8px;
-      text-align: right;
-
-      &.progress-full {
-        color: #ea3223;
-      }
-    }
-  }
+.table-items-count-text {
+  margin-left: auto;
+  font-size: 12px;
+  color: #9da6ad;
 }
 </style>