test header & footer

inikoo · Oct 7, 2023 · cb29ca9 · cb29ca9
1 parent d5054d8
commit cb29ca9
Show file tree

Hide file tree

Showing 6 changed files with 280 additions and 91 deletions.
diff --git a/resources/js/Components/CMS/Workshops/GrapeEditor/CustomBlocks/Footer/Footer.ts b/resources/js/Components/CMS/Workshops/GrapeEditor/CustomBlocks/Footer/Footer.ts
diff --git a/resources/js/Components/CMS/Workshops/GrapeEditor/CustomBlocks/Header/Header.ts b/resources/js/Components/CMS/Workshops/GrapeEditor/CustomBlocks/Header/Header.ts
@@ -5,26 +5,28 @@ export const headerBlock1 = () => {
       category: 'Header',
       label:`<svg fill="none" viewBox="0 0 266 150" width="100%" height="100%"><path fill="#FFFFFF" d="M0 0h266v150H0z"></path><path stroke="#E2E8F0" d="M266 38.5H0" fill="none"></path><rect x="217" y="14" width="29" height="10" rx="2" fill="#CBD5E0"></rect><circle cx="29" cy="19" r="9" fill="#6366F1"></circle><rect x="150.132" y="17" width="16.604" height="4" rx="2" fill="#4A5568"></rect><rect x="171.264" y="17" width="16.604" height="4" rx="2" fill="#4A5568"></rect><rect x="192.396" y="17" width="16.604" height="4" rx="2" fill="#4A5568"></rect><rect x="129" y="17" width="16.604" height="4" rx="2" fill="#4A5568"></rect></svg>`,
       id: "header-block-1",
-      content : `<body id="ixli">
-      <header class="text-gray-600 body-font">
-        <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
-          <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"><img src="https://dummyimage.com/45x30" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-md" alt="Description of the image">
-            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5">
-            </path>
-            </svg><span class="ml-3 text-xl">Tailblocks</span></a>
-          <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
-            <a class="mr-5 hover:text-gray-900">First Link</a>
-            <a class="mr-5 hover:text-gray-900">Second Link</a>
-            <a class="mr-5 hover:text-gray-900">Third Link</a>
-            <a class="mr-5 hover:text-gray-900">Fourth Link</a>
-          </nav>
-          <button id="appointmentButton" data-gjs-editable="false" data-gjs-removable="false" type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" onclick="window.location.href='/appointment'"><span data-gjs-editable="false" data-gjs-removable="false">Appointment<span></button>
- <button data-gjs-editable="false" data-gjs-removable="false" type="button" class="ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"  onclick="window.location.href='/auth/login'"><span data-gjs-editable="false" data-gjs-removable="false">Log in<span></button>
-        </div>
-      </header>
-      <header class="text-gray-600 body-font">
-      </header>
-    </body>`
+      content : `<header class="text-gray-600 body-font">
+  <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
+    <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" href="#">
+      <img src="https://dummyimage.com/45x30" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-md" alt="Description of the image">
+      <span class="ml-3 text-xl">Tailblocks</span>
+    </a>
+    <nav class="md:mr-4 md:ml-auto md:py-1 md:pl-4 md:border-r md:border-gray-400 flex flex-wrap items-center text-base justify-center">
+      <a class="mr-5 hover:text-gray-900" href="#">First Link</a>
+      <a class="mr-5 hover:text-gray-900" href="#">Second Link</a>
+      <a class="mr-5 hover:text-gray-900" href="#">Third Link</a>
+      <a class="mr-5 hover:text-gray-900" href="#">Fourth Link</a>
+    </nav>
+    <a href="/appointment" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 transition duration-300 ease-in-out">
+  <span data-gjs-editable="false" data-gjs-removable="false">Appointment</span>
+</a>
+
+<a href="/auth/login" class="ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:ring focus-visible:ring-indigo-500 focus:outline-none transition duration-300 ease-in-out">
+  <span data-gjs-editable="false" data-gjs-removable="false">Log in</span>
+</a>
+  </div>
+</header>
+`
     }
 };
 
