From 0b20dced4d8693c26b2c949e3f62fe4b0c65fec1 Mon Sep 17 00:00:00 2001
From: YudhistaA <aryarajasa0@gmail.com>
Date: Fri, 27 Sep 2024 16:36:13 +0800
Subject: [PATCH] preview

---
 resources/js/Layouts/Iris.vue                 |  12 +-
 .../js/Pages/Grp/Org/Web/WebpageWorkshop.vue  |   4 +-
 .../js/Pages/Grp/Web/PreviewWorkshop.vue      | 159 +++++++++++-------
 3 files changed, 99 insertions(+), 76 deletions(-)

diff --git a/resources/js/Layouts/Iris.vue b/resources/js/Layouts/Iris.vue
index a57bad76cf..889964f5d5 100644
--- a/resources/js/Layouts/Iris.vue
+++ b/resources/js/Layouts/Iris.vue
@@ -34,24 +34,18 @@ const keyTemplate = uuidv4()
     <div class="relative">
         <ScreenWarning v-if="layout.app.environment === 'staging'" />
         <div  class="container max-w-7xl mx-auto shadow-xl">
-            <!-- <IrisHeader :data="header" /> -->
-            <!-- <IrisHeader :data="header" :colorThemed="colorThemed"/> -->
+            <IrisHeader :data="header" :colorThemed="colorThemed"/>
 
             <!-- Section: Navigation Tab -->
-           <!--  <NavigationMenu :data="navigation" :colorThemed="colorThemed"/> -->
+            <NavigationMenu :data="navigation" :colorThemed="colorThemed"/>
             
             <!-- Main Content -->
             <main class="text-gray-700">
                 <slot />
             </main>
 
-          <!--   <Footer :data="footer" :colorThemed="colorThemed"/> -->
+            <Footer :data="footer" :colorThemed="colorThemed"/>
         </div>
-
-        <!-- <div class="flex flex-col gap-y-4 divide-y-1 divide-gray-500 mx-auto max-w-7xl py-16" >
-            <ProductPage1 />
-            <FamilyPage1 />
-        </div> -->
     </div>
 
     <!-- Global declaration: Notification -->
diff --git a/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue b/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
index 7f845e6677..d8f41b551f 100644
--- a/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
+++ b/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
@@ -10,7 +10,7 @@ import PageHeading from '@/Components/Headings/PageHeading.vue'
 import { capitalize } from "@/Composables/capitalize"
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { ref, watch } from 'vue'
-import { faBrowser, faDraftingCompass, faRectangleWide, faStars, faBars, faExpandWide } from '@fal'
+import { faBrowser, faDraftingCompass, faRectangleWide, faStars, faBars, faExternalLink } from '@fal'
 import draggable from "vuedraggable"
 import BlockGap from '@/Components/Websites/Fields/BlockGap.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -256,7 +256,7 @@ const openFullScreenPreview = () => {
                     v-tooltip="'Preview'"
                     @click="openFullScreenPreview"
                 >
-                    <FontAwesomeIcon :icon='faExpandWide' aria-hidden='true' />
+                    <FontAwesomeIcon :icon='faExternalLink' aria-hidden='true' />
                 </div>
             </div>
 
diff --git a/resources/js/Pages/Grp/Web/PreviewWorkshop.vue b/resources/js/Pages/Grp/Web/PreviewWorkshop.vue
index f3b4bec884..b9efc92b36 100644
--- a/resources/js/Pages/Grp/Web/PreviewWorkshop.vue
+++ b/resources/js/Pages/Grp/Web/PreviewWorkshop.vue
@@ -4,50 +4,68 @@
   - Copyright (c) 2024, Raul A Perusquia Flores
   -->
 
