@dcodegroup-au/page-builder 0.0.1

package/src/components/PageRender.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-for="(section, index) in page.sections">
+    <component
+        :is="currentComponent(section)"
+        :key="index"
+        :section="section"
+    ></component>
+  </div>
+</template>
+<script setup>
+import {ref, watch, markRaw} from "vue";
+import HeroHeader from "@/components/presenters/modules/HeroHeader.vue";
+
+const props = defineProps({
+  page: {
+    required: true,
+    type: Object,
+  },
+});
+
+const componentMaps = ref({
+  header: markRaw(HeroHeader),
+});
+
+const currentComponent = (section) => {
+  if (!section?.type) {
+    return '';
+  }
+
+  return componentMaps.value[section?.type];
+};
+</script>

package/src/components/SlideEdit.vue

@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <div class="flex items-start gap-4 px-6 pt-4">
+      <div class="flex flex-1 flex-col gap-4">
+        <card title="Description">
+          <div class="flex flex-col gap-8">
+            <input-wrapper
+                is-vertical
+                field="title"
+                label-text="Title *"
+                class="w-full"
+                :value="form.title"
+                :limit="51"
+            >
+              <input
+                  v-model="form.title"
+                  name="title"
+                  type="text"
+                  placeholder="Title"
+                  :maxlength="51"
+                  class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+              />
+            </input-wrapper>
+            <input-wrapper
+                is-vertical
+                field="description"
+                label-text="Description *"
+                class="w-full mb-4"
+                :value="descriptionWordCount"
+                :show-count="true"
+            >
+              <QuillEditor v-model="form.description"/>
+            </input-wrapper>
+          </div>
+        </card>
+        <card title="Primary button">
+          <div class="flex flex-col gap-8">
+            <VToggle name="show" v-model="form.primary_button.show"  title="Show Button" />
+            <input-wrapper
+                is-vertical
+                field="primary_button.label"
+                label-text="Button Label *"
+                class="w-full mb-4"
+                :value="form.primary_button.label"
+                :limit="20"
+            >
+              <input
+                  v-model="form.primary_button.label"
+                  name="primary_button.label"
+                  type="text"
+                  placeholder="Label"
+                  :maxlength="20"
+                  class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+              />
+            </input-wrapper>
+            <linked-to
+                name="primary"
+                v-model:type="form.primary_button.type"
+                v-model:url="form.primary_button.url"
+                v-model:openInNewTab="form.primary_button.open_in_new_tab"
+                :sites="sites"
+            />
+          </div>
+        </card>
+        <card title="Secondary button">
+          <div class="flex flex-col gap-4">
+            <VToggle name="show" v-model="form.secondary_button.show"  title="Show Button" />
+            <template v-if="form.secondary_button.show">
+              <input-wrapper
+                  is-vertical
+                  field="secondary_button.label"
+                  label-text="Button Label *"
+                  class="w-full mb-4"
+                  :value="form.secondary_button.label"
+                  :limit="20"
+              >
+                <input
+                    v-model="form.secondary_button.label"
+                    name="secondary_button.label"
+                    type="text"
+                    placeholder="Label"
+                    :maxlength="20"
+                    class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+                />
+              </input-wrapper>
+              <linked-to
+                  name="secondary"
+                  v-model:type="form.secondary_button.type"
+                  v-model:url="form.secondary_button.url"
+                  v-model:openInNewTab="form.secondary_button.open_in_new_tab"
+                  :sites="sites"
+              />
+            </template>
+          </div>
+        </card>
+      </div>
+      <div class="flex w-full max-w-[356px] flex-col gap-4">
+        <card title="Visibility" supporting_text="Toggle off if you'd like to hide this item">
+          <VToggle v-model="form.public" name="public" label="Public" />
+        </card>
+        <card title="Featured Image" supporting_text="Recommended dimension: 1200*1060px">
+          <FileUpload
+              name="image"
+              v-model="form.featured_image"
+          />
+        </card>
+      </div>
+    </div>
+    <div class="flex justify-between space-x-xsSpace pt-xsSpace gap-4 sticky bottom-0 w-full bg-gray-200 py-2 px-6">
+      <a @click="close"
+         class="w-[200px] py-[9px] bg-white rounded-full border border-gray-300 shadow-xs text-md font-semibold hover:bg-gray-100 text-gray-700 text-center cursor-pointer">
+        Cancel
+      </a>
+      <a @click.prevent="save"
+         class="w-full py-[9px] rounded-full shadow-xs text-md font-semibold text-white bg-brand-600 hover:bg-brand-700 border border-brand-600 text-center cursor-pointer"
+      >Save changes</a>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed } 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";
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  slide: {
+    type: Object,
+    required: true,
+  },
+  sites: {
+    type: Object,
+    required: true,
+  },
+});
+
+const form = ref({
+  public: props.slide.public,
+  description: props.slide.description,
+  featured_image: props.slide.featured_image,
+  primary_button: props.slide.primary_button,
+  secondary_button: props.slide.secondary_button,
+  title: props.slide.title,
+});
+
+const save = () => {
+  emit("update", form.value);
+};
+
+const close = () => {
+  emit("close", form.value);
+};
+
+const descriptionWordCount = computed(() => {
+  const plainText = form.value.description.replace(/<[^>]*>/g, ' ').trim();
+  const words = plainText.split(/\s+/).filter(word => word.length > 0);
+  return words.length;
+});
+
+</script>

