diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index d248aee9..0a2a3a81 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -7,15 +7,29 @@
classes="dashy-modal edit-item"
@closed="modalClosed"
>
-
Edit Item
+ Edit Item
+ Editing {{item.title}} (ID: {{itemId}})
+
@@ -34,6 +48,7 @@ export default {
modalName: modalNames.EDIT_ITEM,
schema: DashySchema.properties.sections.items.properties.items.items.properties,
formData: [],
+ additionalFormData: [],
item: {},
};
},
@@ -53,13 +68,20 @@ export default {
methods: {
makeInitialFormData() {
const formData = [];
+ const requiredFields = ['title', 'description', 'url', 'icon', 'target', 'hotkey', 'provider', 'tags'];
+ const acceptedTypes = ['text', 'number'];
+ const getType = (origType) => (acceptedTypes.includes(origType) ? origType : 'text');
Object.keys(this.schema).forEach((property) => {
- if (this.item[property]) {
- formData.push({
- name: property,
- description: this.schema[property].description,
- value: this.item[property] || '',
- });
+ const singleRow = {
+ name: property,
+ description: this.schema[property].description,
+ value: this.item[property] || '',
+ type: getType(this.schema[property].type),
+ };
+ if (this.item[property] || requiredFields.includes(property)) {
+ formData.push(singleRow);
+ } else {
+ this.additionalFormData.push(singleRow);
}
});
return formData;
@@ -72,8 +94,21 @@ export default {
this.formData.forEach((row) => {
newItem[row.name] = row.value;
});
+ newItem.id = this.itemId;
this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
},
+ appendNewField(filedId) {
+ Object.keys(this.schema).forEach((property) => {
+ if (property === filedId) {
+ this.formData.push({
+ name: property,
+ description: this.schema[property].description,
+ value: this.item[property] || '',
+ type: 'text',
+ });
+ }
+ });
+ },
modalClosed() {
this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
this.$emit('closeEditMenu');
@@ -92,6 +127,16 @@ export default {
color: var(--config-settings-color);
height: 100%;
overflow-y: auto;
+ h3.title {
+ font-size: 1.2rem;
+ margin: 0.25rem 0;
+ }
+ p.sub-title {
+ margin: 0.25rem 0;
+ font-size: 0.8rem;
+ font-style: italic;
+ opacity: var(--dimming-factor);
+ }
.row {
padding: 0.5rem 0.25rem;
&:not(:last-child) {
@@ -102,6 +147,23 @@ export default {
padding: 0.35rem 0.5rem;
}
}
+ .more-fields {
+ display: flex;
+ flex-wrap: wrap;
+ .add-field-tag {
+ margin: 0.2rem;
+ padding: 0.2rem 0.5rem;;
+ min-width: 2rem;
+ cursor: pointer;
+ text-align: center;
+ border: 1px solid var(--config-settings-color);
+ border-radius: var(--curve-factor);
+ &:hover {
+ background: var(--config-settings-color);
+ color: var(--config-settings-background);
+ }
+ }
+ }
}