@dcodegroup-au/page-builder 0.0.1

package/src/components/builders/PageModal.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { inject, reactive, useTemplateRef, onMounted, onBeforeUnmount, ref } from "vue";
+import DsgModal from "../../dsg-vue/DsgModal.vue";
+import { DsgButton, DsgInput, DsgToggle } from "@dcodegroup-au/dsg-vue";
+import { DsgButtonProps } from "@dcodegroup-au/dsg-vue";
+import Form from "form-backend-validation";
+import route from "@/js/routes/routes";
+import { useI18n } from 'vue-i18n';
+import axios from "axios";
+export interface FormFields {
+  title: string,
+  id?: number,
+}
+
+export interface PageProps {
+  button?: DsgButtonProps | false;
+  initForm?: FormFields,
+  primaryButtonLabel?: string,
+  secondaryButtonLabel?: string,
+}
+
+const {
+  button = false,
+  initForm = {
+    title: '',
+  },
+  primaryButtonLabel = 'Confirm',
+  secondaryButtonLabel = 'Cancel',
+}: PageProps = defineProps<PageProps>();
+
+const modalRef = useTemplateRef<typeof DsgModal | null>('modal');
+
+const form = reactive(initForm);
+const editMode =  ref(true);
+const { t } = useI18n();
+const primaryButton = ref(primaryButtonLabel)
+const openModal = (): void => {
+  editMode.value = true;
+  primaryButton.value = t('admin.buttons.create_category')
+  modalRef.value?.open();
+}
+const closeModal = (): void => {
+  modalRef.value?.close();
+}
+const save = async (): Promise<void> => {
+  try {
+    const response = await axios.put(route('api.admin.pages.update', {page: form.id}), form)
+    console.log(response);
+    bus?.$emit("reloadTable");
+    modalRef.value?.close();
+  } catch (e) {
+    console.log(e);
+  }
+}
+const bus = inject('bus');
+onMounted(() => {
+  bus?.$on('openPageModal', openPageModal)
+  bus?.$on('closePageModal', closePageModal)
+})
+
+onBeforeUnmount(()=>{
+  bus?.$off('openPageModal', openPageModal)
+  bus?.$off('closePageModal', closePageModal)
+})
+
+const openPageModal = ((data: Object): void=>{
+  editMode.value = true;
+  form.title = data.data.title;
+  form.id = Number(data.data.id)
+  primaryButton.value = t('admin.buttons.confirm')
+  modalRef.value?.open();
+})
+
+const closePageModal = ((data: Object): void =>{
+  modalRef.value?.close();
+})
+
+defineExpose({openModal});
+</script>
+
+<template>
+  <DsgModal :title="$t('pages.edit_modal.title')"
+            ref="modal"
+            :width="400"
+            :secondary-button="{label: secondaryButtonLabel, size: 'lg', theme: 'gray-secondary', classes: 'max-w-[90px]'}"
+            @secondary-button-clicked="closeModal"
+            :primary-button="{label: primaryButton, disabled: form.title === ''}"
+            @primary-button-clicked="save"
+  >
+    <DsgInput :label="$t('pages.edit_modal.fields.title')" :required="true" v-model="form.title"></DsgInput>
+  </DsgModal>
+</template>

package/src/components/builders/VLinks.vue

