warn message leave with unsaved changes

ddkwork · Jul 13, 2024 · 35ceade · 35ceade
1 parent b21907e
commit 35ceade
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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!"
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
@@ -173,5 +173,6 @@
     "newPasswordRepeat": "Пароль (подтверждение)",
     "currentPassword": "Текущий пароль",
     "newPasswordNotEqual": "Пароли не совпадают",
-    "uploaded": "Загружен"
+    "uploaded": "Загружен",
+    "leaveWithoutSavingWarn": "Данные изменены, хотите выйти без сохранения?"
 }
diff --git 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
@@ -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
@@ -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
@@ -234,43 +234,43 @@
                 <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"
                                     :label="item.title"
                                     :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"
                                     :label="item.title"
                                     :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"
                                     :label="item.title"
                                     :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
@@ -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>