bfg-common 1.5.215 → 1.5.217

package/components/common/vm/actions/common/select/storage/new/New.vue

@@ -1,219 +1,200 @@
-<template>
-  <div class="select-storage">
-    <Teleport v-if="!props.hideAlert" to="#storage-alert-wrapper">
-      <ui-alert
-        v-show="props.errors.length"
-        :messages="props.errors"
-        :items="props.errors"
-        status="alert-danger"
-        test-id="storage-alert"
-        size="md"
-        @remove="emits('remove-error')"
-      />
-    </Teleport>
-
-    <div class="table-wrap">
-      <ui-data-table
-        :data="data"
-        :options="tableOptions"
-        :loading="loading"
-        :default-layout="false"
-        :texts="tableTexts"
-        test-id="select-storage-data-table"
-        server-off
-        size="sm"
-        @select-row="onSelectRow"
-      >
-        <template #insteadOfTitleActions
-          ><h3 class="storage-count">
-            {{ storageCount }}
-          </h3></template
-        >
-        <template #state="{ item }">
-          <ui-chip :color="item.data.color" rounded>
-            <ui-icon :name="item.data.iconClassName" width="14" height="14" />
-            {{ item.data.text }}
-          </ui-chip>
-        </template>
-      </ui-data-table>
-    </div>
-
-    <div v-if="!props.hideCompatibility" class="compatibility-wrap">
-      <p class="compatibility">
-        {{ localization.inventorySummary.compatibility }}
-      </p>
-      <div class="compatibility-message flex-align-center">
-        <ui-skeleton-item v-if="loading" width="160px" height="16px" />
-        <template v-else>
-          <template v-if="props.selectedStorage">
-            <ui-icon
-              name="success-fill"
-              width="16"
-              height="16"
-              class="icon-compatibility-alert"
-            />
-            <span class="compatibility-message-description">{{
-              localization.common.compatibilityChecksSucceeded
-            }}</span>
-          </template>
-          <template v-else>
-            <!--            <ui-icon name="error" width="16" height="16" />-->
-            <span class="compatibility-message-description">{{
-              localization.vmWizard.noStorageSelected
-            }}</span>
-          </template>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_DataTable,
-  UI_I_TableTexts,
-} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import {
-  tableBodyFunc,
-  tableDataFunc,
-  tableOptions,
-} from '~/components/common/vm/actions/common/select/storage/new/lib/config/table'
-import { tableTextsFunc } from '~/lib/config/uiTable'
-
-const selectedRow = defineModel<number | null>('selectedRow')
-
-const props = defineProps<{
-  datastore: UI_I_DatastoreTableItem[]
-  errors: string[]
-  selectedStorage: UI_I_DatastoreTableItem | null
-  hideCompatibility?: boolean
-  hideAlert?: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'remove-error'): void
-  (event: 'change-storage', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const tableTexts = computed<UI_I_TableTexts>(() =>
-  tableTextsFunc(localization.value)
-)
-
-const storageCount = computed<string>(() =>
-  localization.value.vmWizard.storageCount.replace(
-    '{0}',
-    data.value.body.length.toString()
-  )
-)
-const loading = ref<boolean>(true)
-const data = ref<UI_I_DataTable>(tableDataFunc(localization.value))
-
-watch(
-  () => props.datastore,
-  (newValue: UI_I_DatastoreTableItem[]) => {
-    loading.value = true
-
-    // if (!newValue.length || data.value.body.length) return
-
-    data.value.body = tableBodyFunc(
-      newValue,
-      localization.value,
-      selectedRow.value
-    )
-
-    loading.value = false
-  },
-  { immediate: true, deep: true }
-  // { deep: true }
-)
-
-const onSelectRow = (selectedData: UI_I_DataTable): void => {
-  const selectedId = selectedData[0]?.data[0]?.key
-  const selectedItemIndex = props.datastore.findIndex(
-    (item) => item.id === selectedId
-  )
-
-  emits('change-storage', selectedItemIndex)
-}
-</script>
-
-<style>
-:root {
-  --select-storage-border-color: #e9ebed;
-  --select-storage-bg-color: #ffffff;
-  --select-storage-title-color: #4d5d69;
-  --select-storage-compatibility-bg-color: #ffffff;
-  --select-storage-compatibility-description-color: #4d5d69;
-  --select-storage-compatibility-empty-description-color: #9da6ad;
-}
-:root.dark-theme {
-  --select-storage-border-color: #e9ebed1f;
-  --select-storage-bg-color: var(--wizard-right-bg);
-  --select-storage-title-color: #e9eaec;
-  --select-storage-compatibility-bg-color: #1b2a371f;
-  --select-storage-compatibility-description-color: #9da6ad;
-  --select-storage-compatibility-empty-description-color: #9da6ad;
-}
-</style>
-<style scoped lang="scss">
-.select-storage {
-  padding-top: 12px;
-  padding-bottom: 22px;
-
-  .storage-count {
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--select-storage-title-color);
-  }
-
-  :deep(.bottom-grid-content) {
-    border: 1px solid var(--select-storage-border-color);
-    border-radius: 8px;
-    padding: 12px;
-    background-color: var(--select-storage-bg-color);
-  }
-  :deep(.select-row-item) {
-    background-color: var(--select-storage-bg-color);
-  }
-  :deep(.table-title-actions-container) {
-    justify-content: flex-start;
-  }
-  :deep(.table-container .table-title) {
-    margin-bottom: 12px;
-  }
-
-  .compatibility-wrap {
-    margin-top: 24px;
-
-    .compatibility {
-      font-size: 16px;
-      font-weight: 500;
-      color: var(--select-storage-title-color);
-      margin-bottom: 16px;
-    }
-    .compatibility-message {
-      border-radius: 8px;
-      border: 1px solid var(--select-storage-border-color);
-      padding: 12px;
-      background-color: var(--select-storage-compatibility-bg-color);
-      gap: 10px;
-
-      .icon-compatibility-alert {
-        min-width: 16px;
-        min-height: 16px;
-      }
-      .compatibility-message-description {
-        font-size: 13px;
-        color: var(--select-storage-compatibility-description-color);
-
-        &.empty {
-          color: var(--select-storage-compatibility-empty-description-color);
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="select-storage">
+    <Teleport v-if="!props.hideAlert" to="#storage-alert-wrapper">
+      <ui-alert
+        v-show="props.errors.length"
+        :messages="props.errors"
+        :items="props.errors"
+        status="alert-danger"
+        test-id="storage-alert"
+        @remove="emits('remove-error')"
+      />
+    </Teleport>
+
+    <div class="table-wrap">
+      <ui-data-table
+        :data="data"
+        :options="tableOptions"
+        :loading="loading"
+        :default-layout="false"
+        :texts="tableTexts"
+        test-id="select-storage-data-table"
+        server-off
+        size="sm"
+        @select-row="onSelectRow"
+      >
+        <template #insteadOfTitleActions
+          ><h3 class="storage-count">
+            {{ storageCount }}
+          </h3></template
+        >
+        <template #state="{ item }">
+          <ui-chip :color="item.data.color" rounded>
+            <ui-icon :name="item.data.iconClassName" width="14" height="14" />
+            {{ item.data.text }}
+          </ui-chip>
+        </template>
+      </ui-data-table>
+    </div>
+
+    <div v-if="!props.hideCompatibility" class="compatibility-wrap">
+      <p class="compatibility">
+        {{ localization.inventorySummary.compatibility }}
+      </p>
+      <div class="compatibility-message flex-align-center">
+        <ui-skeleton-item v-if="loading" width="160px" height="16px" />
+        <template v-else>
+          <template v-if="props.selectedStorage">
+            <ui-icon name="success-fill" width="16" height="16" />
+            <span class="compatibility-message-description">{{
+              localization.common.compatibilityChecksSucceeded
+            }}</span>
+          </template>
+          <template v-else>
+            <!--            <ui-icon name="error" width="16" height="16" />-->
+            <span class="compatibility-message-description">{{
+              localization.vmWizard.noStorageSelected
+            }}</span>
+          </template>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  tableBodyFunc,
+  tableDataFunc,
+  tableOptions,
+} from '~/components/common/vm/actions/common/select/storage/new/lib/config/table'
+import { tableTextsFunc } from '~/lib/config/uiTable'
+
+const selectedRow = defineModel<number | null>('selectedRow')
+
+const props = defineProps<{
+  datastore: UI_I_DatastoreTableItem[]
+  errors: string[]
+  selectedStorage: UI_I_DatastoreTableItem | null
+  hideCompatibility?: boolean
+  hideAlert?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'remove-error'): void
+  (event: 'change-storage', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tableTexts = computed<UI_I_TableTexts>(() =>
+  tableTextsFunc(localization.value)
+)
+
+const storageCount = computed<string>(() =>
+  localization.value.vmWizard.storageCount.replace(
+    '{0}',
+    data.value.body.length.toString()
+  )
+)
+const loading = ref<boolean>(true)
+const data = ref<UI_I_DataTable>(tableDataFunc(localization.value))
+
+watch(
+  () => props.datastore,
+  (newValue: UI_I_DatastoreTableItem[]) => {
+    loading.value = true
+
+    // if (!newValue.length || data.value.body.length) return
+
+    data.value.body = tableBodyFunc(
+      newValue,
+      localization.value,
+      selectedRow.value
+    )
+
+    loading.value = false
+  },
+  { immediate: true, deep: true }
+  // { deep: true }
+)
+
+const onSelectRow = (selectedData: UI_I_DataTable): void => {
+  const selectedId = selectedData[0]?.data[0]?.key
+  const selectedItemIndex = props.datastore.findIndex(
+    (item) => item.id === selectedId
+  )
+
+  emits('change-storage', selectedItemIndex)
+}
+</script>
+
+<style>
+:root {
+  --select-storage-border-color: #e9ebed;
+  --select-storage-bg-color: #ffffff;
+  --select-storage-title-color: #4d5d69;
+  --select-storage-compatibility-description-color: #4d5d69;
+}
+:root.dark-theme {
+  --select-storage-border-color: #e9ebed1f;
+  --select-storage-bg-color: var(--wizard-right-bg);
+  --select-storage-title-color: #e9eaec;
+  --select-storage-compatibility-description-color: #9da6ad;
+}
+</style>
+<style scoped lang="scss">
+.select-storage {
+  padding-top: 16px;
+
+  .storage-count {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--select-storage-title-color);
+  }
+
+  :deep(.bottom-grid-content) {
+    border: 1px solid var(--select-storage-border-color);
+    border-radius: 8px;
+    padding: 12px;
+    background-color: var(--select-storage-bg-color);
+  }
+  :deep(.select-row-item) {
+    background-color: var(--select-storage-bg-color);
+  }
+  :deep(.table-title-actions-container) {
+    justify-content: flex-start;
+  }
+  :deep(.table-container .table-title) {
+    margin-bottom: 12px;
+  }
+
+  .compatibility-wrap {
+    margin-top: 24px;
+
+    .compatibility {
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--select-storage-title-color);
+      margin-bottom: 16px;
+    }
+    .compatibility-message {
+      border-radius: 8px;
+      border: 1px solid var(--select-storage-border-color);
+      padding: 12px;
+      background-color: var(--select-storage-bg-color);
+      gap: 12px;
+
+      .compatibility-message-description {
+        font-size: 13px;
+        color: var(--select-storage-compatibility-description-color);
+      }
+    }
+  }
+}
+</style>