@@ -0,0 +1,135 @@
+<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">
+          {{ componentData.supportive_text }}
+        </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">
+          Link #{{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">
+                Delete Link
+              </span>
+            </button>
+          </action-menu>
+        </div>
+      </div>
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-1.5">
+          <input-wrapper
+              is-vertical
+              field="title"
+              label-text="Title *"
+              class="w-full mb-4"
+              :value="item.title"
+              :limit="20"
+          >
+            <input
+                v-model="item.title"
+                name="title"
+                type="text"
+                placeholder="Title"
+                :maxlength="20"
+                class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+            />
+          </input-wrapper>
+          <linked-to
+              label="Linked to"
+              :name="`link_${index + 1}`"
+              v-model:type="item.type"
+              v-model:url="item.link_to"
+              v-model:openInNewTab="item.open_in_new_tab"
+              :sites="sites"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <VModal ref="modalRef" entity="link" :callback="deleteCallback"></VModal>
+</template>
+<script setup>
+import {ref, nextTick} from "vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import TrashIcon from "@/assets/img/icons/trash-01.svg";
+import {defaultProps} from "@/components/helpers/defaultProps.js";
+import {createSlide} from "@/components/helpers/pageBuilderFactory";
+import ActionMenu from "@/components/common/ActionMenu.vue";
+import VToggle from "@/components/common/VToggle.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import LinkedTo from "@/components/common/LinkedTo.vue";
+import VModal from "@/components/common/VModal.vue";
+
+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.data.length >= componentData.value.max_items) {
+    return;
+  }
+  componentData.value.data.push({
+    title: "",
+    type: "site-content",
+    url: "",
+    openInNewTab: "",
+  });
+
+  nextTick(() => {
+    if (lastItemRef.value) {
+      lastItemRef.value.scrollIntoView({behavior: "smooth"});
+    }
+  });
+
+  emit("update", componentData.value);
+}
+
+const handleDeleteItem = (index) => {
+  deleteItemIndex.value = index;
+  modalRef?.value?.open(index);
+}
+
+const deleteCallback = (index) => {
+  componentData.value.data.splice(index, 1);
+  emit("update", componentData.value);
+};
+</script>

package/src/components/builders/VSliders.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex justify-between pb-2">
+    <p class="text-lg font-semibold text-gray-900">
+      {{ data.component.name }}
+    </p>
+  </div>
+  <div class="flex flex-col gap-4">
+    <div class="text-gray-600 border-b border-gray-200 pb-4 text-sm">
+      {{ props.data.component.supportive_text }}
+    </div>
+    <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">Sliders</div>
+          <div class="text-sm text-gray-600">This slider can contain up to {{ data.component.max_items }} slides</div>
+        </div>
+        <div>
+          <button
+              :disabled="dataRef.data.length >=  data.component.max_items"
+              @click="addItem"
+              type="button"
+              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': dataRef.data.length >= data.component.max_items }"
+          >
+            <PlusIcon class="h-5 w-5"></PlusIcon>
+            <span>Add</span>
+          </button>
+        </div>
+      </div>
+      <div class="flex flex-col gap-3">
+        <div class="flex items-center gap-4 px-2 py-1 hover:bg-gray-100 rounded-lg" v-for="(item, index) in dataRef.data">
+          <div class="flex flex-1 cursor-pointer items-center justify-between relative">
+            <div class="flex flex-1 flex-col" @click="edit(index)">
+              <div class="text-xs text-gray-600">
+                Slider #{{ index + 1 }}
+              </div>
+              <div class="text-sm font-medium text-gray-900">
+                {{ item.title }}
+              </div>
+            </div>
+            <ActionMenu @removeItem="handleDeleteItem(index)" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <VModal ref="modalRef" entity="slide" :callback="deleteCallback"></VModal>
+</template>
+<script setup>
+import { ref } from "vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import { defaultProps } from "@/components/helpers/defaultProps.js";
+import { createSlide } from "@/components/helpers/pageBuilderFactory.js";
+import ActionMenu from "@/components/common/ActionMenu.vue";
+import VModal from "@/components/common/VModal.vue";
+
+const emit = defineEmits(["update"]);
+const props = defineProps({
+  ...defaultProps,
+});
+
+const dataRef = ref(props.data.component);
+const modalRef = ref(null);
+
+const addItem = () => {
+  dataRef.value.data.push(createSlide());
+  emit("update", dataRef.value);
+};
+
+const handleDeleteItem = (index) => {
+  modalRef?.value?.open(index);
+};
+
+const deleteCallback = (index) => {
+  dataRef.value.data.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>

package/src/components/common/ActionMenu.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="relative z-50" v-click-outside="click">
+    <DotsHorizontal @click="open = !open" class="w-5 cursor-pointer text-gray-600" />
+    <div class="absolute -left-60 top-6 w-[240px] rounded-lg border border-gray-200 bg-white" v-if="open">
+      <a class="flex items-center gap-2 p-2.5 cursor-pointer h-[48px] w-full" @click="remove">
+        <TrashIcon class="w-5" />
+        Delete
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useClickOutside } from "@/components/helpers/clickOutSide.js";
+
+export default {
+  directives: {
+    clickOutside: useClickOutside,
+  },
+};
+</script>
+
+<script setup>
+import DotsHorizontal from "@/assets/img/icons/dots-horizontal.svg";
+import TrashIcon from "@/assets/img/icons/trash-01.svg";
+import { ref } from "vue";
+const open = ref(false);
+const emit = defineEmits(['removeItem']);
+
+const click = () => {
+  if (!open.value) {
+    return;
+  }
+  open.value = false;
+}
+
+const remove = () => {
+  emit('removeItem');
+  open.value = false;
+}
+</script>

