From dd71658d7072d76501d882ffe4c349f3b55e5b33 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 23 Aug 2023 14:16:20 +0100
Subject: [PATCH] Drawio: Added unsaved restore prompt and logic

---
 lang/en/entities.php                          |  2 ++
 resources/js/services/drawio.js               | 27 ++++++++++++++++++-
 .../views/common/confirm-dialog.blade.php     |  3 ++-
 resources/views/pages/parts/form.blade.php    |  7 +++++
 4 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/lang/en/entities.php b/lang/en/entities.php
index b1b0e5236..453d45d56 100644
--- 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 10943ab57..46e10327a 100644
--- 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 8e4148b88..736a1c49b 100644
--- 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 4ed55044b..6d59afe33 100644
--- 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