bfg-common 1.4.482 → 1.4.483

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,14 +3,91 @@
3
3
  <template v-if="props.loading">
4
4
  <!-- skeleton -->
5
5
  </template>
6
- <div v-else></div>
6
+ <div v-else>
7
+ <ui-data-table
8
+ test-id="data-table-main"
9
+ :data="data"
10
+ :options="options"
11
+ :loading="props.loading"
12
+ server-off
13
+ class="resent-task-table"
14
+ >
15
+ <template #icon="{ item }">
16
+ <span class="flex-align-center">
17
+ <span :class="['icon', item.data.icon]" />
18
+
19
+ <span
20
+ :data-id="`rtask-${item.data.testId}`"
21
+ :class="item.data.isLink && 'target-link'"
22
+ >
23
+ {{ item.text }}
24
+ </span>
25
+ </span>
26
+ </template>
27
+ </ui-data-table>
28
+ </div>
7
29
  </ui-widget>
8
30
  </template>
9
31
 
10
32
  <script lang="ts" setup>
33
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
34
+ import type {
35
+ UI_I_DataTable,
36
+ UI_I_DataTableHeader,
37
+ UI_I_DataTableBody,
38
+ } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
39
+ import {
40
+ options,
41
+ getHeaderDataFunc,
42
+ getBodyDataFunc,
43
+ } from '~/components/common/pages/home/widgets/services/lib/config/config'
44
+
11
45
  const props = defineProps<{
46
+ tableData: any
12
47
  loading: boolean
13
48
  }>()
49
+
50
+ const localization = computed<UI_I_Localization>(() => useLocal())
51
+
52
+ const data = computed<UI_I_DataTable>(() => ({
53
+ id: '0',
54
+ header: resentTaskHeadItems.value,
55
+ body: resentTaskBodyItems.value,
56
+ }))
57
+
58
+ const resentTaskHeadItems = computed<UI_I_DataTableHeader[]>(() =>
59
+ getHeaderDataFunc(localization.value)
60
+ )
61
+
62
+ const resentTaskBodyItems = ref<UI_I_DataTableBody[]>([])
63
+ watch(
64
+ () => props.tableData,
65
+ (newValue) => {
66
+ if (!newValue?.length) return
67
+
68
+ resentTaskBodyItems.value = getBodyDataFunc(newValue, localization.value)
69
+ },
70
+ { deep: true, immediate: true }
71
+ )
14
72
  </script>
15
73
 