package/src/components/builders/BaseModuleForm.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="pb-8">
+    <component :is="props.form" @update="update" :data="props.data" :errors="errors" :sites="sites"></component>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  form: {
+    type: String,
+    required: true,
+  },
+  subType: {
+    type: String,
+    required: false,
+  },
+  page: {
+    type: Object,
+    required: true,
+  },
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  moduleIndex: {
+    required: true,
+  },
+  itemIndex: {
+    required: false,
+  },
+  data: {
+    type: Object,
+    required: true,
+  },
+  backUrl: {
+    type: String,
+    required: true,
+  },
+  sites: {
+    type: Object,
+    required: true,
+  },
+  redirectAfterResponse: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const errors = ref({});
+const content = ref(props.page.attributes);
+const route = inject("route");
+const contentUnchanged = ref(true);
+
+const update = (data) => {
+  const attributeIndex = content.value.findIndex((item) => item.id === props.attribute.id);
+  if (props.itemIndex) {
+    content.value[attributeIndex]["value"]["submodules"][props.moduleIndex]["items"][props.itemIndex] = data;
+  } else {
+    content.value[attributeIndex]["value"]["submodules"][props.moduleIndex] = data;
+  }
+
+  axios
+    .post(route("api.admin.pages.update-content", { page: props.page.id }), {
+      attributes: content.value,
+      changes: data,
+      form: props.form,
+      subType: props.subType,
+    })
+    .then((response) => {
+      contentUnchanged.value = true;
+      if (props.redirectAfterResponse) {
+        window.location.href = props.backUrl;
+      } else {
+        alert("Success");
+      }
+    })
+    .catch(({ response }) => {
+      errors.value = response.data.errors;
+    });
+};
+
+watch(
+  () => content.value,
+  () => (contentUnchanged.value = false),
+  { deep: true },
+);
+</script>

