bfg-common 1.6.113 → 1.6.114

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

@@ -0,0 +1,112 @@
+import type {
+  UI_I_DataTableBody,
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_AdvancedSystemSetting } from '~/store/inventory/modules/configure/advancedSystemSettings/lib/models/interfaces'
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization,
+  isEdit: boolean
+): UI_I_DataTableHeader[] => [
+  {
+    col: 'col0',
+    colName: 'key',
+    text: localization.advancedSystemSettings.key,
+    isSortable: true,
+    sort: 'asc',
+    width: isEdit ? '50%' : '15%',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col1',
+    colName: 'value',
+    text: localization.advancedSystemSettings.value,
+    isSortable: true,
+    sort: 'asc',
+    width: isEdit ? '50%' : '15%',
+    show: true,
+    filter: false,
+  },
+  ...(!isEdit
+    ? [
+        {
+          col: 'col2',
+          colName: 'summary',
+          text: localization.advancedSystemSettings.summary,
+          isSortable: true,
+          sort: 'asc',
+          width: '70%',
+          show: true,
+          filter: false,
+        },
+      ]
+    : []),
+]
+export const optionsFunc = (isEdit: boolean): UI_I_DataTableOptions => ({
+  selectType: 'checkbox',
+  perPageOptions: [
+    { text: '20', value: 20, default: true },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
+  inBlock: !isEdit,
+  isSelectable: false,
+  showPagination: !isEdit,
+  showPageInfo: !isEdit,
+  isSortable: true,
+  server: false,
+  isResizable: true,
+  showSearch: false,
+  showColumnManager: !isEdit,
+})
+
+export const getBodyDataFunc = (
+  items: UI_I_AdvancedSystemSetting[],
+  isEdit: boolean
+): UI_I_DataTableBody[] => {
+  const result: UI_I_DataTableBody[] = []
+
+  items.forEach((item: UI_I_AdvancedSystemSetting, key: number) => {
+    const editData = {
+      key: item.key,
+      type: item.type,
+      value: item.value,
+      validation: item.validation,
+      // options: item.options,
+    }
+
+    result.push({
+      row: key,
+      data: [
+        {
+          key: 'col0',
+          col: 'col0',
+          text: item.key,
+          testId: `advanced-system-settings-table-item-${key}`,
+        },
+        {
+          key: isEdit ? 'value' : 'col1',
+          col: 'col1',
+          text: item.value,
+          testId: `advanced-system-settings-table-item-${key}`,
+          data: isEdit ? editData : null,
+        },
+        ...(!isEdit
+          ? [
+              {
+                key: 'col2',
+                col: 'col2',
+                text: item.summary,
+                testId: `advanced-system-settings-table-item-${key}`,
+              },
+            ]
+          : []),
+      ],
+    })
+  })
+
+  return result
+}

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

@@ -13,10 +13,10 @@
       server-off
     >
       <template #value="{ item }">
-        <common-configure-advanced-system-settings-table-view-old-field
+        <common-configure-advanced-system-settings-table-view-field
           :data="item.data"
-          @change="onChangeSetting($event, item.data.key)"
-          @error-message="onUpdateInvalidFields($event, item.data.key)"
+          @change="emits('change-setting', $event, item.data.key)"
+          @error-message="emits('update-invalid-fields', $event, item.data.key)"
         />
       </template>
     </atoms-table-data-grid>
@@ -29,26 +29,12 @@ import type {
   UI_I_HeadItem,
   UI_I_BodyItem,
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type {
-  UI_I_ArbitraryObject,
-  UI_I_Localization,
-} from '~/lib/models/interfaces'
-import type {
-  API_UI_I_DataTable,
-  UI_I_Pagination,
-} from '~/lib/models/table/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/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 * as table from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/config/table'
 
-const settings = defineModel<API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>>(
-  'settings',
-  { required: true }
-)
-const invalidFields = defineModel<string[]>('invalid-fields', {
-  required: false,
-})
-
 const props = defineProps<{
   dataTable: UI_I_AdvancedSystemSetting[]
   totalItems: number
@@ -56,28 +42,16 @@ const props = defineProps<{
   isEdit: boolean
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-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 emits = defineEmits<{
+  (
+    event: 'change-setting',
+    value1: UI_I_AdvancedSystemSettingsEditData['value'],
+    value2: string
+  ): void
+  (event: 'update-invalid-fields', value1: string, value2: string): void
+}>()
 
-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
-    )
-}
+const localization = computed<UI_I_Localization>(() => useLocal())
 
 const paginationLocal = ref<UI_I_Pagination>({
   page: 1,
@@ -108,7 +82,6 @@ watch(
   @include flex($dir: column);
   overflow: hidden;
   height: inherit;
-  max-height: 250px;
   .data-table {
     @include flex($dir: column);
     flex-direction: column;

package/components/common/configure/advancedSystemSettings/tools/New.vue

@@ -1,5 +1,66 @@
-<template>New</template>
+<template>
+  <div class="flex flex-wrap justify-between gap-4 mb-4">
+    <h3 class="advanced-system-settings-title text-[18px] font-[500]">
+      {{ props.title }}
+    </h3>
 
-<script setup lang="ts"></script>
+    <ui-button
+      test-id="advanced-system-settings-edit-toggle"
+      variant="text"
+      is-without-sizes
+      is-without-height
+      @click="emits('show-edit-modal')"
+    >
+      <ui-icon name="settings" width="18px" height="18px" />
+    </ui-button>
+  </div>
+</template>
 
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-edit-modal'): void
+}>()
+</script>
+
+<style>
+:root {
+  --advanced-system-settings-title: #4d5d69;
+  --advanced-system-settings-edit-border: #e9ebed;
+  --advanced-system-settings-edit-bg: #ffffff;
+  --advanced-system-settings-edit-color: #213444;
+  --advanced-system-settings-edit-hover-bg: #f6f7f8;
+  --advanced-system-settings-edit-hover-color: #1b2a37;
+}
+:root.dark-theme {
+  --advanced-system-settings-title: #e9eaec;
+  --advanced-system-settings-edit-border: #e9ebed1f;
+  --advanced-system-settings-edit-bg: #1b2a373d;
+  --advanced-system-settings-edit-color: #e9eaec;
+  --advanced-system-settings-edit-hover-bg: #283948;
+  --advanced-system-settings-edit-hover-color: #ffffff;
+}
+</style>
+
+<style scoped lang="scss">
+.advanced-system-settings-title {
+  color: var(--advanced-system-settings-title);
+}
+
+#advanced-system-settings-edit-toggle {
+  padding: 8px;
+  width: 34px;
+  height: 34px;
+  border: 1px solid var(--advanced-system-settings-edit-border);
+  color: var(--advanced-system-settings-edit-color);
+  background-color: var(--advanced-system-settings-edit-bg);
+
+  &:hover {
+    background-color: var(--advanced-system-settings-edit-hover-bg);
+    color: var(--advanced-system-settings-edit-hover-color);
+  }
+}
+</style>

package/components/common/configure/advancedSystemSettings/tools/Old.vue

@@ -3,7 +3,7 @@
     <template #action>
       <button
         class="btn btn-sm btn-secondary ng-star-inserted"
-        @click="emits('show-edit')"
+        @click="emits('show-edit-modal')"
       >
         {{ localization.common.edit }}...
       </button>
@@ -19,7 +19,7 @@ const props = defineProps<{
 }>()
 
 const emits = defineEmits<{
-  (event: 'show-edit'): void
+  (event: 'show-edit-modal'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/configure/advancedSystemSettings/tools/Tools.vue

@@ -2,7 +2,7 @@
   <component
     :is="currentComponent"
     :title="localization.common.advancedSystemSettings"
-    @show-edit="emits('show-edit')"
+    @show-edit-modal="emits('show-edit-modal')"
   />
 </template>
 
@@ -10,7 +10,7 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const emits = defineEmits<{
-  (event: 'show-edit'): void
+  (event: 'show-edit-modal'): void
 }>()
 
 const { $store }: any = useNuxtApp()

package/components/common/configure/physicalAdapters/modals/edit/lib/config/config.ts

@@ -1,59 +1,59 @@
-import type { UI_I_OptionItem } from '~/node_modules/bfg-common/components/atoms/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_ConfiguredSpeedOption,
-  UI_I_SrOption,
-} from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
-
-export const configuredSpeedOptionsFunc = (
-  localization: UI_I_Localization,
-  auto: boolean
-): (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[] => {
-  return auto
-    ? [
-        {
-          value: '10000full',
-          text: `10000 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
-        },
-      ]
-    : [
-        {
-          value: '1000full',
-          text: `1000 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
-        },
-        {
-          value: '100half',
-          text: `100 ${localization.common.mbits}, ${localization.common.halfDuplex}`,
-        },
-        {
-          value: '100full',
-          text: `100 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
-        },
-        {
-          value: '10full',
-          text: `10 ${localization.common.mbits}, ${localization.common.halfDuplex}`,
-        },
-        {
-          value: '10full',
-          text: `10 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
-        },
-        {
-          value: 'auto',
-          text: localization.common.autoNegotiate,
-        },
-      ]
-}
-
-export const srOptionsFunc = (
-  localization: UI_I_Localization,
-  isNewView = false
-): (UI_I_SrOption | UI_I_OptionItem)[] => [
-  {
-    value: isNewView ? '0' : false,
-    text: localization.common.disabled,
-  },
-  {
-    value: isNewView ? '1' : true,
-    text: localization.common.enabled,
-  },
-]
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_ConfiguredSpeedOption,
+  UI_I_SrOption,
+} from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
+
+export const configuredSpeedOptionsFunc = (
+  localization: UI_I_Localization,
+  auto: boolean
+): (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[] => {
+  return auto
+    ? [
+        {
+          value: '10000full',
+          text: `10000 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
+        },
+      ]
+    : [
+        {
+          value: '1000full',
+          text: `1000 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
+        },
+        {
+          value: '100half',
+          text: `100 ${localization.common.mbits}, ${localization.common.halfDuplex}`,
+        },
+        {
+          value: '100full',
+          text: `100 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
+        },
+        {
+          value: '10half',
+          text: `10 ${localization.common.mbits}, ${localization.common.halfDuplex}`,
+        },
+        {
+          value: '10full',
+          text: `10 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
+        },
+        {
+          value: 'auto',
+          text: localization.common.autoNegotiate,
+        },
+      ]
+}
+
+export const srOptionsFunc = (
+  localization: UI_I_Localization,
+  isNewView = false
+): (UI_I_SrOption | UI_I_OptionItem)[] => [
+  {
+    value: isNewView ? '0' : false,
+    text: localization.common.disabled,
+  },
+  {
+    value: isNewView ? '1' : true,
+    text: localization.common.enabled,
+  },
+]