16
- <style lang="scss" scoped></style>
74
+ <style lang="scss" scoped>
75
+ .target-link {
76
+ font-family: Inter, serif;
77
+ font-size: 13px;
78
+ color: var(--bottom-pannel-rtask-link-text);
79
+ font-weight: 400;
80
+ line-height: 15.73px;
81
+ cursor: pointer;
82
+ &:hover {
83
+ color: var(--bottom-pannel-rtask-link-hover-text);
84
+ }
85
+ }
86
+ .chip-icon {
87
+ min-width: 14px;
88
+ margin-right: 4px;
89
+ }
90
+ .icon {
91
+ margin-right: 4px;
92
+ }
93
+ </style>
@@ -0,0 +1,115 @@
1
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
2
+ import type {
3
+ UI_I_DataTableBody,
4
+ UI_I_DataTableOptions,
5
+ UI_I_DataTableHeader,
6
+ } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
7
+ import type { UI_I_RecentTaskItem } from '~/lib/models/store/tasks/interfaces'
8
+ import { UI_E_RecentTaskStatus } from '~/lib/models/store/tasks/enums'
9
+ import { E_NodeIconsByState } from '~/lib/models/enums'
10
+ import { E_TabsByType } from '~/components/templates/inventory/lib/models/enums'
11
+ import {
12
+ E_RTaskChipColor,
13
+ E_RTaskStatusIcon,
14
+ } from '~/components/layout/bottomPanel/new/table/lib/models/enums'
15
+ import type { T_TypeNodes } from '~/lib/models/types'
16
+
17
+ export const getHeaderDataFunc = (
18
+ localization: UI_I_Localization
19
+ ): UI_I_DataTableHeader[] => [
20
+ {
21
+ col: 0,
22
+ colName: 'taskName',
23
+ text: localization.tasks.taskName,
24
+ isSortable: true,
25
+ sort: 'asc',
26
+ sortColumn: true,
27
+ width: '180px',
28
+ show: true,
29
+ filter: true,
30
+ },
31
+ {
32
+ col: 1,
33
+ colName: 'target',
34
+ text: localization.common.target,
35
+ isSortable: true,
36
+ sort: 'asc',
37
+ width: '180px',
38
+ show: true,
39
+ filter: true,
40
+ },
41
+ {
42
+ col: 2,
43
+ colName: 'status',
44
+ text: localization.common.status,
45
+ isSortable: true,
46
+ sort: 'asc',
47
+ width: '180px',
48
+ show: true,
49
+ filter: true,
50
+ },
51
+ ]
52
+
53
+ export const options: UI_I_DataTableOptions = {
54
+ perPageOptions: [
55
+ { text: '10', value: 10 },
56
+ { text: '50', value: 50 },
57
+ { text: '100', value: 100 },
58
+ ],
59
+ isSelectable: false,
60
+ isFocusable: false,
61
+ showPagination: true,
62
+ showPageInfo: true,
63
+ isSortable: true,
64
+ server: false,
65
+ isResizable: true,
66
+ showSearch: false,
67
+ showColumnManager: true,
68
+ }
69
+
70
+ export const getBodyDataFunc = (
71
+ bodyData: UI_I_RecentTaskItem<T_TypeNodes>[],
72
+ localization: UI_I_Localization
73
+ ): UI_I_DataTableBody[] => {
74
+ return bodyData.map((task, index: number) => {
75
+ const iconClassName = E_NodeIconsByState[`${task.targetType}_Normal`]
76
+ const id = task.extra?.created_id || task.target
77
+ const targetData = {
78
+ id,
79
+ icon: iconClassName,
80
+ nav: E_TabsByType[task.targetType],
81
+ type: task.targetType,
82
+ isLink: true,
83
+ testId: `${task.targetType}-item`,
84
+ }
85
+
86
+ const statusData = {
87
+ icon: E_RTaskStatusIcon[task.status],
88
+ chipColor: E_RTaskChipColor[task.status],
89
+ error: task.error,
90
+ testId: `${task.taskName}-progress`,
91
+ }
92
+
93
+ return {
94
+ row: index,
95
+ collapse: false,
96
+ isHiddenCollapse: false,
97
+ collapseToggle: false,
98
+ data: [
99
+ {
100
+ key: 'icon',
101
+ col: 0,
102
+ text: task.target,
103
+ data: targetData,
104
+ },
105
+ {
106
+ key: 'status',
107
+ col: 1,
108
+ text: localization.common[UI_E_RecentTaskStatus[task.status]],
109
+ data: statusData,
110
+ },
111
+ { col: 2, text: task.taskName },
112
+ ],
113
+ }
114
+ })
115
+ }
@@ -3,14 +3,71 @@
3
3
  <template v-if="props.loading">
4
4
  <!-- skeleton -->
5
5
  </template>
6
- <div v-else></div>
6
+ <div v-else>
7
+ <ui-data-table
8
+ test-id="data-table-main"
9
+ :data="data"
10
+ :options="options"
11
+ :loading="props.loading"
12
+ server-off
13
+ class="resent-task-table"
14
+ >
15
+ <template #icon="{ item }">
16
+ <span class="flex-align-center">
17
+ <span :class="['icon', item.data.icon]" />
18
+
19
+ <span
20
+ :data-id="`rtask-${item.data.testId}`"
21
+ :class="item.data.isLink && 'target-link'"
22
+ >
23
+ {{ item.text }}
24
+ </span>
25
+ </span>
26
+ </template>
27
+ </ui-data-table>
28
+ </div>
7
29
  </ui-widget>
8
30
  </template>
9
31
 
10
32
  <script lang="ts" setup>
33
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
34
+ import type {
35
+ UI_I_DataTable,
36
+ UI_I_DataTableHeader,
37
+ UI_I_DataTableBody,
38
+ } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
39
+ import {
40
+ options,
41
+ getHeaderDataFunc,
42
+ getBodyDataFunc,
43
+ } from '~/components/common/pages/home/widgets/warnings/lib/config/config'
44
+
11
45
  const props = defineProps<{
12
46
  loading: boolean
13
47
  }>()
48
+
49
+ const localization = computed<UI_I_Localization>(() => useLocal())
50
+
51
+ const data = computed<UI_I_DataTable>(() => ({
52
+ id: '0',
53
+ header: resentTaskHeadItems.value,
54
+ body: resentTaskBodyItems.value,
55
+ }))
56
+
57
+ const resentTaskHeadItems = computed<UI_I_DataTableHeader[]>(() =>
58
+ getHeaderDataFunc(localization.value)
59
+ )
60
+
61
+ const resentTaskBodyItems = ref<UI_I_DataTableBody[]>([])
62
+ watch(
63
+ () => props.tableData,
64
+ (newValue) => {
65
+ if (!newValue?.length) return
66
+
67
+ resentTaskBodyItems.value = getBodyDataFunc(newValue, localization.value)
68
+ },
69
+ { deep: true, immediate: true }
70
+ )
14
71
  </script>