-  <script setup lang="ts">
-  import { getComponent } from '@/Components/Fulfilment/Website/BlocksList'
-  import { ref, onMounted, onUnmounted } from 'vue'
-  import WebPreview from "@/Layouts/WebPreview.vue";
-  import axios from 'axios'
-  import debounce from 'lodash/debounce'
-  import EmptyState from "@/Components/Utils/EmptyState.vue"
-  import { webBlock as socketWeblock } from '@/Composables/SocketWebBlock'
-  
-  
-  import { Root, Daum } from '@/types/webBlockTypes'
-  import { Root as RootWebpage, WebBlock } from '@/types/webpageTypes'
-  
-  
-  defineOptions({ layout: WebPreview })
-  const props = defineProps<{
-      webpage: RootWebpage
-      webBlockTypes: Root
-  }>()
-  
-  const data = ref({...props.webpage})
-  const debouncedSendUpdate = debounce((block) => sendBlockUpdate(block),1000,{ leading: false, trailing: true })
-  
-  const onUpdatedBlock = (block : Daum) => {
-      debouncedSendUpdate(block)
-  }
-  
-  const sendBlockUpdate = async (block : WebBlock) => {
-      try {
-          const response = await axios.patch(
-              route(props.webpage.update_model_has_web_blocks_route.name, { modelHasWebBlocks: block.id }),
-              { layout: block.web_block.layout }
-          )
-          const set = { ...response.data.data }
-          data.value = set
-      } catch (error: any) {
-          console.error('error', error)
-      }
-  }
-  const socketConnection = socketWeblock(props.webpage.slug);
-  onMounted(() => {
+<script setup lang="ts">
+import { getComponent } from '@/Components/Fulfilment/Website/BlocksList'
+import { ref, onMounted, onUnmounted, inject } from 'vue'
+import WebPreview from "@/Layouts/WebPreview.vue";
+import axios from 'axios'
+import debounce from 'lodash/debounce'
+import EmptyState from "@/Components/Utils/EmptyState.vue"
+import { webBlock as socketWeblock } from '@/Composables/SocketWebBlock'
+import Notification from '@/Components/Utils/Notification.vue'
+import IrisHeader from '@/Layouts/Iris/Header.vue'
+import NavigationMenu from '@/Layouts/Iris/NavigationMenu.vue'
+import Footer from '@/Layouts/Iris/Footer.vue'
+import { usePage } from '@inertiajs/vue3'
+import { layoutStructure } from '@/Composables/useLayoutStructure'
+import { data as headerData, bluprintForm as bluprintFormHeader } from '@/Components/Websites/Header/HeaderTemplates/Header1/descriptor'
+import { data as footerData, bluprintForm as bluprintFormFooter } from '@/Components/Websites/Footer/FooterTemplates/Footer1/descriptor'
+import { navigation as navigationData } from '@/Components/Websites/Menu/Descriptor'
+import { useColorTheme } from '@/Composables/useStockList'
+
+import { Root, Daum } from '@/types/webBlockTypes'
+import { Root as RootWebpage, WebBlock } from '@/types/webpageTypes'
+
+
+defineOptions({ layout: WebPreview })
+const props = defineProps<{
+    webpage: RootWebpage
+    webBlockTypes: Root
+}>()
+
+const data = ref({ ...props.webpage })
+const debouncedSendUpdate = debounce((block) => sendBlockUpdate(block), 1000, { leading: false, trailing: true })
+
+const layout = inject('layout', layoutStructure)
+
+
+
+const header = usePage().props?.iris?.header ? usePage().props?.iris?.header : { key: "header1", data: headerData, bluprint: bluprintFormHeader }
+const footer = usePage().props?.iris?.footer ? usePage().props?.iris?.footer : { key: "footer1", data: footerData, bluprint: bluprintFormFooter }
+const navigation = usePage().props?.iris?.menu ? usePage().props?.iris?.menu : { key: "menu1", data: navigationData }
+const colorThemed = usePage().props?.iris?.color ? usePage().props?.iris?.color : { color: [...useColorTheme[2]] }
+
+const onUpdatedBlock = (block: Daum) => {
+    debouncedSendUpdate(block)
+}
+
+const sendBlockUpdate = async (block: WebBlock) => {
+    try {
+        const response = await axios.patch(
+            route(props.webpage.update_model_has_web_blocks_route.name, { modelHasWebBlocks: block.id }),
+            { layout: block.web_block.layout }
+        )
+        const set = { ...response.data.data }
+        data.value = set
+    } catch (error: any) {
+        console.error('error', error)
+    }
+}
+const socketConnection = socketWeblock(props.webpage.slug);
+onMounted(() => {
     // Subscribe to the private Echo channel
     const channel = window.Echo.private(`webpage.${props.webpage.slug}.preview`)
-        .listen('.WebpagePreview', (eventData) => {          
+        .listen('.WebpagePreview', (eventData) => {
             if (eventData) {
                 data.value = { ...eventData.webpage }
             } else {
@@ -56,44 +74,55 @@
         })
 })
 
-  onUnmounted(() => {
+onUnmounted(() => {
     socketConnection.actions.unsubscribe();
-  });
-  
-  </script>
-  
+});
+
+</script>
+
 
 <template>
-    <div class="relative">
-        <div class="container max-w-7xl mx-auto">          
-          <div class="h-full overflow-auto w-full ">
+
+    <div class="container max-w-7xl mx-auto shadow-xl">
+        <IrisHeader :data="header" :colorThemed="colorThemed" />
+
+        <!-- Section: Navigation Tab -->
+        <NavigationMenu :data="navigation" :colorThemed="colorThemed" />
+
+        <div class="relative">
+            <div class="container max-w-7xl mx-auto">
+                <div class="h-full overflow-auto w-full ">
                     <div v-if="data.layout.web_blocks?.length">
                         <TransitionGroup tag="div" name="zzz" class="relative">
-                            <section v-for="(activityItem, activityItemIdx) in data.layout.web_blocks" 
-                                :style="{
-                                    paddingTop: `${activityItem?.web_block?.layout?.data?.blockLayout?.paddingTop?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.paddingTop?.unit}`, 
-                                    paddingBottom: `${activityItem?.web_block?.layout?.data?.blockLayout?.paddingBottom?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.paddingBottom?.unit}`, 
-                                    paddingRight: `${activityItem?.web_block?.layout?.data?.blockLayout?.paddingRight?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.paddingRight?.unit}`,
-                                    paddingLeft: `${activityItem?.web_block?.layout?.data?.blockLayout?.paddingLeft?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.paddingLeft?.unit}`,
-                                    marginTop: `${activityItem?.web_block?.layout?.data?.blockLayout?.marginTop?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.marginTop?.unit}`,
-                                    marginBottom: `${activityItem?.web_block?.layout?.data?.blockLayout?.marginBottom?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.marginBottom?.unit}`,
-                                    marginRight: `${activityItem?.web_block?.layout?.data?.blockLayout?.marginRight?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.marginRight?.unit}`,
-                                    marginLeft: `${activityItem?.web_block?.layout?.data?.blockLayout?.marginLeft?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.marginLeft?.unit}`
-                                }"
-                                :key="activityItem.id"  class="w-full">
+                            <section v-for="(activityItem, activityItemIdx) in data.layout.web_blocks" :style="{
+                                paddingTop: `${activityItem?.web_block?.layout?.data?.blockLayout?.paddingTop?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.paddingTop?.unit}`,
+                                paddingBottom: `${activityItem?.web_block?.layout?.data?.blockLayout?.paddingBottom?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.paddingBottom?.unit}`,
+                                paddingRight: `${activityItem?.web_block?.layout?.data?.blockLayout?.paddingRight?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.paddingRight?.unit}`,
+                                paddingLeft: `${activityItem?.web_block?.layout?.data?.blockLayout?.paddingLeft?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.paddingLeft?.unit}`,
+                                marginTop: `${activityItem?.web_block?.layout?.data?.blockLayout?.marginTop?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.marginTop?.unit}`,
+                                marginBottom: `${activityItem?.web_block?.layout?.data?.blockLayout?.marginBottom?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.marginBottom?.unit}`,
+                                marginRight: `${activityItem?.web_block?.layout?.data?.blockLayout?.marginRight?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.marginRight?.unit}`,
+                                marginLeft: `${activityItem?.web_block?.layout?.data?.blockLayout?.marginLeft?.value}${activityItem?.web_block?.layout?.data?.blockLayout?.marginLeft?.unit}`
+                            }" :key="activityItem.id" class="w-full">
                                 <component :is="getComponent(activityItem?.web_block?.layout?.data?.component)"
                                     :key="activityItemIdx" :webpageData="webpage" v-bind="activityItem"
                                     v-model="activityItem.web_block.layout.data.fieldValue" :isEditable="true"
-                                    @autoSave="() => onUpdatedBlock(activityItem)"/>
+                                    @autoSave="() => onUpdatedBlock(activityItem)" />
                             </section>
                         </TransitionGroup>
-                     
+
                     </div>
                     <div v-else>
-                        <EmptyState :data="{ title: 'Pick First Block For Your Website', description: 'Pick block from list' }">
+                        <EmptyState
+                            :data="{ title: 'Pick First Block For Your Website', description: 'Pick block from list' }">
                         </EmptyState>
                     </div>
                 </div>
+            </div>
         </div>
+
+        <Footer :data="footer" :colorThemed="colorThemed" />
     </div>
+
+
 </template>