From 35ceadea3b46fa9e12c22c51821721c602e30433 Mon Sep 17 00:00:00 2001
From: wulff007 <wulff007@gmail.com>
Date: Sat, 13 Jul 2024 10:03:34 +0300
Subject: [PATCH] warn message leave with unsaved changes

---
 package.json                               |  2 +-
 src/components/UserRoleSelect.vue          |  1 +
 src/locales/en.json                        |  3 +-
 src/locales/ru.json                        |  3 +-
 src/pages/Main.vue                         |  1 -
 src/pages/PageView.vue                     | 28 +++++++++++-----
 src/pages/UserSettings.vue                 |  6 +---
 src/pages/configuration/DataSourceEdit.vue | 37 +++++++++++++++-------
 src/pages/configuration/FunctionEdit.vue   | 16 +++++++++-
 src/pages/configuration/PageDesigner.vue   | 19 +++++++++--
 src/pages/configuration/ReportEdit.vue     | 13 +++++++-
 11 files changed, 96 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index 7142538..805b56c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tabbled-web",
   "private": false,
-  "version": "0.5.19",
+  "version": "0.5.20",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/UserRoleSelect.vue b/src/components/UserRoleSelect.vue
index d29a02a..d964c71 100644
--- a/src/components/UserRoleSelect.vue
+++ b/src/components/UserRoleSelect.vue
@@ -33,6 +33,7 @@ let roles = ref([])
 
 
 const changed = (val) => {
+    console.log(val)
     value.value = val;
     emit('update:modelValue', value.value)
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 3388303..899fdfe 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -174,5 +174,6 @@
     "newPasswordRepeat": "New password repeat",
     "currentPassword": "Current password",
     "newPasswordNotEqual": "New passwords is not equal",
-    "uploaded": "Uploaded"
+    "uploaded": "Uploaded",
+    "leaveWithoutSavingWarn": "Do you really want to leave? you have unsaved changes!"
 }
\ No newline at end of file
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 90fe2fa..9193092 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -173,5 +173,6 @@
     "newPasswordRepeat": "Пароль (подтверждение)",
     "currentPassword": "Текущий пароль",
     "newPasswordNotEqual": "Пароли не совпадают",
-    "uploaded": "Загружен"
+    "uploaded": "Загружен",
+    "leaveWithoutSavingWarn": "Данные изменены, хотите выйти без сохранения?"
 }
