@drax/settings-vue 3.4.0 → 3.7.0
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/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "3.
|
|
6
|
+
"version": "3.7.0",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "./src/index.ts",
|
|
9
9
|
"module": "./src/index.ts",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@drax/common-front": "^3.0.0",
|
|
26
|
-
"@drax/crud-vue": "^3.
|
|
27
|
-
"@drax/identity-vue": "^3.
|
|
26
|
+
"@drax/crud-vue": "^3.7.0",
|
|
27
|
+
"@drax/identity-vue": "^3.7.0",
|
|
28
28
|
"@drax/settings-front": "^3.0.0",
|
|
29
29
|
"@drax/settings-share": "^3.0.0"
|
|
30
30
|
},
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"vue-tsc": "^3.2.4",
|
|
52
52
|
"vuetify": "^3.11.8"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "99293960a464d5d6dab147811ed6a5d977919e26"
|
|
55
55
|
}
|
package/src/index.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import {useSetting} from "./composables/UseSetting";
|
|
2
2
|
import {useSettingStore} from "./stores/UseSettingStore";
|
|
3
|
-
import SettingCardConfig from "./components/SettingCardConfig.vue";
|
|
4
|
-
import SettingTableConfig from "./components/SettingAvConfig.vue";
|
|
5
3
|
import SettingLoaded from "./components/SettingLoaded.vue";
|
|
6
4
|
import SettingPage from "./pages/SettingPage.vue";
|
|
7
5
|
import SettingRoutes from "./routes/SettingRoutes";
|
|
@@ -10,8 +8,6 @@ import SettingRoutes from "./routes/SettingRoutes";
|
|
|
10
8
|
export{
|
|
11
9
|
useSetting,
|
|
12
10
|
useSettingStore,
|
|
13
|
-
SettingCardConfig,
|
|
14
|
-
SettingTableConfig,
|
|
15
11
|
SettingLoaded,
|
|
16
12
|
SettingPage,
|
|
17
13
|
SettingRoutes
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import SettingPage from '../pages/SettingPage.vue'
|
|
2
|
-
import SettingCardPage from '../pages/SettingCardPage.vue'
|
|
3
|
-
import SettingAvPage from '../pages/SettingAvPage.vue'
|
|
4
2
|
|
|
5
3
|
const routes = [
|
|
6
4
|
{
|
|
@@ -11,25 +9,7 @@ const routes = [
|
|
|
11
9
|
auth: true,
|
|
12
10
|
permission: 'setting:manage'
|
|
13
11
|
}
|
|
14
|
-
}
|
|
15
|
-
{
|
|
16
|
-
name: 'SettingCardPage',
|
|
17
|
-
path: '/settings/card',
|
|
18
|
-
component: SettingCardPage,
|
|
19
|
-
meta: {
|
|
20
|
-
auth: true,
|
|
21
|
-
permission: 'setting:manage'
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
name: 'SettingAvPage',
|
|
26
|
-
path: '/settings/av',
|
|
27
|
-
component: SettingAvPage,
|
|
28
|
-
meta: {
|
|
29
|
-
auth: true,
|
|
30
|
-
permission: 'setting:manage'
|
|
31
|
-
}
|
|
32
|
-
},
|
|
12
|
+
}
|
|
33
13
|
]
|
|
34
14
|
|
|
35
15
|
|
|
@@ -1,396 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import {useSetting} from "../composables/UseSetting";
|
|
3
|
-
import {onMounted, reactive, ref} from "vue";
|
|
4
|
-
import {useI18n} from "vue-i18n";
|
|
5
|
-
import type {ISetting} from "@drax/settings-share";
|
|
6
|
-
import {formatDateTime} from "@drax/common-front";
|
|
7
|
-
import SettingField from "./SettingField.vue";
|
|
8
|
-
|
|
9
|
-
const {fetchSettings, settingsGrouped, updateSettingValue} = useSetting()
|
|
10
|
-
const {t} = useI18n()
|
|
11
|
-
|
|
12
|
-
onMounted(async () => {
|
|
13
|
-
await fetchSettings()
|
|
14
|
-
onSearchUpdate('')
|
|
15
|
-
})
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
function getTypeColor(type: string): string {
|
|
20
|
-
|
|
21
|
-
//'string' | 'longString' | 'number' | 'enum' | 'boolean' | 'password' |'stringList' | 'numberList' | 'enumList' |'ref' |'secret'
|
|
22
|
-
switch (type) {
|
|
23
|
-
case 'string': return 'blue';
|
|
24
|
-
case 'longString': return 'blue';
|
|
25
|
-
case 'number': return 'purple';
|
|
26
|
-
case 'enum': return 'orange';
|
|
27
|
-
case 'boolean': return 'green';
|
|
28
|
-
case 'password': return 'red';
|
|
29
|
-
case 'stringList': return 'light-blue';
|
|
30
|
-
case 'numberList': return 'purple';
|
|
31
|
-
case 'enumList': return 'orange';
|
|
32
|
-
case 'ref': return 'pink';
|
|
33
|
-
case 'secret': return 'error';
|
|
34
|
-
default: return 'grey';
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const settingsGroupedFiltered = ref<Record<string, ISetting[]>>({})
|
|
43
|
-
|
|
44
|
-
const search = ref<string>('')
|
|
45
|
-
function onSearchUpdate(value: string) {
|
|
46
|
-
if(!value) settingsGroupedFiltered.value = {...settingsGrouped.value};
|
|
47
|
-
|
|
48
|
-
for (const groupKey of Object.keys(settingsGroupedFiltered.value)) {
|
|
49
|
-
settingsGroupedFiltered.value[groupKey] = settingsGroupedFiltered.value[groupKey].filter((setting: ISetting) =>
|
|
50
|
-
setting.key.toLowerCase().includes(value.toLowerCase()) ||
|
|
51
|
-
(setting.description && setting.description.toLowerCase().includes(value.toLowerCase()))
|
|
52
|
-
)
|
|
53
|
-
|
|
54
|
-
if(!settingsGroupedFiltered.value[groupKey]?.length) {
|
|
55
|
-
delete settingsGroupedFiltered.value[groupKey];
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
const showModal = reactive<{
|
|
61
|
-
isOpen: boolean, value?: string,
|
|
62
|
-
setting?: ISetting
|
|
63
|
-
}>({ isOpen: false, value: '', setting: undefined})
|
|
64
|
-
|
|
65
|
-
const openShowModal = (key: string, value: string | undefined, setting: ISetting) => {
|
|
66
|
-
showModal.isOpen = true;
|
|
67
|
-
showModal.value = value;
|
|
68
|
-
showModal.setting = setting
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
const closeShowModal = () => {
|
|
72
|
-
showModal.isOpen = false;
|
|
73
|
-
showModal.value = '';
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
const getSettingDescription = (key: string, description?: string) => {
|
|
77
|
-
return {
|
|
78
|
-
_id: "123",
|
|
79
|
-
category: "Description",
|
|
80
|
-
key: key,
|
|
81
|
-
label: `${t('setting.descriptionof')} ${key}`,
|
|
82
|
-
type: "longString",
|
|
83
|
-
value: description
|
|
84
|
-
} as ISetting
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
const informationUpdatingModal = reactive<{
|
|
88
|
-
isOpen: boolean, setting?: ISetting, readonly: boolean
|
|
89
|
-
}>({isOpen: false, readonly: false})
|
|
90
|
-
|
|
91
|
-
const openInformationUpdatingModal = (setting: ISetting, readonly: boolean) => {
|
|
92
|
-
informationUpdatingModal.isOpen = true
|
|
93
|
-
informationUpdatingModal.setting = setting
|
|
94
|
-
informationUpdatingModal.readonly = readonly
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
const closeInformationUpdatingModal = () => {
|
|
98
|
-
informationUpdatingModal.isOpen = false
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
const updateLoading = ref<boolean>(false)
|
|
102
|
-
|
|
103
|
-
const form = ref()
|
|
104
|
-
|
|
105
|
-
const alert = reactive<{
|
|
106
|
-
value: boolean, type: 'error' | 'success' | 'warning',
|
|
107
|
-
text: string
|
|
108
|
-
}>({value: false, type: 'success', text: ''})
|
|
109
|
-
|
|
110
|
-
const showSuccess = (text: string) => {
|
|
111
|
-
alert.value = true
|
|
112
|
-
alert.type = "success"
|
|
113
|
-
alert.text = text
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
const updateSetting = async (setting?: ISetting) => {
|
|
117
|
-
try {
|
|
118
|
-
if(!setting){
|
|
119
|
-
console.error('[updateSetting] - setting not provided')
|
|
120
|
-
return
|
|
121
|
-
}
|
|
122
|
-
updateLoading.value = true
|
|
123
|
-
const validation = await form.value.validate()
|
|
124
|
-
if(validation && validation.valid === true){
|
|
125
|
-
const settingUpdated = await updateSettingValue(setting._id, setting.value)
|
|
126
|
-
setting.updatedBy = settingUpdated.updatedBy
|
|
127
|
-
}
|
|
128
|
-
closeInformationUpdatingModal()
|
|
129
|
-
showSuccess(t('setting.updated.successfuly'))
|
|
130
|
-
} catch (e) {
|
|
131
|
-
console.error(e)
|
|
132
|
-
} finally {
|
|
133
|
-
updateLoading.value = false
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
</script>
|
|
138
|
-
|
|
139
|
-
<template>
|
|
140
|
-
<div class="d-flex align-center px-16">
|
|
141
|
-
<v-avatar style="border-radius: 7px;" color="menuIcon" class="mr-4">
|
|
142
|
-
<v-icon>mdi-cog</v-icon>
|
|
143
|
-
</v-avatar>
|
|
144
|
-
<v-toolbar-title>{{ t('setting.page.title') }}</v-toolbar-title>
|
|
145
|
-
</div>
|
|
146
|
-
<v-divider class="my-4"></v-divider>
|
|
147
|
-
<div class="d-flex justify-space-between px-16">
|
|
148
|
-
<v-text-field
|
|
149
|
-
:placeholder="t('setting.search')"
|
|
150
|
-
persistent-placeholder
|
|
151
|
-
clearable variant="outlined"
|
|
152
|
-
prepend-inner-icon="mdi-magnify"
|
|
153
|
-
v-model="search"
|
|
154
|
-
@update:model-value="onSearchUpdate"
|
|
155
|
-
></v-text-field>
|
|
156
|
-
</div>
|
|
157
|
-
<div
|
|
158
|
-
class="px-16"
|
|
159
|
-
>
|
|
160
|
-
<div class="pa-0 ma-0" style="width: calc(100%); height: calc(100vh - 315px); overflow-y: auto; scrollbar-width: thin;">
|
|
161
|
-
<v-expansion-panels
|
|
162
|
-
class="pr-1 mb-4" variant="accordion" v-for="groupkey of Object.keys(settingsGroupedFiltered)" :key="groupkey"
|
|
163
|
-
:model-value="1"
|
|
164
|
-
>
|
|
165
|
-
<v-expansion-panel :value="1">
|
|
166
|
-
<template #title>
|
|
167
|
-
{{ groupkey }}
|
|
168
|
-
<v-avatar class="ml-4" color="blue-grey-darken-2" style="border-radius: 4px;" size="24">
|
|
169
|
-
{{ settingsGroupedFiltered[groupkey]?.length }}
|
|
170
|
-
</v-avatar>
|
|
171
|
-
</template>
|
|
172
|
-
<template #text>
|
|
173
|
-
<table style="width: 100%;">
|
|
174
|
-
<thead>
|
|
175
|
-
<v-row>
|
|
176
|
-
<v-col cols="2" class="text-caption">{{t('setting.field.key')}}</v-col>
|
|
177
|
-
<v-col cols="1" class="text-caption">{{t('setting.field.value')}}</v-col>
|
|
178
|
-
<v-col cols="1" class="text-caption">{{t('setting.field.type')}}</v-col>
|
|
179
|
-
<v-col cols="3" class="text-caption">{{t('setting.field.description')}}</v-col>
|
|
180
|
-
<v-col cols="1" class="text-caption">{{t('setting.field.visibility')}}</v-col>
|
|
181
|
-
<v-col cols="1" class="text-caption">{{t('setting.field.permission')}}</v-col>
|
|
182
|
-
<v-col cols="2" class="text-caption">{{t('setting.field.updated')}}</v-col>
|
|
183
|
-
<v-col cols="1"></v-col>
|
|
184
|
-
</v-row>
|
|
185
|
-
</thead>
|
|
186
|
-
<tbody>
|
|
187
|
-
<template :key="setting.key" v-for="setting in settingsGroupedFiltered[groupkey]">
|
|
188
|
-
<v-row class="mt-2">
|
|
189
|
-
<v-col cols="2" class="pr-4">
|
|
190
|
-
<span
|
|
191
|
-
style="display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
|
192
|
-
>
|
|
193
|
-
{{ setting.key }}
|
|
194
|
-
</span>
|
|
195
|
-
</v-col>
|
|
196
|
-
<v-col cols="1" class="pr-4 d-flex ga-2">
|
|
197
|
-
<template v-if="setting.value">
|
|
198
|
-
<v-icon size="small" color="grey" style="cursor: pointer;" @click="openShowModal(setting.key, setting.value, setting)">mdi-eye</v-icon>
|
|
199
|
-
<span
|
|
200
|
-
class="text-caption text-grey"
|
|
201
|
-
style="display: inline-block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
|
202
|
-
>
|
|
203
|
-
{{ setting.value }}
|
|
204
|
-
</span>
|
|
205
|
-
</template>
|
|
206
|
-
<span v-else class="text-caption text-grey">-</span>
|
|
207
|
-
</v-col>
|
|
208
|
-
<v-col cols="1" class="pr-4">
|
|
209
|
-
<v-chip :color="getTypeColor(setting.type)" density="compact" style="border-radius: 7px">
|
|
210
|
-
{{ setting.type }}
|
|
211
|
-
</v-chip>
|
|
212
|
-
</v-col>
|
|
213
|
-
<v-col cols="3" class="pr-4 d-flex ga-2">
|
|
214
|
-
<v-icon size="small" color="grey" style="cursor: pointer;" @click="openShowModal(setting.key, setting.description, getSettingDescription(setting.key, setting.description))">mdi-eye</v-icon>
|
|
215
|
-
<span
|
|
216
|
-
class="text-caption text-grey"
|
|
217
|
-
style="display: inline-block; max-width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
|
218
|
-
>
|
|
219
|
-
{{ setting.description }}
|
|
220
|
-
</span>
|
|
221
|
-
</v-col>
|
|
222
|
-
<v-col cols="1" class="pr-4">
|
|
223
|
-
<v-chip
|
|
224
|
-
:color="setting.public ? 'green' : 'red'"
|
|
225
|
-
density="compact" style="border-radius: 7px;"
|
|
226
|
-
>
|
|
227
|
-
<v-icon start>{{ setting.public ? 'mdi-web' : 'mdi-lock' }}</v-icon>
|
|
228
|
-
{{ setting.public ? 'Público' : 'Privado' }}
|
|
229
|
-
</v-chip>
|
|
230
|
-
</v-col>
|
|
231
|
-
<v-col cols="1" class="pr-4">
|
|
232
|
-
<span class="text-caption" style="display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
|
233
|
-
{{ setting.permission ? setting.permission : 'N/A' }}
|
|
234
|
-
</span>
|
|
235
|
-
</v-col>
|
|
236
|
-
<v-col cols="2" class="pr-4">
|
|
237
|
-
<span>
|
|
238
|
-
{{ setting?.updatedAt ? formatDateTime(setting?.updatedAt) : '' }}<br>
|
|
239
|
-
{{ setting.updatedBy }}
|
|
240
|
-
</span>
|
|
241
|
-
</v-col>
|
|
242
|
-
<v-col cols="1" class="d-flex justify-end">
|
|
243
|
-
<v-menu location="bottom right">
|
|
244
|
-
<template v-slot:activator="{ props }">
|
|
245
|
-
<v-btn icon size="small" variant="text" v-bind="props">
|
|
246
|
-
<v-icon>mdi-dots-vertical</v-icon>
|
|
247
|
-
</v-btn>
|
|
248
|
-
</template>
|
|
249
|
-
<v-list>
|
|
250
|
-
<v-list-item @click="openInformationUpdatingModal(setting, true)">
|
|
251
|
-
<v-icon start>mdi-eye</v-icon>
|
|
252
|
-
{{ t('action.view') }}
|
|
253
|
-
</v-list-item>
|
|
254
|
-
<v-list-item @click="openInformationUpdatingModal(setting, false)">
|
|
255
|
-
<v-icon start>mdi-pencil</v-icon>
|
|
256
|
-
{{ t('action.edit') }}
|
|
257
|
-
</v-list-item>
|
|
258
|
-
</v-list>
|
|
259
|
-
</v-menu>
|
|
260
|
-
</v-col>
|
|
261
|
-
</v-row>
|
|
262
|
-
<v-divider class="my-2"></v-divider>
|
|
263
|
-
</template>
|
|
264
|
-
</tbody>
|
|
265
|
-
</table>
|
|
266
|
-
</template>
|
|
267
|
-
</v-expansion-panel>
|
|
268
|
-
</v-expansion-panels>
|
|
269
|
-
</div>
|
|
270
|
-
</div>
|
|
271
|
-
|
|
272
|
-
<!-- SHOW MODAL -->
|
|
273
|
-
|
|
274
|
-
<v-dialog v-model="showModal.isOpen" width="auto">
|
|
275
|
-
<v-card width="800">
|
|
276
|
-
<v-toolbar class="pl-4">
|
|
277
|
-
<v-icon start>mdi-information</v-icon>
|
|
278
|
-
<v-card-title>{{ showModal.setting?.category === 'Description' ? t('setting.field.description') : t('setting.field.value') }}</v-card-title>
|
|
279
|
-
<v-spacer></v-spacer>
|
|
280
|
-
<v-btn text @click="closeShowModal">
|
|
281
|
-
<v-icon>mdi-close</v-icon>
|
|
282
|
-
</v-btn>
|
|
283
|
-
</v-toolbar>
|
|
284
|
-
<v-card-text>
|
|
285
|
-
<setting-field
|
|
286
|
-
v-if="showModal.setting"
|
|
287
|
-
:model-value="showModal.value"
|
|
288
|
-
:setting="showModal.setting"
|
|
289
|
-
:editing="false"
|
|
290
|
-
></setting-field>
|
|
291
|
-
</v-card-text>
|
|
292
|
-
</v-card>
|
|
293
|
-
</v-dialog>
|
|
294
|
-
|
|
295
|
-
<!-- INFORMATION / UPDATING MODAL -->
|
|
296
|
-
|
|
297
|
-
<v-dialog v-model="informationUpdatingModal.isOpen" width="auto">
|
|
298
|
-
<v-card width="1200">
|
|
299
|
-
<v-toolbar class="px-4">
|
|
300
|
-
<v-icon start>{{ informationUpdatingModal.readonly ? 'mdi-eye' : 'mdi-pencil' }}</v-icon>
|
|
301
|
-
<v-card-title>
|
|
302
|
-
{{ informationUpdatingModal.readonly ? t('action.view') : t('action.edit') }} {{t('setting.configurationValue.title')}}
|
|
303
|
-
</v-card-title>
|
|
304
|
-
<v-spacer></v-spacer>
|
|
305
|
-
<v-icon size="small" @click="closeInformationUpdatingModal">mdi-close</v-icon>
|
|
306
|
-
</v-toolbar>
|
|
307
|
-
<v-card-text>
|
|
308
|
-
{{ t('setting.configurationValue.subtitle') }}
|
|
309
|
-
|
|
310
|
-
<v-form ref="form">
|
|
311
|
-
<v-row class="mt-5">
|
|
312
|
-
<v-col cols="12" md="8" class="ma-0 pa-0 px-3" v-if="informationUpdatingModal.setting?.category">
|
|
313
|
-
<v-text-field
|
|
314
|
-
density="compact"
|
|
315
|
-
variant="outlined"
|
|
316
|
-
:label="t('setting.field.category')"
|
|
317
|
-
readonly :model-value="informationUpdatingModal.setting?.category"
|
|
318
|
-
></v-text-field>
|
|
319
|
-
</v-col>
|
|
320
|
-
<v-col cols="12" md="4" class="ma-0 pa-0 px-3">
|
|
321
|
-
<v-checkbox
|
|
322
|
-
:label="t('setting.field.publicinfo')" density="compact"
|
|
323
|
-
readonly :model-value="informationUpdatingModal.setting?.public"
|
|
324
|
-
></v-checkbox>
|
|
325
|
-
</v-col>
|
|
326
|
-
<v-col cols="12" md="8" class="ma-0 pa-0 px-3">
|
|
327
|
-
<v-text-field
|
|
328
|
-
density="compact"
|
|
329
|
-
variant="outlined"
|
|
330
|
-
:label="t('setting.field.key')"
|
|
331
|
-
readonly :model-value="informationUpdatingModal.setting?.key"
|
|
332
|
-
></v-text-field>
|
|
333
|
-
</v-col>
|
|
334
|
-
<v-col cols="12" md="4" class="ma-0 pa-0 px-3">
|
|
335
|
-
<v-text-field
|
|
336
|
-
density="compact"
|
|
337
|
-
variant="outlined"
|
|
338
|
-
:label="t('setting.field.type')"
|
|
339
|
-
readonly :model-value="informationUpdatingModal.setting?.type"
|
|
340
|
-
></v-text-field>
|
|
341
|
-
</v-col>
|
|
342
|
-
<v-col cols="12" md="12" class="ma-0 pa-0 px-3" v-if="informationUpdatingModal.setting?.permission">
|
|
343
|
-
<v-text-field
|
|
344
|
-
density="compact"
|
|
345
|
-
variant="outlined"
|
|
346
|
-
:label="t('setting.field.permission')"
|
|
347
|
-
readonly :model-value="informationUpdatingModal.setting?.permission"
|
|
348
|
-
></v-text-field>
|
|
349
|
-
</v-col>
|
|
350
|
-
<v-col cols="12" md="6" class="ma-0 pa-0 px-3" v-if="informationUpdatingModal.setting?.prefix">
|
|
351
|
-
<v-text-field
|
|
352
|
-
density="compact"
|
|
353
|
-
variant="outlined"
|
|
354
|
-
:label="t('setting.field.prefix')"
|
|
355
|
-
readonly :model-value="informationUpdatingModal.setting?.prefix"
|
|
356
|
-
></v-text-field>
|
|
357
|
-
</v-col>
|
|
358
|
-
<v-col cols="12" md="6" class="ma-0 pa-0 px-3" v-if="informationUpdatingModal.setting?.suffix">
|
|
359
|
-
<v-text-field
|
|
360
|
-
density="compact"
|
|
361
|
-
variant="outlined"
|
|
362
|
-
:label="t('setting.field.suffix')"
|
|
363
|
-
readonly :model-value="informationUpdatingModal.setting?.suffix"
|
|
364
|
-
></v-text-field>
|
|
365
|
-
</v-col>
|
|
366
|
-
<v-col cols="12" md="12" class="ma-0 pa-0 px-3">
|
|
367
|
-
<setting-field
|
|
368
|
-
v-if="informationUpdatingModal.setting"
|
|
369
|
-
variant="outlined"
|
|
370
|
-
v-model="informationUpdatingModal.setting.value"
|
|
371
|
-
:setting="informationUpdatingModal.setting"
|
|
372
|
-
:editing="!informationUpdatingModal.readonly"
|
|
373
|
-
></setting-field>
|
|
374
|
-
</v-col>
|
|
375
|
-
</v-row>
|
|
376
|
-
</v-form>
|
|
377
|
-
</v-card-text>
|
|
378
|
-
<v-card-actions>
|
|
379
|
-
<v-spacer></v-spacer>
|
|
380
|
-
<v-btn variant="text" @click="closeInformationUpdatingModal">{{ t('action.close') }}</v-btn>
|
|
381
|
-
<v-btn
|
|
382
|
-
v-if="!informationUpdatingModal.readonly"
|
|
383
|
-
variant="elevated" color="primary"
|
|
384
|
-
@click="updateSetting(informationUpdatingModal.setting)"
|
|
385
|
-
:loading="updateLoading"
|
|
386
|
-
>
|
|
387
|
-
{{ t('action.save') }}
|
|
388
|
-
</v-btn>
|
|
389
|
-
</v-card-actions>
|
|
390
|
-
</v-card>
|
|
391
|
-
</v-dialog>
|
|
392
|
-
</template>
|
|
393
|
-
|
|
394
|
-
<style scoped>
|
|
395
|
-
|
|
396
|
-
</style>
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import {useSetting} from "../composables/UseSetting";
|
|
3
|
-
import SettingField from "./SettingField.vue";
|
|
4
|
-
import SettingEditor from "./SettingEditor.vue";
|
|
5
|
-
import {onMounted, ref} from "vue";
|
|
6
|
-
import {useI18n} from "vue-i18n";
|
|
7
|
-
import type {ISetting} from "@drax/settings-share";
|
|
8
|
-
|
|
9
|
-
const {fetchSettings, settingsGrouped} = useSetting()
|
|
10
|
-
const {t, te} = useI18n()
|
|
11
|
-
|
|
12
|
-
onMounted(async () => {
|
|
13
|
-
await fetchSettings()
|
|
14
|
-
})
|
|
15
|
-
|
|
16
|
-
const settingEditing = ref()
|
|
17
|
-
const editing = ref(false)
|
|
18
|
-
|
|
19
|
-
function edit(setting: ISetting) {
|
|
20
|
-
settingEditing.value = {...setting}
|
|
21
|
-
editing.value = true
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function clearEdit() {
|
|
25
|
-
editing.value = false
|
|
26
|
-
settingEditing.value = null
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
</script>
|
|
30
|
-
|
|
31
|
-
<template>
|
|
32
|
-
<div>
|
|
33
|
-
<h1 class="mb-6 text-h2">Settings</h1>
|
|
34
|
-
|
|
35
|
-
<setting-editor
|
|
36
|
-
v-if="editing"
|
|
37
|
-
v-model="editing"
|
|
38
|
-
:setting="settingEditing"
|
|
39
|
-
@updateValue="clearEdit"
|
|
40
|
-
></setting-editor>
|
|
41
|
-
|
|
42
|
-
<v-row>
|
|
43
|
-
<v-col cols="12" v-for="(category,k) in settingsGrouped" class="mt-4">
|
|
44
|
-
<v-card >
|
|
45
|
-
<v-card-title>
|
|
46
|
-
<h4 class="text-h4 mt-2">{{ k }}</h4>
|
|
47
|
-
</v-card-title>
|
|
48
|
-
<v-card-text>
|
|
49
|
-
<v-card border flat rounded="xl" v-for="(setting, i) in category" :key="i" class="mt-3" >
|
|
50
|
-
<v-card-title class="d-flex">
|
|
51
|
-
<h5 class="text-h5 mt-2">{{ setting.label }}</h5>
|
|
52
|
-
<v-spacer></v-spacer>
|
|
53
|
-
<v-chip v-if="setting.permission" density="compact" color="red" class="mt-2">
|
|
54
|
-
{{t('common.permission')}}:
|
|
55
|
-
{{ te('permission.'+setting.permission) ? t('permission.'+setting.permission) : setting.permission }}
|
|
56
|
-
</v-chip>
|
|
57
|
-
<v-chip v-else-if="setting.public" color="green" density="compact" class="mt-2">Public</v-chip>
|
|
58
|
-
<v-chip v-else color="orange" density="compact" class="mt-2">Private</v-chip>
|
|
59
|
-
</v-card-title>
|
|
60
|
-
<v-card-text class="px-12 pt-3">
|
|
61
|
-
<setting-field
|
|
62
|
-
v-model="setting.value"
|
|
63
|
-
:setting="setting"
|
|
64
|
-
|
|
65
|
-
></setting-field>
|
|
66
|
-
</v-card-text>
|
|
67
|
-
<v-card-actions>
|
|
68
|
-
<v-spacer></v-spacer>
|
|
69
|
-
<v-btn
|
|
70
|
-
class="mr-1 mt-1"
|
|
71
|
-
color="blue"
|
|
72
|
-
variant="text"
|
|
73
|
-
@click="edit(setting)"
|
|
74
|
-
>{{t('action.edit')}}</v-btn>
|
|
75
|
-
</v-card-actions>
|
|
76
|
-
|
|
77
|
-
</v-card>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
</v-card-text>
|
|
81
|
-
</v-card>
|
|
82
|
-
</v-col>
|
|
83
|
-
|
|
84
|
-
</v-row>
|
|
85
|
-
</div>
|
|
86
|
-
</template>
|
|
87
|
-
|
|
88
|
-
<style scoped>
|
|
89
|
-
|
|
90
|
-
</style>
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import SettingCardConfig from "../components/SettingCardConfig.vue";
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<template>
|
|
6
|
-
<v-container max-width="1200">
|
|
7
|
-
<setting-card-config></setting-card-config>
|
|
8
|
-
</v-container>
|
|
9
|
-
|
|
10
|
-
</template>
|
|
11
|
-
|
|
12
|
-
<style scoped>
|
|
13
|
-
|
|
14
|
-
</style>
|