package/src/components/builders/Instructions.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/src/components/builders/LogoBuilder.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <input type="hidden" name="content" :value="JSON.stringify(content)" v-if="props.withInput" />
+    <div class="flex justify-between">
+      <div class="flex flex-col gap-1">
+        <div class="font-semibold text-gray-900">
+          {{ props.title }}
+        </div>
+        <div class="text-sm text-gray-600">
+          {{ props.description }}
+        </div>
+      </div>
+      <dsg-button
+        @click="addLink"
+        :disabled="content.items.length >= props.maximumItems"
+        :label="props.addButtonLabel"
+        type="button"
+        icon-before="plus"
+        v-tooltip="{
+          content: $t('menu.tooltips.link_builder.navbar_top_limit'),
+          disabled: content.items.length < props.maximumItems,
+          theme: 'elaa-tooltip',
+        }"
+      ></dsg-button>
+    </div>
+    <div
+      v-for="(item, index) in content.items"
+      :class="itemClasses"
+      class="flex flex-col gap-4 rounded-xl bg-gray-50 px-6 py-4"
+      :key="index"
+      :ref="index === content.items.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">
+          <action-menu>
+            <button
+              class="flex min-w-[15rem] items-center gap-2 p-2.5 hover:rounded-md hover:bg-gray-100"
+              type="button"
+              @click="handleDeleteItem(index)"
+            >
+              <TrashIcon class="h-5 w-5 cursor-pointer stroke-gray-500" />
+              <span class="text-sm font-medium text-gray-700">
+                {{ $t("menu.generic.delete_link") }}
+              </span>
+            </button>
+          </action-menu>
+        </div>
+      </div>
+      <hr class="bg-gray-200" />
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-1.5">
+          <file-upload
+            :key="index"
+            description=".JPG, .PNG (Max file size: 2 MB)"
+            @upload="(e) => (item.image = e)"
+            :existing-file="item.image"
+            @remove="() => (item.image = null)"
+          />
+          <p class="text-red-400" v-if="errors[props.errorKey + index + '.image']">
+            {{ errors[props.errorKey + index + ".image"][0] }}
+          </p>
+        </div>
+        <DsgInput label="URL" :required="true" v-model="item.url"></DsgInput>
+      </div>
+    </div>
+  </div>
+  <DeleteModal
+    ref="deleteModal"
+    :title="t('admin.modals.delete.title', { item: t('admin.labels.link') })"
+    :description="t('admin.modals.delete.description', { item: t('admin.labels.link') })"
+    :confirm-callback="removeItem"
+  ></DeleteModal>
+</template>
+<script setup>
+import { nextTick, ref, useTemplateRef } from "vue";
+import TrashIcon from "@/assets/img/icons/trash-01.svg";
+import { DsgInput } from "@dcodegroup-au/dsg-vue";
+import { useI18n } from "vue-i18n";
+import DeleteModal from "../../DeleteModal.vue";
+import { createLogo } from "@/js/vue/components/admin/pages/common/pageBuilderFactory.js";
+
+const { t } = useI18n();
+
+const deleteModalRef = useTemplateRef(`deleteModal`);
+const deleteItemIndex = ref(null);
+const lastItemRef = ref(null);
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  addButtonLabel: {
+    type: String,
+    required: true,
+  },
+  content: {
+    type: Object,
+    required: true,
+  },
+  errors: {
+    required: false,
+  },
+  maximumItems: {
+    type: Number,
+    default: 5,
+  },
+  sites: {
+    type: Object,
+    required: true,
+  },
+  itemClasses: {
+    type: String,
+    required: false,
+  },
+  withInput: {
+    type: Boolean,
+    default: false,
+  },
+  errorKey: {
+    type: String,
+    default: "content.items.",
+  },
+});
+
+const content = ref(props.content);
+if (!content.value.items) {
+  content.value.items = [];
+}
+
+function addLink() {
+  if (content.value.items.length >= props.maximumItems) {
+    return;
+  }
+  content.value.items.push(createLogo());
+
+  nextTick(() => {
+    if (lastItemRef.value) {
+      lastItemRef.value.scrollIntoView({ behavior: "smooth" });
+    }
+  });
+
+  emit("update", content.value);
+}
+
+function removeItem() {
+  content.value.items.splice(deleteItemIndex.value, 1);
+  deleteItemIndex.value = null;
+  emit("update", content.value);
+}
+
+const openDeleteModal = () => {
+  deleteModalRef.value?.openModal();
+};
+
+function handleDeleteItem(index) {
+  deleteItemIndex.value = index;
+  openDeleteModal();
+}
+</script>

package/src/components/builders/PageBuilderCarousel.vue

@@ -0,0 +1,18 @@
+<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" />
+    <div class="text-gray-600">
+      {{ props.data.item.description }}
+    </div>
+  </div>
+</template>
+<script setup>
+import { defaultProps } from "@/js/vue/components/admin/pages/common/defaultProps.js";
+
+const props = defineProps({
+  ...defaultProps,
+});
+</script>

package/src/components/builders/PageBuilderGrid.vue

