@dcodegroup-au/page-builder 0.1.8 → 0.2.0

package/example/src/App.vue

@@ -121,16 +121,29 @@ const page = {
     {
       title: "Logo cloud",
       type: "logo",
+      display: "horizontal",
       components: [
         {
           name: "Section header",
           type: "header",
-          is_public: true,
+          supporting_text: "ELAA is proudly supporting",
         },
         {
           id: 2,
           name: "Logos",
           type: "logos",
+          max_items: 7,
+          height: 'medium',
+          data: [
+            {
+              url: "https://childroadsafety.org.au/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/starting_out_safely.png",
+            },
+            {
+              url: "https://carseatssavelives.com.au/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/car_seats_save_lives.jpg",
+            }
+          ]
         }
       ]
     },
@@ -213,6 +226,42 @@ const page = {
         }
       ]
     },
+    {
+      title: "Logo cloud",
+      type: "logo",
+      display: "vertical",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          supporting_text: "ELAA’s preferred partners offer special benefits to ELAA members and support ELAA’s activities",
+        },
+        {
+          id: 2,
+          name: "Logos",
+          type: "logos",
+          max_items: 7,
+          height: 'small',
+          data: [
+            {
+              url: "/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/anzuk.png",
+            },
+            {
+              url: "/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/bunnings.png",
+            },
+            {
+              url: "/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/hesta.png",
+            },{
+              url: "/",
+              logo: "",
+            }
+          ]
+        }
+      ]
+    },
     {
       title: "Collection grid",
       type: "collection_grid",

package/example/src/assets/ExampleComponent.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200">Instruction</div>
+  <div class="flex flex-col gap-3 py-6 text-gray-600">
+    <div class="font-semibold text-gray-900">Modules</div>
+    <p>Modules are fixed and for internal reference only, and admin users cannot make the following changes:</p>
+    <ul class="list-inside list-disc pl-3">
+      <li>Edit the title of any module (e.g., "Hero header").</li>
+      <li>Change the order of the modules.</li>
+      <li>Add new module.</li>
+    </ul>
+    <p>For any changes at the module level, please contact the development team.</p>
+  </div>
+  <div class="flex flex-col gap-3 py-6 text-gray-600">
+    <div class="font-semibold text-gray-900">Edit sub-modules or edit nested items</div>
+    <p>Click any sub-module to edit its settings and any nested items within it.</p>
+  </div>
+</template>

package/example/src/main.js

@@ -2,9 +2,13 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import { PageBuilder, ItemEdit, PageRender } from '../../dist/page-builder.es.js'
-import '../../dist/page-builder.css'
+import '../../dist/page-builder.css';
+
+// This is how to override upload component
+// import VFileUpload from "./assets/ExampleComponent.vue";
 
 const app = createApp(App)
+// app.provide("VFileUpload", VFileUpload)
 app.component('ItemEdit', ItemEdit)
 app.component('PageBuilder', PageBuilder)
 app.component('PageRender', PageRender)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/components/ItemEdit.vue

@@ -99,8 +99,9 @@
           <VToggle v-model="form.public" name="public" label="Public" />
         </card>
         <card title="Featured Image" supporting_text="Recommended dimension: 1200*1060px">
-          <FileUpload
+          <VFileUpload
               name="image"
+              height="h-[200px]"
               v-model="form.featured_image"
           />
         </card>
@@ -120,13 +121,16 @@
   </div>
 </template>
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, inject } from "vue";
 import QuillEditor from "@/components/common/QuillEditor.vue";
 import Card from "@/components/common/Card.vue";
 import LinkedTo from "@/components/common/LinkedTo.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
 import VToggle from "@/components/common/VToggle.vue";
-import FileUpload from "@/components/common/FileUpload.vue";
+import DefaultFileUpload from "@/components/common/FileUpload.vue";
+
+// Inject the FileUpload component or fallback to the default one
+const VFileUpload = inject("VFileUpload", DefaultFileUpload);
 import axios from "axios";
 
 const emit = defineEmits(["update"]);

package/src/components/PageBuilder.vue

@@ -70,6 +70,7 @@ import Instructions from "@/components/builders/Instructions.vue";
 import VItems from "@/components/builders/VItems.vue";
 import VLinks from "@/components/builders/VLinks.vue";
 import VHeader from "@/components/builders/VHeader.vue";
