bfg-common 1.6.63 → 1.6.65

package/components/common/diagramMain/switch/SwitchSelected.vue

@@ -1,111 +1,111 @@
-<template>
-  <g v-if="props.isVisibleLine">
-    <g v-if="isNewView && inNetworkLinesY.length > 0">
-      <path :d="d1" class="selection-line" />
-      <path :d="d2" class="selection-line" />
-    </g>
-    <line
-      v-if="!isNewView"
-      x1="362.5"
-      :y1="props.selectedSwitchLineY.y1"
-      x2="362.5"
-      :y2="props.selectedSwitchLineY.y2"
-      shape-rendering="geometricprecision"
-      stroke-width="2"
-      class="selection-line"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_SwitchLine } from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  selectedSwitchLineY: UI_I_SwitchLine
-  isVisibleLine: boolean
-  adaptersPositionsY: number[]
-  adapterLineY: number
-  isHighlightedAdapterLine: boolean
-  inNetworkLinesY: number[]
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const firstAdapterY = computed<number>(() =>
-  props.isHighlightedAdapterLine
-    ? props.adapterLineY
-    : props.adaptersPositionsY[0] + 7.5
-)
-const lastAdapterY = computed<number>(() =>
-  props.isHighlightedAdapterLine
-    ? props.adapterLineY
-    : props.adaptersPositionsY[props.adaptersPositionsY.length - 1] + 7.5
-)
-
-const height = computed<number>(() =>
-  Math.abs(
-    Math.abs(props.selectedSwitchLineY.y1) -
-      Math.abs(props.selectedSwitchLineY.y2)
-  )
-)
-
-const firstLineIsNetwork = computed<boolean>(
-  () => props.selectedSwitchLineY.y1 < firstAdapterY.value
-)
-
-const isNetworkHigherThenAdapter = computed<boolean>(
-  () =>
-    props.inNetworkLinesY[props.inNetworkLinesY.length - 1] < lastAdapterY.value
-)
-
-const difference1 = computed<number>(() =>
-  Math.abs(
-    props.inNetworkLinesY[props.inNetworkLinesY.length - 1] -
-      firstAdapterY.value
-  )
-)
-
-const difference2 = computed<number>(() =>
-  Math.abs(lastAdapterY.value - props.inNetworkLinesY[0])
-)
-
-const radius1 = computed<number>(() => (difference1.value < 4 ? difference1.value / 2 : 2))
-const radius2 = computed<number>(() => (difference2.value < 4 ? difference2.value / 2 : 2))
-
-const d1 = computed<string>(
-  () =>
-    `M 362.5 ${props.selectedSwitchLineY.y2 - radius1.value}  l 0 -${
-      height.value - 2 * radius1.value
-    } q 0,-${radius1.value} ${firstLineIsNetwork.value ? '-2' : '2'},-${radius1.value}`
-)
-
-const d2 = computed<string>(
-  () =>
-    `M 362.5 ${props.selectedSwitchLineY.y1 + radius2.value} l 0 ${
-      height.value - 2 * radius2.value
-    } q 0,${radius2.value} ${isNetworkHigherThenAdapter.value ? '2' : '-2'},${
-      radius2.value
-    }`
-)
-</script>
-
-<style scoped lang="scss">
-:root.dark-theme {
-  .selection-line {
-    stroke: #fdd006;
-  }
-}
-:root.is-new-view {
-  .selection-line {
-    stroke: var(--diagram-highlight-line);
-    fill: none;
-    stroke-width: 1.5px;
-  }
-}
-
-.selection-line {
-  stroke: #f3bb00;
-}
-</style>
+<template>
+  <g v-if="props.isVisibleLine">
+    <g v-if="isNewView && inNetworkLinesY.length > 0">
+      <path :d="d1" class="selection-line" />
+      <path :d="d2" class="selection-line" />
+    </g>
+    <line
+      v-if="!isNewView"
+      x1="362.5"
+      :y1="props.selectedSwitchLineY.y1"
+      x2="362.5"
+      :y2="props.selectedSwitchLineY.y2"
+      shape-rendering="geometricprecision"
+      stroke-width="2"
+      class="selection-line"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_SwitchLine } from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  selectedSwitchLineY: UI_I_SwitchLine
+  isVisibleLine: boolean
+  adaptersPositionsY: number[]
+  adapterLineY: number
+  isHighlightedAdapterLine: boolean
+  inNetworkLinesY: number[]
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const firstAdapterY = computed<number>(() =>
+  props.isHighlightedAdapterLine
+    ? props.adapterLineY
+    : props.adaptersPositionsY[0] + 7.5
+)
+const lastAdapterY = computed<number>(() =>
+  props.isHighlightedAdapterLine
+    ? props.adapterLineY
+    : props.adaptersPositionsY[props.adaptersPositionsY.length - 1] + 7.5
+)
+
+const height = computed<number>(() =>
+  Math.abs(
+    Math.abs(props.selectedSwitchLineY.y1) -
+      Math.abs(props.selectedSwitchLineY.y2)
+  )
+)
+
+const firstLineIsNetwork = computed<boolean>(
+  () => props.selectedSwitchLineY.y1 < firstAdapterY.value
+)
+
+const isNetworkHigherThenAdapter = computed<boolean>(
+  () =>
+    props.inNetworkLinesY[props.inNetworkLinesY.length - 1] < lastAdapterY.value
+)
+
+const difference1 = computed<number>(() =>
+  Math.abs(
+    props.inNetworkLinesY[props.inNetworkLinesY.length - 1] -
+      firstAdapterY.value
+  )
+)
+
+const difference2 = computed<number>(() =>
+  Math.abs(lastAdapterY.value - props.inNetworkLinesY[0])
+)
+
+const radius1 = computed<number>(() => (difference1.value < 4 ? difference1.value / 2 : 2))
+const radius2 = computed<number>(() => (difference2.value < 4 ? difference2.value / 2 : 2))
+
+const d1 = computed<string>(
+  () =>
+    `M 362.5 ${props.selectedSwitchLineY.y2 - radius1.value}  l 0 -${
+      height.value - 2 * radius1.value
+    } q 0,-${radius1.value} ${firstLineIsNetwork.value ? '-2' : '2'},-${radius1.value}`
+)
+
+const d2 = computed<string>(
+  () =>
+    `M 362.5 ${props.selectedSwitchLineY.y1 + radius2.value} l 0 ${
+      height.value - 2 * radius2.value
+    } q 0,${radius2.value} ${isNetworkHigherThenAdapter.value ? '2' : '-2'},${
+      radius2.value
+    }`
+)
+</script>
+
+<style scoped lang="scss">
+:root.dark-theme {
+  .selection-line {
+    stroke: #fdd006;
+  }
+}
+:root.is-new-view {
+  .selection-line {
+    stroke: var(--diagram-highlight-line);
+    fill: none;
+    stroke-width: 1.5px;
+  }
+}
+
+.selection-line {
+  stroke: #f3bb00;
+}
+</style>

