Skip to content

Commit 45419dd

Browse files
fiftinfiftin
committed
feat(ui): use maximizable editor
1 parent 095b594 commit 45419dd

File tree

5 files changed

+244
-70
lines changed

5 files changed

+244
-70
lines changed

‎web/src/components/ArgsPicker.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,12 @@ export default {
105105
watch: {
106106
vars(val) {
107107
this.var = val || [];
108+
this.fillModifiedVars();
108109
},
109110
},
110111
111112
created() {
112-
this.modifiedVars = (this.vars || []).map((v) => ({ name: v }));
113+
this.fillModifiedVars();
113114
},
114115
115116
data() {
@@ -123,6 +124,10 @@ export default {
123124
};
124125
},
125126
methods: {
127+
fillModifiedVars() {
128+
this.modifiedVars = (this.vars || []).map((v) => ({ name: v }));
129+
},
130+
126131
addEditedVarValue() {
127132
this.editedValues.push({
128133
name: '',

‎web/src/components/EnvironmentForm.vue

Lines changed: 67 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,39 @@
77
class="pb-3"
88
>
99

10-
<v-dialog
11-
v-model="envEditorDialog"
12-
max-width="800"
13-
persistent
14-
:transition="false"
15-
>
16-
<div style="position: relative;">
17-
<codemirror
18-
class="EnvironmentMaximizedEditor"
19-
:style="{ border: '1px solid lightgray' }"
20-
v-model="json"
21-
:options="cmOptions"
22-
:placeholder="$t('enterExtraVariablesJson')"
23-
/>
24-
25-
<v-btn
26-
dark
27-
fab
28-
small
29-
color="blue-grey"
30-
v-if="extraVarsEditMode === 'json'"
31-
style="
32-
position: absolute;
33-
right: 0;
34-
top: 0;
35-
margin: 10px;
36-
"
37-
@click="envEditorDialog = false"
38-
>
39-
<v-icon>mdi-arrow-collapse</v-icon>
40-
</v-btn>
41-
</div>
42-
</v-dialog>
10+
<!-- <v-dialog-->
11+
<!-- v-model="envEditorDialog"-->
12+
<!-- max-width="800"-->
13+
<!-- persistent-->
14+
<!-- :transition="false"-->
15+
<!-- >-->
16+
<!-- <div style="position: relative;">-->
17+
<!-- <codemirror-->
18+
<!-- class="EnvironmentMaximizedEditor"-->
19+
<!-- :style="{ border: '1px solid lightgray' }"-->
20+
<!-- v-model="json"-->
21+
<!-- :options="cmOptions"-->
22+
<!-- :placeholder="$t('enterExtraVariablesJson')"-->
23+
<!-- />-->
24+
25+
<!-- <v-btn-->
26+
<!-- dark-->
27+
<!-- fab-->
28+
<!-- small-->
29+
<!-- color="blue-grey"-->
30+
<!-- v-if="extraVarsEditMode === 'json'"-->
31+
<!-- style="-->
32+
<!-- position: absolute;-->
33+
<!-- right: 0;-->
34+
<!-- top: 0;-->
35+
<!-- margin: 10px;-->
36+
<!-- "-->
37+
<!-- @click="envEditorDialog = false"-->
38+
<!-- >-->
39+
<!-- <v-icon>mdi-arrow-collapse</v-icon>-->
40+
<!-- </v-btn>-->
41+
<!-- </div>-->
42+
<!-- </v-dialog>-->
4343

4444
<v-alert
4545
:value="formError"
@@ -145,22 +145,33 @@
145145
:placeholder="$t('enterExtraVariablesJson')"
146146
/>
147147

148-
<v-btn
149-
dark
150-
fab
151-
small
152-
color="blue-grey"
148+
<RichEditor
149+
v-model="json"
153150
v-if="extraVarsEditMode === 'json'"
154151
style="
155152
position: absolute;
156153
right: 0;
157154
top: 0;
158155
margin: 10px;
159156
"
160-
@click="envEditorDialog = true"
161-
>
162-
<v-icon>mdi-arrow-expand</v-icon>
163-
</v-btn>
157+
/>
158+
159+
<!-- <v-btn-->
160+
<!-- dark-->
161+
<!-- fab-->
162+
<!-- small-->
163+
<!-- color="blue-grey"-->
164+
<!-- v-if="extraVarsEditMode === 'json'"-->
165+
<!-- style="-->
166+
<!-- position: absolute;-->
167+
<!-- right: 0;-->
168+
<!-- top: 0;-->
169+
<!-- margin: 10px;-->
170+
<!-- "-->
171+
<!-- @click="envEditorDialog = true"-->
172+
<!-- >-->
173+
<!-- <v-icon>mdi-arrow-expand</v-icon>-->
174+
<!-- </v-btn>-->
164175

165176
</div>
166177
<div v-else-if="extraVarsEditMode === 'table'">
@@ -424,12 +435,12 @@
424435
}
425436
}
426437
427-
.EnvironmentMaximizedEditor {
428-
.CodeMirror {
429-
font-size: 14px;
430-
height: 600px !important;
431-
}
432-
}
438+
//.EnvironmentMaximizedEditor {
439+
// .CodeMirror {
440+
// font-size: 14px;
441+
// height: 600px !important;
442+
// }
443+
//}
433444
</style>
434445
<script>
435446
/* eslint-disable import/no-extraneous-dependencies,import/extensions */
@@ -441,6 +452,7 @@ import 'codemirror/lib/codemirror.css';
441452
import 'codemirror/mode/vue/vue.js';
442453
import 'codemirror/addon/display/placeholder.js';
443454
import { getErrorMessage } from '@/lib/error';
455+
import RichEditor from '@/components/RichEditor.vue';
444456
445457
export default {
446458
mixins: [ItemFormBase],
@@ -450,6 +462,7 @@ export default {
450462
},
451463
452464
components: {
465+
RichEditor,
453466
codemirror,
454467
},
455468
@@ -463,11 +476,11 @@ export default {
463476
},
464477
465478
watch: {
466-
envEditorDialog(val) {
467-
this.$emit('maximize', {
468-
maximized: val,
469-
});
470-
},
479+
// envEditorDialog(val) {
480+
// this.$emit('maximize', {
481+
// maximized: val,
482+
// });
483+
// },
471484
472485
extraVarsEditMode(val) {
473486
let extraVars;
@@ -532,7 +545,7 @@ export default {
532545
},
533546
534547
extraVarsEditMode: 'json',
535-
envEditorDialog: false,
548+
// envEditorDialog: false,
536549
537550
secretStorages: null,
538551
};

‎web/src/components/InventoryForm.vue

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,18 +112,31 @@
112112
dense
113113
></v-select>
114114

115-
<codemirror
116-
:class="{
115+
<div style="position: relative">
116+
<codemirror
117+
:class="{
117118
'InventoryEditor': true,
118119
'InventoryEditor--static': item.type === 'static',
119120
'InventoryEditor--static-yaml': item.type === 'static-yaml',
120121
}"
121-
:style="{ border: '1px solid lightgray' }"
122-
v-model.trim="item.inventory"
123-
:options="cmOptions"
124-
v-if="item.type === 'static' || item.type === 'static-yaml'"
125-
:placeholder="$t('enterInventory')"
126-
/>
122+
:style="{ border: '1px solid lightgray' }"
123+
v-model.trim="item.inventory"
124+
:options="cmOptions"
125+
v-if="item.type === 'static' || item.type === 'static-yaml'"
126+
:placeholder="$t('enterInventory')"
127+
/>
128+
129+
<RichEditor
130+
v-model.trim="item.inventory"
131+
style="
132+
position: absolute;
133+
right: 0;
134+
top: 0;
135+
margin: 10px;
136+
"
137+
/>
138+
139+
</div>
127140

128141
</v-form>
129142
</template>
@@ -149,11 +162,13 @@ import { codemirror } from 'vue-codemirror';
149162
import 'codemirror/lib/codemirror.css';
150163
import 'codemirror/mode/vue/vue.js';
151164
import 'codemirror/addon/display/placeholder.js';
165+
import RichEditor from '@/components/RichEditor.vue';
152166
153167
export default {
154168
mixins: [ItemFormBase],
155169
156170
components: {
171+
RichEditor,
157172
codemirror,
158173
},
159174

‎web/src/components/RichEditor.vue

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<template>
2+
<div>
3+
<v-dialog
4+
v-model="envEditorDialog"
5+
max-width="800"
6+
persistent
7+
:transition="false"
8+
>
9+
<div style="position: relative;">
10+
<codemirror
11+
v-if="envEditorDialog"
12+
class="EnvironmentMaximizedEditor"
13+
:style="{ border: '1px solid lightgray' }"
14+
v-model="text"
15+
:options="cmOptions"
16+
:placeholder="$t('enterExtraVariablesJson')"
17+
/>
18+
19+
<v-btn
20+
dark
21+
fab
22+
small
23+
color="blue-grey"
24+
style="
25+
position: absolute;
26+
right: 0;
27+
top: 0;
28+
margin: 10px;
29+
"
30+
@click="closeDialog()"
31+
>
32+
<v-icon>mdi-arrow-collapse</v-icon>
33+
</v-btn>
34+
</div>
35+
</v-dialog>
36+
37+
<v-btn
38+
dark
39+
fab
40+
small
41+
color="blue-grey"
42+
@click="envEditorDialog = true"
43+
>
44+
<v-icon>mdi-arrow-expand</v-icon>
45+
</v-btn>
46+
47+
</div>
48+
</template>
49+
50+
<script>
51+
/* eslint-disable import/no-extraneous-dependencies,import/extensions */
52+
import { codemirror } from 'vue-codemirror';
53+
import 'codemirror/lib/codemirror.css';
54+
import 'codemirror/mode/vue/vue.js';
55+
import 'codemirror/addon/display/placeholder.js';
56+
57+
export default {
58+
props: {
59+
value: String,
60+
},
61+
62+
components: {
63+
codemirror,
64+
},
65+
66+
watch: {
67+
envEditorDialog(val) {
68+
this.$emit('maximize', {
69+
maximized: val,
70+
});
71+
},
72+
73+
value() {
74+
this.text = this.value;
75+
},
76+
},
77+
78+
created() {
79+
this.text = this.value;
80+
},
81+
82+
data() {
83+
return {
84+
85+
cmOptions: {
86+
tabSize: 2,
87+
mode: 'application/json',
88+
lineNumbers: true,
89+
line: true,
90+
lint: true,
91+
indentWithTabs: false,
92+
},
93+
94+
text: null,
95+
envEditorDialog: false,
96+
};
97+
},
98+
99+
methods: {
100+
closeDialog() {
101+
if (this.text !== this.value) {
102+
this.$emit('input', this.text);
103+
}
104+
this.envEditorDialog = false;
105+
},
106+
},
107+
};
108+
</script>
109+
<style lang="scss">
110+
.EnvironmentMaximizedEditor {
111+
.CodeMirror {
112+
font-size: 14px;
113+
height: 600px !important;
114+
}
115+
}
116+
</style>

0 commit comments

Comments
 (0)