Rework postinstall admin notes edit behavior

dashboard/src/components/app/Info.vue

@@ -1,13 +1,11 @@
 <script setup>
 
-import { onMounted, ref, inject } from 'vue';
+import { onMounted, ref, useTemplateRef, inject } from 'vue';
 import { Button } from '@cloudron/pankow';
 import { prettyDate } from '@cloudron/pankow/utils';
 import { stripSsoInfo } from '../../utils.js';
 import { marked } from 'marked';
 import AppsModel from '../../models/AppsModel.js';
-import EditableField from '../../components/EditableField.vue';
-import SettingsItem from '../../components/SettingsItem.vue';
 
 const appsModel = AppsModel.create();
 
@@ -18,6 +16,10 @@ const hasOldChecklist = ref(false);
 const editing = ref(false);
 const busy = ref(false);
 const placeholder = 'Add admin notes here...';
+const noteContent = ref('');
+const emit = defineEmits([ 'changed' ]);
+
+const notesTextarea = useTemplateRef('notesTextarea');
 const profile = inject('profile');
 
 async function onAckChecklistItem(item, key) {
@@ -31,25 +33,42 @@ async function onAckChecklistItem(item, key) {
 }
 
 // Notes
-const notes = ref('');
-const savingNotes = ref(false);
+async function onSubmit() {
+  busy.value = true;
 
-async function onNotesSave(newNotes) {
-  savingNotes.value = true;
+  // skip saving if unchanged from postInstall
+  if (noteContent.value === props.app.manifest.postInstallMessage) {
+    busy.value = false;
+    editing.value = false;
+    return;
+  }
 
-  const [error] = await appsModel.configure(props.app.id, 'notes', { notes: newNotes });
-  savingNotes.value = false;
-  if (error) return console.error(error);
+  const [error] = await appsModel.configure(props.app.id, 'notes', { notes: noteContent.value });
+  if (error) {
+    busy.value = false;
+    return console.error(error);
+  }
 
-  notes.value = newNotes;
-  if (!notes.value) notes.value = placeholder;
+  // let main view know about this
+  emit('changed');
+
+  editing.value = false;
+  busy.value = false;
+}
+
+function onEdit() {
+  editing.value = true;
+  setTimeout(() => notesTextarea.value.focus(), 200);
+}
+
+function onDismiss() {
+  editing.value = false;
+  noteContent.value = props.app.notes === null ? props.app.manifest.postInstallMessage : props.app.notes;
 }
 
 onMounted(() => {
   hasOldChecklist.value = !!Object.keys(props.app.checklist).find((k) => { return props.app.checklist[k].acknowledged; });
-  notes.value = props.app.notes;
-  if (notes.value === null && props.app.manifest.postInstallMessage) notes.value = stripSsoInfo(props.app.manifest.postInstallMessage, props.app.sso).trim();
-  if (!notes.value) notes.value = placeholder;
+  noteContent.value = props.app.notes === null ? props.app.manifest.postInstallMessage : props.app.notes;
 
   editing.value = false;
   busy.value = false;
@@ -108,30 +127,37 @@ onMounted(() => {
       </div>
     </div>
 
-    <br/>
+    <label class="control-label">
+      {{ $t('app.info.notes.title') }}
+      <i v-show="!editing" class="info-edit-indicator fa fa-pencil-alt" @click="onEdit()"></i>
+    </label>
 
-    <SettingsItem>
-      <EditableField :label="$t('app.info.notes.title')" multiline markdown rows="8" :saving="savingNotes" :value="notes" @save="onNotesSave"/>
-    </SettingsItem>
+    <div>
+      <div v-show="!editing">
+        <div v-if="noteContent" v-html="marked.parse(stripSsoInfo(noteContent, app.sso))"></div>
+        <div v-else class="text-muted hand" @click="onEdit()">{{ placeholder }}</div>
+      </div>
+      <div v-show="editing">
+        <textarea ref="notesTextarea" style="white-space: pre-wrap; margin-bottom: 5px; width: 100%" v-model="noteContent" rows="10"></textarea>
+        <div style="display: flex; gap: 5px">
+          <Button secondary @click="onDismiss()" v-show="!busy">{{ $t('main.dialog.cancel') }}</Button>
+          <Button @click="onSubmit()" :disabled="busy" :loading="busy">{{ $t('app.display.saveAction') }}</Button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
 
 .info-edit-indicator {
-  float: right;
-  border-radius: 20px;
-  padding: 5px;
   color: var(--pankow-text-color);
-  background-color: var(--pankow-input-background-color);
-  transition: all 250ms;
+  margin-left: 10px;
   cursor: pointer;
 }
 
 .info-edit-indicator:hover {
-  color: white;
-  background: var(--pankow-color-primary);
-  transform: scale(1.2);
+  color: var(--pankow-color-dark);
 }
 
 .checklist-item {