bfg-common 1.3.143 → 1.3.145
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.
- package/assets/localization/local_be.json +7 -1
- package/assets/localization/local_en.json +7 -1
- package/assets/localization/local_hy.json +7 -1
- package/assets/localization/local_kk.json +7 -1
- package/assets/localization/local_ru.json +7 -1
- package/assets/localization/local_zh.json +7 -1
- package/assets/scss/common/icons/icons-2.scss +222 -222
- package/components/atoms/switch/Switch.vue +107 -107
- package/components/atoms/table/dataGrid/DataGrid.vue +1576 -1576
- package/components/common/diagramMain/lib/models/interfaces.ts +2 -0
- package/components/common/modals/Confirmation.vue +3 -1
- package/components/common/monitor/advanced/tools/lib/config/advancedToolbar.ts +130 -130
- package/components/common/monitor/overview/filters/lib/models/types.ts +13 -13
- package/components/common/pages/Tasks.vue +120 -120
- package/components/common/recursionTree/RecursionTree.vue +203 -203
- package/components/common/vm/actions/add/Add.vue +575 -575
- package/components/common/vm/actions/clone/Clone.vue +518 -518
- package/components/common/vm/actions/common/customizeHardware/CustomizeHardware.vue +269 -269
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardware.vue +682 -682
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CpuModel.vue +220 -220
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/NewPciDevice.vue +164 -164
- package/components/common/vm/actions/common/select/storage/lib/config/config.ts +166 -166
- package/components/common/vm/actions/editSettings/EditSettings.vue +313 -313
- package/composables/useAppVersion.ts +21 -21
- package/composables/useEnvLanguage.ts +20 -20
- package/composables/useLocal.ts +38 -38
- package/lib/utils/sendTask.ts +72 -72
- package/minify.js +146 -146
- package/package.json +1 -1
- package/public/spice-console/application/codec.js +257 -257
- package/public/spice-console/lib/rasterEngine.js +907 -907
- package/public/spice-console/network/spicechannel.js +369 -369
- package/store/main/lib/interfaces.ts +9 -9
- package/store/tasks/actions.ts +133 -133
- package/store/tasks/getters.ts +25 -25
- package/store/tasks/lib/models/interfaces.ts +18 -18
- package/store/tasks/mutations.ts +58 -58
- package/store/tasks/state.ts +16 -16
|
@@ -522,6 +522,8 @@ export interface API_UI_I_SwitchItem {
|
|
|
522
522
|
}
|
|
523
523
|
export interface API_UI_I_SwitchItems {
|
|
524
524
|
items: API_UI_I_SwitchItem[]
|
|
525
|
+
total_items: number
|
|
526
|
+
total_pages: number
|
|
525
527
|
}
|
|
526
528
|
// API_UI_I_D_VSwitchItem
|
|
527
529
|
export interface UI_I_SelectedSwitchPositions {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<atoms-modal
|
|
3
3
|
show
|
|
4
|
-
width="
|
|
4
|
+
:width="props.width"
|
|
5
5
|
class="confirm-modal"
|
|
6
6
|
:title="props.headline"
|
|
7
7
|
:second-title="props.subTitle"
|
|
@@ -44,6 +44,7 @@ const props = withDefaults(
|
|
|
44
44
|
testId?: string
|
|
45
45
|
type?: 'confirm' | 'remove'
|
|
46
46
|
variantTextButton?: 'ok' | 'confirm' | 'remove'
|
|
47
|
+
width: string
|
|
47
48
|
}>(),
|
|
48
49
|
{
|
|
49
50
|
testId: 'common-confirmation',
|
|
@@ -52,6 +53,7 @@ const props = withDefaults(
|
|
|
52
53
|
type: 'confirm',
|
|
53
54
|
description: '',
|
|
54
55
|
variantTextButton: 'ok',
|
|
56
|
+
width: '580px',
|
|
55
57
|
}
|
|
56
58
|
)
|
|
57
59
|
const emits = defineEmits<{
|
|
@@ -1,130 +1,130 @@
|
|
|
1
|
-
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
2
|
-
import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
|
|
3
|
-
import type { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/lib/models/interfaces'
|
|
4
|
-
import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
|
|
5
|
-
import type { UI_I_OptionData } from '~/components/common/monitor/advanced/lib/models/interfaces'
|
|
6
|
-
import type { UI_T_Project } from '~/lib/models/types'
|
|
7
|
-
|
|
8
|
-
export const periodFunc = (
|
|
9
|
-
localization: UI_I_Localization,
|
|
10
|
-
selectedTimespanType: string
|
|
11
|
-
): UI_I_OptionItem[] => {
|
|
12
|
-
const result = [
|
|
13
|
-
{
|
|
14
|
-
text: localization.realTime,
|
|
15
|
-
value: 'real_time',
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
text: localization.lastDay,
|
|
19
|
-
value: 'last_day',
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
text: localization.lastWeek,
|
|
23
|
-
value: 'last_week',
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
text: localization.lastMonth,
|
|
27
|
-
value: 'last_month',
|
|
28
|
-
},
|
|
29
|
-
// {
|
|
30
|
-
// text: localization.lastYear,
|
|
31
|
-
// value: 'last_year',
|
|
32
|
-
// },
|
|
33
|
-
]
|
|
34
|
-
|
|
35
|
-
if (selectedTimespanType === 'custom_interval') {
|
|
36
|
-
result.push({
|
|
37
|
-
text: localization.customInterval,
|
|
38
|
-
value: 'custom_interval',
|
|
39
|
-
})
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
return result
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export const viewFunc = (
|
|
46
|
-
localization: UI_I_Localization,
|
|
47
|
-
type: UI_T_AdvancedType,
|
|
48
|
-
optionsNames?: string[]
|
|
49
|
-
): UI_I_OptionItem[] => {
|
|
50
|
-
const viewData: UI_I_OptionData = {
|
|
51
|
-
zone: [
|
|
52
|
-
{ text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
|
|
53
|
-
],
|
|
54
|
-
cluster: [
|
|
55
|
-
{ text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
|
|
56
|
-
],
|
|
57
|
-
datacenter: [
|
|
58
|
-
{
|
|
59
|
-
text: localization.virtualMachineOperations,
|
|
60
|
-
value: 'virtualMachineOperations',
|
|
61
|
-
},
|
|
62
|
-
],
|
|
63
|
-
host: [
|
|
64
|
-
{ text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
|
|
65
|
-
// { text: localization.datastore, value: 'datastore' },
|
|
66
|
-
{ text: localization.memory, value: 'memory' },
|
|
67
|
-
{ text: localization.disk, value: 'disk' },
|
|
68
|
-
{ text: localization.network, value: 'network' },
|
|
69
|
-
// { text: localization.power, value: 'power' },
|
|
70
|
-
// { text: localization.storageAdapters, value: 'storageAdapters' },
|
|
71
|
-
// { text: localization.storagePath, value: 'storagePath' },
|
|
72
|
-
// { text: localization.system, value: 'system' },
|
|
73
|
-
// {
|
|
74
|
-
// text: localization.procuratorReplication,
|
|
75
|
-
// value: 'procuratorReplication',
|
|
76
|
-
// },
|
|
77
|
-
],
|
|
78
|
-
vm: [
|
|
79
|
-
{ text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
|
|
80
|
-
// { text: localization.cpuUsageInMhz, value: 'cpuUsageInMhz' },
|
|
81
|
-
// { text: localization.cpuReady, value: 'cpuReady' },
|
|
82
|
-
// { text: localization.datastore, value: 'datastore' },
|
|
83
|
-
{ text: localization.memory, value: 'memory' },
|
|
84
|
-
{ text: localization.disk, value: 'disk' },
|
|
85
|
-
{ text: localization.network, value: 'network' },
|
|
86
|
-
// { text: localization.power, value: 'power' },
|
|
87
|
-
// { text: localization.virtualDisk, value: 'virtualDisk' },
|
|
88
|
-
],
|
|
89
|
-
}
|
|
90
|
-
const currentOptions = viewData[type]
|
|
91
|
-
|
|
92
|
-
if (optionsNames) {
|
|
93
|
-
optionsNames.forEach((item) => {
|
|
94
|
-
currentOptions.push({
|
|
95
|
-
text: item,
|
|
96
|
-
value: item,
|
|
97
|
-
})
|
|
98
|
-
})
|
|
99
|
-
}
|
|
100
|
-
return currentOptions
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
export const exportFunc = (
|
|
104
|
-
localization: UI_I_Localization
|
|
105
|
-
): UI_I_DropMenu<string>[] => [
|
|
106
|
-
{ text: localization.toPng + '...', action: 'png' },
|
|
107
|
-
{ text: localization.toJpeg + '...', action: 'jpeg' },
|
|
108
|
-
{ text: localization.toSvg + '...', action: 'svg' },
|
|
109
|
-
{ text: localization.toCsv + '...', action: 'csv' },
|
|
110
|
-
]
|
|
111
|
-
|
|
112
|
-
export const getCurrentOptionsStorageFunc = (
|
|
113
|
-
routeType: string,
|
|
114
|
-
project: UI_T_Project
|
|
115
|
-
): string[] => {
|
|
116
|
-
const prefix = project === 'sphere'
|
|
117
|
-
const optionsNames = []
|
|
118
|
-
for (const key of Object.entries(localStorage)) {
|
|
119
|
-
if (key[0].includes('ChartOptions')) {
|
|
120
|
-
const currentOptions = useLocalStorage(key[0], undefined, prefix)
|
|
121
|
-
if (
|
|
122
|
-
key[0].includes('ChartOptions') &&
|
|
123
|
-
currentOptions.routeType === routeType
|
|
124
|
-
) {
|
|
125
|
-
optionsNames.push(key[0].replace('ChartOptions', ''))
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
return optionsNames
|
|
130
|
-
}
|
|
1
|
+
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
2
|
+
import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
|
|
3
|
+
import type { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/lib/models/interfaces'
|
|
4
|
+
import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
|
|
5
|
+
import type { UI_I_OptionData } from '~/components/common/monitor/advanced/lib/models/interfaces'
|
|
6
|
+
import type { UI_T_Project } from '~/lib/models/types'
|
|
7
|
+
|
|
8
|
+
export const periodFunc = (
|
|
9
|
+
localization: UI_I_Localization,
|
|
10
|
+
selectedTimespanType: string
|
|
11
|
+
): UI_I_OptionItem[] => {
|
|
12
|
+
const result = [
|
|
13
|
+
{
|
|
14
|
+
text: localization.realTime,
|
|
15
|
+
value: 'real_time',
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
text: localization.lastDay,
|
|
19
|
+
value: 'last_day',
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
text: localization.lastWeek,
|
|
23
|
+
value: 'last_week',
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
text: localization.lastMonth,
|
|
27
|
+
value: 'last_month',
|
|
28
|
+
},
|
|
29
|
+
// {
|
|
30
|
+
// text: localization.lastYear,
|
|
31
|
+
// value: 'last_year',
|
|
32
|
+
// },
|
|
33
|
+
]
|
|
34
|
+
|
|
35
|
+
if (selectedTimespanType === 'custom_interval') {
|
|
36
|
+
result.push({
|
|
37
|
+
text: localization.customInterval,
|
|
38
|
+
value: 'custom_interval',
|
|
39
|
+
})
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return result
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export const viewFunc = (
|
|
46
|
+
localization: UI_I_Localization,
|
|
47
|
+
type: UI_T_AdvancedType,
|
|
48
|
+
optionsNames?: string[]
|
|
49
|
+
): UI_I_OptionItem[] => {
|
|
50
|
+
const viewData: UI_I_OptionData = {
|
|
51
|
+
zone: [
|
|
52
|
+
{ text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
|
|
53
|
+
],
|
|
54
|
+
cluster: [
|
|
55
|
+
{ text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
|
|
56
|
+
],
|
|
57
|
+
datacenter: [
|
|
58
|
+
{
|
|
59
|
+
text: localization.virtualMachineOperations,
|
|
60
|
+
value: 'virtualMachineOperations',
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
host: [
|
|
64
|
+
{ text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
|
|
65
|
+
// { text: localization.datastore, value: 'datastore' },
|
|
66
|
+
{ text: localization.memory, value: 'memory' },
|
|
67
|
+
{ text: localization.disk, value: 'disk' },
|
|
68
|
+
{ text: localization.network, value: 'network' },
|
|
69
|
+
// { text: localization.power, value: 'power' },
|
|
70
|
+
// { text: localization.storageAdapters, value: 'storageAdapters' },
|
|
71
|
+
// { text: localization.storagePath, value: 'storagePath' },
|
|
72
|
+
// { text: localization.system, value: 'system' },
|
|
73
|
+
// {
|
|
74
|
+
// text: localization.procuratorReplication,
|
|
75
|
+
// value: 'procuratorReplication',
|
|
76
|
+
// },
|
|
77
|
+
],
|
|
78
|
+
vm: [
|
|
79
|
+
{ text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
|
|
80
|
+
// { text: localization.cpuUsageInMhz, value: 'cpuUsageInMhz' },
|
|
81
|
+
// { text: localization.cpuReady, value: 'cpuReady' },
|
|
82
|
+
// { text: localization.datastore, value: 'datastore' },
|
|
83
|
+
{ text: localization.memory, value: 'memory' },
|
|
84
|
+
{ text: localization.disk, value: 'disk' },
|
|
85
|
+
{ text: localization.network, value: 'network' },
|
|
86
|
+
// { text: localization.power, value: 'power' },
|
|
87
|
+
// { text: localization.virtualDisk, value: 'virtualDisk' },
|
|
88
|
+
],
|
|
89
|
+
}
|
|
90
|
+
const currentOptions = viewData[type]
|
|
91
|
+
|
|
92
|
+
if (optionsNames) {
|
|
93
|
+
optionsNames.forEach((item) => {
|
|
94
|
+
currentOptions.push({
|
|
95
|
+
text: item,
|
|
96
|
+
value: item,
|
|
97
|
+
})
|
|
98
|
+
})
|
|
99
|
+
}
|
|
100
|
+
return currentOptions
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export const exportFunc = (
|
|
104
|
+
localization: UI_I_Localization
|
|
105
|
+
): UI_I_DropMenu<string>[] => [
|
|
106
|
+
{ text: localization.toPng + '...', action: 'png' },
|
|
107
|
+
{ text: localization.toJpeg + '...', action: 'jpeg' },
|
|
108
|
+
{ text: localization.toSvg + '...', action: 'svg' },
|
|
109
|
+
{ text: localization.toCsv + '...', action: 'csv' },
|
|
110
|
+
]
|
|
111
|
+
|
|
112
|
+
export const getCurrentOptionsStorageFunc = (
|
|
113
|
+
routeType: string,
|
|
114
|
+
project: UI_T_Project
|
|
115
|
+
): string[] => {
|
|
116
|
+
const prefix = project === 'sphere'
|
|
117
|
+
const optionsNames = []
|
|
118
|
+
for (const key of Object.entries(localStorage)) {
|
|
119
|
+
if (key[0].includes('ChartOptions')) {
|
|
120
|
+
const currentOptions = useLocalStorage(key[0], undefined, prefix)
|
|
121
|
+
if (
|
|
122
|
+
key[0].includes('ChartOptions') &&
|
|
123
|
+
currentOptions.routeType === routeType
|
|
124
|
+
) {
|
|
125
|
+
optionsNames.push(key[0].replace('ChartOptions', ''))
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
return optionsNames
|
|
130
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export type UI_T_OverviewViewType =
|
|
2
|
-
| 'zone'
|
|
3
|
-
| 'host'
|
|
4
|
-
| 'vm'
|
|
5
|
-
| 'datacenter'
|
|
6
|
-
| 'cluster'
|
|
7
|
-
|
|
8
|
-
export type UI_T_OverviewRequestType =
|
|
9
|
-
| 'cluster'
|
|
10
|
-
| 'zone'
|
|
11
|
-
| 'hosts'
|
|
12
|
-
| 'vms'
|
|
13
|
-
| 'datacenters'
|
|
1
|
+
export type UI_T_OverviewViewType =
|
|
2
|
+
| 'zone'
|
|
3
|
+
| 'host'
|
|
4
|
+
| 'vm'
|
|
5
|
+
| 'datacenter'
|
|
6
|
+
| 'cluster'
|
|
7
|
+
|
|
8
|
+
export type UI_T_OverviewRequestType =
|
|
9
|
+
| 'cluster'
|
|
10
|
+
| 'zone'
|
|
11
|
+
| 'hosts'
|
|
12
|
+
| 'vms'
|
|
13
|
+
| 'datacenters'
|
|
@@ -1,120 +1,120 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="tasks">
|
|
3
|
-
<common-headline
|
|
4
|
-
:headline="localization.taskConsole"
|
|
5
|
-
class="tasks__headline"
|
|
6
|
-
/>
|
|
7
|
-
|
|
8
|
-
<div class="btn-group">
|
|
9
|
-
<button
|
|
10
|
-
id="task-previous-button"
|
|
11
|
-
class="btn btn-sm btn-link nav-link"
|
|
12
|
-
:disabled="pagination.page === 1"
|
|
13
|
-
@click="onClickButton('previous')"
|
|
14
|
-
>
|
|
15
|
-
{{ localization.previous }}
|
|
16
|
-
</button>
|
|
17
|
-
|
|
18
|
-
<button
|
|
19
|
-
id="task-next-button"
|
|
20
|
-
class="btn btn-sm btn-link nav-link"
|
|
21
|
-
:disabled="pagination.page === tasksList?.total_pages"
|
|
22
|
-
@click="onClickButton('next')"
|
|
23
|
-
>
|
|
24
|
-
{{ localization.next }}
|
|
25
|
-
</button>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<templates-tasks-table-view
|
|
29
|
-
:data-table="tasksList?.items || []"
|
|
30
|
-
:total-items="tasksList?.total_items || 0"
|
|
31
|
-
:total-pages="tasksList?.total_pages || 1"
|
|
32
|
-
:pagination="pagination"
|
|
33
|
-
:loading="isLoading"
|
|
34
|
-
@pagination="onUpdatePagination"
|
|
35
|
-
@sort="onSortTable"
|
|
36
|
-
/>
|
|
37
|
-
</div>
|
|
38
|
-
</template>
|
|
39
|
-
|
|
40
|
-
<script lang="ts" setup>
|
|
41
|
-
import type {
|
|
42
|
-
UI_I_Localization,
|
|
43
|
-
} from '~/lib/models/interfaces'
|
|
44
|
-
import type {
|
|
45
|
-
UI_I_Pagination,
|
|
46
|
-
UI_I_DataTableQuery,
|
|
47
|
-
} from '~/lib/models/table/interfaces'
|
|
48
|
-
import type { UI_I_Task } from '~/lib/models/store/tasks/interfaces'
|
|
49
|
-
|
|
50
|
-
definePageMeta({
|
|
51
|
-
middleware: ['auth'],
|
|
52
|
-
})
|
|
53
|
-
|
|
54
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
55
|
-
const { $store }: any = useNuxtApp()
|
|
56
|
-
|
|
57
|
-
const pagination = ref<UI_I_Pagination>({
|
|
58
|
-
page: 1,
|
|
59
|
-
pageSize: 100,
|
|
60
|
-
})
|
|
61
|
-
const sort = ref<string | null>(null)
|
|
62
|
-
|
|
63
|
-
const tasksList = computed<UI_I_Task>(() => $store.getters['tasks/getTaskList'])
|
|
64
|
-
|
|
65
|
-
const onClickButton = (status: string): void => {
|
|
66
|
-
if (status === 'next') {
|
|
67
|
-
pagination.value.page += 1
|
|
68
|
-
return
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
pagination.value.page -= 1
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
const getTasks = async (): Promise<void> => {
|
|
75
|
-
pauseGlobalRefresh()
|
|
76
|
-
|
|
77
|
-
const payload: UI_I_DataTableQuery = {
|
|
78
|
-
...pagination.value,
|
|
79
|
-
sortBy: sort.value || '',
|
|
80
|
-
}
|
|
81
|
-
await $store.dispatch('tasks/A_GET_TASKS', payload)
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
const onUpdatePagination = (event: UI_I_Pagination): void => {
|
|
85
|
-
pagination.value = event
|
|
86
|
-
getTasks()
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
const onSortTable = (event: string): void => {
|
|
90
|
-
sort.value = event
|
|
91
|
-
getTasks()
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
const isLoading = computed<boolean>(() =>
|
|
95
|
-
$store.getters['tasks/getLoading']('tasks')
|
|
96
|
-
)
|
|
97
|
-
const pauseGlobalRefresh = (): void => {
|
|
98
|
-
const tasksLastRequestType = $store.getters['tasks/getTasksLastRequestType']
|
|
99
|
-
$store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', tasksLastRequestType)
|
|
100
|
-
}
|
|
101
|
-
onUnmounted(() => {
|
|
102
|
-
pauseGlobalRefresh()
|
|
103
|
-
})
|
|
104
|
-
</script>
|
|
105
|
-
|
|
106
|
-
<style lang="scss">
|
|
107
|
-
@import '~/node_modules/bfg-common/assets/scss/common/mixins';
|
|
108
|
-
.tasks {
|
|
109
|
-
@include flex($dir: column);
|
|
110
|
-
height: 100%;
|
|
111
|
-
padding-left: 10px;
|
|
112
|
-
&__headline {
|
|
113
|
-
padding-left: 10px;
|
|
114
|
-
margin-bottom: 0.6rem;
|
|
115
|
-
}
|
|
116
|
-
.btn {
|
|
117
|
-
text-transform: uppercase;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="tasks">
|
|
3
|
+
<common-headline
|
|
4
|
+
:headline="localization.taskConsole"
|
|
5
|
+
class="tasks__headline"
|
|
6
|
+
/>
|
|
7
|
+
|
|
8
|
+
<div class="btn-group">
|
|
9
|
+
<button
|
|
10
|
+
id="task-previous-button"
|
|
11
|
+
class="btn btn-sm btn-link nav-link"
|
|
12
|
+
:disabled="pagination.page === 1"
|
|
13
|
+
@click="onClickButton('previous')"
|
|
14
|
+
>
|
|
15
|
+
{{ localization.previous }}
|
|
16
|
+
</button>
|
|
17
|
+
|
|
18
|
+
<button
|
|
19
|
+
id="task-next-button"
|
|
20
|
+
class="btn btn-sm btn-link nav-link"
|
|
21
|
+
:disabled="pagination.page === tasksList?.total_pages"
|
|
22
|
+
@click="onClickButton('next')"
|
|
23
|
+
>
|
|
24
|
+
{{ localization.next }}
|
|
25
|
+
</button>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<templates-tasks-table-view
|
|
29
|
+
:data-table="tasksList?.items || []"
|
|
30
|
+
:total-items="tasksList?.total_items || 0"
|
|
31
|
+
:total-pages="tasksList?.total_pages || 1"
|
|
32
|
+
:pagination="pagination"
|
|
33
|
+
:loading="isLoading"
|
|
34
|
+
@pagination="onUpdatePagination"
|
|
35
|
+
@sort="onSortTable"
|
|
36
|
+
/>
|
|
37
|
+
</div>
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<script lang="ts" setup>
|
|
41
|
+
import type {
|
|
42
|
+
UI_I_Localization,
|
|
43
|
+
} from '~/lib/models/interfaces'
|
|
44
|
+
import type {
|
|
45
|
+
UI_I_Pagination,
|
|
46
|
+
UI_I_DataTableQuery,
|
|
47
|
+
} from '~/lib/models/table/interfaces'
|
|
48
|
+
import type { UI_I_Task } from '~/lib/models/store/tasks/interfaces'
|
|
49
|
+
|
|
50
|
+
definePageMeta({
|
|
51
|
+
middleware: ['auth'],
|
|
52
|
+
})
|
|
53
|
+
|
|
54
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
55
|
+
const { $store }: any = useNuxtApp()
|
|
56
|
+
|
|
57
|
+
const pagination = ref<UI_I_Pagination>({
|
|
58
|
+
page: 1,
|
|
59
|
+
pageSize: 100,
|
|
60
|
+
})
|
|
61
|
+
const sort = ref<string | null>(null)
|
|
62
|
+
|
|
63
|
+
const tasksList = computed<UI_I_Task>(() => $store.getters['tasks/getTaskList'])
|
|
64
|
+
|
|
65
|
+
const onClickButton = (status: string): void => {
|
|
66
|
+
if (status === 'next') {
|
|
67
|
+
pagination.value.page += 1
|
|
68
|
+
return
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
pagination.value.page -= 1
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
const getTasks = async (): Promise<void> => {
|
|
75
|
+
pauseGlobalRefresh()
|
|
76
|
+
|
|
77
|
+
const payload: UI_I_DataTableQuery = {
|
|
78
|
+
...pagination.value,
|
|
79
|
+
sortBy: sort.value || '',
|
|
80
|
+
}
|
|
81
|
+
await $store.dispatch('tasks/A_GET_TASKS', payload)
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
const onUpdatePagination = (event: UI_I_Pagination): void => {
|
|
85
|
+
pagination.value = event
|
|
86
|
+
getTasks()
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
const onSortTable = (event: string): void => {
|
|
90
|
+
sort.value = event
|
|
91
|
+
getTasks()
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
const isLoading = computed<boolean>(() =>
|
|
95
|
+
$store.getters['tasks/getLoading']('tasks')
|
|
96
|
+
)
|
|
97
|
+
const pauseGlobalRefresh = (): void => {
|
|
98
|
+
const tasksLastRequestType = $store.getters['tasks/getTasksLastRequestType']
|
|
99
|
+
$store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', tasksLastRequestType)
|
|
100
|
+
}
|
|
101
|
+
onUnmounted(() => {
|
|
102
|
+
pauseGlobalRefresh()
|
|
103
|
+
})
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
<style lang="scss">
|
|
107
|
+
@import '~/node_modules/bfg-common/assets/scss/common/mixins';
|
|
108
|
+
.tasks {
|
|
109
|
+
@include flex($dir: column);
|
|
110
|
+
height: 100%;
|
|
111
|
+
padding-left: 10px;
|
|
112
|
+
&__headline {
|
|
113
|
+
padding-left: 10px;
|
|
114
|
+
margin-bottom: 0.6rem;
|
|
115
|
+
}
|
|
116
|
+
.btn {
|
|
117
|
+
text-transform: uppercase;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
</style>
|