Drawio: Added unsaved restore prompt and logic

diff --git a/lang/en/entities.php b/lang/en/entities.php
index b1b0e5236903a357072f2077aaf0554e27307efc..453d45d56ec1c10a986703a668177ad762742097 100644 (file)
--- a/lang/en/entities.php
+++ b/lang/en/entities.php
@@ -239,6 +239,8 @@ return [
     'pages_md_insert_drawing' => 'Insert Drawing',
     'pages_md_show_preview' => 'Show preview',
     'pages_md_sync_scroll' => 'Sync preview scroll',
+    'pages_drawing_unsaved' => 'Unsaved Drawing',
+    'pages_drawing_unsaved_confirm' => 'Unsaved drawing data was found from a previous failed drawing save attempt. Would you like to restore and continue editing this unsaved drawing?',
     'pages_not_in_chapter' => 'Page is not in a chapter',
     'pages_move' => 'Move Page',
     'pages_copy' => 'Copy Page',

diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js
index 10943ab5711652613eef7a08628023db5c9379be..46e10327a26f7438be542a48df3a1b0266202ca2 100644 (file)
--- a/resources/js/services/drawio.js
+++ b/resources/js/services/drawio.js
@@ -67,18 +67,43 @@ function drawReceive(event) {
     }
 }
 
+/**
+ * Attempt to prompt and restore unsaved drawing content if existing.
+ * @returns {Promise<void>}
+ */
+async function attemptRestoreIfExists() {
+    const backupVal = await store.get(saveBackupKey);
+    const dialogEl = document.getElementById('unsaved-drawing-dialog');
+
+    if (!dialogEl) {
+        console.error('Missing expected unsaved-drawing dialog');
+    }
+
+    if (backupVal) {
+        /** @var {ConfirmDialog} */
+        const dialog = window.$components.firstOnElement(dialogEl, 'confirm-dialog');
+        const restore = await dialog.show();
+        if (restore) {
+            onInit = async () => backupVal;
+        }
+    }
+}
+
 /**
  * Show the draw.io editor.
  * onSaveCallback must return a promise that resolves on successful save and errors on failure.
  * onInitCallback must return a promise with the xml to load for the editor.
+ * Will attempt to provide an option to restore unsaved changes if found to exist.
  * @param {String} drawioUrl
  * @param {Function<Promise<String>>} onInitCallback
  * @param {Function<Promise>} onSaveCallback - Is called with the drawing data on save.
  */
-export function show(drawioUrl, onInitCallback, onSaveCallback) {
+export async function show(drawioUrl, onInitCallback, onSaveCallback) {
     onInit = onInitCallback;
     onSave = onSaveCallback;
 
+    await attemptRestoreIfExists();
+
     iFrame = document.createElement('iframe');
     iFrame.setAttribute('frameborder', '0');
     window.addEventListener('message', drawReceive);

diff --git a/resources/views/common/confirm-dialog.blade.php b/resources/views/common/confirm-dialog.blade.php
index 8e4148b88716e9b6be23029b351447e749012161..736a1c49b7d6ada928ad8d70aca815b135f3452b 100644 (file)
--- a/resources/views/common/confirm-dialog.blade.php
+++ b/resources/views/common/confirm-dialog.blade.php
@@ -1,5 +1,6 @@
 <div components="popup confirm-dialog"
-     refs="confirm-dialog@popup {{ $ref }}"
+     @if($id ?? false) id="{{ $id }}" @endif
+     refs="confirm-dialog@popup {{ $ref ?? false }}"
      class="popup-background">
     <div class="popup-body very-small" tabindex="-1">
 

diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php
index 4ed55044bc55a866a82dfd0013bd2a05e3c947fe..6d59afe33daa9ac2abae8652ea1e0e7f41b257ba 100644 (file)
--- a/resources/views/pages/parts/form.blade.php
+++ b/resources/views/pages/parts/form.blade.php
@@ -69,4 +69,11 @@
             {{ trans('entities.pages_edit_delete_draft_confirm') }}
         </p>
     @endcomponent
+
+    {{--Saved Drawing--}}
+    @component('common.confirm-dialog', ['title' => trans('entities.pages_drawing_unsaved'), 'id' => 'unsaved-drawing-dialog'])
+        <p>
+            {{ trans('entities.pages_drawing_unsaved_confirm') }}
+        </p>
+    @endcomponent
 </div>
\ No newline at end of file