bfg-common 1.0.95 → 1.0.97

package/components/common/home/servicesTable/ServicesTable.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="most-alert">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedRow"
+      v-model:page-size="pageSize"
+      v-model:page="page"
+      class="data-table"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :total-pages="1"
+      off-select-by-row
+      hide-page-size
+      show-page-info
+      server-off
+    >
+      <template #icon="{ item }">
+        <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
+        <span class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/models/types'
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_Service } from '~/components/common/home/models/interfaces'
+import * as table from '~/components/common/home/servicesTable/config/config'
+
+const props = defineProps<{
+  dataTable: UI_I_Service[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<UI_T_SelectedRow>(null)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  () => props.dataTable,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = table.bodyItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+const page = ref<number>(1)
+const pageSize = ref<number>(1)
+</script>
+
+<style lang="scss" scoped>
+.most-alert {
+  margin: 0;
+  border: none;
+
+  :deep(.datagrid-outer-wrapper) {
+    padding: 0;
+
+    .datagrid {
+      margin: 0;
+      border: unset;
+      min-height: 200px;
+    }
+  }
+}
+</style>

package/components/common/home/servicesTable/config/config.ts

@@ -0,0 +1,62 @@
+import type {
+  UI_I_BodyItem,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import { constructHeadItem } from '~/components/atoms/table/dataGrid/utils/constructDataTable'
+import type { UI_T_ServiceColumnKeys } from '~/components/common/home/models/types'
+import type { UI_I_Service } from '~/components/common/home/models/interfaces'
+
+export const servicesTableKeys: UI_T_ServiceColumnKeys[] = [
+  'item',
+  'statusText',
+  'statusIcon',
+  'version',
+]
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.item, true, '34%', servicesTableKeys[0]],
+    [localization.status, true, '33%', servicesTableKeys[1]],
+    [localization.version, true, '33%', servicesTableKeys[2]],
+  ]
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = i === 1 ? 'icon' : `col${i + 1}`
+    result.push(constructHeadItem(col, item[0], item[3], true, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_Service[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((service: UI_I_Service, key) => {
+    const statusData = {
+      iconClassName: `vsphere-icon-status-${service.statusIcon}`,
+    }
+    bodyItems.push([
+      {
+        key: 'col1',
+        text: service[servicesTableKeys[0]].toString(),
+        id: key,
+      },
+      {
+        key: 'icon',
+        text: service[servicesTableKeys[1]].toString(),
+        data: statusData,
+        id: key,
+      },
+      {
+        key: 'col3',
+        text: service[servicesTableKeys[2]].toString(),
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}