🎨 Use schema title attribute if available and fixed position save menu

This commit is contained in:
Alicia Sykes 2021-10-27 22:03:28 +01:00
parent c7e6047385
commit 06dd8ed525
2 changed files with 13 additions and 8 deletions

View File

@ -22,7 +22,7 @@
v-if="row.type === 'text' || row.type === 'number'" v-if="row.type === 'text' || row.type === 'number'"
v-model="formData[index].value" v-model="formData[index].value"
:description="row.description" :description="row.description"
:label="row.name" :label="row.title || row.name"
:type="row.type" :type="row.type"
layout="horizontal" layout="horizontal"
/> />
@ -31,7 +31,7 @@
v-else-if="row.type === 'boolean'" v-else-if="row.type === 'boolean'"
v-model="formData[index].value" v-model="formData[index].value"
:description="row.description" :description="row.description"
:label="row.name" :label="row.title || row.name"
:options="['true', 'false']" :options="['true', 'false']"
:initialOption="boolToStr(formData[index].value)" :initialOption="boolToStr(formData[index].value)"
/> />
@ -42,7 +42,7 @@
:options="formData[index].enum" :options="formData[index].enum"
:description="row.description" :description="row.description"
:initialOption="formData[index].value" :initialOption="formData[index].value"
:label="row.name" :label="row.title || row.name"
class="edit-item-select" class="edit-item-select"
/> />
<!-- Warning note, for any other data types, that aren't yet supported --> <!-- Warning note, for any other data types, that aren't yet supported -->
@ -60,7 +60,7 @@
:key="row.name" :key="row.name"
@click="() => appendNewField(row.name)" @click="() => appendNewField(row.name)"
class="add-field-tag"> class="add-field-tag">
<AddIcon /> {{ row.name }} <AddIcon /> {{ row.title || row.name }}
</span> </span>
</div> </div>
</div> </div>
@ -126,15 +126,20 @@ export default {
value: this.item[property], value: this.item[property],
type: this.getInputType(this.schema[property]), type: this.getInputType(this.schema[property]),
enum: this.schema[property].enum, enum: this.schema[property].enum,
title: this.schema[property].title,
}; };
}, },
/* Make formatted data structure to be rendered as form elements */ /* Make formatted data structure to be rendered as form elements */
makeInitialFormData() { makeInitialFormData() {
const formData = []; const formData = [];
const requiredFields = ['title', 'description', 'url', 'icon', 'target']; const requiredFields = ['title', 'description', 'url', 'icon', 'target'];
const unneededFields = ['id'];
const isPrimaryField = (property) => (
this.item[property] || requiredFields.includes(property)
) && !unneededFields.includes(property);
Object.keys(this.schema).forEach((property) => { Object.keys(this.schema).forEach((property) => {
const singleRow = this.makeRowData(property); const singleRow = this.makeRowData(property);
if (this.item[property] || requiredFields.includes(property)) { if (isPrimaryField(property)) {
formData.push(singleRow); formData.push(singleRow);
} else { } else {
this.additionalFormData.push(singleRow); this.additionalFormData.push(singleRow);
@ -263,8 +268,8 @@ export default {
.input-container, .select-container { .input-container, .select-container {
width: 100%; width: 100%;
input.input-field { input.input-field {
font-size: 1rem; font-size: 1rem;
padding: 0.35rem 0.5rem; padding: 0.35rem 0.5rem;
} }
} }
} }

View File

@ -194,7 +194,7 @@ export default {
@import '@/styles/media-queries.scss'; @import '@/styles/media-queries.scss';
div.edit-mode-bottom-banner { div.edit-mode-bottom-banner {
position: absolute; position: fixed;
display: grid; display: grid;
z-index: 5; z-index: 5;
bottom: 0; bottom: 0;