Add client side app postProcess() to fix postinstall message

dashboard/src/components/app/Backups.vue

@@ -4,11 +4,12 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, watch, onMounted, useTemplateRef } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, ButtonGroup, Dialog } from 'pankow';
 import { prettyLongDate } from 'pankow/utils';
 import { API_ORIGIN, SECRET_PLACEHOLDER } from '../../constants.js';
 import { download } from '../../utils.js';
+import SettingsItem from '../SettingsItem.vue';
 import AppsModel from '../../models/AppsModel.js';
 import BackupsModel from '../../models/BackupsModel.js';
 
@@ -52,10 +53,13 @@ const backups = ref([]);
 const editDialog = useTemplateRef('editDialog');
 const restoreDialog = useTemplateRef('restoreDialog');
 
-watch(autoBackupsEnabled, async (newValue) => {
-  const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: newValue });
-  if (error) return console.error(error);
-});
+async function onChangeAutoBackups(value) {
+  const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: value });
+  if (error) {
+    autoBackupsEnabled.value = !value;
+    return console.error(error);
+  }
+}
 
 async function onCreate() {
   createBusy.value = true;
@@ -253,15 +257,22 @@ onMounted(async () => {
 
     <hr/>
 
-    <label>{{ $t('app.backups.import.title') }}</label>
-    <p>{{ $t('app.backups.import.description') }}</p>
+    <SettingsItem>
+      <FormGroup>
+        <label>{{ $t('app.backups.import.title') }}</label>
+        <div>{{ $t('app.backups.import.description') }}</div>
+      </FormGroup>
+      <div style="display: flex; align-items: center">
+        <Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" tooltip-enable="app.taskId" uib-tooltip="App is not running">{{ $t('app.backups.backups.importAction') }}</Button>
+      </div>
+    </SettingsItem>
 
-    <Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" tooltip-enable="app.taskId" uib-tooltip="App is not running">{{ $t('app.backups.backups.importAction') }}</Button>
-
-    <hr/>
-
-    <label>{{ $t('app.backups.auto.title') }}</label>
-    <p v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></p>
-    <Switch v-model="autoBackupsEnabled" :label="$t(autoBackupsEnabled ? 'app.backups.auto.enabled' : 'app.backups.auto.disabled')"/>
+    <SettingsItem>
+      <FormGroup>
+        <label>{{ $t('app.backups.auto.title') }}</label>
+        <div v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></div>
+      </FormGroup>
+      <Switch v-model="autoBackupsEnabled" @change="onChangeAutoBackups"/>
+    </SettingsItem>
   </div>
 </template>

dashboard/src/components/app/Cron.vue

@@ -76,8 +76,6 @@ onMounted(() => {
           <textarea style="white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
         </FormGroup>
 
-        <br/>
-
         <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.cron.saveAction') }}</Button>
       </fieldset>
     </form>

dashboard/src/components/app/Info.vue

@@ -66,6 +66,7 @@ onMounted(() => {
   checklist.value = app.checklist;
   hasOldChecklist.value = !!Object.keys(app.checklist).find((k) => { return app.checklist[k].acknowledged; });
   noteContent.value = app.notes === null ? app.manifest.postInstallMessage : app.notes;
+  console.log(app.manifest.postInstallMessage)
   editing.value = false;
   busy.value = false;
 });
@@ -141,3 +142,23 @@ onMounted(() => {
     </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;
+  cursor: pointer;
+}
+
+.info-edit-indicator:hover {
+  color: white;
+  background: var(--pankow-color-primary);
+  transform: scale(1.2);
+}
+
+</style>