feat: simple save and load project

Author: Novout

.env

@@ -1 +1,2 @@
-VITE_PROJECT_EMPTY=__NOT_CREATED__
+VITE_PROJECT_EMPTY=__NOT_CREATED__
+VITE_LOCAL_STORAGE=__BETTER_WRITE__

src/App.vue

@@ -4,10 +4,14 @@
 </template>
 
 <script setup lang="ts">
+  import { onMounted } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useStart } from '@/use/start'
+  import { useIndexedDB } from '@/use/storage/indexed'
 
   const { t } = useI18n()
 
   useStart().init()
+
+  onMounted(() => {})
 </script>

src/components/editor/aside/project/AsideBarProject.vue

@@ -18,6 +18,11 @@
     <AsideProjectNew />
     <AsidePageNew v-if="store.state.project.name !== useEnv().projectEmpty()" />
     <AsideLine v-if="store.state.project.name !== useEnv().projectEmpty()" />
+    <AsideLoadProject />
+    <AsideSaveProject
+      v-if="store.state.project.name !== useEnv().projectEmpty()"
+    />
+    <AsideLine v-if="store.state.project.name !== useEnv().projectEmpty()" />
     <AsideGeneratePDF
       v-if="store.state.project.name !== useEnv().projectEmpty()"
     />

src/components/editor/aside/project/AsideLoadProject.vue

@@ -0,0 +1,25 @@
+<template>
+  <InjectButtonInstance class="wb-aside-button" @click.prevent="onSaveProject">
+    {{ t('editor.aside.project.load.title') }}
+  </InjectButtonInstance>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import { useLocalStorage } from '@/use/storage/local'
+  import { useStore } from 'vuex'
+  import { nextTick } from 'vue'
+
+  const store = useStore()
+
+  const onSaveProject = async () => {
+    const context = useLocalStorage().getProject()
+
+    store.commit('project/load', context.project)
+    await nextTick
+
+    store.commit('context/load', store.state.project.pages[0])
+  }
+
+  const { t } = useI18n()
+</script>

src/components/editor/aside/project/AsideSaveProject.vue

@@ -0,0 +1,22 @@
+<template>
+  <InjectButtonInstance class="wb-aside-button" @click.prevent="onSaveProject">
+    {{ t('editor.aside.project.save.title') }}
+  </InjectButtonInstance>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import { useLocalStorage } from '@/use/storage/local'
+  import { useStore } from 'vuex'
+
+  const store = useStore()
+
+  const onSaveProject = () => {
+    useLocalStorage().setProject({
+      project: store.state.project,
+      editor: store.state.editor,
+    })
+  }
+
+  const { t } = useI18n()
+</script>

src/lang/br.ts

@@ -22,6 +22,12 @@ export default {
       },
       project: {
         title: 'Projeto',
+        save: {
+          title: 'Salvar Projeto',
+        },
+        load: {
+          title: 'Carregar Projeto',
+        },
         blocked: 'Crie ou carregue um projeto!!!',
         page: {
           new: {

src/lang/en.ts

@@ -22,6 +22,12 @@ export default {
       },
       project: {
         title: 'Project',
+        save: {
+          title: 'Save Project',
+        },
+        load: {
+          title: 'Load Project',
+        },
         blocked: 'Create or load a project!!!',
         page: {
           new: {

src/store/module/project.ts

@@ -2,7 +2,6 @@ import { ProjectState } from '@/types/project'
 import { useText } from '@/use/text'
 import { useFormat } from '@/use/format'
 import { ContextState, ContextStatePageContent } from '@/types/context'
-import { useI18n } from 'vue-i18n'
 
 export default {
   namespaced: true,
@@ -18,6 +17,16 @@ export default {
       pageLoaded: 0,
     } as ProjectState),
   mutations: {
+    load(state: any, payload: ProjectState) {
+      state.name = payload.name
+      state.nameRaw = payload.nameRaw
+      state.version = payload.version
+      state.totalPagesCreated = payload.totalPagesCreated
+      state.main = payload.main
+      state.summary = payload.summary
+      state.pages = payload.pages
+      state.pageLoaded = payload.pageLoaded
+    },
     create(state: any, payload: Record<any, any>) {
       state.name = useText().kebab(payload.name)
       state.nameRaw = payload.name

src/types/project.ts

@@ -1,4 +1,5 @@
 import { ContextState } from '@/types/context'
+import { EditorState } from './editor'
 
 export interface ProjectState {
   name: string
@@ -10,3 +11,8 @@ export interface ProjectState {
   pages: Array<ContextState>
   pageLoaded: number
 }
+
+export interface ProjectObject {
+  project: ProjectState
+  editor: EditorState
+}

src/use/env.ts

@@ -5,5 +5,9 @@ export const useEnv: Callback<any> = () => {
     return import.meta.env.VITE_PROJECT_EMPTY as string
   }
 
-  return { projectEmpty }
+  const projectLocalStorage = () => {
+    return import.meta.env.VITE_LOCAL_STORAGE as string
+  }
+
+  return { projectEmpty, projectLocalStorage }
 }