15
72
 
16
73
  <style lang="scss" scoped></style>
@@ -0,0 +1,115 @@
1
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
2
+ import type {
3
+ UI_I_DataTableBody,
4
+ UI_I_DataTableOptions,
5
+ UI_I_DataTableHeader,
6
+ } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
7
+ import type { UI_I_RecentTaskItem } from '~/lib/models/store/tasks/interfaces'
8
+ import { UI_E_RecentTaskStatus } from '~/lib/models/store/tasks/enums'
9
+ import { E_NodeIconsByState } from '~/lib/models/enums'
10
+ import { E_TabsByType } from '~/components/templates/inventory/lib/models/enums'
11
+ import {
12
+ E_RTaskChipColor,
13
+ E_RTaskStatusIcon,
14
+ } from '~/components/layout/bottomPanel/new/table/lib/models/enums'
15
+ import type { T_TypeNodes } from '~/lib/models/types'
16
+
17
+ export const getHeaderDataFunc = (
18
+ localization: UI_I_Localization
19
+ ): UI_I_DataTableHeader[] => [
20
+ {
21
+ col: 0,
22
+ colName: 'taskName',
23
+ text: localization.tasks.taskName,
24
+ isSortable: true,
25
+ sort: 'asc',
26
+ sortColumn: true,
27
+ width: '180px',
28
+ show: true,
29
+ filter: true,
30
+ },
31
+ {
32
+ col: 1,
33
+ colName: 'target',
34
+ text: localization.common.target,
35
+ isSortable: true,
36
+ sort: 'asc',
37
+ width: '180px',
38
+ show: true,
39
+ filter: true,
40
+ },
41
+ {
42
+ col: 2,
43
+ colName: 'status',
44
+ text: localization.common.status,
45
+ isSortable: true,
46
+ sort: 'asc',
47
+ width: '180px',
48
+ show: true,
49
+ filter: true,
50
+ },
51
+ ]
52
+
53
+ export const options: UI_I_DataTableOptions = {
54
+ perPageOptions: [
55
+ { text: '10', value: 10 },
56
+ { text: '50', value: 50 },
57
+ { text: '100', value: 100 },
58
+ ],
59
+ isSelectable: false,
60
+ isFocusable: false,
61
+ showPagination: true,
62
+ showPageInfo: true,
63
+ isSortable: true,
64
+ server: false,
65
+ isResizable: true,
66
+ showSearch: false,
67
+ showColumnManager: true,
68
+ }
69
+
70
+ export const getBodyDataFunc = (
71
+ bodyData: UI_I_RecentTaskItem<T_TypeNodes>[],
72
+ localization: UI_I_Localization
73
+ ): UI_I_DataTableBody[] => {
74
+ return bodyData.map((task, index: number) => {
75
+ const iconClassName = E_NodeIconsByState[`${task.targetType}_Normal`]
76
+ const id = task.extra?.created_id || task.target
77
+ const targetData = {
78
+ id,
79
+ icon: iconClassName,
80
+ nav: E_TabsByType[task.targetType],
81
+ type: task.targetType,
82
+ isLink: true,
83
+ testId: `${task.targetType}-item`,
84
+ }
85
+
86
+ const statusData = {
87
+ icon: E_RTaskStatusIcon[task.status],
88
+ chipColor: E_RTaskChipColor[task.status],
89
+ error: task.error,
90
+ testId: `${task.taskName}-progress`,
91
+ }
92
+
93
+ return {
94
+ row: index,
95
+ collapse: false,
96
+ isHiddenCollapse: false,
97
+ collapseToggle: false,
98
+ data: [
99
+ { col: 0, text: task.taskName },
100
+ {
101
+ key: 'icon',
102
+ col: 1,
103
+ text: task.target,
104
+ data: targetData,
105
+ },
106
+ {
107
+ key: 'status',
108
+ col: 2,
109
+ text: localization.common[UI_E_RecentTaskStatus[task.status]],
110
+ data: statusData,
111
+ },
112
+ ],
113
+ }
114
+ })
115
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.4.482",
4
+ "version": "1.4.483",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",