From 9c1c61059d1b923d7ea726e30b08cd0c1b42f36a Mon Sep 17 00:00:00 2001
From: Novout <novout@hotmail.com>
Date: Fri, 24 Sep 2021 17:49:09 -0300
Subject: [PATCH] feat(editor): create page inside a editor

---
 .../editor/aside/page/AsidePageNew.vue        | 19 ++++------
 src/components/editor/main/EditorBase.vue     |  2 +-
 .../editor/main/EditorBaseHeader.vue          | 36 +++++++++++--------
 src/components/utils/InjectButtonInstance.vue |  3 ++
 src/use/page.ts                               | 26 ++++++++++++++
 5 files changed, 58 insertions(+), 28 deletions(-)
 create mode 100644 src/components/utils/InjectButtonInstance.vue
 create mode 100644 src/use/page.ts

diff --git a/src/components/editor/aside/page/AsidePageNew.vue b/src/components/editor/aside/page/AsidePageNew.vue
index 94de5d13f..619f16cb8 100644
--- a/src/components/editor/aside/page/AsidePageNew.vue
+++ b/src/components/editor/aside/page/AsidePageNew.vue
@@ -1,22 +1,15 @@
 <template>
-  <button class="wb-aside-button" @click="onCreateNewPage">
+  <InjectButtonInstance
+    class="wb-aside-button"
+    @click.prevent="usePage().onCreatePage"
+  >
     {{ t('editor.aside.project.page.new.title') }}
-  </button>
+  </InjectButtonInstance>
 </template>
 
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n'
-  import { useStore } from 'vuex'
+  import { usePage } from '@/use/page'
 
-  const store = useStore()
   const { t } = useI18n()
-
-  const onCreateNewPage = async () => {
-    store.commit('project/newPage')
-
-    const arr = store.state.project.pages
-    const obj = arr[arr.length - 1]
-
-    store.commit('context/load', obj)
-  }
 </script>
diff --git a/src/components/editor/main/EditorBase.vue b/src/components/editor/main/EditorBase.vue
index d5730b969..feb01a07c 100644
--- a/src/components/editor/main/EditorBase.vue
+++ b/src/components/editor/main/EditorBase.vue
@@ -19,7 +19,7 @@
           rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
       "
     >
-      <EditorBaseHeader />
+      <EditorBaseHeader v-if="store.state.project.name !== '__NOT_CREATED__'" />
       <EditorBaseBlocked
         v-if="store.state.project.name === '__NOT_CREATED__'"
       />
diff --git a/src/components/editor/main/EditorBaseHeader.vue b/src/components/editor/main/EditorBaseHeader.vue
index f32fd4640..00644aef1 100644
--- a/src/components/editor/main/EditorBaseHeader.vue
+++ b/src/components/editor/main/EditorBaseHeader.vue
@@ -2,7 +2,27 @@
   <div
     class="flex justify-end items-center relative bg-gray-300 dark:bg-gray-800"
   >
-    <HeroIcon class="wb-icon inline-flex" @click.prevent="onDeletePage">
+    <HeroIcon
+      class="wb-icon inline-flex"
+      @click.prevent="usePage().onCreatePage"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </HeroIcon>
+    <HeroIcon
+      class="wb-icon inline-flex"
+      @click.prevent="usePage().onDeletePage"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="h-6 w-6"
@@ -21,17 +41,5 @@
 </template>
 
 <script setup lang="ts">
-  import { nextTick } from 'vue'
-  import { useStore } from 'vuex'
-
-  const store = useStore()
-
-  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])
-  }
+  import { usePage } from '@/use/page'
 </script>
diff --git a/src/components/utils/InjectButtonInstance.vue b/src/components/utils/InjectButtonInstance.vue
new file mode 100644
index 000000000..b9624b4be
--- /dev/null
+++ b/src/components/utils/InjectButtonInstance.vue
@@ -0,0 +1,3 @@
+<template>
+  <button><slot /></button>
+</template>
diff --git a/src/use/page.ts b/src/use/page.ts
new file mode 100644
index 000000000..a1e558456
--- /dev/null
+++ b/src/use/page.ts
@@ -0,0 +1,26 @@
+import { nextTick } from 'vue'
+import { useStore } from 'vuex'
+
+export const usePage = () => {
+  const store = useStore()
+
+  const onCreatePage = async () => {
+    store.commit('project/newPage')
+
+    const arr = store.state.project.pages
+    const obj = arr[arr.length - 1]
+
+    store.commit('context/load', obj)
+  }
+
+  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])
+  }
+
+  return { onCreatePage, onDeletePage }
+}