+import VLogos from "@/components/builders/VLogos.vue";
 
 const emit = defineEmits(["save", "close"]);
 const props = defineProps({
@@ -94,6 +95,7 @@ const componentMaps = ref({
   links: markRaw(VLinks),
   header: markRaw(VHeader),
   link_grid: markRaw(VLinks),
+  logos: markRaw(VLogos),
 });
 
 if (!openStates.value) {

package/src/components/PageRender.vue

@@ -14,6 +14,7 @@ import {ref, markRaw} from "vue";
 import HeroHeader from "@/components/presenters/modules/HeroHeader.vue";
 import QuickLinks from "@/components/presenters/modules/QuickLinks.vue";
 import VTabs from "@/components/presenters/modules/VTabs.vue";
+import LogoCloud from "@/components/presenters/modules/LogoCloud.vue";
 
 const props = defineProps({
   page: {
@@ -26,6 +27,7 @@ const componentMaps = ref({
   header: markRaw(HeroHeader),
   quick_links: markRaw(QuickLinks),
   tabs: markRaw(VTabs),
+  logo: markRaw(LogoCloud),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/VHeader.vue

@@ -4,6 +4,7 @@
       {{ dataRef.name }}
     </p>
     <input-wrapper
+        v-if="dataRef.hasOwnProperty('title')"
         is-vertical
         field="title"
         label-text="Title *"
@@ -22,18 +23,19 @@
     </input-wrapper>
     <input-wrapper
         is-vertical
+        v-if="dataRef.hasOwnProperty('supporting_text')"
         field="supporting_text"
         label-text="Supporting Text *"
         class="w-full mb-4"
         :value="dataRef.supporting_text"
-        :limit="100"
+        :limit="dataRef.supporting_text_max_length ?? 100"
     >
       <input
           v-model="dataRef.supporting_text"
           name="supporting_text"
           type="text"
           placeholder="Supporting Text"
-          :maxlength="100"
+          :maxlength="dataRef.supporting_text_max_length ?? 100"
           class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
       />
     </input-wrapper>

package/src/components/builders/VLogos.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="flex justify-between pb-2">
+    <div class="flex justify-between w-full py-1">
+      <div>
+        <p class="text-lg font-semibold text-gray-900">
+          {{ componentData.name }}
+        </p>
+        <p class="text-sm text-gray-600 mt-1">
+          This section can contain up to {{ componentData.max_items }} logos
+        </p>
+      </div>
+      <div>
+        <a
+            @click="addItem"
+            class="text-sm cursor-pointer flex items-center justify-center gap-1 rounded-[99px] border border-brand-600 bg-brand-500 px-3.5 py-2 font-semibold text-white hover:bg-brand-600"
+            :class="{ 'border-gray-100 bg-gray-100 !text-gray-400 hover:bg-gray-100': componentData.data?.length >= componentData.max_items }"
+        >
+          <PlusIcon class="h-5 w-5"></PlusIcon>
+          <span>Add</span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col gap-3">
+    <div
+        v-for="(item, index) in componentData.data"
+        class="flex flex-col gap-4 rounded-xl px-6 py-4 bg-gray-200"
+        :key="index"
+        :ref="index === componentData.data.length - 1 ? (el) => (lastItemRef = el) : null"
+    >
+      <div class="flex items-center justify-between">
+        <div class="text-lg font-semibold text-gray-900">
+          Logo #{{index + 1}}
+        </div>
+        <div class="relative flex items-end">
+          <ActionMenu @removeItem="handleDeleteItem(index)"/>
+        </div>
+      </div>
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-1.5">
+          <VFileUpload
+              name="image"
+              background="bg-white"
+              v-model="item.logo"
+          />
+          <input-wrapper
+              is-vertical
+              field="url"
+              label-text="Url *"
+              class="w-full my-4"
+              :value="item.url"
+          >
+            <input
+                v-model="item.url"
+                name="url"
+                type="text"
+                placeholder="Enter your url"
+                class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+            />
+          </input-wrapper>
+        </div>
+      </div>
+    </div>
+  </div>
+  <VModal ref="modalRef" entity="logo" :callback="deleteCallback"></VModal>
+</template>
+<script setup>
+import {ref, nextTick, inject} from "vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import ActionMenu from "@/components/common/ActionMenu.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import VModal from "@/components/common/VModal.vue";
+import DefaultFileUpload from "@/components/common/FileUpload.vue";
+
+// Inject the FileUpload component or fallback to the default one
+const VFileUpload = inject("VFileUpload", DefaultFileUpload);
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+const modalRef = ref(null);
+const lastItemRef = ref(null);
+const deleteItemIndex = ref(null);
+
+function addItem() {
+  if (!componentData.value.hasOwnProperty('data')) {
+    componentData.value.data = [];
+  }
+
+  if (componentData.value.data?.length >= componentData.value.max_items) {
+    return;
+  }
+  componentData.value.data?.push({
+    url: null,
+    logo: null,
+  });
+
+  nextTick(() => {
+    if (lastItemRef.value) {
+      lastItemRef.value.scrollIntoView({behavior: "smooth"});
+    }
+  });
+
+  emit("update", false);
+}
+
+const handleDeleteItem = (index) => {
+  deleteItemIndex.value = index;
+  modalRef?.value?.open(index);
+}
+
+const deleteCallback = (index) => {
+  componentData.value.data?.splice(index, 1);
+  emit("update", false);
+};
+</script>

package/src/components/common/FileUpload.vue

@@ -5,7 +5,7 @@
       @todo handle upload here
       <span class="file-upload-preview">
         <img
-            class="img rounded-lg"
+            class="img rounded-lg h-[200px] object-contain"
             :src="modelValue"
             title="Image"
         />
@@ -27,7 +27,7 @@
         <i class="fal fa-times" @click="deleteFile(file)"></i>
       </a>
     </div>
-    <div class="relative" v-show="!modelValue">
+    <div :class="'relative rounded-lg ' + background" v-show="!modelValue">
       <div class="dropzone border border-dashed rounded-lg z-10 h-[200px] w-full cursor-pointer relative"
            ref="dropzone">
       </div>
@@ -79,6 +79,10 @@ const props = defineProps({
     type: String,
     required: false,
   },
+  background: {
+    type: String,
+    default: "",
+  }
 });
 const emit = defineEmits(["update:modelValue"]);
 

package/src/components/presenters/modules/LogoCloud.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="w-full relative" :class="{'bg-gray-50': !isHorizontal}">
+    <div class="1xl:max-w-[1824px] mx-auto relative flex justify-center items-center"
+         :class="{'py-8': isHorizontal, 'flex-col py-6': !isHorizontal}">
+      <div v-for="(component, index) in section.components">
+        <p v-if="component?.type === 'header' && component?.supporting_text"
+           class="mr-[48px] text-base text-gray-600 font-medium"
+           :class="{'mb-6': !isHorizontal}"
+        >
+          {{ component?.supporting_text }}
+        </p>
+        <div v-if="component?.type === 'logos'" class="flex flex-wrap justify-center" :class="{'gap-6': isHorizontal, 'gap-12': !isHorizontal}">
+          <template v-for="logo in component.data">
+            <a :href="logo?.url" title="Brand">
+              <img v-if="logo?.logo" :src="logo?.logo" :class="getLogoHeight(component?.height)" alt="Brand Logo"/>
+              <span v-else class="text-sm">No photo</span>
+            </a>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const isHorizontal = section.value.display === 'horizontal';
+
+const getLogoHeight = (size) => {
+  if (size === 'small') {
+    return 'h-[32px]';
+  }
+
+  if (size === 'medium') {
+    return 'h-[40px]';
+  }
+
+  return 'h-[32px]';
+};
+</script>

package/src/components/builders/PageBuilderLogos.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <div class="text-lg font-semibold text-gray-900">
-      {{ props.data.item.name }}
-    </div>
-    <hr class="bg-gray-200" />
-    <page-builder-base-module-form
-      :form="props.data.item.form_component"
-      :page="props.data.page"
-      :data="dataRef"
-      :attribute="props.data.pageAttribute"
-      :module-index="props.data.subModuleIndex"
-      :back-url="route('admin.pages.edit', { page: props.data.page.id })"
-      :sites="sites"
-    ></page-builder-base-module-form>
-  </div>
-</template>
-<script setup>
-import { defaultProps } from "@/js/vue/components/admin/pages/common/defaultProps";
-
-const emit = defineEmits(["update"]);
-const route = inject("route");
-
-const props = defineProps({
-  ...defaultProps,
-});
-
-const dataRef = ref(props.data.item);
-</script>