@@ -0,0 +1,18 @@
+<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" />
+    <div class="text-gray-600">
+      {{ props.data.item.description }}
+    </div>
+  </div>
+</template>
+<script setup>
+import { defaultProps } from "@/js/vue/components/admin/pages/common/defaultProps.js";
+
+const props = defineProps({
+  ...defaultProps,
+});
+</script>

package/src/components/builders/PageBuilderLogos.vue

@@ -0,0 +1,29 @@
+<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.js";
+
+const emit = defineEmits(["update"]);
+const route = inject("route");
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const dataRef = ref(props.data.item);
+</script>

package/src/components/builders/PageBuilderSectionHeader.vue

@@ -0,0 +1,30 @@
+<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"
+      :sub-type="props.data.item.sub_type"
+      :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.js";
+
+const emit = defineEmits(["update"]);
+const route = inject("route");
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const dataRef = ref(props.data.item);
+</script>

package/src/components/builders/PageBuilderVerticalTabs.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex justify-between pb-6">
+    <div class="text-lg font-semibold text-gray-900">
+      {{ props.data.item.name }}
+    </div>
+  </div>
+  <div class="flex flex-col gap-4">
+    <div class="text-gray-600">
+      {{ props.data.item.supportive_text }}
+    </div>
+    <hr class="bg-gray-200" />
+    <div class="flex flex-col gap-3">
+      <div class="flex justify-between">
+        <div class="flex flex-col gap-1">
+          <div class="font-semibold text-gray-900">{{ $t("pages.page_builder.vertical_tabs.tabs") }}</div>
+          <div class="text-sm text-gray-600">{{ $t("menu.generic.up_to", { count: props.data.item.max_items }) }}</div>
+        </div>
+        <button
+          :disabled="dataRef.items.length >= props.data.item.max_items"
+          @click="addItem"
+          type="button"
+          class="text-sm flex items-center justify-center gap-1 rounded-[99px] border border-brand-600 bg-brand-600 px-3.5 py-2.5 font-semibold text-white"
+          :class="{ 'border-gray-100 bg-gray-100 !text-gray-400': dataRef.items.length >= props.data.item.max_items }"
+        >
+          <PlusIcon class="h-5 w-5"></PlusIcon>
+          <span>{{ $t("generic.buttons.add") }}</span>
+        </button>
+      </div>
+      <div class="flex flex-col gap-3">
+        <div class="flex items-center gap-4 px-2 py-1 hover:bg-gray-200" v-for="(item, index) in dataRef.items">
+          <div class="flex flex-1 cursor-pointer items-center justify-between">
+            <div class="flex flex-1 flex-col" @click="edit(index)">
+              <div class="text-xs text-gray-600">
+                {{ $t("pages.page_builder.vertical_tabs.item_title", { index: index + 1 }) }}
+              </div>
+              <div class="text-sm font-medium text-gray-900">
+                {{ item.title }}
+              </div>
+            </div>
+            <action-menu>
+              <button class="flex items-center gap-2 p-2.5" type="button" @click="handleDeleteItem(index)">
+                <TrashIcon class="h-5 w-5 cursor-pointer" />
+                <span class="text-sm font-medium text-gray-700">
+                  {{ $t("pages.page_builder.vertical_tabs.delete_item") }}
+                </span>
+              </button>
+            </action-menu>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import TrashIcon from "@/assets/img/icons/trash-01.svg";
+import { defaultProps } from "@/js/vue/components/admin/pages/common/defaultProps.js";
+import { createTab } from "@/js/vue/components/admin/pages/common/pageBuilderFactory.js";
+
+const emit = defineEmits(["update"]);
+const route = inject("route");
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const dataRef = ref(props.data.item);
+
+const addItem = () => {
+  dataRef.value.items.push(createTab());
+  emit("update", dataRef.value);
+};
+
+const handleDeleteItem = (index) => {
+  dataRef.value.items.splice(index, 1);
+  emit("update", dataRef.value);
+};
+
+const edit = (index) => {
+  window.location.href = route("admin.pages.edit-attribute", {
+    page: props.data.pageAttribute.page_id,
+    attribute: props.data.pageAttribute.id,
+    moduleIndex: props.data.subModuleIndex,
+    itemIndex: index,
+  });
+};
+</script>