\ No newline at end of file
diff --git a/src/pages/Main.vue b/src/pages/Main.vue
index 920f0bc..1e3c6d5 100644
--- a/src/pages/Main.vue
+++ b/src/pages/Main.vue
@@ -209,7 +209,6 @@ const currentPageTitle: ComputedRef<string> = computed((): string =>  {
 })
 
 onMounted(() => {
-    console.log('Main mounted')
     favicon.value = window['env']['appFavicon'] ? window['env']['appFavicon'] : "/favicon.png"
     title.value = window['env']['appTitle'] ? window['env']['appTitle'] : "Tabbled"
     mainViewHeight.value = mainContainer.value.$el.clientHeight
diff --git a/src/pages/PageView.vue b/src/pages/PageView.vue
index ffb4f02..83e77f2 100644
--- a/src/pages/PageView.vue
+++ b/src/pages/PageView.vue
@@ -74,7 +74,7 @@
 import _ from 'lodash'
 import {onMounted, watch, ref} from "vue";
 import {ScreenSize, PageConfigInterface, PositionElementInterface, ElementInterface} from "../model/page";
-import {useRouter, useRoute} from 'vue-router';
+import {useRouter, useRoute, onBeforeRouteLeave} from 'vue-router';
 import {usePageScriptHelper, usePageHeader} from "../services/page.service";
 import {CompiledFunc, compileScript} from "../services/compiler";
 import {ElMessage} from "element-plus";
@@ -117,6 +117,8 @@ let visibleElements = ref([])
 for(let i = 0; i < 12; i++) visibleElements.value.push([])
 let selected = ref<string[]>([])
 let canUpdate = ref(false)
+let isChanged = ref(false)
+let isLoading = ref(false)
 
 const props = defineProps<{
     pageConfig: PageConfigInterface,
@@ -179,13 +181,14 @@ async function save() {
             await editDataSource.updateById(editEntity.value.id, editEntity.value)
         }
         await updateRevision()
-        isSaving = false
+        isChanged.value = false
         await setViewed()
 
         ElMessage.success(t('saved'))
     }catch (e) {
         ElMessage.error(e.toString())
         console.error(e)
+    } finally {
         isSaving = false
     }
 }
@@ -239,12 +242,6 @@ function getValue(el: ElementInterface | any) {
     return undefined
 }
 
-function getVisible(el) {
-    console.log('getVisible', el)
-    return true
-}
-
-
 async function processVisibleAllElements() {
 
     for(let i in elements.value) {
@@ -266,6 +263,7 @@ async function processVisible(element: ElementInterface | any) {
 
 async function setValue(el:ElementInterface | any, value: any) {
     //console.log(el, value)
+
     if (isEditPage.value) {
         if (!editEntity.value)
             return false
@@ -282,6 +280,7 @@ async function setValue(el:ElementInterface | any, value: any) {
 }
 
 async function setEntityValue(alias, value) {
+    isChanged.value = true
     editEntity.value[alias] = value
 
     let fSetValue = await editDataSource.getFieldByAlias(alias).setValueFunc()
@@ -299,6 +298,7 @@ function getField(el:ElementInterface | any) {
 
 
 async function cancel() {
+    isChanged.value = false
     router.back();
 }
 
@@ -480,6 +480,9 @@ async function init() {
     }
 
     await processVisibleAllElements()
+
+    isLoading.value = false
+    isChanged.value = false
 }
 
 function processElements(elements): ElementInterface[] {
@@ -616,6 +619,15 @@ function getGridElementStyle(layout: {[key in ScreenSize]: PositionElementInterf
     return style;
 }
 
+onBeforeRouteLeave(() => {
+    if (isChanged.value) {
+        const answer = window.confirm(t('leaveWithoutSavingWarn'))
+        if (!answer) return false
+    }
+    return true
+})
+
+
 </script>
 
 <style lang="scss">
diff --git a/src/pages/UserSettings.vue b/src/pages/UserSettings.vue
index a804d9d..0c19342 100644
--- a/src/pages/UserSettings.vue
+++ b/src/pages/UserSettings.vue
@@ -84,11 +84,7 @@ onMounted(async () => {
 
 
 async function load() {
-    let user =  await server.emit("users/me", {})
-
-    userEntity.value = user
-
-    console.log(user)
+    userEntity.value = await server.emit("users/me", {})
 }
 
 async function save() {
diff --git a/src/pages/configuration/DataSourceEdit.vue b/src/pages/configuration/DataSourceEdit.vue
index 43e77dc..2c93935 100644
--- a/src/pages/configuration/DataSourceEdit.vue
+++ b/src/pages/configuration/DataSourceEdit.vue
@@ -234,7 +234,7 @@
                 <el-form label-position="top" label-width="30">
                     <el-form-item :label="t('canAdd')">
                         <div style="display: flex; flex-direction: row">
-                            <el-select v-model="dataSourceEntity.permissions.canAdd" style="padding-right: 8px; width: 250px">
+                            <el-select @change="isChanged = true" v-model="dataSourceEntity.permissions.canAdd" style="padding-right: 8px; width: 250px">
                                 <el-option
                                     v-for="item in getAccessTypes(t)"
                                     :key="item.alias"
@@ -242,13 +242,13 @@
                                     :value="item.alias"
                                 />
                             </el-select>
-                            <UserRoleSelect style="width: 100%" v-if="dataSourceEntity.permissions.canAdd === 'roles'" v-model="dataSourceEntity.permissions.canAddRoles"/>
+                            <UserRoleSelect @update:modelValue="isChanged = true" style="width: 100%" v-if="dataSourceEntity.permissions.canAdd === 'roles'" v-model="dataSourceEntity.permissions.canAddRoles"/>
                         </div>
                     </el-form-item>
 
                     <el-form-item :label="t('canEdit')">
                         <div style="display: flex; flex-direction: row">
-                            <el-select v-model="dataSourceEntity.permissions.canEdit" style="padding-right: 8px; width: 250px">
+                            <el-select @change="isChanged = true" v-model="dataSourceEntity.permissions.canEdit" style="padding-right: 8px; width: 250px">
                                 <el-option
                                     v-for="item in getAccessTypes(t)"
                                     :key="item.alias"
@@ -256,13 +256,13 @@
                                     :value="item.alias"
                                 />
                             </el-select>
-                            <UserRoleSelect style="width: 100%" v-if="dataSourceEntity.permissions.canEdit === 'roles'" v-model="dataSourceEntity.permissions.canEditRoles"/>
+                            <UserRoleSelect @update:modelValue="isChanged = true" style="width: 100%" v-if="dataSourceEntity.permissions.canEdit === 'roles'" v-model="dataSourceEntity.permissions.canEditRoles"/>
                         </div>
                     </el-form-item>
 
                     <el-form-item :label="t('canRemove')">
                         <div style="display: flex; flex-direction: row">
-                            <el-select v-model="dataSourceEntity.permissions.canRemove" style="padding-right: 8px; width: 250px">
+                            <el-select @change="isChanged = true" v-model="dataSourceEntity.permissions.canRemove" style="padding-right: 8px; width: 250px">
                                 <el-option
                                     v-for="item in getAccessTypes(t)"
                                     :key="item.alias"
@@ -270,7 +270,7 @@
                                     :value="item.alias"
                                 />
                             </el-select>
-                            <UserRoleSelect style="width: 100%" v-if="dataSourceEntity.permissions.canRemove === 'roles'" v-model="dataSourceEntity.permissions.canRemoveRoles"/>
+                            <UserRoleSelect @update:modelValue="isChanged = true" style="width: 100%" v-if="dataSourceEntity.permissions.canRemove === 'roles'" v-model="dataSourceEntity.permissions.canRemoveRoles"/>
                         </div>
                     </el-form-item>
                 </el-form>
@@ -329,7 +329,7 @@
 <script setup lang="ts">
 
 import {ElMessage, ElMessageBox} from "element-plus";
-import {useRoute, useRouter} from "vue-router";
+import {onBeforeRouteLeave, useRoute, useRouter} from "vue-router";
 import {onMounted, ref} from "vue";
 import Input from "../../components/Input.vue";
 import ItemList from "../../components/ItemList.vue";
@@ -368,6 +368,7 @@ let dsService = useDataSourceService()
 let isNew = ref(false)
 let testDataSource: DataSourceInterface = null
 const settings = useSettings()
+let isChanged = ref(false)
 
 
 let context = ref<any>(getContext())
@@ -402,8 +403,6 @@ async function load() {
     if (!route.params.id || route.params.id === 'new') {
         dataSourceEntity.value = await generateEntityWithDefault(datasource.fields)
 
-        console.log(dataSourceEntity.value)
-
         isNew.value = true
     } else {
         dataSourceEntity.value = await datasource.getById(<string>route.params.id)
@@ -417,6 +416,8 @@ async function load() {
             canEdit: 'all',
             canRemove: 'all'
         }
+
+    isChanged.value = false
 }
 
 async  function initTestDataSource() {
@@ -485,6 +486,7 @@ function setValue(alias, val) {
         return undefined;
 
     dataSourceEntity.value[alias] = val
+    isChanged.value = true
 }
 
 async function save() {
@@ -497,6 +499,7 @@ async function save() {
             await datasource.updateById(dataSourceEntity.value.id, dataSourceEntity.value)
         }
         ElMessage.success('Saved successfully')
+        isChanged.value = false
     }catch (e) {
         ElMessage.error(e.toString())
         console.error(e)
@@ -551,13 +554,12 @@ async function tryBuildDataSource() {
 function saveField() {
     fieldEditDialogVisible.value = false;
 
-    console.log(currentField.value)
-
     if (currentIndex == -1) {
         dataSourceEntity.value.fields.push(currentField.value)
     } else {
         dataSourceEntity.value.fields[currentIndex] = currentField.value
     }
+    isChanged.value = true
 }
 
 function insertField() {
@@ -570,6 +572,7 @@ function insertField() {
     }
     currentIndex = -1;
     fieldEditDialogVisible.value = true
+    isChanged.value = true
 }
 
 function editField(row) {
@@ -590,6 +593,7 @@ function removeField(row) {
     )
         .then(() => {
             dataSourceEntity.value.fields.splice(row, 1)
+            isChanged.value = true
         })
 }
 
@@ -601,6 +605,7 @@ function saveEventHandler() {
     } else {
         dataSourceEntity.value.eventHandlers[currentEventHandlerIndex] = currentEventHandler.value
     }
+    isChanged.value = true
 }
 
 function getEventHandlerTitle(item: EventHandlerInterface) {
@@ -628,6 +633,7 @@ function insertEventHandler() {
         dataSourceEntity.value.eventHandlers = []
     }
     dataSourceEntity.value.eventHandlers.push()
+    isChanged.value = true
 }
 
 function editEventHandler(row) {
@@ -648,9 +654,18 @@ function removeEventHandler(row) {
     )
         .then(() => {
             dataSourceEntity.value.eventHandlers.splice(row, 1)
+            isChanged.value = true
         })
 }
 
+onBeforeRouteLeave(() => {
+    if (isChanged.value) {
+        const answer = window.confirm(t('leaveWithoutSavingWarn'))
+        if (!answer) return false
+    }
+    return true
+})
+
 </script>
 
 <style scoped>
diff --git a/src/pages/configuration/FunctionEdit.vue b/src/pages/configuration/FunctionEdit.vue
index a290c7e..c1d996c 100644
--- a/src/pages/configuration/FunctionEdit.vue
+++ b/src/pages/configuration/FunctionEdit.vue
@@ -74,7 +74,7 @@
 <script setup lang="ts">
 
 import {ElMessage} from "element-plus";
-import {useRoute, useRouter} from "vue-router";
+import {onBeforeRouteLeave, useRoute, useRouter} from "vue-router";
 import {computed, ComputedRef, onMounted, ref} from "vue";
 import CodeEditor from "../../components/CodeEditor.vue";
 import Input from "../../components/Input.vue";
@@ -95,6 +95,7 @@ let dsService = useDataSourceService()
 let isNew = ref(false)
 let updateKey = ref(0)
 let activeTab = 'script'
+let isChanged = ref(false)
 
 const socket = useSocketClient()
 const settings = useSettings()
@@ -138,6 +139,7 @@ async function load() {
 
     roomId = `console.${flakeId.generateId().toString()}`
     socket.socket.on(roomId, consoleRoom)
+    isChanged.value = false
 }
 
 function consoleRoom(data) {
@@ -157,6 +159,8 @@ async function save() {
             await datasource.updateById(functionEntity.value.id, functionEntity.value)
         }
 
+        isChanged.value = false
+
         ElMessage.success(t('saved'))
     }catch (e) {
         ElMessage.error(e.toString())
@@ -176,6 +180,8 @@ function setValue(alias, val) {
         return undefined;
 
     functionEntity.value[alias] = val
+
+    isChanged.value = true
 }
 
 async function cancel() {
@@ -211,6 +217,14 @@ async function run() {
     }
 }
 
+onBeforeRouteLeave(() => {
+    if (isChanged.value) {
+        const answer = window.confirm(t('leaveWithoutSavingWarn'))
+        if (!answer) return false
+    }
+    return true
+})
+
 </script>
 
 <style scoped>
diff --git a/src/pages/configuration/PageDesigner.vue b/src/pages/configuration/PageDesigner.vue
index 8db89c1..9cfe9c5 100644
--- a/src/pages/configuration/PageDesigner.vue
+++ b/src/pages/configuration/PageDesigner.vue
@@ -205,7 +205,7 @@ import {
     PositionElementInterface,
     ScreenSize
 } from "../../model/page";
-import {useRoute, useRouter} from "vue-router";
+import {onBeforeRouteLeave, useRoute, useRouter} from "vue-router";
 import {useDataSourceService} from "../../services/datasource.service";
 import {usePageHeader} from "../../services/page.service";
 import _ from 'lodash'
@@ -216,7 +216,9 @@ import PageSettingsPanel from '../../components/PageSettingsPanel.vue'
 import { FlakeId } from '../../flake-id'
 import {useSettings} from "../../services/settings.service";
 import {generateEntityWithDefault} from "../../model/field";
+import {useI18n} from "vue-i18n";
 let flakeId = new FlakeId()
+const { t } = useI18n();
 
 interface ComponentDropInterface extends ComponentInterface {
     layerX: number,
@@ -367,11 +369,14 @@ function getElementProperties(element: ElementInterface | any) {
 }
 
 async function init() {
+    isChanged.value = false
     if (!route.params.id) {
         console.error("Id not provided in url params")
         return;
     }
 
+
+
     if (route.params.id === 'new') {
         pageConfig.value = {
             id: null,
@@ -436,6 +441,8 @@ async function save() {
             await ds.updateById(pageConfig.value.id, pageConfig.value)
         }
 
+        isChanged.value = false
+
         ElMessage.success('Saved successfully')
     } catch (e) {
         ElMessage.error(e.toString())
@@ -613,8 +620,6 @@ async function dropNewWidget(e:DragEvent) {
     let startCol = Math.round((relatedX - item.layerX)  / colWidth)
     let startRow = Math.round((relatedY)  / 76)
 
-    console.log(item, comp)
-
 
     startCol = startCol >= 1 ? startCol : 1
     let endCol = startCol + comp.defaultPosition.cols;
@@ -653,6 +658,14 @@ async function dropNewWidget(e:DragEvent) {
     isChanged.value = true;
 }
 
+onBeforeRouteLeave(() => {
+    if (isChanged.value) {
+        const answer = window.confirm(t('leaveWithoutSavingWarn'))
+        if (!answer) return false
+    }
+    return true
+})
+
 </script>
 
 <style lang="scss">
diff --git a/src/pages/configuration/ReportEdit.vue b/src/pages/configuration/ReportEdit.vue
index ff95d12..b699e59 100644
--- a/src/pages/configuration/ReportEdit.vue
+++ b/src/pages/configuration/ReportEdit.vue
@@ -153,7 +153,7 @@
 <script setup lang="ts">
 
 import {ElMessage} from "element-plus";
-import {useRoute, useRouter} from "vue-router";
+import {onBeforeRouteLeave, useRoute, useRouter} from "vue-router";
 import {computed, ComputedRef, onMounted, ref} from "vue";
 import CodeEditor from "../../components/CodeEditor.vue";
 import Input from "../../components/Input.vue";
@@ -179,6 +179,7 @@ let dsService = useDataSourceService()
 let isNew = ref(false)
 let activeTab = ref('template')
 let pages = ref([])
+let isChanged = ref(false)
 
 const { t } = useI18n();
 
@@ -218,6 +219,7 @@ async function load() {
         isNew.value = false
     }
 
+    isChanged.value = false
 
     if(!reportEntity.value.permissions)
         reportEntity.value.permissions = {
@@ -249,6 +251,7 @@ async function save() {
             await datasource.updateById(reportEntity.value.id, reportEntity.value)
         }
 
+        isChanged.value = false
         ElMessage.success(t('saved'))
     }catch (e) {
         ElMessage.error(e.toString())
@@ -268,6 +271,7 @@ function setValue(alias, val) {
         return undefined;
 
     reportEntity.value[alias] = val
+    isChanged.value = true
 }
 
 async function cancel() {
@@ -373,6 +377,13 @@ function loadFile() : Promise<any> {
     })
 }
 
+onBeforeRouteLeave(() => {
+    if (isChanged.value) {
+        const answer = window.confirm(t('leaveWithoutSavingWarn'))
+        if (!answer) return false
+    }
+    return true
+})
 
 </script>