[ui] rudimentary edit mode

ui/src/components/AttributeView.vue

@@ -24,7 +24,7 @@
       :is="component.name"
       v-bind="component.props"
       :attributes="attributes"
-      :insertable="insertable"
+      :editable="editable"
       :reverse="reverse"
       @edit="processChange"
     />
@@ -63,7 +63,7 @@ export default defineComponent({
       type: String,
       required: false,
     },
-    insertable: {
+    editable: {
       type: Boolean,
       default: false,
     },

ui/src/components/TextInput.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="text-input">
     <sl-icon-button
+      v-if="editable"
       class="edit-button"
       name="pencil"
       @click="editing = true"
@@ -33,6 +34,10 @@ export default defineComponent({
   name: "TextInput",
   emits: ["edit"],
   props: {
+    editable: {
+      type: Boolean,
+      default: true,
+    },
     value: {
       required: true,
     },

ui/src/components/widgets/Table.vue

@@ -15,7 +15,7 @@
         <tr v-for="[id, entry] in limitedAttributes" :key="id">
           <td v-if="editable" class="attr-action">
             <sl-icon-button
-              v-if="deletable"
+              v-if="editable"
               name="x-circle"
               @click="removeEntry(id)"
             />
@@ -25,6 +25,7 @@
           </td>
           <td>
             <text-input
+              :editable="editable"
               :value="entry.value.c"
               @edit="(val) => updateEntry(id, entry.attribute, val)"
             >
@@ -56,7 +57,7 @@
             </sl-button>
           </td>
         </tr>
-        <tr v-if="insertable">
+        <tr v-if="editable">
           <td class="attr-action">
             <sl-icon-button name="plus-circle" @click="addEntry()" />
           </td>
@@ -116,11 +117,7 @@ export default defineComponent({
       type: Array as PropType<[string, IEntry][]>,
       required: true,
     },
-    deletable: {
-      type: Boolean,
-      default: true,
-    },
-    insertable: {
+    editable: {
       type: Boolean,
       default: false,
     },
@@ -137,7 +134,7 @@ export default defineComponent({
   },
   setup(props) {
     const editable = computed(() => {
-      return (props.deletable || props.insertable) && !props.reverse;
+      return props.editable && !props.reverse;
     });
 
     // Enable IntersectionObserver for performance reasons

ui/src/views/Browse.vue

@@ -6,26 +6,35 @@
       :key="address"
       :data-address="address"
     >
-      <header :class="{ disabled: addresses.length === 1 }">
+      <header>
+        <sl-icon-button
+          class="edit-button"
+          name="pencil"
+          @click="editable[idx] = !editable[idx]"
+        />
         <sl-icon-button
           class="this-button"
           name="bookmark"
           @click="visit(idx)"
+          :disabled="addresses.length === 1"
         />
         <sl-icon-button
           class="close-button"
           name="x-circle"
           @click="close(idx)"
+          :disabled="addresses.length === 1"
         />
       </header>
-      <Inspect :address="address" />
+      <Inspect :address="address" :editable="editable[idx] || false" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import router from "@/router";
 import Inspect from "@/views/Inspect.vue";
-import { defineComponent, PropType } from "vue";
+import { defineComponent, nextTick, PropType, reactive, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 
 export default defineComponent({
   name: "Browse",
@@ -34,36 +43,49 @@ export default defineComponent({
   },
   props: {
     addresses: {
-      type: Array as PropType<String[]>,
+      type: Array as PropType<string[]>,
       required: true,
     },
   },
-  watch: {
-    addresses(addresses: string[], prevAddresses: string[]) {
-      const root = this.$refs.root as HTMLDivElement;
-      if (addresses.length > prevAddresses.length) {
-        this.$nextTick().then(() => {
-          root.scrollTo({
-            left: root.scrollWidth,
-            behavior: "smooth",
-          });
-        });
-      }
-    },
-  },
-  methods: {
-    visit(idx: number) {
-      this.$router.push({
-        params: { addresses: [this.$route.params.addresses[idx]] },
+  setup(props) {
+    const route = useRoute();
+    const root = ref<HTMLDivElement>();
+    const editable = reactive<boolean[]>([]);
+
+    function visit(idx: number) {
+      router.push({
+        params: { addresses: [route.params.addresses[idx]] },
       });
-    },
-    close(idx: number) {
-      const addresses = [...this.$route.params.addresses];
+    }
+
+    function close(idx: number) {
+      const addresses = [...route.params.addresses];
       addresses.splice(idx, 1);
-      this.$router.push({
+      router.push({
         params: { addresses },
       });
-    },
+    }
+
+    watch(
+      () => props.addresses,
+      (addresses: string[], prevAddresses: string[]) => {
+        if (addresses.length > prevAddresses.length) {
+          nextTick().then(() => {
+            root.value?.scrollTo({
+              left: root.value.scrollWidth,
+              behavior: "smooth",
+            });
+          });
+        }
+      }
+    );
+
+    return {
+      root,
+      visit,
+      close,
+      editable,
+    };
   },
 });
 </script>
@@ -104,11 +126,6 @@ export default defineComponent({
       position: absolute;
       right: 0;
     }
-
-    &.disabled {
-      opacity: 0.5;
-      pointer-events: none;
-    }
   }
 }
 </style>

ui/src/views/Inspect.vue

@@ -10,6 +10,7 @@
     <div v-if="!error">
       <AttributeView
         v-for="(attributes, typeAddr) in typedAttributes"
+        :editable="editable"
         :key="typeAddr"
         :address="address"
         :type="types[typeAddr]"
@@ -18,7 +19,8 @@
       />
       <AttributeView
         title="Other attributes"
-        insertable
+        v-if="untypedAttributes.length > 0 || editable"
+        editable
         :address="address"
         :attributes="untypedAttributes"
         @change="mutate()"
@@ -73,6 +75,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const { error, mutate, attributes, backlinks } = useEntity(