🚧 You can now add more items, neat!

src/components/InteractiveEditor/EditItem.vue

@@ -7,15 +7,29 @@
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
-    <h3>Edit Item</h3>
+    <h3 class="title">Edit Item</h3>
+    <p class="sub-title">Editing {{item.title}} (ID: {{itemId}})</p>
     <div class="row" v-for="(row, index) in formData" :key="row.name">
       <Input
         v-model="formData[index].value"
         :description="row.description"
         :label="row.name"
+        :type="row.type"
         layout="horizontal"
         />
     </div>
+    <div class="add-more-inputs">
+      <h4>More Fields</h4>
+      <div class="more-fields">
+        <span
+          v-for="row in additionalFormData"
+          :key="row.name"
+          @click="() => appendNewField(row.name)"
+          class="add-field-tag">
+          ➕ {{ row.name }}
+        </span>
+      </div>
+    </div>
     <Button :click="saveItem">Save</Button>
   </modal>
 </template>
@@ -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]) {
+        const singleRow = {
-          formData.push({
+          name: property,
-            name: property,
+          description: this.schema[property].description,
-            description: this.schema[property].description,
+          value: this.item[property] || '',
-            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);
+      }
+    }
+  }
 }
 
 </style>