package/src/components/common/Card.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="rounded-xl bg-gray-50 px-6 py-5">
+    <div class="pb-5" v-if="title">
+      <div class="text-lg font-semibold text-gray-900">
+        {{ title }}
+      </div>
+      <div class="text-sm text-gray-600" v-if="supporting_text">
+        {{ supporting_text }}
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  supporting_text: {
+    type: String,
+    default: "",
+  },
+});
+</script>

package/src/components/common/ExternalPage.vue

@@ -0,0 +1,16 @@
+<template>
+  <input-wrapper is-vertical field="title" label-text="URL *" class="w-full">
+    <input
+        v-model="url"
+        name="title"
+        type="text"
+        placeholder="Enter your url"
+        class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+    />
+  </input-wrapper>
+</template>
+
+<script setup>
+import InputWrapper from "@/components/common/InputWrapper.vue";
+const url = defineModel("url");
+</script>

package/src/components/common/FileUpload.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="file-upload">
+    <input type="hidden" :name="name" :value="valueJson"/>
+    <div v-if="file.length" class="preview">
+      <span class="file-upload-preview">
+        <img
+            class="img"
+            v-if="isImage(file.mime_type)"
+            :src="file.url"
+            :title="file.file_name"
+        />
+      </span>
+      <a :href="file.url" target="_blank" class="link">
+        <div class="file-upload-title">{{ file.file_name }}</div>
+      </a>
+      <a class="file-upload-file-remove">
+        <i class="fal fa-times" @click="deleteFile(file)"></i>
+      </a>
+    </div>
+    <div class="relative">
+      <div class="dropzone border border-dashed rounded-lg z-10 h-[200px] w-full cursor-pointer relative"
+           ref="dropzone">
+      </div>
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg flex flex-col justify-center items-center w-full">
+        <div>
+          <UploadCloud class="w-6 h-6"/>
+        </div>
+        <div class="text-sm text-center">
+          <p>
+            <span class="text-brand-900">Click to upload</span><span> or drag and drop</span>
+          </p>
+          <span>(max. 20MB)</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, reactive, onMounted, computed} from "vue";
+import axios from "axios";
+import Dropzone from "dropzone";
+import UploadCloud from "@/assets/img/icons/upload-cloud-02.svg";
+
+Dropzone.autoDiscover = false;
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Object],
+    default: null,
+  },
+  submitEndpoint: {
+    type: String,
+    required: true,
+  },
+  deleteEndpoint: {
+    type: String,
+    required: true,
+  },
+  formData: {
+    type: Object,
+    default: null,
+  },
+  csrf: {
+    type: String,
+    required: true,
+  },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const file = ref([]);
+const dropzone = ref(Dropzone);
+const formData = ref(null);
+
+const valueJson = computed(() => {
+  return JSON.stringify(file);
+});
+
+const isImage = (mimeType) => {
+  const imageMimes = ["image/gif", "image/jpeg", "image/png", "image/tiff"];
+  return imageMimes.includes(mimeType);
+};
+
+const deleteFile = (fileToDelete) => {
+  axios
+      .delete(props.deleteEndpoint + '?' + fileToDelete.id)
+      .then(() => {
+        file.value = null;
+      })
+      .catch(console.error);
+};
+
+onMounted(() => {
+  formData.value = props.formData;
+  const csrf = props.csrf;
+
+  dropzone.value = new Dropzone(dropzone.value, {
+    url: props?.submitEndpoint + '?' + formData.value?.id,
+    addRemoveLinks: true,
+    maxFiles: 1,
+    sending: (file, xhr, formData) => {
+      formData.append("_token", csrf);
+      formData.append("field", props.name);
+    },
+    success: (file, response) => {
+      file.value = response;
+    },
+    complete: (file) => {
+      dropzone.value?.removeFile(file);
+    },
+  });
+
+  file.value = props.modelValue;
+});
+</script>
+<style>
+.dropzone {
+  .dz-message {
+    @apply hidden;
+  }
+
+  .dz-preview {
+    @apply bg-gray-50 flex gap-1 h-[198px] p-4 items-center rounded-lg;
+
+    .dz-image {
+      @apply w-[100px] object-cover;
+    }
+
+    .dz-details, .dz-error-message, .dz-remove {
+      @apply text-sm;
+    }
+
+    .dz-success-mark, .dz-error-mark, .dz-details, .dz-message {
+      @apply hidden;
+    }
+  }
+}
+</style>

