🚧 Able to display form data from schema

src/components/InteractiveEditor/EditItem.vue

@@ -2,18 +2,29 @@
   <modal
     :name="modalName"
     :resizable="true"
-    width="55%"
-    height="80%"
+    width="50%"
+    height="50%"
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
-  <span>Item Editor</span>
-  <input />
+  <h3>Edit Item</h3>
+  <form>
+    <div class="row" v-for="row in formData" :key="row.name">
+      <Input
+        :label="row.name"
+        :value="row.value"
+        :description="row.description"
+        layout="horizontal"
+        />
+    </div>
+  </form>
   </modal>
 </template>
 
 <script>
+import Input from '@/components/FormElements/Input';
 import StoreKeys from '@/utils/StoreMutations';
+import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
 
 export default {
@@ -21,24 +32,64 @@ export default {
   data() {
     return {
       modalName: modalNames.EDIT_ITEM,
+      schema: DashySchema.properties.sections.items.properties.items.items.properties,
+      formData: [],
+      item: {},
     };
   },
-  props: {},
+  props: {
+    itemId: String,
+  },
   computed: {},
-  components: {},
+  components: {
+    Input,
+  },
   mounted() {
+    this.item = this.getItemFromState(this.itemId);
+    this.formData = this.makeInitialFormData();
     this.$modal.show(modalNames.EDIT_ITEM);
   },
   methods: {
+    makeInitialFormData() {
+      const formData = [];
+      Object.keys(this.schema).forEach((property) => {
+        if (this.item[property]) {
+          formData.push({
+            name: property,
+            description: this.schema[property].description,
+            value: this.item[property] || '',
+          });
+        }
+      });
+      return formData;
+    },
+    getItemFromState(id) {
+      return this.$store.getters.getItemById(id);
+    },
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+      this.$emit('closeEditMenu');
     },
   },
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import '@/styles/style-helpers.scss';
 @import '@/styles/media-queries.scss';
 
+.edit-item {
+  padding: 1rem;
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+  height: 100%;
+  overflow-y: auto;
+  .row {
+    padding: 0.5rem 0.25rem;
+    &:not(:last-child) {
+      border-bottom: 1px dotted var(--config-settings-color);
+    }
+  }
+}
+
 </style>

src/components/LinkItems/Item.vue

@@ -40,7 +40,7 @@
       @launchItem="launchItem"
       @openItemSettings="openItemSettings"
     />
-    <EditItem v-if="editMenuOpen" />
+    <EditItem v-if="editMenuOpen" :itemId="id" @closeEditMenu="closeEditMenu" />
   </div>
 </template>
 
@@ -226,6 +226,10 @@ export default {
       this.$modal.show(modalNames.EDIT_ITEM);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
     },
+    /* Ensure conditional is updated, once menu closed */
+    closeEditMenu() {
+      this.editMenuOpen = false;
+    },
     /* Used for smart-sort when sorting items by most used apps */
     incrementMostUsedCount(itemId) {
       const mostUsed = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}');
@@ -298,7 +302,7 @@ export default {
 /* Text in tile */
 .tile-title {
   white-space: nowrap;
-  overflow: hidden;
+  // overflow: hidden;
   text-overflow: ellipsis;
   min-width: 120px;
   height: 30px;