From 9cd6382bfc94ecc06ccc6956650924aa33d84751 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Wed, 31 May 2023 00:29:10 +0200
Subject: [PATCH] native dialog on android & ios

---
 package-lock.json                   | 15 ++++++
 package.json                        |  1 +
 src/components/Note/NoteToolbar.vue | 72 +++++++++++++++++++++--------
 src/components/ViewModes/Note.vue   | 23 ++++-----
 4 files changed, 82 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3dfc642..d7f5434 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@capacitor/android": "^5.0.4",
         "@capacitor/core": "^5.0.4",
+        "@capacitor/dialog": "^5.0.2",
         "@capacitor/ios": "^5.0.4",
         "@ckeditor/ckeditor5-autoformat": "^37.1.0",
         "@ckeditor/ckeditor5-basic-styles": "^37.1.0",
@@ -266,6 +267,14 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@capacitor/dialog": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/dialog/-/dialog-5.0.2.tgz",
+      "integrity": "sha512-9SCknNv2Z9Q3MazjA2a8uZbbmbsGViO0k6OcKgirccXbJoz0uj2x8XiNqOaqLZKeZn0zSD3Lu7J4eJYmLFH+AQ==",
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0"
+      }
+    },
     "node_modules/@capacitor/ios": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-5.0.4.tgz",
@@ -13342,6 +13351,12 @@
         "tslib": "^2.1.0"
       }
     },
+    "@capacitor/dialog": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/dialog/-/dialog-5.0.2.tgz",
+      "integrity": "sha512-9SCknNv2Z9Q3MazjA2a8uZbbmbsGViO0k6OcKgirccXbJoz0uj2x8XiNqOaqLZKeZn0zSD3Lu7J4eJYmLFH+AQ==",
+      "requires": {}
+    },
     "@capacitor/ios": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-5.0.4.tgz",
diff --git a/package.json b/package.json
index 9436932..9460709 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@capacitor/android": "^5.0.4",
     "@capacitor/core": "^5.0.4",
+    "@capacitor/dialog": "^5.0.2",
     "@capacitor/ios": "^5.0.4",
     "@ckeditor/ckeditor5-autoformat": "^37.1.0",
     "@ckeditor/ckeditor5-basic-styles": "^37.1.0",
diff --git a/src/components/Note/NoteToolbar.vue b/src/components/Note/NoteToolbar.vue
index 838a1cc..22e7db5 100644
--- a/src/components/Note/NoteToolbar.vue
+++ b/src/components/Note/NoteToolbar.vue
@@ -1,11 +1,53 @@
 <script setup lang="ts">
+import { Capacitor } from '@capacitor/core'
+import { Dialog } from '@capacitor/dialog'
+import type { ConfirmOptions } from '@capacitor/dialog'
+
 const props = defineProps<{
   note: Note
 }>()
+
+type ActionKey = 'delete' | 'setRoot'
+
+interface ModalOptions {
+  key: ActionKey
+  icon: string
+  confirmOptions: ConfirmOptions
+}
+
+const confirmModals: ModalOptions[] = [
+  {
+    key: 'delete',
+    icon: 'fas fa-fw fa-trash',
+    confirmOptions: {
+      title: 'Delete note',
+      message: 'Are you sure you want to delete this note?',
+      okButtonTitle: 'Delete note'
+    }
+  },
+  {
+    key: 'setRoot',
+    icon: 'fas fa-fw fa-sitemap',
+    confirmOptions: {
+      title: 'Set root note',
+      message: 'Are you sure you want to set this note as root note?',
+      okButtonTitle: 'Set note as root note'
+    }
+  }
+]
+
 const emit = defineEmits<{
-  delete: [close: () => void]
-  setRoot: [close: () => void]
+  execute: [actionType: ActionKey, close?: () => void]
 }>()
+
+const openModal = async (open: () => void, modal: ModalOptions) => {
+  if (['android', 'ios'].includes(Capacitor.getPlatform())) {
+    const { value: confirmed } = await Dialog.confirm(modal.confirmOptions)
+    if (confirmed) emit('execute', modal.key)
+  } else {
+    open()
+  }
+}
 </script>
 <template>
   <div class="mb-2 flex items-center space-x-2">
@@ -13,27 +55,21 @@ const emit = defineEmits<{
       <slot name="title"></slot>
     </h1>
     <UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
-      <UIModal>
+      <UIModal v-for="confirmModal in confirmModals" :key="confirmModal.key">
         <template #activator="{ open }">
-          <UIButton size="sm" @click="open"><i class="fas fa-fw fa-trash" /></UIButton>
+          <UIButton size="sm" @click="openModal(open, confirmModal)">
+            <i :class="confirmModal.icon" />
+          </UIButton>
         </template>
-        <template #title><i class="fas fa-fw fa-trash mr-2" />Delete note</template>
-        <template #default>Are you sure you want to delete this note?</template>
-        <template #actions="{ close }">
-          <UIButton size="sm" color="primary" @click="emit('delete', close)">Delete notes</UIButton>
-          <UIButton size="sm" @click="close">Cancel</UIButton>
+        <template #title>
+          <i class="mr-2" :class="confirmModal.icon" />
+          {{ confirmModal.confirmOptions.title }}
         </template>
-      </UIModal>
-      <UIModal>
-        <template #activator="{ open }">
-          <UIButton size="sm" @click="open"><i class="fas fa-fw fa-sitemap" /></UIButton>
-        </template>
-        <template #title><i class="fas fa-fw fa-sitemap mr-2" />Set root note</template>
-        <template #default>Are you sure you want to set this note as root note?</template>
+        <template #default>{{ confirmModal.confirmOptions.message }}</template>
         <template #actions="{ close }">
           <UIButton size="sm" @click="close">Cancel</UIButton>
-          <UIButton size="sm" color="primary" @click="emit('setRoot', close)">
-            Set current note as root
+          <UIButton size="sm" color="primary" @click="emit('execute', confirmModal.key, close)">
+            {{ confirmModal.confirmOptions.okButtonTitle }}
           </UIButton>
         </template>
       </UIModal>
diff --git a/src/components/ViewModes/Note.vue b/src/components/ViewModes/Note.vue
index b989819..2d8f258 100644
--- a/src/components/ViewModes/Note.vue
+++ b/src/components/ViewModes/Note.vue
@@ -30,26 +30,27 @@ const updateNoteContent = (content: string) => {
 
 const references = computed<Note[]>(() => getNoteReferences(props.note))
 
-const del = async (closeModal: () => Promise<Boolean>) => {
-  await closeModal()
-  setActiveNote(rootNote.value?.id)
-  deleteNote(props.note.id)
-}
-
-const setRoot = async (closeModal: () => Promise<Boolean>) => {
-  setRootNote(props.note.id)
-  closeModal()
+const handleAction = async (action: string, closeModal: () => Promise<Boolean>) => {
+  if (action === 'delete') {
+    if (closeModal) await closeModal()
+    setActiveNote(rootNote.value?.id)
+    deleteNote(props.note.id)
+  }
+  if (action === 'setRoot') {
+    setRootNote(props.note.id)
+    if (closeModal) closeModal()
+  }
 }
 </script>
 <template>
   <div class="flex flex-grow flex-col">
-    <NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
+    <NoteToolbar :note="props.note" @execute="handleAction">
       <template #title>
         <i
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
           v-if="props.note.isRoot"
         ></i>
-        <input type="text" class="bg-transparent pb-1 outline-none w-full" v-model="noteTitle" />
+        <input type="text" class="w-full bg-transparent pb-1 outline-none" v-model="noteTitle" />
       </template>
     </NoteToolbar>
     <NoteEditor