package/src/components/common/InputWrapper.vue

@@ -0,0 +1,41 @@
+<template>
+  <label
+      :for="field"
+      class="block space-y-2xsSpace text-sm font-medium leading-none text-gray-700 relative"
+  >
+    <span
+        v-if="labelText || $slots.label"
+        class="v-field-label inline-block mb-2"
+    >
+      <template v-if="$slots.label">
+        <slot name="label"></slot>
+      </template>
+      <template v-else>
+        {{ labelText }}
+        <span v-if="isRequired"> *</span>
+      </template>
+    </span>
+    <slot />
+    <span class="absolute right-0 -bottom-6 text-sm text-gray-600 font-normal" v-if="limit">
+      {{value.length}}/{{limit}} characters
+    </span>
+    <span class="absolute left-0 -bottom-6 text-sm text-gray-600 font-normal" v-if="showCount">
+      Word count: {{value}}
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+
+interface Props {
+  field: string;
+  labelText?: string;
+  value?: any;
+  limit?: number;
+  showCount?: boolean;
+  darkTheme?: boolean;
+  isRequired?: boolean;
+}
+
+const props = defineProps<Props>();
+</script>

package/src/components/common/LinkedTo.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex flex-col gap-5">
+    <div>
+      <p v-if="label" class="text-sm text-gray-700 font-medium py-2">{{ label }}</p>
+      <div class="text-sm flex items-center gap-6 font-medium text-gray-700">
+        <label v-for="option in options" class="flex items-center gap-2 cursor-pointer">
+          <input
+              :name="name"
+              type="radio"
+              :value="option"
+              v-model="type"
+              class="checked:bg-brand-600 hover:bg-brand-600 checked:hover:bg-brand-600 focus:bg-brand-600 focus:ring-brand-600 focus:checked:bg-brand-600 rounded-full"
+              :disabled="option === 'form'"
+          />
+          <span>{{ toReadableWords(option) }}</span>
+        </label>
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <component :is="getComponentByType(type)" v-model:url="url" :sites="sites"/>
+      <input type="hidden" name="url" :value="url" />
+    </div>
+    <div class="flex items-center gap-2">
+      <VToggle class="mb-1" name="open_in_new_tab" v-model="openInNewTab"  title="Open in a new tab" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import VToggle from "@/components/common/VToggle.vue";
+import SiteContent from "@/components/common/SiteContent.vue";
+import ExternalPage from "@/components/common/ExternalPage.vue";
+
+const type = defineModel("type", { default: "site-content" });
+const url = defineModel("url");
+const openInNewTab = defineModel("openInNewTab");
+
+defineProps({
+  label: { type: Object, required: false },
+  sites: { type: Object, required: true },
+  name: { type: String, required: true },
+  options: { type: Array, required: false, default: ["site-content", "external-page"] },
+});
+
+const toReadableWords = (input) => {
+  return input
+      .split('-') // Split the string by hyphens
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' '); // Join the words with spaces
+}
+
+// Map the type to the corresponding component
+const getComponentByType = (type) => {
+  const components = {
+    "site-content": SiteContent,
+    "external-page": ExternalPage,
+  };
+  return components[type] || null;
+};
+</script>