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 }
 }

src/use/storage/indexed.ts

@@ -0,0 +1,67 @@
+import { Callback } from '@/types/utils'
+
+export const useIndexedDB: Callback<any> = () => {
+  const supports = (): boolean => {
+    return window.indexedDB ? true : false
+  }
+
+  const open = (
+    obj: Record<string, any>,
+    cb?: Callback<any>
+  ): IDBOpenDBRequest => {
+    if (!supports()) {
+      alert('kekw')
+    }
+
+    const db = window.indexedDB.open(obj.name, obj.version)
+
+    db.onerror = (event: any) => {
+      console.error(`Database error: ${event.target.errorCode}`)
+    }
+
+    db.onsuccess = (event: any) => {}
+
+    ;(db as any).onupgradeneeded((event: any) => {
+      const database = event.target.result
+
+      const _store = database.createObjectStore('Contacts', {
+        autoIncrement: true,
+      })
+
+      let index = _store.createIndex('email', 'email', {
+        unique: true,
+      })
+
+      const txn = database.transaction('Contacts', 'readwrite')
+
+      // get the Contacts object store
+      const store = txn.objectStore('Contacts')
+      //
+      let query = store.put({ email: 'email', test: 'test' })
+
+      // handle success case
+      query.onsuccess = function (event: any) {
+        console.log(event)
+      }
+
+      // handle the error case
+      query.onerror = function (event: any) {
+        console.log(event.target.errorCode)
+      }
+
+      // close the database once the
+      // transaction completes
+      txn.oncomplete = function () {
+        database.close()
+      }
+    })
+
+    return db
+  }
+
+  const createTables = (obj: Record<any, any>) => {
+    open(obj).onupgradeneeded
+  }
+
+  return { open }
+}

src/use/storage/local.ts

@@ -0,0 +1,23 @@
+import { ProjectObject } from '@/types/project'
+import { Callback } from '@/types/utils'
+import { useEnv } from '../env'
+
+export const useLocalStorage: Callback<any> = () => {
+  const set = (obj: ProjectObject, name: string) => {
+    localStorage.setItem(useEnv().projectLocalStorage(), JSON.stringify(obj))
+  }
+
+  const get = (name: string) => {
+    return JSON.parse((localStorage as any).getItem(name))
+  }
+
+  const setProject = (obj: ProjectObject) => {
+    set(obj, useEnv().projectLocalStorage())
+  }
+
+  const getProject = (): ProjectObject => {
+    return get(useEnv().projectLocalStorage())
+  }
+
+  return { set, get, setProject, getProject }
+}