feat(editor): delete page

Author: Novout

README.md

@@ -2,15 +2,20 @@
 
 A editor for creative writers.
 
-## Tasks for v0.1.0
+## Tasks
 
 - [X] Initial Page Entry-Text
 - [X] Simple Parser Style-Raw
 - [X] Final Text Defines
 - [ ] Grammar Corrections
 - [X] Project Control Pages
-- [ ] Aside Graph-Tree
-- [ ] PDF Generator + Customization
+- [X] Aside Graph-Tree
+
+### PDF
+
+- [ ] Generator
+- [ ] Page Types
+- [ ] Customization
 
 ## Setup
 

src/components/editor/aside/AsideBar.vue

@@ -211,7 +211,7 @@
       </HeroIcon>
     </template>
     <AsideProjectNew />
-    <AsidePageNew />
+    <AsidePageNew v-if="store.state.project.name !== '__NOT_CREATED__'" />
   </AsideBarItem>
 </template>
 

src/components/editor/main/EditorBase.vue

@@ -12,6 +12,26 @@
           rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
       "
     >
+      <div class="flex w-full justify-end items-center">
+        <HeroIcon
+          class="relative wb-icon inline-flex"
+          @click.prevent="onDeletePage"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z" />
+            <path
+              fill-rule="evenodd"
+              d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </HeroIcon>
+      </div>
       <EditorBaseBlocked
         v-if="store.state.project.name === '__NOT_CREATED__'"
       />
@@ -61,6 +81,15 @@
 
     entry.value = ''
   }
+
+  const onDeletePage = async () => {
+    if (store.state.project.pages.length <= 1) return
+
+    store.commit('project/deletePage', store.state.context)
+    await nextTick
+
+    store.commit('context/load', store.state.project.pages[0])
+  }
 </script>
 
 <style scoped>

src/components/editor/text/TextShow.vue

@@ -11,7 +11,7 @@
       :position="props.entity.id"
     />
     <div class="w-full" @click.prevent="onEdit">
-      <p
+      <div
         v-if="!edit"
         ref="show"
         class="overflow-hidden w-full"

src/lang/br.ts

@@ -35,6 +35,7 @@ export default {
           confirm: 'Criar',
           content: {
             name: 'Um Novo Projeto Incrível',
+            nameNew: 'Sem Título',
             version: '0.1.0',
           },
         },

src/lang/en.ts

@@ -35,6 +35,7 @@ export default {
           confirm: 'Create',
           content: {
             name: 'Nice New Project',
+            nameNew: 'Untitled',
             version: '0.1.0',
           },
         },

src/store/module/context.ts

@@ -43,7 +43,6 @@ export default {
 
       const index = state.entity.indexOf(content)
 
-      state.totalEntityCreated--
       state.entity.splice(index, 1)
     },
     switchInPage(state: any, obj: Record<any, any>) {

src/store/module/project.ts

@@ -1,7 +1,8 @@
 import { ProjectState } from '@/types/project'
 import { useText } from '@/use/text'
 import { useFormat } from '@/use/format'
-import { ContextState } from '@/types/context'
+import { ContextState, ContextStatePageContent } from '@/types/context'
+import { useI18n } from 'vue-i18n'
 
 export default {
   namespaced: true,
@@ -66,13 +67,13 @@ export default {
 
       const init: ContextState = {
         id: state.totalPagesCreated,
-        totalEntityCreated: 0,
+        totalEntityCreated: 2,
         onlyHeadingOne: false,
         entity: [
           {
             id: 0,
             type: 'heading-one',
-            raw: state.nameRaw,
+            raw: 'Untitled',
             createdAt: useFormat().actually(),
             updatedAt: useFormat().actually(),
           },
@@ -89,6 +90,17 @@ export default {
       state.pageLoaded = init.id
       state.pages.push(init)
     },
+    deletePage(state: any, context: ContextState) {
+      const content = state.pages.find(
+        (content: ContextStatePageContent) => content.id === context.id
+      )
+
+      if (!content) return
+
+      const index = state.pages.indexOf(content)
+
+      state.pages.splice(index, 1)
+    },
   },
   actions: {},
   getters: {},

src/tailwind.css

@@ -21,6 +21,10 @@
     @apply text-black dark:text-gray-200;
   }
 
+  .wb-icon {
+    @apply text-black dark:text-gray-200 hover:text-gray-700 dark:hover:text-white;
+  }
+
   .wb-background-color {
     @apply bg-gray-100 dark:bg-gray-700;
   }