bfg-common 1.2.19 → 1.2.21
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/components/atoms/alert/Notification.vue +167 -167
- package/components/atoms/autocomplete/Autocomplete.vue +236 -236
- package/components/atoms/datepicker/Datepicker.vue +612 -612
- package/components/atoms/list/SelectList.vue +62 -62
- package/components/atoms/nav/NavBar.vue +116 -116
- package/components/atoms/nav/VerticalNavBar.vue +89 -89
- package/components/atoms/notificationBar/NotificationBar.vue +175 -175
- package/components/atoms/perPage/PerPage.vue +52 -52
- package/components/atoms/popup/SimplePopup.vue +90 -90
- package/components/atoms/step/VerticalStep.vue +104 -104
- package/components/atoms/switch/Switch.vue +107 -107
- package/components/atoms/table/dataGrid/DataGridColumnSwitch.vue +206 -206
- package/components/atoms/table/dataGrid/DataGridPage.vue +189 -189
- package/components/atoms/tabs/Tabs.vue +189 -189
- package/components/atoms/tooltip/Signpost.vue +224 -224
- package/components/common/BadBrowser.vue +58 -0
- package/components/common/adapterManager/AddAdapterWarningModal.vue +82 -82
- package/components/common/adapterManager/NoActiveAdaptersModal.vue +62 -62
- package/components/common/adapterManager/NoConnectedActiveAdaptersModal.vue +62 -62
- package/components/common/browse/Browse.vue +182 -182
- package/components/common/browse/blocks/Title.vue +66 -66
- package/components/common/diagramMain/Diagram.vue +186 -186
- package/components/common/diagramMain/DiagramMain.vue +986 -986
- package/components/common/diagramMain/adapter/AdapterItem.vue +227 -227
- package/components/common/diagramMain/adapter/AdapterItems.vue +57 -57
- package/components/common/diagramMain/modals/editSettings/tabs/port/IpvFourSettings.vue +339 -339
- package/components/common/diagramMain/modals/editSettings/tabs/port/PortProperties.vue +202 -202
- package/components/common/diagramMain/modals/remove/RemoveModal.vue +226 -226
- package/components/common/diagramMain/network/Contents.vue +238 -238
- package/components/common/feedback/Buttons.vue +232 -232
- package/components/common/feedback/Message.vue +468 -468
- package/components/common/feedback/VisitPortal.vue +54 -54
- package/components/common/help/navbar/left/Left.vue +159 -159
- package/components/common/help/navbar/left/utils/constructAccordion.ts +27 -27
- package/components/common/mainNavigationPanel/MainNavigationPanel.vue +359 -359
- package/components/common/modals/Rename.vue +165 -165
- package/components/common/perPage/PerPage.vue +51 -51
- package/components/common/recursionTree/RecursionTree.vue +201 -201
- package/components/common/vm/actions/add/config/capabilities.ts +338 -338
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/VirtualHardware.vue +657 -657
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/CoresPerSocket.vue +109 -109
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/Cpu.vue +383 -383
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/limit/Limit.vue +234 -234
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/limit/config/options.ts +28 -28
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/memory/Memory.vue +316 -316
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/memory/config/memoryOptions.ts +35 -35
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/NewHardDisk.vue +445 -445
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/newNetwork/NewNetwork.vue +288 -288
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/reservation/Reservation.vue +235 -235
- package/components/common/vm/actions/add/customizeHardware/virtualHardware/videoCard/VideoCard.vue +177 -177
- package/components/common/vm/actions/add/customizeHardware/vmoptions/bootOptions/order/Order.vue +197 -197
- package/components/common/vm/actions/add/customizeHardware/vmoptions/generalOptions/GeneralOptions.vue +181 -181
- package/components/common/vm/actions/add/customizeHardware/vmoptions/remoteConsoleOptions/CopyPaste.vue +51 -51
- package/components/common/vm/actions/add/customizeHardware/vmoptions/remoteConsoleOptions/RemoteConsoleOptions.vue +253 -253
- package/components/common/vm/actions/add/customizeHardware/vmoptions/remoteConsoleOptions/keymap/Keymap.vue +55 -55
- package/components/common/vm/actions/add/select/storage/config/config.ts +154 -154
- package/components/common/vm/actions/clone/Clone.vue +544 -544
- package/components/common/vm/actions/clone/select/options/Options.vue +65 -65
- package/components/common/vm/actions/clone/utils.ts +43 -43
- package/components/common/wizards/datastore/add/nfs/configuration/Configuration.vue +373 -373
- package/components/common/wizards/datastore/add/nfs/configuration/serversList/ServersList.vue +123 -123
- package/components/common/wizards/datastore/add/nfs/kerberosAuthentication/KerberosAuthentication.vue +54 -54
- package/components/common/wizards/datastore/add/sharedStorm/deviceSelection/hostTable/HostTable.vue +131 -131
- package/components/common/wizards/datastore/add/sharedStorm/partitionConfiguration/PartitionConfiguration.vue +230 -230
- package/composables/useLocal.ts +38 -38
- package/minify.js +146 -146
- package/models/store/interfaces.ts +37 -37
- package/models/store/storage/interfaces.ts +32 -32
- package/models/store/types.ts +32 -32
- package/modules/fixContentBuild/utils/methods.ts +114 -114
- 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/utils/contentBuild.ts +34 -34
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<atoms-modal
|
|
4
|
-
test-id="no-active-adapters"
|
|
5
|
-
width="576px"
|
|
6
|
-
height="257px"
|
|
7
|
-
:show="props.show"
|
|
8
|
-
:title="localization.physicalNetworkAdaptersWarning"
|
|
9
|
-
@hide="onHide"
|
|
10
|
-
@submit="onSubmit"
|
|
11
|
-
>
|
|
12
|
-
<template #modalBody>
|
|
13
|
-
<div class="modal-body-content modal-body-content__confirmation">
|
|
14
|
-
<div class="confirm-icon-container">
|
|
15
|
-
<atoms-diagram-icon name="is-warning" />
|
|
16
|
-
</div>
|
|
17
|
-
<p class="preserve-newlines">
|
|
18
|
-
{{
|
|
19
|
-
`${localization.thereAreNoActivePhysicalNetworkAdaptersForSwitch}
|
|
20
|
-
|
|
21
|
-
${localization.okOrCancelToReviewYourChanges}`
|
|
22
|
-
}}
|
|
23
|
-
</p>
|
|
24
|
-
</div>
|
|
25
|
-
</template>
|
|
26
|
-
</atoms-modal>
|
|
27
|
-
</div>
|
|
28
|
-
</template>
|
|
29
|
-
|
|
30
|
-
<script setup lang="ts">
|
|
31
|
-
import { UI_I_Localization } from '~/models/interfaces'
|
|
32
|
-
|
|
33
|
-
const props = defineProps<{
|
|
34
|
-
show: boolean
|
|
35
|
-
title: string
|
|
36
|
-
}>()
|
|
37
|
-
|
|
38
|
-
const emits = defineEmits<{
|
|
39
|
-
(event: 'hide'): void
|
|
40
|
-
(event: 'submit'): void
|
|
41
|
-
}>()
|
|
42
|
-
|
|
43
|
-
const onHide = () => emits('hide')
|
|
44
|
-
const onSubmit = () => emits('submit')
|
|
45
|
-
|
|
46
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
47
|
-
</script>
|
|
48
|
-
|
|
49
|
-
<style scoped lang="scss">
|
|
50
|
-
:deep(.modal-body-content.modal-body-content__confirmation) {
|
|
51
|
-
display: flex;
|
|
52
|
-
|
|
53
|
-
.confirm-icon-container {
|
|
54
|
-
margin-right: 20px;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.preserve-newlines {
|
|
58
|
-
white-space: pre-line;
|
|
59
|
-
font-size: 15px;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<atoms-modal
|
|
4
|
+
test-id="no-active-adapters"
|
|
5
|
+
width="576px"
|
|
6
|
+
height="257px"
|
|
7
|
+
:show="props.show"
|
|
8
|
+
:title="localization.physicalNetworkAdaptersWarning"
|
|
9
|
+
@hide="onHide"
|
|
10
|
+
@submit="onSubmit"
|
|
11
|
+
>
|
|
12
|
+
<template #modalBody>
|
|
13
|
+
<div class="modal-body-content modal-body-content__confirmation">
|
|
14
|
+
<div class="confirm-icon-container">
|
|
15
|
+
<atoms-diagram-icon name="is-warning" />
|
|
16
|
+
</div>
|
|
17
|
+
<p class="preserve-newlines">
|
|
18
|
+
{{
|
|
19
|
+
`${localization.thereAreNoActivePhysicalNetworkAdaptersForSwitch}
|
|
20
|
+
|
|
21
|
+
${localization.okOrCancelToReviewYourChanges}`
|
|
22
|
+
}}
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
</atoms-modal>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script setup lang="ts">
|
|
31
|
+
import { UI_I_Localization } from '~/models/interfaces'
|
|
32
|
+
|
|
33
|
+
const props = defineProps<{
|
|
34
|
+
show: boolean
|
|
35
|
+
title: string
|
|
36
|
+
}>()
|
|
37
|
+
|
|
38
|
+
const emits = defineEmits<{
|
|
39
|
+
(event: 'hide'): void
|
|
40
|
+
(event: 'submit'): void
|
|
41
|
+
}>()
|
|
42
|
+
|
|
43
|
+
const onHide = () => emits('hide')
|
|
44
|
+
const onSubmit = () => emits('submit')
|
|
45
|
+
|
|
46
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<style scoped lang="scss">
|
|
50
|
+
:deep(.modal-body-content.modal-body-content__confirmation) {
|
|
51
|
+
display: flex;
|
|
52
|
+
|
|
53
|
+
.confirm-icon-container {
|
|
54
|
+
margin-right: 20px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.preserve-newlines {
|
|
58
|
+
white-space: pre-line;
|
|
59
|
+
font-size: 15px;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<atoms-modal
|
|
4
|
-
test-id="no-connected-active-adapter"
|
|
5
|
-
width="576px"
|
|
6
|
-
height="257px"
|
|
7
|
-
:show="props.show"
|
|
8
|
-
:title="localization.physicalNetworkAdaptersWarning"
|
|
9
|
-
@hide="onHide"
|
|
10
|
-
@submit="onSubmit"
|
|
11
|
-
>
|
|
12
|
-
<template #modalBody>
|
|
13
|
-
<div class="modal-body-content modal-body-content__confirmation">
|
|
14
|
-
<div class="confirm-icon-container">
|
|
15
|
-
<atoms-diagram-icon name="is-warning" />
|
|
16
|
-
</div>
|
|
17
|
-
<p class="preserve-newlines">
|
|
18
|
-
{{
|
|
19
|
-
`${localization.allActiveAdaptersAreDisconnected}
|
|
20
|
-
|
|
21
|
-
${localization.okOrCancelToReviewYourChanges}`
|
|
22
|
-
}}
|
|
23
|
-
</p>
|
|
24
|
-
</div>
|
|
25
|
-
</template>
|
|
26
|
-
</atoms-modal>
|
|
27
|
-
</div>
|
|
28
|
-
</template>
|
|
29
|
-
|
|
30
|
-
<script setup lang="ts">
|
|
31
|
-
import { UI_I_Localization } from '~/models/interfaces'
|
|
32
|
-
|
|
33
|
-
const props = defineProps<{
|
|
34
|
-
show: boolean
|
|
35
|
-
title: string
|
|
36
|
-
}>()
|
|
37
|
-
|
|
38
|
-
const emits = defineEmits<{
|
|
39
|
-
(event: 'hide'): void
|
|
40
|
-
(event: 'submit'): void
|
|
41
|
-
}>()
|
|
42
|
-
|
|
43
|
-
const onHide = () => emits('hide')
|
|
44
|
-
const onSubmit = () => emits('submit')
|
|
45
|
-
|
|
46
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
47
|
-
</script>
|
|
48
|
-
|
|
49
|
-
<style scoped lang="scss">
|
|
50
|
-
:deep(.modal-body-content.modal-body-content__confirmation) {
|
|
51
|
-
display: flex;
|
|
52
|
-
|
|
53
|
-
.confirm-icon-container {
|
|
54
|
-
margin-right: 20px;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.preserve-newlines {
|
|
58
|
-
white-space: pre-line;
|
|
59
|
-
font-size: 15px;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<atoms-modal
|
|
4
|
+
test-id="no-connected-active-adapter"
|
|
5
|
+
width="576px"
|
|
6
|
+
height="257px"
|
|
7
|
+
:show="props.show"
|
|
8
|
+
:title="localization.physicalNetworkAdaptersWarning"
|
|
9
|
+
@hide="onHide"
|
|
10
|
+
@submit="onSubmit"
|
|
11
|
+
>
|
|
12
|
+
<template #modalBody>
|
|
13
|
+
<div class="modal-body-content modal-body-content__confirmation">
|
|
14
|
+
<div class="confirm-icon-container">
|
|
15
|
+
<atoms-diagram-icon name="is-warning" />
|
|
16
|
+
</div>
|
|
17
|
+
<p class="preserve-newlines">
|
|
18
|
+
{{
|
|
19
|
+
`${localization.allActiveAdaptersAreDisconnected}
|
|
20
|
+
|
|
21
|
+
${localization.okOrCancelToReviewYourChanges}`
|
|
22
|
+
}}
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
</atoms-modal>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script setup lang="ts">
|
|
31
|
+
import { UI_I_Localization } from '~/models/interfaces'
|
|
32
|
+
|
|
33
|
+
const props = defineProps<{
|
|
34
|
+
show: boolean
|
|
35
|
+
title: string
|
|
36
|
+
}>()
|
|
37
|
+
|
|
38
|
+
const emits = defineEmits<{
|
|
39
|
+
(event: 'hide'): void
|
|
40
|
+
(event: 'submit'): void
|
|
41
|
+
}>()
|
|
42
|
+
|
|
43
|
+
const onHide = () => emits('hide')
|
|
44
|
+
const onSubmit = () => emits('submit')
|
|
45
|
+
|
|
46
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<style scoped lang="scss">
|
|
50
|
+
:deep(.modal-body-content.modal-body-content__confirmation) {
|
|
51
|
+
display: flex;
|
|
52
|
+
|
|
53
|
+
.confirm-icon-container {
|
|
54
|
+
margin-right: 20px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.preserve-newlines {
|
|
58
|
+
white-space: pre-line;
|
|
59
|
+
font-size: 15px;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
@@ -1,182 +1,182 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<atoms-modal
|
|
3
|
-
test-id="browse"
|
|
4
|
-
width="864px"
|
|
5
|
-
height="586px"
|
|
6
|
-
:show="props.show"
|
|
7
|
-
:title="localization.selectFile"
|
|
8
|
-
:disabled-submit="!props.selectedFile"
|
|
9
|
-
>
|
|
10
|
-
<template #modalBody>
|
|
11
|
-
<common-browse-blocks-container
|
|
12
|
-
type="horizontal"
|
|
13
|
-
:blocks-width="blocksWidth"
|
|
14
|
-
@change-widths="onChangeWidths"
|
|
15
|
-
>
|
|
16
|
-
<template #firstBlock>
|
|
17
|
-
<common-browse-blocks-title
|
|
18
|
-
:width="blocksWidth[0]"
|
|
19
|
-
:title="localization.datastores"
|
|
20
|
-
>
|
|
21
|
-
<template #content>
|
|
22
|
-
<div class="">
|
|
23
|
-
<common-recursion-tree
|
|
24
|
-
:nodes="props.nodes"
|
|
25
|
-
class="recursion-tree"
|
|
26
|
-
@get-nodes="onShowNodes"
|
|
27
|
-
@select-node="onSelectNode"
|
|
28
|
-
/>
|
|
29
|
-
</div>
|
|
30
|
-
</template>
|
|
31
|
-
</common-browse-blocks-title>
|
|
32
|
-
</template>
|
|
33
|
-
<template #secondBlock>
|
|
34
|
-
<common-browse-blocks-title
|
|
35
|
-
:width="blocksWidth[1]"
|
|
36
|
-
:title="localization.contents"
|
|
37
|
-
>
|
|
38
|
-
<template #content>
|
|
39
|
-
<common-browse-blocks-contents-files
|
|
40
|
-
:selected-folder-files="props.files"
|
|
41
|
-
:selected-file="props.selectedFile"
|
|
42
|
-
@select-file="onSelectFile"
|
|
43
|
-
/>
|
|
44
|
-
</template>
|
|
45
|
-
</common-browse-blocks-title>
|
|
46
|
-
</template>
|
|
47
|
-
<template #thirdBlock>
|
|
48
|
-
<common-browse-blocks-title
|
|
49
|
-
:width="blocksWidth[2]"
|
|
50
|
-
:title="localization.information"
|
|
51
|
-
>
|
|
52
|
-
<template v-if="info" #content>
|
|
53
|
-
<div
|
|
54
|
-
v-for="item in info"
|
|
55
|
-
:key="item.title"
|
|
56
|
-
class="info-container"
|
|
57
|
-
>
|
|
58
|
-
<common-browse-blocks-info-text
|
|
59
|
-
v-if="item.type === 'text'"
|
|
60
|
-
:title="item.title"
|
|
61
|
-
:value="item.value"
|
|
62
|
-
/>
|
|
63
|
-
<common-browse-blocks-info-size
|
|
64
|
-
v-if="item.type === 'size'"
|
|
65
|
-
:title="item.title"
|
|
66
|
-
:value="item.value"
|
|
67
|
-
/>
|
|
68
|
-
<common-browse-blocks-info-date
|
|
69
|
-
v-if="item.type === 'date'"
|
|
70
|
-
:title="item.title"
|
|
71
|
-
:value="item.value"
|
|
72
|
-
/>
|
|
73
|
-
</div>
|
|
74
|
-
</template>
|
|
75
|
-
</common-browse-blocks-title>
|
|
76
|
-
</template>
|
|
77
|
-
</common-browse-blocks-container>
|
|
78
|
-
<div v-if="props.fileTypes" class="ptm">
|
|
79
|
-
<b>{{ localization.fileType }}:</b>
|
|
80
|
-
<select v-model="selectedFileTypeLocal">
|
|
81
|
-
<option
|
|
82
|
-
v-for="item in props.fileTypes"
|
|
83
|
-
:key="item.value"
|
|
84
|
-
:value="item.value"
|
|
85
|
-
>
|
|
86
|
-
{{ item.text }}
|
|
87
|
-
</option>
|
|
88
|
-
</select>
|
|
89
|
-
</div>
|
|
90
|
-
</template>
|
|
91
|
-
</atoms-modal>
|
|
92
|
-
</template>
|
|
93
|
-
|
|
94
|
-
<script setup lang="ts">
|
|
95
|
-
import { UI_I_Localization } from '~/models/interfaces'
|
|
96
|
-
import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
|
|
97
|
-
import { UI_T_BlocksWidth } from '~/components/common/browse/blocks/models/types'
|
|
98
|
-
import { UI_I_FileInfo } from '~/components/common/browse/models/interfaces'
|
|
99
|
-
|
|
100
|
-
const props = defineProps<{
|
|
101
|
-
show: boolean
|
|
102
|
-
nodes: any[]
|
|
103
|
-
files: any[]
|
|
104
|
-
info: UI_I_FileInfo[] | null
|
|
105
|
-
selectedFile: any | null
|
|
106
|
-
fileTypes?: UI_I_OptionItem[]
|
|
107
|
-
selectedFileType?: any
|
|
108
|
-
}>()
|
|
109
|
-
const emits = defineEmits<{
|
|
110
|
-
(
|
|
111
|
-
event: 'get-nodes',
|
|
112
|
-
value: {
|
|
113
|
-
node: any | null
|
|
114
|
-
cb: () => void
|
|
115
|
-
}
|
|
116
|
-
): void
|
|
117
|
-
(event: 'select-node', value: any): void
|
|
118
|
-
(event: 'update:selected-file', value: any): void
|
|
119
|
-
(event: 'update:selected-file-type', value: any): void
|
|
120
|
-
}>()
|
|
121
|
-
|
|
122
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
123
|
-
|
|
124
|
-
const blocksWidth = ref<UI_T_BlocksWidth>([272, 272, 256])
|
|
125
|
-
|
|
126
|
-
const onChangeWidths = (width: number, index: number) => {
|
|
127
|
-
blocksWidth.value[index] = width
|
|
128
|
-
}
|
|
129
|
-
const onSelectFile = (file: any) => {
|
|
130
|
-
emits('update:selected-file', file)
|
|
131
|
-
}
|
|
132
|
-
const onSelectNode = (node: any): void => {
|
|
133
|
-
emits('select-node', node)
|
|
134
|
-
}
|
|
135
|
-
const onShowNodes = (data: { node: any | null; cb: () => void }): void => {
|
|
136
|
-
emits('get-nodes', data)
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
const selectedFileTypeLocal = computed<any>({
|
|
140
|
-
get() {
|
|
141
|
-
return props.selectedFileType
|
|
142
|
-
},
|
|
143
|
-
set(newValue) {
|
|
144
|
-
emits('update:selected-file-type', newValue)
|
|
145
|
-
},
|
|
146
|
-
})
|
|
147
|
-
</script>
|
|
148
|
-
|
|
149
|
-
<style scoped lang="scss">
|
|
150
|
-
:deep(.recursion-tree) {
|
|
151
|
-
.tree-node-text-drag {
|
|
152
|
-
border-radius: 3px 0 0 3px;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
:deep(.modal-body) {
|
|
157
|
-
overflow: hidden;
|
|
158
|
-
min-height: 430px;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.info-container {
|
|
162
|
-
padding: 3px;
|
|
163
|
-
div {
|
|
164
|
-
line-height: 17px;
|
|
165
|
-
span {
|
|
166
|
-
font-size: 13px;
|
|
167
|
-
font-weight: 400;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.ptm {
|
|
173
|
-
padding-top: 5px;
|
|
174
|
-
|
|
175
|
-
select {
|
|
176
|
-
outline: none;
|
|
177
|
-
border-color: rgb(118, 118, 118);
|
|
178
|
-
color: rgb(133, 133, 133);
|
|
179
|
-
margin-left: 5px;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<atoms-modal
|
|
3
|
+
test-id="browse"
|
|
4
|
+
width="864px"
|
|
5
|
+
height="586px"
|
|
6
|
+
:show="props.show"
|
|
7
|
+
:title="localization.selectFile"
|
|
8
|
+
:disabled-submit="!props.selectedFile"
|
|
9
|
+
>
|
|
10
|
+
<template #modalBody>
|
|
11
|
+
<common-browse-blocks-container
|
|
12
|
+
type="horizontal"
|
|
13
|
+
:blocks-width="blocksWidth"
|
|
14
|
+
@change-widths="onChangeWidths"
|
|
15
|
+
>
|
|
16
|
+
<template #firstBlock>
|
|
17
|
+
<common-browse-blocks-title
|
|
18
|
+
:width="blocksWidth[0]"
|
|
19
|
+
:title="localization.datastores"
|
|
20
|
+
>
|
|
21
|
+
<template #content>
|
|
22
|
+
<div class="">
|
|
23
|
+
<common-recursion-tree
|
|
24
|
+
:nodes="props.nodes"
|
|
25
|
+
class="recursion-tree"
|
|
26
|
+
@get-nodes="onShowNodes"
|
|
27
|
+
@select-node="onSelectNode"
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
</common-browse-blocks-title>
|
|
32
|
+
</template>
|
|
33
|
+
<template #secondBlock>
|
|
34
|
+
<common-browse-blocks-title
|
|
35
|
+
:width="blocksWidth[1]"
|
|
36
|
+
:title="localization.contents"
|
|
37
|
+
>
|
|
38
|
+
<template #content>
|
|
39
|
+
<common-browse-blocks-contents-files
|
|
40
|
+
:selected-folder-files="props.files"
|
|
41
|
+
:selected-file="props.selectedFile"
|
|
42
|
+
@select-file="onSelectFile"
|
|
43
|
+
/>
|
|
44
|
+
</template>
|
|
45
|
+
</common-browse-blocks-title>
|
|
46
|
+
</template>
|
|
47
|
+
<template #thirdBlock>
|
|
48
|
+
<common-browse-blocks-title
|
|
49
|
+
:width="blocksWidth[2]"
|
|
50
|
+
:title="localization.information"
|
|
51
|
+
>
|
|
52
|
+
<template v-if="info" #content>
|
|
53
|
+
<div
|
|
54
|
+
v-for="item in info"
|
|
55
|
+
:key="item.title"
|
|
56
|
+
class="info-container"
|
|
57
|
+
>
|
|
58
|
+
<common-browse-blocks-info-text
|
|
59
|
+
v-if="item.type === 'text'"
|
|
60
|
+
:title="item.title"
|
|
61
|
+
:value="item.value"
|
|
62
|
+
/>
|
|
63
|
+
<common-browse-blocks-info-size
|
|
64
|
+
v-if="item.type === 'size'"
|
|
65
|
+
:title="item.title"
|
|
66
|
+
:value="item.value"
|
|
67
|
+
/>
|
|
68
|
+
<common-browse-blocks-info-date
|
|
69
|
+
v-if="item.type === 'date'"
|
|
70
|
+
:title="item.title"
|
|
71
|
+
:value="item.value"
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
74
|
+
</template>
|
|
75
|
+
</common-browse-blocks-title>
|
|
76
|
+
</template>
|
|
77
|
+
</common-browse-blocks-container>
|
|
78
|
+
<div v-if="props.fileTypes" class="ptm">
|
|
79
|
+
<b>{{ localization.fileType }}:</b>
|
|
80
|
+
<select v-model="selectedFileTypeLocal">
|
|
81
|
+
<option
|
|
82
|
+
v-for="item in props.fileTypes"
|
|
83
|
+
:key="item.value"
|
|
84
|
+
:value="item.value"
|
|
85
|
+
>
|
|
86
|
+
{{ item.text }}
|
|
87
|
+
</option>
|
|
88
|
+
</select>
|
|
89
|
+
</div>
|
|
90
|
+
</template>
|
|
91
|
+
</atoms-modal>
|
|
92
|
+
</template>
|
|
93
|
+
|
|
94
|
+
<script setup lang="ts">
|
|
95
|
+
import { UI_I_Localization } from '~/models/interfaces'
|
|
96
|
+
import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
|
|
97
|
+
import { UI_T_BlocksWidth } from '~/components/common/browse/blocks/models/types'
|
|
98
|
+
import { UI_I_FileInfo } from '~/components/common/browse/models/interfaces'
|
|
99
|
+
|
|
100
|
+
const props = defineProps<{
|
|
101
|
+
show: boolean
|
|
102
|
+
nodes: any[]
|
|
103
|
+
files: any[]
|
|
104
|
+
info: UI_I_FileInfo[] | null
|
|
105
|
+
selectedFile: any | null
|
|
106
|
+
fileTypes?: UI_I_OptionItem[]
|
|
107
|
+
selectedFileType?: any
|
|
108
|
+
}>()
|
|
109
|
+
const emits = defineEmits<{
|
|
110
|
+
(
|
|
111
|
+
event: 'get-nodes',
|
|
112
|
+
value: {
|
|
113
|
+
node: any | null
|
|
114
|
+
cb: () => void
|
|
115
|
+
}
|
|
116
|
+
): void
|
|
117
|
+
(event: 'select-node', value: any): void
|
|
118
|
+
(event: 'update:selected-file', value: any): void
|
|
119
|
+
(event: 'update:selected-file-type', value: any): void
|
|
120
|
+
}>()
|
|
121
|
+
|
|
122
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
123
|
+
|
|
124
|
+
const blocksWidth = ref<UI_T_BlocksWidth>([272, 272, 256])
|
|
125
|
+
|
|
126
|
+
const onChangeWidths = (width: number, index: number) => {
|
|
127
|
+
blocksWidth.value[index] = width
|
|
128
|
+
}
|
|
129
|
+
const onSelectFile = (file: any) => {
|
|
130
|
+
emits('update:selected-file', file)
|
|
131
|
+
}
|
|
132
|
+
const onSelectNode = (node: any): void => {
|
|
133
|
+
emits('select-node', node)
|
|
134
|
+
}
|
|
135
|
+
const onShowNodes = (data: { node: any | null; cb: () => void }): void => {
|
|
136
|
+
emits('get-nodes', data)
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
const selectedFileTypeLocal = computed<any>({
|
|
140
|
+
get() {
|
|
141
|
+
return props.selectedFileType
|
|
142
|
+
},
|
|
143
|
+
set(newValue) {
|
|
144
|
+
emits('update:selected-file-type', newValue)
|
|
145
|
+
},
|
|
146
|
+
})
|
|
147
|
+
</script>
|
|
148
|
+
|
|
149
|
+
<style scoped lang="scss">
|
|
150
|
+
:deep(.recursion-tree) {
|
|
151
|
+
.tree-node-text-drag {
|
|
152
|
+
border-radius: 3px 0 0 3px;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
:deep(.modal-body) {
|
|
157
|
+
overflow: hidden;
|
|
158
|
+
min-height: 430px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.info-container {
|
|
162
|
+
padding: 3px;
|
|
163
|
+
div {
|
|
164
|
+
line-height: 17px;
|
|
165
|
+
span {
|
|
166
|
+
font-size: 13px;
|
|
167
|
+
font-weight: 400;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.ptm {
|
|
173
|
+
padding-top: 5px;
|
|
174
|
+
|
|
175
|
+
select {
|
|
176
|
+
outline: none;
|
|
177
|
+
border-color: rgb(118, 118, 118);
|
|
178
|
+
color: rgb(133, 133, 133);
|
|
179
|
+
margin-left: 5px;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
</style>
|