bfg-common 1.5.899 → 1.5.900

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.
Files changed (3) hide show
  1. package/components/common/configure/physicalAdapters/modals/edit/Edit.vue +99 -99
  2. package/components/common/configure/physicalAdapters/tableView/TableViewNew.vue +334 -331
  3. package/package.json +1 -1
package/components/common/configure/physicalAdapters/modals/edit/Edit.vue CHANGED
@@ -1,99 +1,99 @@
1
- <template>
2
- <component
3
- :is="currentComponent"
4
- v-model:config-speed="configSpeed"
5
- v-model:status="sriovStatus"
6
- v-model:number-of-functions="numberOfFunctions"
7
- :selected-adapter="props.selectedAdapter"
8
- :has-speed="props.hasSpeed"
9
- :configured-speed-options="configuredSpeedOptions"
10
- :sr-options="srOptions"
11
- @hide="emits('hide')"
12
- @send-edit-data="emits('send-edit-data')"
13
- />
14
- </template>
15
-
16
- <script setup lang="ts">
17
- import type { UI_I_OptionItem } from '~/node_modules/bfg-common/components/atoms/lib/models/interfaces'
18
- import type { UI_I_Localization } from '~/lib/models/interfaces'
19
- import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
20
- import type {
21
- UI_I_ConfiguredSpeedOption,
22
- UI_I_SrOption,
23
- } from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
24
- import {
25
- configuredSpeedOptionsFunc,
26
- srOptionsFunc,
27
- } from '~/components/common/configure/physicalAdapters/modals/edit/lib/config/config'
28
-
29
- const { $store }: any = useNuxtApp()
30
-
31
- const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
32
-
33
- const currentComponent = computed(() =>
34
- isNewView.value
35
- ? defineAsyncComponent(() => import('./EditNew.vue'))
36
- : defineAsyncComponent(() => import('./EditOld.vue'))
37
- )
38
-
39
- const props = defineProps<{
40
- hasSpeed: boolean
41
- selectedAdapter: UI_I_SwitchAdapterItem | null
42
- }>()
43
-
44
- const emits = defineEmits<{
45
- (event: 'hide'): void
46
- (event: 'send-edit-data'): void
47
- }>()
48
-
49
- const localization = computed<UI_I_Localization>(() => useLocal())
50
-
51
- const configSpeed = defineModel<string>('config-speed')
52
- const sriovStatus = defineModel<boolean>('status')
53
- const numberOfFunctions = defineModel<number>('number-of-functions')
54
-
55
- const configuredSpeedOptions = computed<
56
- (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[]
57
- >(() => configuredSpeedOptionsFunc(localization.value, props.hasSpeed))
58
-
59
- const srOptions = computed<(UI_I_SrOption | UI_I_OptionItem)[]>(() =>
60
- srOptionsFunc(localization.value)
61
- )
62
-
63
- watch(
64
- configuredSpeedOptions,
65
- (newValue: (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[]) => {
66
- configSpeed.value = newValue[newValue.length - 1].value
67
- },
68
- { deep: true, immediate: true }
69
- )
70
- </script>
71
-
72
- <style scoped lang="scss">
73
- .form-group {
74
- .functions-input,
75
- .status-input {
76
- width: 83px;
77
-
78
- &.disabled {
79
- opacity: 0.4;
80
- pointer-events: none;
81
- }
82
- }
83
- }
84
-
85
- .semi-circle-arrow {
86
- display: inline-block;
87
- vertical-align: middle;
88
- margin: -3px 7px 0 4px;
89
-
90
- svg {
91
- width: 16px;
92
- height: 16px;
93
- }
94
- }
95
-
96
- .icon-text {
97
- line-height: 10px;
98
- }
99
- </style>
1
+ <template>
2
+ <component
3
+ :is="currentComponent"
4
+ v-model:config-speed="configSpeed"
5
+ v-model:status="sriovStatus"
6
+ v-model:number-of-functions="numberOfFunctions"
7
+ :selected-adapter="props.selectedAdapter"
8
+ :has-speed="props.hasSpeed"
9
+ :configured-speed-options="configuredSpeedOptions"
10
+ :sr-options="srOptions"
11
+ @hide="emits('hide')"
12
+ @send-edit-data="emits('send-edit-data')"
13
+ />
14
+ </template>
15
+
16
+ <script setup lang="ts">
17
+ import type { UI_I_OptionItem } from '~/node_modules/bfg-common/components/atoms/lib/models/interfaces'
18
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
19
+ import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
20
+ import type {
21
+ UI_I_ConfiguredSpeedOption,
22
+ UI_I_SrOption,
23
+ } from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
24
+ import {
25
+ configuredSpeedOptionsFunc,
26
+ srOptionsFunc,
27
+ } from '~/components/common/configure/physicalAdapters/modals/edit/lib/config/config'
28
+
29
+ const { $store }: any = useNuxtApp()
30
+
31
+ const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
32
+
33
+ const currentComponent = computed(() =>
34
+ isNewView.value
35
+ ? defineAsyncComponent(() => import('./EditNew.vue'))
36
+ : defineAsyncComponent(() => import('./EditOld.vue'))
37
+ )
38
+
39
+ const props = defineProps<{
40
+ hasSpeed: boolean
41
+ selectedAdapter: UI_I_SwitchAdapterItem | null
42
+ }>()
43
+
44
+ const emits = defineEmits<{
45
+ (event: 'hide'): void
46
+ (event: 'send-edit-data'): void
47
+ }>()
48
+
49
+ const localization = computed<UI_I_Localization>(() => useLocal())
50
+
51
+ const configSpeed = defineModel<string>('config-speed')
52
+ const sriovStatus = defineModel<boolean>('status')
53
+ const numberOfFunctions = defineModel<number>('number-of-functions')
54
+
55
+ const configuredSpeedOptions = computed<
56
+ (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[]
57
+ >(() => configuredSpeedOptionsFunc(localization.value, props.hasSpeed))
58
+
59
+ const srOptions = computed<(UI_I_SrOption | UI_I_OptionItem)[]>(() =>
60
+ srOptionsFunc(localization.value, isNewView.value)
61
+ )
62
+
63
+ watch(
64
+ configuredSpeedOptions,
65
+ (newValue: (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[]) => {
66
+ configSpeed.value = newValue[newValue.length - 1].value
67
+ },
68
+ { deep: true, immediate: true }
69
+ )
70
+ </script>
71
+
72
+ <style scoped lang="scss">
73
+ .form-group {
74
+ .functions-input,
75
+ .status-input {
76
+ width: 83px;
77
+
78
+ &.disabled {
79
+ opacity: 0.4;
80
+ pointer-events: none;
81
+ }
82
+ }
83
+ }
84
+
85
+ .semi-circle-arrow {
86
+ display: inline-block;
87
+ vertical-align: middle;
88
+ margin: -3px 7px 0 4px;
89
+
90
+ svg {
91
+ width: 16px;
92
+ height: 16px;
93
+ }
94
+ }
95
+
96
+ .icon-text {
97
+ line-height: 10px;
98
+ }
99
+ </style>
package/components/common/configure/physicalAdapters/tableView/TableViewNew.vue CHANGED
@@ -1,331 +1,334 @@
1
- <template>
2
- <div class="physical-adapters-table">
3
- <ui-data-table
4
- :data="data"
5
- :options="options"
6
- :total-items="props.adapters.total_items"
7
- :total-pages="props.adapters.total_pages"
8
- :texts="texts"
9
- :skeleton="skeletonDataLocal"
10
- :actions="actions"
11
- :loading="props.isLoading"
12
- test-id="physical-adapters-table"
13
- class="physical-adapters-tables"
14
- server-off
15
- @action="onSelectAction"
16
- @select-row="onSelectRow"
17
- >
18
- <template #insteadOfTitleActions>
19
- <div class="title-actions">
20
- <ui-button
21
- test-id="refresh-physical-adapters-btn"
22
- class="refresh-btn"
23
- size="md"
24
- variant="outline"
25
- @click="emits('refresh')"
26
- >
27
- <template #icon> <ui-icon name="reset" width="24" /> </template>
28
- {{ localization.common.refresh }}
29
- </ui-button>
30
- <ui-button
31
- test-id="add-physical-adapters-btn"
32
- class="add-btn"
33
- size="md"
34
- @click="emits('add')"
35
- >
36
- <template #icon> <ui-icon name="plus" width="24" /> </template>
37
- {{ localization.common.addNetworkingWithDots }}
38
- </ui-button>
39
- </div>
40
- </template>
41
-
42
- <template #icon="{ item }">
43
- <div v-if="item.data.icon !== 'pill'" class="cell">
44
- <div
45
- :class="[
46
- 'cell-icon',
47
- {
48
- 'cell-icon-device': item.col === 'col0',
49
- },
50
- ]"
51
- >
52
- <ui-icon
53
- v-if="item.col === 'col0'"
54
- :name="item.data.icon"
55
- width="18"
56
- height="18"
57
- />
58
- <span v-else class="network-lib-ui-icon-vswitch"></span>
59
- </div>
60
- <span class="cell-text">
61
- {{ item.text }}
62
- </span>
63
- </div>
64
- <div v-else>
65
- <ui-status-pill
66
- :type="item.data.value ? 'success' : 'error'"
67
- :text="item.text"
68
- size="md"
69
- />
70
- </div>
71
- </template>
72
-
73
- <template #default-actions="{ item }">
74
- <div class="actions flex w-full">
75
- <ui-tooltip
76
- :id="`host-item-${item.data.id}-action`"
77
- :test-id="`host-item-${item.data.id}-action-tooltip`"
78
- size="md"
79
- position="bottom"
80
- position-by-tooltip="center"
81
- show-type="variant-1"
82
- timing="660"
83
- >
84
- <template #target>
85
- <ui-button
86
- :id="`host-item-${item.data.id}-action`"
87
- :test-id="`host-item-${item.data.id}-action`"
88
- variant="text"
89
- is-without-height
90
- is-without-sizes
91
- @click.stop="onShowEditModal(item.data.id)"
92
- >
93
- <span class="action-icon">
94
- <ui-icon name="edit" width="20" height="20" />
95
- </span>
96
- </ui-button>
97
- </template>
98
- <template #content>
99
- <div class="tooltip-text">
100
- {{ localization.common.edit }}
101
- </div>
102
- </template>
103
- </ui-tooltip>
104
- </div>
105
- </template>
106
-
107
- <template #skeleton-header>
108
- <div class="skeleton-header">
109
- <div class="left-skeleton">
110
- <ui-skeleton-item width="80" height="20" />
111
- </div>
112
- <div class="right-skeleton">
113
- <ui-skeleton-item width="112" height="36" border-radius="8" />
114
- <ui-skeleton-item width="160" height="36" border-radius="8" />
115
- </div>
116
- </div>
117
- </template>
118
- </ui-data-table>
119
- </div>
120
- </template>
121
-
122
- <script setup lang="ts">
123
- import type {
124
- UI_I_DataTable,
125
- UI_I_DataTableBody,
126
- UI_I_DataTableHeader,
127
- UI_I_DataTableSkeleton,
128
- UI_I_TableTexts,
129
- } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
130
- import type { UI_I_ButtonsGroup } from '~/node_modules/bfg-uikit/components/ui/button/group/lib/models/interfaces'
131
- import type {
132
- UI_I_Localization,
133
- UI_I_ItemsWithTotalCounts,
134
- } from '~/lib/models/interfaces'
135
- import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
136
- import type {
137
- UI_I_BodyItem,
138
- UI_I_HeadItem,
139
- } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
140
- import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
141
- import type { UI_I_PhysicalAdapter } from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
142
- import {
143
- getBodyDataFunc,
144
- getHeaderDataFunc,
145
- options,
146
- skeletonData,
147
- } from '~/components/common/configure/physicalAdapters/tableView/lib/config/physicalAdaptersTableConfigNew'
148
- import { constructPhysicalAdaptersTableFunc } from '~/components/common/configure/physicalAdapters/tableView/mappers/mappers'
149
-
150
- const props = defineProps<{
151
- adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
152
- isLoading: boolean
153
- hasSelectedAdapter: boolean
154
- }>()
155
-
156
- const emits = defineEmits<{
157
- (event: 'add'): void
158
- (event: 'refresh'): void
159
- (event: 'edit', id?: string): void
160
- }>()
161
-
162
- const localization = computed<UI_I_Localization>(() => useLocal())
163
-
164
- const actions = computed<UI_I_ButtonsGroup>(() => [
165
- {
166
- text: localization.value.common.edit,
167
- value: 'edit',
168
- testId: 'edit-physical-adapted',
169
- id: 'edit-physical-adapted',
170
- disabled: !props.hasSelectedAdapter,
171
- },
172
- ])
173
-
174
- const onSelectAction = (action: string): void => {
175
- emits(action)
176
- }
177
-
178
- const selectedRow = defineModel<UI_T_SelectedRow>()
179
-
180
- const onSelectRow = (value: UI_I_DataTableBody[]): void => {
181
- if (typeof value[0].row !== 'number') return
182
- selectedRow.value = value[0].row
183
- }
184
-
185
- const networkTableData = computed<UI_I_PhysicalAdapter[]>(() =>
186
- constructPhysicalAdaptersTableFunc(props.adapters.items, localization.value)
187
- )
188
-
189
- const texts = computed<UI_I_TableTexts>(() => ({
190
- searchHere: localization.value.common.searchHere,
191
- rowsPerPage: localization.value.common.rowsPerPage,
192
- of: localization.value.common.of,
193
- selected: localization.value.common.selected,
194
- columns: localization.value.common.columns,
195
- previous: localization.value.common.previous,
196
- next: localization.value.common.next,
197
- noItemsFound: localization.value.common.noItemsFound,
198
- exportAll: localization.value.common.exportAll,
199
- exportSelected: localization.value.common.exportSelected,
200
- all: localization.value.common.all,
201
- filter: localization.value.common.filter,
202
- }))
203
-
204
- const data = computed<UI_I_DataTable>(() => ({
205
- id: 'physical-adapters-table',
206
- selectedRows: [],
207
- isAllSelected: false,
208
- header: headItems.value,
209
- body: bodyItems.value,
210
- }))
211
-
212
- const headItems = computed<UI_I_DataTableHeader[]>(() =>
213
- getHeaderDataFunc(localization.value)
214
- )
215
- const bodyItems = ref<UI_I_DataTableBody[]>([])
216
-
217
- watch(
218
- () => networkTableData.value,
219
- (newValue: UI_I_PhysicalAdapter[]) => {
220
- console.log(!newValue?.length)
221
- if (!newValue?.length) {
222
- bodyItems.value = []
223
- } else {
224
- bodyItems.value = getBodyDataFunc(newValue, selectedRow.value)
225
- }
226
- },
227
- { deep: true }
228
- )
229
-
230
- const skeletonDataLocal = ref<UI_I_DataTableSkeleton>(skeletonData)
231
-
232
- const actionsIsShow = ref<string>()
233
-
234
- const onShowEditModal = (id: string): void => {
235
- emits('edit', id)
236
- }
237
- </script>
238
-
239
- <style scoped lang="scss">
240
- .physical-adapters-table {
241
- height: calc(100% - 52px);
242
- }
243
-
244
- :deep(.table-container) {
245
- height: 100%;
246
- grid-template-rows: min-content auto min-content;
247
- &.full-width-search {
248
- grid-template-rows: min-content min-content auto min-content;
249
- }
250
- }
251
-
252
- .actions {
253
- justify-content: flex-end;
254
- padding-right: 4px;
255
-
256
- .action-icon {
257
- height: 20px;
258
- width: 20px;
259
- color: var(--actions-icon-color);
260
-
261
- &:hover {
262
- color: var(--actions-icon-icative-color);
263
- }
264
- }
265
- }
266
-
267
- .title-actions {
268
- display: flex;
269
- column-gap: 16px;
270
-
271
- :deep(.ui-btn) {
272
- white-space: nowrap;
273
- }
274
- }
275
-
276
- :deep(.ui-button-group) {
277
- padding-left: 0;
278
- }
279
-
280
- :deep(.table-fixed-height) {
281
- all: unset;
282
- .table-fixed-full-height {
283
- all: unset;
284
- }
285
- }
286
-
287
- :deep(.data-table-skeleton) {
288
- height: 100%;
289
- grid-template-rows: min-content auto min-content;
290
- &.full-width-search {
291
- grid-template-rows: min-content min-content auto min-content;
292
- }
293
-
294
- .body.with-actions {
295
- height: calc(100% - 92px);
296
- }
297
- }
298
-
299
- .skeleton-header {
300
- display: flex;
301
- justify-content: space-between;
302
- align-items: center;
303
-
304
- .right-skeleton {
305
- display: flex;
306
- column-gap: 16px;
307
- }
308
- }
309
-
310
- .cell {
311
- display: flex;
312
- column-gap: 4px;
313
-
314
- &-icon {
315
- height: 18px;
316
-
317
- &.cell-icon-device {
318
- color: var(--text-green);
319
- }
320
- }
321
- &-text {
322
- line-height: 16px;
323
- }
324
- }
325
-
326
- :deep(.status-container) {
327
- span:not(.icon-container) {
328
- white-space: nowrap;
329
- }
330
- }
331
- </style>
1
+ <template>
2
+ <div class="physical-adapters-table">
3
+ <ui-data-table
4
+ :data="data"
5
+ :options="options"
6
+ :total-items="props.adapters.total_items"
7
+ :total-pages="props.adapters.total_pages"
8
+ :texts="texts"
9
+ :skeleton="skeletonDataLocal"
10
+ :actions="actions"
11
+ :loading="props.isLoading"
12
+ test-id="physical-adapters-table"
13
+ class="physical-adapters-tables"
14
+ server-off
15
+ @action="onSelectAction"
16
+ @select-row="onSelectRow"
17
+ >
18
+ <template #insteadOfTitleActions>
19
+ <div class="title-actions">
20
+ <ui-button
21
+ test-id="refresh-physical-adapters-btn"
22
+ class="refresh-btn"
23
+ size="md"
24
+ variant="outline"
25
+ @click="emits('refresh')"
26
+ >
27
+ <template #icon> <ui-icon name="reset" width="24" /> </template>
28
+ {{ localization.common.refresh }}
29
+ </ui-button>
30
+ <ui-button
31
+ v-permission="
32
+ 'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
33
+ "
34
+ test-id="add-physical-adapters-btn"
35
+ class="add-btn"
36
+ size="md"
37
+ @click="emits('add')"
38
+ >
39
+ <template #icon> <ui-icon name="plus" width="24" /> </template>
40
+ {{ localization.common.addNetworkingWithDots }}
41
+ </ui-button>
42
+ </div>
43
+ </template>
44
+
45
+ <template #icon="{ item }">
46
+ <div v-if="item.data.icon !== 'pill'" class="cell">
47
+ <div
48
+ :class="[
49
+ 'cell-icon',
50
+ {
51
+ 'cell-icon-device': item.col === 'col0',
52
+ },
53
+ ]"
54
+ >
55
+ <ui-icon
56
+ v-if="item.col === 'col0'"
57
+ :name="item.data.icon"
58
+ width="18"
59
+ height="18"
60
+ />
61
+ <span v-else class="network-lib-ui-icon-vswitch"></span>
62
+ </div>
63
+ <span class="cell-text">
64
+ {{ item.text }}
65
+ </span>
66
+ </div>
67
+ <div v-else>
68
+ <ui-status-pill
69
+ :type="item.data.value ? 'success' : 'error'"
70
+ :text="item.text"
71
+ size="md"
72
+ />
73
+ </div>
74
+ </template>
75
+
76
+ <template #default-actions="{ item }">
77
+ <div class="actions flex w-full">
78
+ <ui-tooltip
79
+ :id="`host-item-${item.data.id}-action`"
80
+ :test-id="`host-item-${item.data.id}-action-tooltip`"
81
+ size="md"
82
+ position="bottom"
83
+ position-by-tooltip="center"
84
+ show-type="variant-1"
85
+ timing="660"
86
+ >
87
+ <template #target>
88
+ <ui-button
89
+ :id="`host-item-${item.data.id}-action`"
90
+ :test-id="`host-item-${item.data.id}-action`"
91
+ variant="text"
92
+ is-without-height
93
+ is-without-sizes
94
+ @click.stop="onShowEditModal(item.data.id)"
95
+ >
96
+ <span class="action-icon">
97
+ <ui-icon name="edit" width="20" height="20" />
98
+ </span>
99
+ </ui-button>
100
+ </template>
101
+ <template #content>
102
+ <div class="tooltip-text">
103
+ {{ localization.common.edit }}
104
+ </div>
105
+ </template>
106
+ </ui-tooltip>
107
+ </div>
108
+ </template>
109
+
110
+ <template #skeleton-header>
111
+ <div class="skeleton-header">
112
+ <div class="left-skeleton">
113
+ <ui-skeleton-item width="80" height="20" />
114
+ </div>
115
+ <div class="right-skeleton">
116
+ <ui-skeleton-item width="112" height="36" border-radius="8" />
117
+ <ui-skeleton-item width="160" height="36" border-radius="8" />
118
+ </div>
119
+ </div>
120
+ </template>
121
+ </ui-data-table>
122
+ </div>
123
+ </template>
124
+
125
+ <script setup lang="ts">
126
+ import type {
127
+ UI_I_DataTable,
128
+ UI_I_DataTableBody,
129
+ UI_I_DataTableHeader,
130
+ UI_I_DataTableSkeleton,
131
+ UI_I_TableTexts,
132
+ } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
133
+ import type { UI_I_ButtonsGroup } from '~/node_modules/bfg-uikit/components/ui/button/group/lib/models/interfaces'
134
+ import type {
135
+ UI_I_Localization,
136
+ UI_I_ItemsWithTotalCounts,
137
+ } from '~/lib/models/interfaces'
138
+ import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
139
+ import type {
140
+ UI_I_BodyItem,
141
+ UI_I_HeadItem,
142
+ } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
143
+ import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
144
+ import type { UI_I_PhysicalAdapter } from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
145
+ import {
146
+ getBodyDataFunc,
147
+ getHeaderDataFunc,
148
+ options,
149
+ skeletonData,
150
+ } from '~/components/common/configure/physicalAdapters/tableView/lib/config/physicalAdaptersTableConfigNew'
151
+ import { constructPhysicalAdaptersTableFunc } from '~/components/common/configure/physicalAdapters/tableView/mappers/mappers'
152
+
153
+ const props = defineProps<{
154
+ adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
155
+ isLoading: boolean
156
+ hasSelectedAdapter: boolean
157
+ }>()
158
+
159
+ const emits = defineEmits<{
160
+ (event: 'add'): void
161
+ (event: 'refresh'): void
162
+ (event: 'edit', id?: string): void
163
+ }>()
164
+
165
+ const localization = computed<UI_I_Localization>(() => useLocal())
166
+
167
+ const actions = computed<UI_I_ButtonsGroup>(() => [
168
+ {
169
+ text: localization.value.common.edit,
170
+ value: 'edit',
171
+ testId: 'edit-physical-adapted',
172
+ id: 'edit-physical-adapted',
173
+ disabled: !props.hasSelectedAdapter,
174
+ },
175
+ ])
176
+
177
+ const onSelectAction = (action: string): void => {
178
+ emits(action)
179
+ }
180
+
181
+ const selectedRow = defineModel<UI_T_SelectedRow>()
182
+
183
+ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
184
+ if (typeof value[0].row !== 'number') return
185
+ selectedRow.value = value[0].row
186
+ }
187
+
188
+ const networkTableData = computed<UI_I_PhysicalAdapter[]>(() =>
189
+ constructPhysicalAdaptersTableFunc(props.adapters.items, localization.value)
190
+ )
191
+
192
+ const texts = computed<UI_I_TableTexts>(() => ({
193
+ searchHere: localization.value.common.searchHere,
194
+ rowsPerPage: localization.value.common.rowsPerPage,
195
+ of: localization.value.common.of,
196
+ selected: localization.value.common.selected,
197
+ columns: localization.value.common.columns,
198
+ previous: localization.value.common.previous,
199
+ next: localization.value.common.next,
200
+ noItemsFound: localization.value.common.noItemsFound,
201
+ exportAll: localization.value.common.exportAll,
202
+ exportSelected: localization.value.common.exportSelected,
203
+ all: localization.value.common.all,
204
+ filter: localization.value.common.filter,
205
+ }))
206
+
207
+ const data = computed<UI_I_DataTable>(() => ({
208
+ id: 'physical-adapters-table',
209
+ selectedRows: [],
210
+ isAllSelected: false,
211
+ header: headItems.value,
212
+ body: bodyItems.value,
213
+ }))
214
+
215
+ const headItems = computed<UI_I_DataTableHeader[]>(() =>
216
+ getHeaderDataFunc(localization.value)
217
+ )
218
+ const bodyItems = ref<UI_I_DataTableBody[]>([])
219
+
220
+ watch(
221
+ () => networkTableData.value,
222
+ (newValue: UI_I_PhysicalAdapter[]) => {
223
+ console.log(!newValue?.length)
224
+ if (!newValue?.length) {
225
+ bodyItems.value = []
226
+ } else {
227
+ bodyItems.value = getBodyDataFunc(newValue, selectedRow.value)
228
+ }
229
+ },
230
+ { deep: true }
231
+ )
232
+
233
+ const skeletonDataLocal = ref<UI_I_DataTableSkeleton>(skeletonData)
234
+
235
+ const actionsIsShow = ref<string>()
236
+
237
+ const onShowEditModal = (id: string): void => {
238
+ emits('edit', id)
239
+ }
240
+ </script>
241
+
242
+ <style scoped lang="scss">
243
+ .physical-adapters-table {
244
+ height: calc(100% - 52px);
245
+ }
246
+
247
+ :deep(.table-container) {
248
+ height: 100%;
249
+ grid-template-rows: min-content auto min-content;
250
+ &.full-width-search {
251
+ grid-template-rows: min-content min-content auto min-content;
252
+ }
253
+ }
254
+
255
+ .actions {
256
+ justify-content: flex-end;
257
+ padding-right: 4px;
258
+
259
+ .action-icon {
260
+ height: 20px;
261
+ width: 20px;
262
+ color: var(--actions-icon-color);
263
+
264
+ &:hover {
265
+ color: var(--actions-icon-icative-color);
266
+ }
267
+ }
268
+ }
269
+
270
+ .title-actions {
271
+ display: flex;
272
+ column-gap: 16px;
273
+
274
+ :deep(.ui-btn) {
275
+ white-space: nowrap;
276
+ }
277
+ }
278
+
279
+ :deep(.ui-button-group) {
280
+ padding-left: 0;
281
+ }
282
+
283
+ :deep(.table-fixed-height) {
284
+ all: unset;
285
+ .table-fixed-full-height {
286
+ all: unset;
287
+ }
288
+ }
289
+
290
+ :deep(.data-table-skeleton) {
291
+ height: 100%;
292
+ grid-template-rows: min-content auto min-content;
293
+ &.full-width-search {
294
+ grid-template-rows: min-content min-content auto min-content;
295
+ }
296
+
297
+ .body.with-actions {
298
+ height: calc(100% - 92px);
299
+ }
300
+ }
301
+
302
+ .skeleton-header {
303
+ display: flex;
304
+ justify-content: space-between;
305
+ align-items: center;
306
+
307
+ .right-skeleton {
308
+ display: flex;
309
+ column-gap: 16px;
310
+ }
311
+ }
312
+
313
+ .cell {
314
+ display: flex;
315
+ column-gap: 4px;
316
+
317
+ &-icon {
318
+ height: 18px;
319
+
320
+ &.cell-icon-device {
321
+ color: var(--text-green);
322
+ }
323
+ }
324
+ &-text {
325
+ line-height: 16px;
326
+ }
327
+ }
328
+
329
+ :deep(.status-container) {
330
+ span:not(.icon-container) {
331
+ white-space: nowrap;
332
+ }
333
+ }
334
+ </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.5.899",
4
+ "version": "1.5.900",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",