feat(project): auto save option

Author: Novout

src/components/editor/provider/project/ProviderProjectPreferences.vue

@@ -42,7 +42,8 @@
           dark:text-gray-300
           justify-between
           items-center
-          w-96
+          w-full
+          md:w-1/2
           px-2
           py-1
         "
@@ -51,7 +52,7 @@
         <InputSelect v-model="lang" :arr="['Português do Brasil', 'English']" />
       </div>
       <SwitchGroup>
-        <div class="flex px-2 items-center w-96 justify-between">
+        <div class="flex px-2 items-center w-full md:w-1/2 justify-between">
           <SwitchLabel
             class="
               mr-4
@@ -92,22 +93,42 @@
           </Switch>
         </div>
       </SwitchGroup>
+      <div
+        class="
+          flex
+          font-bold
+          text-base text-black
+          dark:text-gray-300
+          justify-between
+          items-center
+          w-full
+          md:w-1/2
+          px-2
+          py-1
+        "
+      >
+        <p>{{ t('editor.aside.configuration.autosave') }}</p>
+        <InputSelect v-model="auto" :arr="[1, 2, 5, 15, 30, 'never']" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
   import { useEditorStore } from '@/store/editor'
-  import { ref, watch } from 'vue'
+  import { ref, watch, nextTick } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useAbsoluteStore } from '@/store/absolute'
+  import { useLocalStorage } from '@/use/storage/local'
 
   const ABSOLUTE = useAbsoluteStore()
-
   const EDITOR = useEditorStore()
 
+  const local = useLocalStorage()
+
   const { t, locale } = useI18n()
 
+  const auto = ref(EDITOR.configuration.auto)
   const dark = ref(EDITOR.configuration.dark)
   watch(dark, (_dark: boolean) => {
     EDITOR.configuration.dark = _dark
@@ -118,6 +139,16 @@
     _dark ? (localStorage.theme = 'dark') : localStorage.removeItem('theme')
   })
 
+  watch(auto, async (_auto) => {
+    EDITOR.setAutoSave(_auto)
+
+    await nextTick
+
+    local.onSaveProject().then(() => {
+      window.location.reload()
+    })
+  })
+
   const convert = (iso: string) => {
     return (
       {

src/components/material/InputSelect.vue

@@ -114,7 +114,6 @@
   const props = defineProps({
     modelValue: {
       required: true,
-      type: String,
     },
     arr: {
       required: false,

src/lang/br/editor.ts

@@ -119,6 +119,7 @@ export default {
       dark: 'Modo Escuro',
       lang: 'Linguagem',
       draggable: 'Arrastável',
+      autosave: 'Salvamento Automático (em minutos)',
     },
     entity: {
       delete: 'Deletar',

src/lang/en/editor.ts

@@ -11,6 +11,7 @@ export default {
       load: 'Load',
       save: 'Save',
       preferences: 'Preferences',
+      autosave: 'Auto Save (in minutes)',
     },
     chapter: {
       new: 'New',

src/pages/Editor.vue

@@ -24,11 +24,11 @@
   const keyboard = useKeyboard()
   const env = useEnv()
   const { t } = useI18n()
+  const local = useLocalStorage()
 
+  local.init()
   keyboard.init()
 
-  useLocalStorage().onAutoSave(60 * 10)
-
   onUnmounted(() => {
     keyboard.destroy()
   })
@@ -39,7 +39,7 @@
   const _title = computed(() =>
     PROJECT.nameRaw === env.projectEmpty() || !CONTEXT.entities[0]
       ? title.value
-      : PROJECT.nameRaw + ' - ' + CONTEXT.entities[0]?.raw || ''
+      : PROJECT.nameRaw + ' - ' + CONTEXT.entities[0]?.raw
   )
 
   useHead({

src/store/editor.ts

@@ -48,6 +48,7 @@ export const useEditorStore = defineStore('editor', {
       configuration: {
         dark: true,
         draggable: false,
+        auto: 5,
       },
       actives: {
         text: {
@@ -61,6 +62,11 @@ export const useEditorStore = defineStore('editor', {
     }
   },
   actions: {
+    load(content: EditorState) {
+      this.styles = content.styles
+      this.configuration = content.configuration
+      this.actives = content.actives
+    },
     switchTheme(dark: boolean) {
       this.configuration.dark = dark
     },
@@ -69,5 +75,8 @@ export const useEditorStore = defineStore('editor', {
       this.actives.text.selection.end = payload.end
       this.actives.text.selection.start = payload.start
     },
+    setAutoSave(auto: number | 'never') {
+      this.configuration.auto = auto
+    },
   },
 })

src/store/project.ts

@@ -7,6 +7,7 @@ import { Entity } from '../types/context'
 import isElectron from 'is-electron'
 import { useEnv } from '@/use/env'
 import { useLoggerStore } from './logger'
+import { useEditorStore } from './editor'
 
 export const useProjectStore = defineStore('project', {
   state: (): ProjectState => {
@@ -30,6 +31,11 @@ export const useProjectStore = defineStore('project', {
   },
   actions: {
     load(payload: ProjectState) {
+      const logger = useLoggerStore()
+      const editor = useEditorStore()
+
+      editor.$reset()
+      logger.reset()
       this.$reset()
 
       this.name = payload.name
@@ -47,8 +53,10 @@ export const useProjectStore = defineStore('project', {
     },
     create(payload: Record<any, any>) {
       const logger = useLoggerStore()
-      logger.reset()
+      const editor = useEditorStore()
 
+      editor.$reset()
+      logger.reset()
       this.$reset()
 
       this.name = useText().kebab(payload.name)
@@ -87,6 +95,9 @@ export const useProjectStore = defineStore('project', {
     },
     createBlank(payload: Record<any, any>) {
       const logger = useLoggerStore()
+      const editor = useEditorStore()
+
+      editor.$reset()
       logger.reset()
 
       this.$reset()

src/types/editor.ts

@@ -22,6 +22,7 @@ export interface EditorStateConfiguration {
   dark: boolean
   lang?: boolean
   draggable: boolean
+  auto: number | 'never'
 }
 
 export interface EditorStateStyles {

src/use/storage/local.ts

@@ -81,7 +81,9 @@ export const useLocalStorage = () => {
     toast.success(t('toast.project.save'))
   }
 
-  const onAutoSave = (time: number) => {
+  const onAutoSave = (time: number | 'never') => {
+    if (time === 'never' || !time) return
+
     setInterval(() => {
       if (PROJECT.name === env.projectEmpty()) return
 
@@ -97,7 +99,7 @@ export const useLocalStorage = () => {
       })
 
       plugin.emit('plugin-auto-save')
-    }, parseInt(`${time}000`))
+    }, 1000 * 60 * time)
   }
 
   const onLoadProject = async () => {
@@ -115,13 +117,21 @@ export const useLocalStorage = () => {
 
     LOGGER.load(context.logger.content)
 
+    await nextTick
+
+    EDITOR.load(context.editor)
+
     PDF.load(context.pdf)
 
     ABSOLUTE.aside = true
 
     toast.success(t('toast.project.load'))
   }
 
+  const init = () => {
+    onAutoSave(EDITOR.configuration.auto)
+  }
+
   return {
     set,
     get,
@@ -130,5 +140,6 @@ export const useLocalStorage = () => {
     onSaveProject,
     onLoadProject,
     onAutoSave,
+    init,
   }
 }