Refactor the interface between ProjectSettings and subcomponents.

This is still not set in stone and not fully consistent from one
subcomponent to another, but the general idea is that instead of
passing everything in one property via v-model we use v-bind
instead with a variable list of props depending on the needs of
the subcomponent.

We listen for @input and a new @merge event in order to apply
any changes to the *local* configuration. The local configuration
then needs to be uploaded to the server via a separate step. We
might change this in a later commit, so that changes made in
subcomponents are automatically applied to the local configuration.
This commit is contained in:
D. Berge
2023-11-13 21:00:07 +01:00
parent 13f68d7314
commit 399e86be87

View File

@@ -55,7 +55,12 @@
</v-col> </v-col>
<v-col cols="8" v-if="activeComponent"> <v-col cols="8" v-if="activeComponent">
<component :is="activeComponent" :value="activeValues" @input="save" @close="deselect"></component> <component
:is="activeComponent"
v-bind="activeValues"
@merge="merge"
@close="deselect"
></component>
</v-col> </v-col>
<v-col cols="8" v-else> <v-col cols="8" v-else>
<v-card> <v-card>
@@ -206,68 +211,41 @@ export default {
values: (obj) => ({ values: (obj) => ({
id: obj?.id, id: obj?.id,
name: obj?.name name: obj?.name
}), })
save: async (data, cfg) => {
await this.patch({
id: data.id,
name: data.name,
});
}
}, },
{ {
id: "groups", id: "groups",
name: "Groups", name: "Groups",
values: (obj) => ({ values: (obj) => ({
groups: obj?.groups groups: obj?.groups
}), })
save: async (data, cfg) => {
await this.patch({
groups: data.groups,
});
}
}, },
{ {
id: "geodetics", id: "geodetics",
name: "Geodetics", name: "Geodetics",
values: (obj) => ({ values: (obj) => ({
epsg: obj?.epsg epsg: obj?.epsg
}), })
save: async (data, cfg) => {
await this.patch({
epsg: data.epsg
});
}
}, },
{ {
id: "binning", id: "binning",
name: "Binning", name: "Binning",
values: (obj) => { values: (obj) => ({
const data = {...obj.binning}; ...obj.binning
data.origin = {...obj.binning.origin}; })
return data;
},
save: async (data, cfg) => {
await this.patch({binning: {...data}});
}
}, },
{ {
id: "input_files", id: "input_files",
name: "Input files", name: "Input files",
values: obj => ({ path: obj.rootPath}), values: obj => ({ rootPath: obj.rootPath}),
save: async (data, cfg) => {
await this.patch({rootPath: data.path});
},
children: [ children: [
{ {
id: "preplots", id: "preplots",
name: "Preplots", name: "Preplots",
values: (obj) => ({ values: (obj) => ({
preplots: obj.preplots, preplots: structuredClone(obj.preplots),
rootPath: obj.rootPath rootPath: obj.rootPath
}), })
save: async (data, cfg) => {
await this.patch({preplots: [...data.preplots]})
}
}, },
{ {
id: "raw_data", id: "raw_data",
@@ -278,16 +256,14 @@ export default {
name: "P1/11", name: "P1/11",
values: (obj) => ({ values: (obj) => ({
rootPath: obj.rootPath, rootPath: obj.rootPath,
globs: [...obj.raw.p111.globs], globs: obj.raw.p111.globs,
paths: [...obj.raw.p111.paths], paths: obj.raw.p111.paths,
pattern: structuredClone(obj.raw.p111.pattern) pattern: obj.raw?.p111?.pattern,
}), lineNameInfo: obj.raw?.p111?.lineNameInfo
save: async (data, cfg) => { })
await this.patch({raw: {p111: {...data}}});
}
}, },
{ {
id: "raw_data_smartsource", id: "raw_data_smsrc",
name: "Smartsource", name: "Smartsource",
values: (obj) => ({ values: (obj) => ({
rootPath: obj.rootPath, rootPath: obj.rootPath,
@@ -305,19 +281,7 @@ export default {
values: (obj) => ({ values: (obj) => ({
regex: obj.raw.ntbp?.pattern?.regex, regex: obj.raw.ntbp?.pattern?.regex,
flags: obj.raw.ntbp?.pattern?.flags flags: obj.raw.ntbp?.pattern?.flags
}), })
save: async (data, cfg) => {
await this.patch({
raw:{
ntbp: {
pattern: {
regex: data.regex,
flags: data.flags
}
}
}
})
}
} }
] ]
}, },
@@ -330,13 +294,10 @@ export default {
name: "P1/11", name: "P1/11",
values: (obj) => ({ values: (obj) => ({
rootPath: obj.rootPath, rootPath: obj.rootPath,
globs: [...obj.final.p111.globs], globs: obj.final.p111.globs,
paths: [...obj.final.p111.paths], paths: obj.final.p111.paths,
pattern: structuredClone(obj.final.p111.pattern) pattern: obj.final.p111.pattern
}), })
save: async (data, cfg) => {
await this.patch({final: {p111: {...data}}});
}
}, },
{ {
id: "final_data_pending", id: "final_data_pending",
@@ -344,19 +305,7 @@ export default {
values: (obj) => ({ values: (obj) => ({
regex: obj.final.pending?.pattern?.regex, regex: obj.final.pending?.pattern?.regex,
flags: obj.final.pending?.pattern?.flags flags: obj.final.pending?.pattern?.flags
}), })
save: async (data, cfg) => {
await this.patch({
final:{
pending: {
pattern: {
regex: data.regex,
flags: data.flags
}
}
}
})
}
} }
] ]
}, },
@@ -365,52 +314,19 @@ export default {
{ {
id: "line_name_format", id: "line_name_format",
name: "Line name format", name: "Line name format",
values: (obj) => ({...obj.online?.line?.pattern}), values: (obj) => ({
save: async (data, cfg) => { lineNameInfo: obj?.online?.line?.lineNameInfo
await this.patch({ })
online: {
line: {
pattern: {
...data
}
}
}
});
}
}, },
{ {
id: "planner_settings", id: "planner_settings",
name: "Planner settings", name: "Planner settings",
values: (obj) => ({...obj.planner}), values: (obj) => ({planner: obj?.planner})
save: async (data, cfg) => {
await this.patch({
planner: {...data}
});
}
}, },
{ {
id: "production", id: "production",
name: "Production settings", name: "Production settings",
values: (obj) => ({...obj.production}), values: (obj) => ({production: obj?.production})
save: async (data, cfg) => {
await this.patch({
production: {...data}
});
}
},
{
id: "logging",
name: "Logging",
children: [
{
id: "logging_preset_comments",
name: "Preset comments"
},
{
id: "logging_labels",
name: "Labels"
}
]
}, },
{ {
id: "cloud_apis", id: "cloud_apis",
@@ -419,10 +335,7 @@ export default {
{ {
id: "asaqc", id: "asaqc",
name: "ASAQC", name: "ASAQC",
values: (obj) => ({...obj.asaqc}), values: (obj) => ({value: obj?.cloud?.asaqc}),
save: async (data, cfg) => {
await this.patch({asaqc: {...cfg}});
}
} }
] ]
} }
@@ -530,20 +443,12 @@ export default {
this.active.pop(); this.active.pop();
}, },
async save (data) { merge ([path, value]) {
console.log("SAVING", data); console.log("MERGING", path, value);
if (this.activeItem?.save) { deepSet(this.configuration, path, value);
await this.activeItem.save(data, this.configuration);
/*
const cfg = this.activeItem.save(data, this.configuration);
this.configuration = {...cfg};
this.surveyState = false;
*/
// TODO And now push to the server
}
}, },
// Use to change the project's archival status
async patch (data) { async patch (data) {
const url = `/project/${this.$route.params.project}/configuration`; const url = `/project/${this.$route.params.project}/configuration`;
const init = { const init = {