@@ -43,8 +45,13 @@ export  const headerBlock2 = () => {
     md:border-gray-400\tflex flex-wrap items-center text-base justify-center"><a class="mr-5 hover:text-gray-900">First Link</a><a class="mr-5 hover:text-gray-900">Second Link</a><a 
     class="mr-5 hover:text-gray-900">Third Link
     /a><a class="mr-5 hover:text-gray-900">Fourth Link</a></nav>
-    <button id="appointmentButton" data-gjs-editable="false" data-gjs-removable="false" type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" onclick="window.location.href='/appointment'"><span data-gjs-editable="false" data-gjs-removable="false">Appointment<span></button>
-    <button data-gjs-editable="false" data-gjs-removable="false" type="button" class="ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"  onclick="window.location.href='/auth/login'"><span data-gjs-editable="false" data-gjs-removable="false">Log in<span></button>
+    <a href="/appointment" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 transition duration-300 ease-in-out">
+  <span data-gjs-editable="false" data-gjs-removable="false">Appointment</span>
+</a>
+
+<a href="/auth/login" class="ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:ring focus-visible:ring-indigo-500 focus:outline-none transition duration-300 ease-in-out">
+  <span data-gjs-editable="false" data-gjs-removable="false">Log in</span>
+</a>
     </div>
     </header>'`
 
@@ -68,8 +75,13 @@ export const headerBlock3 = () => {
       <a class="mr-5 hover:text-gray-900">Fourth Link</a>
     </nav>
         <a class="flex m-auto title-font font-medium items-center text-gray-900 mb-4 md:mb-0"><img src="https://dummyimage.com/45x30" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-md" alt="Description of the image"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"><span class="ml-3 text-xl">Tailblocks</span></a>
-        <button id="appointmentButton" data-gjs-editable="false" data-gjs-removable="false" type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" onclick="window.location.href='/appointment'"><span data-gjs-editable="false" data-gjs-removable="false">Appointment<span></button>
-        <button data-gjs-editable="false" data-gjs-removable="false" type="button" class="ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"  onclick="window.location.href='/auth/login'"><span data-gjs-editable="false" data-gjs-removable="false">Log in<span></button>
+        <a href="/appointment" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 transition duration-300 ease-in-out">
+  <span data-gjs-editable="false" data-gjs-removable="false">Appointment</span>
+</a>
+
+<a href="/auth/login" class="ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:ring focus-visible:ring-indigo-500 focus:outline-none transition duration-300 ease-in-out">
+  <span data-gjs-editable="false" data-gjs-removable="false">Log in</span>
+</a>
       </div>
     </header>
   </body>
@@ -86,20 +98,28 @@ export const headerBlock4 = () => {
       label:`<svg fill="none" viewBox="0 0 266 150" width="100%" height="100%"><path fill="#FFFFFF" d="M0 0h266v150H0z"></path><path stroke="#E2E8F0" d="M266 38.5H0" fill="none"></path><rect x="217" y="14" width="29" height="10" rx="2" fill="#CBD5E0"></rect><circle cx="29" cy="19" r="9" fill="#6366F1"></circle><rect x="129.264" y="17" width="16.604" height="4" rx="2" fill="#4A5568"></rect><rect x="108.132" y="17" width="16.604" height="4" rx="2" fill="#4A5568"></rect><rect x="150.396" y="17" width="16.604" height="4" rx="2" fill="#4A5568"></rect><rect x="87" y="17" width="16.604" height="4" rx="2" fill="#4A5568"></rect></svg>`,
       id: "header-block-4",
       content : `<body id="ixli">
-      <header class="text-gray-600 body-font">
-        <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
-          <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"><img src="https://dummyimage.com/45x30" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-md" alt="Description of the image">
-          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"><span class="ml-3 text-xl">Tailblocks</span></a>
-          <nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
-            <a class="mr-5 hover:text-gray-900">First Link</a>
-            <a class="mr-5 hover:text-gray-900">Second Link</a>
-            <a class="mr-5 hover:text-gray-900">Third Link</a>
-            <a class="mr-5 hover:text-gray-900">Fourth Link</a>
-          </nav>
-          <button id="appointmentButton" data-gjs-editable="false" data-gjs-removable="false" type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" onclick="window.location.href='/appointment'"><span data-gjs-editable="false" data-gjs-removable="false">Appointment<span></button>
-          <button data-gjs-editable="false" data-gjs-removable="false" type="button" class="ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"  onclick="window.location.href='/auth/login'"><span data-gjs-editable="false" data-gjs-removable="false">Log in<span></button>
-        </div>
-      </header>
-    </body>`
+  <header class="text-gray-600 body-font">
+    <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
+      <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" href="#">
+        <img src="https://dummyimage.com/45x30" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-md" alt="Description of the image">
+        <span class="ml-3 text-xl">Tailblocks</span>
+      </a>
+      <nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
+        <a class="mr-5 hover:text-gray-900" href="#">First Link</a>
+        <a class="mr-5 hover:text-gray-900" href="#">Second Link</a>
+        <a class="mr-5 hover:text-gray-900" href="#">Third Link</a>
+        <a class="mr-5 hover:text-gray-900" href="#">Fourth Link</a>
+      </nav>
+      <a href="/appointment" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 transition duration-300 ease-in-out">
+  <span data-gjs-editable="false" data-gjs-removable="false">Appointment</span>
+</a>
+
+<a href="/auth/login" class="ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:ring focus-visible:ring-indigo-500 focus:outline-none transition duration-300 ease-in-out">
+  <span data-gjs-editable="false" data-gjs-removable="false">Log in</span>
+</a>
+    </div>
+  </header>
+</body>
+`
   }
 };
diff --git a/resources/js/Components/CMS/Workshops/GrapeEditor/GrapeEditor.vue b/resources/js/Components/CMS/Workshops/GrapeEditor/GrapeEditor.vue
@@ -73,7 +73,8 @@ onMounted(() => {
         noticeOnUnload: false,
         plugins: [Webpage, Basic, usePlugin(grapesjsIcons, options),...props.plugins],
         canvas: {
-            styles: ['https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css']
+            // styles: ['https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css']
+            scripts:['https://cdn.tailwindcss.com']
         },
         storageManager: {
             type: 'remote',

diff --git a/resources/js/Components/CMS/Workshops/LayoutWorkshop.vue b/resources/js/Components/CMS/Workshops/LayoutWorkshop.vue
@@ -89,6 +89,83 @@ const addfavicon = async (element) => {
 </script>
 
 <template>
+  <footer class="text-gray-600 body-font">
+  <div class="container px-5 py-24 mx-auto flex md:text-left text-center -mb-10 -mx-4">
+    <!-- Blok Kategori 1 -->
+    <div class="lg:w-1/6 md:w-1/2 w-full px-4">
+      <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+      <nav class="list-none mb-10">
+        <li><a class="text-gray-600 hover:text-gray-800">First Link</a></li>
+        <li><a class="text-gray-600 hover:text-gray-800">Second Link</a></li>
+        <li><a class="text-gray-600 hover:text-gray-800">Third Link</a></li>
+        <li><a class="text-gray-600 hover:text-gray-800">Fourth Link</a></li>
+      </nav>
+    </div>
+    <!-- ... (lanjutan untuk blok-blok kategori lainnya) ... -->
+    <div class="lg:w-1/6 md:w-1/2 w-full px-4">
+    <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+    <nav class="list-none mb-10">
+      <li><a class="text-gray-600 hover:text-gray-800">First Link</a></li>
+      <li><a class="text-gray-600 hover:text-gray-800">Second Link</a></li>
+      <li><a class="text-gray-600 hover:text-gray-800">Third Link</a></li>
+      <li><a class="text-gray-600 hover:text-gray-800">Fourth Link</a></li>
+    </nav>
+  </div>
+  <div class="lg:w-1/6 md:w-1/2 w-full px-4">
+  <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+  <nav class="list-none mb-10">
+    <li><a class="text-gray-600 hover:text-gray-800">First Link</a></li>
+    <li><a class="text-gray-600 hover:text-gray-800">Second Link</a></li>
+    <li><a class="text-gray-600 hover:text-gray-800">Third Link</a></li>
+    <li><a class="text-gray-600 hover:text-gray-800">Fourth Link</a></li>
+  </nav>
+</div>
+<div class="lg:w-1/6 md:w-1/2 w-full px-4">
+<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+<nav class="list-none mb-10">
+  <li><a class="text-gray-600 hover:text-gray-800">First Link</a></li>
+  <li><a class="text-gray-600 hover:text-gray-800">Second Link</a></li>
+  <li><a class="text-gray-600 hover:text-gray-800">Third Link</a></li>
+  <li><a class="text-gray-600 hover:text-gray-800">Fourth Link</a></li>
+</nav>
+</div>
+  </div>
+
+  <!-- Bagian Form dan Tombol Sosial Media -->
+  <div class="border-t border-gray-200">
+    <div class="container px-5 py-8 flex mx-auto items-center">
+      <form style="margin: 0;">
+        <!-- Input Form -->
+        <div class="flex md:flex-nowrap justify-center items-end md:justify-start">
+          <div class="relative sm:w-64 w-40 sm:mr-4 mr-2">
+            <label for="footer-field" class="leading-7 text-sm text-gray-600">Placeholder</label>
+            <input type="text" id="footer-field" name="footer-field" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:ring-2 focus:bg-transparent focus:ring-indigo-200 focus:border-indigo-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" required>
+          </div>
+          <!-- Tombol Submit dan Deskripsi -->
+          <button type="submit" class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
+          <p class="text-gray-500 text-sm md:ml-6 md:mt-0 mt-2 sm:text-left text-center">Bitters chicharrones fanny pack<br class="lg:block hidden">waistcoat green juice</p>
+        </div>
+      </form>
+
+      <!-- Tombol Sosial Media -->
+      <span class="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
+        <a class="text-gray-500"><svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path></svg></a>
+        <a class="ml-3 text-gray-500"><svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path></svg></a>
+        <a class="ml-3 text-gray-500"><svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path></svg></a>
+        <a class="ml-3 text-gray-500"><svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24"><path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path><circle cx="4" cy="4" r="2" stroke="none"></circle></svg></a>
+      </span>
+    </div>
+  </div>
+
+  <!-- Bagian Hak Cipta dan Deskripsi -->
+  <div class="bg-gray-100">
+    <div class="container mx-auto py-4 px-5 flex flex-col sm:flex-row">
+      <p class="text-gray-500 text-sm text-center sm:text-left">© 2020 Tailblocks — <a href="https://twitter.com/knyttneve" class="text-gray-600 ml-1" target="_blank" rel="noopener noreferrer">@knyttneve</a></p>
+      <span class="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm">Enamel pin tousled raclette tacos irony</span>
+    </div>
+  </div>
+</footer>
+
     <!-- Button: Title -->
     <!-- <div class="flex justify-center items-center w-full mt-3">
         <div class="border-2 border-gray-300 rounded-md overflow-hidden">

diff --git a/resources/js/Pages/Organisation/Web/WebpageWorkshop.vue b/resources/js/Pages/Organisation/Web/WebpageWorkshop.vue
@@ -8,6 +8,8 @@ import GrapesForm from "grapesjs-plugin-forms";
 import TailwindComponents from "grapesjs-tailwind";
 import { HeaderPlugins, FooterPlugins } from "@/Components/CMS/Workshops/GrapeEditor/CustomBlocks/CustomBlock";
 import Button from '@/Components/Elements/Buttons/Button.vue'
+import { trans } from 'laravel-vue-i18n'
+import Modal from '@/Components/Utils/Modal.vue'
 
 
 const props = defineProps<{
@@ -30,12 +32,11 @@ const isModalOpen = ref(false)
 const comment = ref('')
 
 const sendDataToServer = async () => {
-    console.log(RouteActive.value)
     try {
         const response = await axios.post(
             route(
-                RouteActive.value.name,
-                RouteActive.value.parameters
+                publishRoute.value.name,
+                publishRoute.value.parameters
             ),
             { comment : comment.value },
         );

diff --git a/resources/js/Pages/Organisation/Web/WebsiteWorkshop.vue b/resources/js/Pages/Organisation/Web/WebsiteWorkshop.vue
@@ -69,13 +69,6 @@ const RouteActive = ref(props.publishRoutes[currentTab.value])
 const isModalOpen = ref(false)
 const comment = ref('')
 
-// const setForm = () => {
-//     let form = null
-//     if(currentTab.value == 'workshop_header') form = useForm(structure.value['header'])
-//     if(currentTab.value == 'workshop_footer') form = useForm(structure.value['footer'])
-//     if(currentTab.value == 'workshop_layout') form = useForm(structure.value['layout'])
-//    return form
-// }
 
 const sendDataToServer = async () => {
     console.log(RouteActive.value)
@@ -90,6 +83,7 @@ const sendDataToServer = async () => {
         if (response) {
             console.log('saving......')
             comment.value = ''
+            isModalOpen.value = false
         }
     } catch (error) {
         comment.value = ''