Allow editing of remarks in preplot lines list

lib/www/client/source/src/views/LineList.vue

@@ -22,7 +22,7 @@
         :search="filter"
         :loading="loading"
         :fixed-header="true"
-        :item-class="(item) => activeItem == item ? 'blue accent-1 elevation-3' : ''"
+        :item-class="(item) => (activeItem == item && !edit) ? 'blue accent-1 elevation-3' : ''"
         @click:row="setActiveItem"
         >
         
@@ -46,6 +46,32 @@
             <span>{{ props.value.toFixed(1) }} °</span>
           </template>
           
+          <template v-slot:item.remarks="{item}">
+            <v-text-field v-if="edit && edit.line == item.line && edit.key == 'remarks'"
+              type="text"
+              v-model="edit.value"
+              prepend-icon="mdi-restore"
+              append-outer-icon="mdi-content-save-edit-outline"
+              clearable
+              @click:prepend="edit.value = item.remarks; edit = null"
+              @click:append-outer="edit = null"
+            >
+            </v-text-field>
+            <div v-else>
+              {{item.remarks}}
+              <v-btn v-if="edit === null"
+                icon
+                small
+                title="Edit"
+                :disabled="loading"
+                @click="editItem(item, 'remarks')"
+              >
+                <v-icon small>mdi-square-edit-outline</v-icon>
+              </v-btn>
+            </div>
+
+          </template>
+          
         </v-data-table>
         
       </v-card-text>
@@ -107,18 +133,70 @@ export default {
         }
       ],
       items: [],
+      filter: null,
       num_lines: null,
       sequences: [],
       activeItem: null,
-      filter: null
+      edit: null // {line, key, value}
     }
   },
 
   computed: {
     ...mapGetters(['loading'])
   },
+  
+  watch: {
+    
+    async edit (newVal, oldVal) {
+      if (newVal === null && oldVal !== null) {
+        const item = this.items.find(i => i.line == oldVal.line);
+        
+        // Get around this Vuetify ‘feature’
+        // https://github.com/vuetifyjs/vuetify/issues/4144
+        if (oldVal.value === null) oldVal.value = "";
+        
+        if (item && item[oldVal.key] != oldVal.value) {
+          console.log("original, new", item[oldVal.key], oldVal.value);
+          if (await this.saveItem(oldVal)) {
+            item[oldVal.key] = oldVal.value;
+          } else {
+            this.edit = oldVal;
+          }
+        }
+      }
+    }
+    
+  },
 
   methods: {
+    
+    editItem (item, key) {
+      this.edit = {
+        line: item.line,
+        key,
+        value: item[key]
+      }
+    },
+    
+    async saveItem (edit) {
+      if (!edit)  return;
+      
+      try {
+        const url = `/project/${this.$route.params.project}/line/${edit.line}`;
+        const init = {
+          method: "PATCH",
+          body: {
+            [edit.key]: edit.value
+          }
+        };
+        
+        let res;
+        await this.api([url, init, (e, r) => res = r]);
+        return res && res.ok;
+      } catch (err) {
+        return false;
+      }
+    },
 
     async getNumLines () {
       const projectInfo = await this.api([`/project/${this.$route.params.project}`]);