bfg-common 1.6.65 → 1.6.66

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/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/Old.vue

@@ -13,30 +13,26 @@
       </div>
 
       <div class="utilization-column-manage-container relative">
-        <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"
+        <atoms-dropdown
+          :drop-menu="dropdownMenu"
+          test-id="help-menu-dropdown"
+          @select="onDropdownMenuItem"
         >
-          <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>
+          <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>
       </div>
     </div>
   </div>
@@ -45,12 +41,51 @@
 <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 isShowColumnManage = ref<boolean>(false)
+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')
+}
 </script>
 
 <style scoped lang="scss">
@@ -74,6 +109,12 @@ const isShowColumnManage = ref<boolean>(false)
       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,5 +1,10 @@
 <template>
-  <component :is="currentComponent" v-model:all-data="constructedData" />
+  <component
+    :is="currentComponent"
+    v-model:all-data="constructedData"
+    :is-loading="props.isLoading"
+    @set-items-show-settings="onSetItemsShowSettings"
+  />
 </template>
 
 <script setup lang="ts">
@@ -11,7 +16,8 @@ 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
+  apiData: API_UI_I_UtilizationData | null
+  isLoading: boolean
 }>()
 
 const { $store }: any = useNuxtApp()
@@ -20,7 +26,7 @@ const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const currentComponent = computed(() =>
   isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
+    ? defineAsyncComponent(() => import('./new/New.vue'))
     : defineAsyncComponent(() => import('./Old.vue'))
 )
 
@@ -29,23 +35,25 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 const constructedData = ref<UI_I_UtilizationDataItem[]>([])
 
 watch(
-  () => props.apiData,
+  [localization, () => props.apiData],
   () => {
-    !constructedData.value.length &&
-      (constructedData.value = constructApiData(
+    if (props.apiData) {
+      constructedData.value = constructApiData(
         props.apiData,
         localization.value
-      ))
+      )
+    }
   },
   { immediate: true, deep: true }
 )
-watch(
-  () => localization.value,
-  () => {
-    constructedData.value = constructApiData(props.apiData, localization.value)
-  },
-  { deep: true }
-)
+
+const onSetItemsShowSettings = (): void => {
+  const showBlocksId: string[] = []
+  constructedData.value.forEach((item) => {
+    if (item.isShow) showBlocksId.push(item.id)
+  })
+  useLocalStorage('utilization-portlets-show', showBlocksId)
+}
 </script>
 
 <style scoped lang="scss"></style>