package/components/common/modals/Rename.vue

@@ -2,7 +2,7 @@
   <atoms-modal
     :test-id="`${props.testId}-rename`"
     :title="localization.common.rename"
-    :second-title="name"
+    :second-title="props.subtitle"
     :loading="props.isLoading"
     width="576px"
     class="rename"
@@ -68,12 +68,14 @@ const props = withDefaults(
   defineProps<{
     testId: string
     name: string
+    subtitle?: string
     label?: string
     regex?: string
     errorText?: string
     isLoading?: boolean
   }>(),
   {
+    subtitle: '',
     label: 'enterNewName',
     regex: undefined,
     errorText: undefined,

package/components/common/monitor/advanced/table/tableOld/TableOld.vue

@@ -1,93 +1,93 @@
-<template>
-  <div class="chart-legend">
-    <span class="title">{{
-      localization.inventoryMonitor.performanceChartLegend
-    }}</span>
-    <client-only>
-      <atoms-table-data-grid
-        v-model:selected-row="selectedRow"
-        v-model:column-keys="columnKeys"
-        v-model:page-size="pageSize"
-        v-model:page="page"
-        :head-items="headAInfo"
-        :body-items="dataBody"
-        :total-items="dataBody.length"
-        :total-pages="1"
-        type="checkbox"
-        class="data-table"
-        test-id="advances-table"
-        hide-page-size
-      >
-        <template #col1="{ item }">
-          <div
-            :style="[{ backgroundColor: item.data.color }]"
-            class="datagrid-column-color-block"
-          ></div>
-        </template>
-      </atoms-table-data-grid>
-    </client-only>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_HeadItem,
-  UI_I_BodyItem,
-  UI_I_ColumnKey,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import * as table from '~/components/common/monitor/advanced/table/tableOld/lib/config/performanceDatatable'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  data: UI_I_PerformanceItem[]
-}>()
-const emits = defineEmits<{
-  (event: 'select', value: number[]): void
-}>()
-
-const selectedRow = ref<number[]>([])
-const pageSize = ref<number>(100)
-const page = ref<number>(1)
-const headAInfo = computed<UI_I_HeadItem[]>(() =>
-  table.headItems(localization.value)
-)
-const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
-watch(localization, () => {
-  columnKeys.value = table.columnKeys(localization.value)
-})
-const dataBody = ref<UI_I_BodyItem[][]>([])
-
-watch(
-  () => props.data,
-  (newValue) => {
-    if (!newValue) return
-
-    dataBody.value = table.bodyItems(newValue)
-  },
-  { immediate: true }
-)
-watch(
-  selectedRow,
-  (newValue) => {
-    emits('select', newValue)
-  },
-  { deep: true }
-)
-</script>
-
-<style scoped lang="scss">
-.chart-legend {
-  .title {
-    font-weight: 700;
-    height: 20px;
-  }
-
-  .datagrid-column-color-block {
-    width: 16px;
-    height: 16px;
-  }
-}
-</style>
+<template>
+  <div class="chart-legend">
+    <span class="title">{{
+      localization.inventoryMonitor.performanceChartLegend
+    }}</span>
+    <client-only>
+      <atoms-table-data-grid
+        v-model:selected-row="selectedRow"
+        v-model:column-keys="columnKeys"
+        v-model:page-size="pageSize"
+        v-model:page="page"
+        :head-items="headAInfo"
+        :body-items="dataBody"
+        :total-items="dataBody.length"
+        :total-pages="1"
+        type="checkbox"
+        class="data-table"
+        test-id="advances-table"
+        hide-page-size
+      >
+        <template #col1="{ item }">
+          <div
+            :style="[{ backgroundColor: item.data.color }]"
+            class="datagrid-column-color-block"
+          ></div>
+        </template>
+      </atoms-table-data-grid>
+    </client-only>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import * as table from '~/components/common/monitor/advanced/table/tableOld/lib/config/performanceDatatable'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  data: UI_I_PerformanceItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'select', value: number[]): void
+}>()
+
+const selectedRow = ref<number[]>([])
+const pageSize = ref<number>(100)
+const page = ref<number>(1)
+const headAInfo = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
+watch(localization, () => {
+  columnKeys.value = table.columnKeys(localization.value)
+})
+const dataBody = ref<UI_I_BodyItem[][]>([])
+
+watch(
+  () => props.data,
+  (newValue) => {
+    if (!newValue) return
+
+    dataBody.value = table.bodyItems(newValue)
+  },
+  { immediate: true }
+)
+watch(
+  selectedRow,
+  (newValue) => {
+    emits('select', newValue)
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.chart-legend {
+  .title {
+    font-weight: 700;
+    height: 20px;
+  }
+
+  .datagrid-column-color-block {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>

package/components/common/monitor/utilization/New.vue

@@ -0,0 +1,5 @@
+<template>New</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

package/components/common/monitor/utilization/Old.vue

@@ -13,26 +13,30 @@
       </div>
 
       <div class="utilization-column-manage-container relative">
-        <atoms-dropdown
-          :drop-menu="dropdownMenu"
-          test-id="help-menu-dropdown"
-          @select="onDropdownMenuItem"
+        <ui-icon
+          name="settings"
+          width="24px"
+          height="24px"
+          @click="isShowColumnManage = !isShowColumnManage"
+        />
+
+        <atoms-popup-simple-popup
+          v-model="isShowColumnManage"
+          test-id="utilization-column-manage-popup"
+          top="0"
+          right="0"
         >
-          <template #icon>
-            <ui-icon name="settings" width="24px" height="24px" />
-          </template>
-          <template #item="{ data }">
-            <label
-              :for="`utilization-column-manage-${data.action}`"
-              class="utilization-column-manage-item"
-              ><input
-                v-model="data.data.isShow"
-                :id="`utilization-column-manage-${data.action}`"
-                type="checkbox"
-              />{{ data.text }}</label
-            >
-          </template>
-        </atoms-dropdown>
+          <li v-for="(item, key) in allDataLocal" :key="key" class="list-item">
+            <input
+              v-model="item.isShow"
+              :id="`utilization-column-manage-${item.id}`"
+              type="checkbox"
+            />
+            <label :for="`utilization-column-manage-${item.id}`">{{
+              item.title
+            }}</label>
+          </li>
+        </atoms-popup-simple-popup>
       </div>
     </div>
   </div>
@@ -41,51 +45,12 @@
 <script setup lang="ts">
 import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
 
 const allDataLocal = defineModel<UI_I_UtilizationDataItem[]>('all-data')
 
-const emits = defineEmits<{
-  (event: 'set-items-show-settings'): void
-}>()
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const dropdownMenu = ref<UI_I_DropMenu<string>[]>([])
-
-watch(
-  allDataLocal,
-  (newValue) => {
-    if (!newValue) return
-
-    dropdownMenu.value = []
-
-    newValue.forEach((item) => {
-      dropdownMenu.value.push({
-        text: item.title,
-        action: item.id,
-        closeAfterClick: false,
-        testId: `utilization-dropdown-${item.id}`,
-        data: {
-          isShow: item.isShow,
-        },
-      })
-    })
-  },
-  { immediate: true, deep: true }
-)
-
-const onDropdownMenuItem = (value: UI_I_DropMenu<string>): void => {
-  if (!allDataLocal.value) return
-
-  allDataLocal.value = allDataLocal.value.map((item) => {
-    return {
-      ...item,
-      isShow: value.action === item.id ? !value.data.isShow : item.isShow,
-    }
-  })
-  emits('set-items-show-settings')
-}
+const isShowColumnManage = ref<boolean>(false)
 </script>
 
 <style scoped lang="scss">
@@ -109,12 +74,6 @@ const onDropdownMenuItem = (value: UI_I_DropMenu<string>): void => {
       align-items: center;
       gap: 5px;
     }
-    .utilization-column-manage-item {
-      pointer-events: none;
-      display: flex;
-      align-items: center;
-      grid-gap: 8px;
-    }
   }
 }
 </style>

package/components/common/monitor/utilization/Utilization.vue

@@ -1,10 +1,5 @@
 <template>
-  <component
-    :is="currentComponent"
-    v-model:all-data="constructedData"
-    :is-loading="props.isLoading"
-    @set-items-show-settings="onSetItemsShowSettings"
-  />
+  <component :is="currentComponent" v-model:all-data="constructedData" />
 </template>
 
 <script setup lang="ts">
@@ -16,8 +11,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import { constructApiData } from '~/components/common/monitor/utilization/lib/utils'
 
 const props = defineProps<{
-  apiData: API_UI_I_UtilizationData | null
-  isLoading: boolean
+  apiData: API_UI_I_UtilizationData
 }>()
 
 const { $store }: any = useNuxtApp()
@@ -26,7 +20,7 @@ const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const currentComponent = computed(() =>
   isNewView.value
-    ? defineAsyncComponent(() => import('./new/New.vue'))
+    ? defineAsyncComponent(() => import('./New.vue'))
     : defineAsyncComponent(() => import('./Old.vue'))
 )
 
@@ -35,25 +29,23 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 const constructedData = ref<UI_I_UtilizationDataItem[]>([])
 
 watch(
-  [localization, () => props.apiData],
+  () => props.apiData,
   () => {
-    if (props.apiData) {
-      constructedData.value = constructApiData(
+    !constructedData.value.length &&
+      (constructedData.value = constructApiData(
         props.apiData,
         localization.value
-      )
-    }
+      ))
   },
   { immediate: true, deep: true }
 )
-
-const onSetItemsShowSettings = (): void => {
-  const showBlocksId: string[] = []
-  constructedData.value.forEach((item) => {
-    if (item.isShow) showBlocksId.push(item.id)
-  })
-  useLocalStorage('utilization-portlets-show', showBlocksId)
-}
+watch(
+  () => localization.value,
+  () => {
+    constructedData.value = constructApiData(props.apiData, localization.value)
+  },
+  { deep: true }
+)
 </script>
 
 <style scoped lang="scss"></style>