@opengis/cms 0.0.2 → 0.0.3

package/src/components/icons/icon-table.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1rem"
+    height="1rem"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M2.182 0A2.182 2.182 0 0 0 0 2.182v19.636C0 23.023.977 24 2.182 24h19.636A2.182 2.182 0 0 0 24 21.818V2.182A2.182 2.182 0 0 0 21.818 0H2.182Zm9.354 11.987h7.539c.314 0 .55.209.55.549v6.539c0 .34-.236.55-.55.55h-7.539c-.34 0-.55-.236-.55-.55v-6.539c0-.34.236-.55.55-.55Zm-6.638-2.27h14.177c.314 0 .549-.209.549-.549v-4.27c0-.34-.21-.549-.55-.549H4.899c-.313 0-.549.21-.549.55v4.269c0 .34.236.55.55.55Zm3.27 9.907h-3.27a.536.536 0 0 1-.549-.55v-6.538c0-.34.236-.55.55-.55h3.269c.34 0 .55.21.55.55v6.539c0 .34-.236.55-.55.55Z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/icons/icon-users.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
+    <circle cx="9" cy="7" r="4"></circle>
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
+    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+  </svg>
+</template>

package/src/components/icons/icon.plus.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="icon icon-tabler icons-tabler-outline icon-tabler-plus"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 5l0 14" />
+    <path d="M5 12l14 0" />
+  </svg>
+</template>

package/src/components/manager/children/vs-manager-collection-content.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="bg-white rounded-xl p-[20px] border mt-[20px]">
+    <div class="mb-4 xl:mb-8">
+      <h1 class="text-lg font-semibold text-gray-800 dark:text-neutral-200">
+        {{ objectData?.type?.name }}
+      </h1>
+      <p class="text-sm text-gray-500 dark:text-neutral-500">
+        {{ objectData?.type?.description }}
+      </p>
+    </div>
+    <div class="flex items-center">
+      <input
+        type="text"
+        @input="({ target }) => debounceGetDataById(target.value)"
+        class="py-2 px-4 block max-w-[400px] w-full bg-gray-100 border-transparent rounded-lg text-sm focus:outline-2 focus:outline-blue-500 h-[36px] mb-[1px]"
+        placeholder="Пошук за назвою"
+      />
+      <div class="flex justify-end ml-auto items-center">
+        <VsManagerCollectionTableAdd :template @update-list="getDataById" />
+      </div>
+    </div>
+    <VsManagerCollectionTable :objectData :template />
+  </div>
+</template>
+
+<script setup>
+import axios from "axios";
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import VsManagerCollectionTable from "../manager-table/vs-manager-collection-table.vue";
+import VsManagerCollectionTableAdd from "../manager-table/vs-manager-colection-table-add.vue";
+import debounce from "../../../helpers/debounce";
+const route = useRoute();
+
+const template = computed(() => route?.params?.template);
+const objectData = ref(null);
+
+const getDataById = async (search = null) => {
+  try {
+    const { data } = await axios.get(`/api/cms-manager/${template.value}`, {
+      params: {
+        search,
+      },
+    });
+    objectData.value = data;
+  } catch (error) {}
+};
+
+const debounceGetDataById = debounce((s) => getDataById(s), 300);
+
+watch(template, getDataById);
+onMounted(() => getDataById());
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/manager/children/vs-manager-collection-item-content.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flex items-center justify-between">
+    <div class="mt-[10px]">
+      <h2 class="font-medium text-2xl">{{ objectData?.title }}</h2>
+      <p class="text-gray-600">{{ objectData?.description }}</p>
+    </div>
+    <div class="flex items-center gap-1">
+      <button
+        @click="deleteById"
+        class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-red-500 rounded-lg !border-gray-200 hover:bg-red-700 duration-300"
+      >
+        Видалити
+      </button>
+      <button
+        @click="updateDataById"
+        class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+      >
+        Зберегти
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="w-full mt-[20px] bg-white rounded-xl p-[20px] border">
+      <VsForm
+        :key="formUpdateCounter"
+        class="w-full"
+        :scheme
+        v-model="formValues"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import axios from "axios";
+import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const $notify = getCurrentInstance().proxy.$notify;
+
+const route = useRoute();
+const router = useRouter();
+
+const template = computed(() => route?.params?.template);
+const id = computed(() => route?.params?.id);
+const objectData = ref(null);
+const formValues = ref({});
+const formUpdateCounter = ref(1);
+
+const getDataById = async () => {
+  try {
+    const { data } = await axios.get(
+      `/api/cms-manager/${template.value}/${id.value}`
+    );
+    objectData.value = data?.rows?.[0];
+    formValues.value = data?.rows?.[0];
+    formUpdateCounter.value = formUpdateCounter.value + 1;
+  } catch (error) {}
+};
+
+const updateDataById = async () => {
+  try {
+    await axios.put(`/api/cms-manager/${id.value}`, formValues.value);
+    await $notify({
+      type: "success",
+      title: "Успішно!",
+      message: "Дані успішно оновлено",
+    });
+    getDataById();
+  } catch (error) {
+    await $notify({
+      type: "error",
+      title: "Помилка!",
+      message: "При спробі оновити дані виникла помилка",
+    });
+  }
+};
+
+const deleteById = async () => {
+  try {
+    await axios.delete(`/api/cms-manager/${id.value}`);
+    await $notify({
+      type: "success",
+      title: "Успішно!",
+      message: "Об'єкт видалено успішно",
+    });
+    await router?.back();
+    // getDataById();
+  } catch (error) {
+    await $notify({
+      type: "error",
+      title: "Помилка!",
+      message: "При спробі видалити об'єкт виникла помилка",
+    });
+  }
+};
+
+watch(template, getDataById);
+onMounted(() => getDataById());
+
+const scheme = {
+  title: {
+    ua: "Назва",
+    type: "Text",
+    placeholder: "Назва",
+    validators: ["required"],
+  },
+  body: { ua: "Контент", type: "TextEditor", validators: ["required"] },
+  enabled: {
+    ua: "Чи увімкнений",
+    type: "Switcher",
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/manager/children/vs-manager-single-content.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="flex items-center justify-between">
+    <div class="mt-[10px]">
+      <h2 class="font-medium text-2xl">{{ objectData?.title }}</h2>
+      <p class="text-gray-600">{{ objectData?.description }}</p>
+    </div>
+    <div class="flex items-center gap-1">
+      <!-- <button
+        @click="deleteById"
+        class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-red-500 rounded-lg !border-gray-200 hover:bg-red-700 duration-300"
+      >
+        Видалити
+      </button> -->
+      <button
+        @click="updateDataById"
+        class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+      >
+        Зберегти
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="w-full mt-[20px] bg-white rounded-xl p-[20px] border">
+      <VsForm
+        :key="formUpdateCounter"
+        class="w-full"
+        :scheme
+        v-model="formValues"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import axios from "axios";
+import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+// const $notify = getCurrentInstance().proxy.$notify;
+const route = useRoute();
+// const router = useRouter();
+
+const template = computed(() => route?.params?.template);
+const objectData = ref(null);
+const formValues = ref({});
+const formUpdateCounter = ref(1);
+
+const getDataById = async () => {
+  try {
+    const { data } = await axios.get(`/api/cms-manager/${template.value}`);
+    objectData.value = data?.rows?.[0];
+    formValues.value = data?.rows?.[0];
+    formUpdateCounter.value = formUpdateCounter.value + 1;
+  } catch (error) {}
+};
+
+const updateDataById = async () => {
+  try {
+    await axios.put(
+      `/api/cms-manager/${objectData.value?.id}`,
+      formValues.value
+    );
+    await $notify({
+      type: "success",
+      title: "Успішно!",
+      message: "Дані успішно оновлено",
+    });
+    getDataById();
+  } catch (error) {
+    await $notify({
+      type: "error",
+      title: "Помилка!",
+      message: "При спробі оновити дані виникла помилка",
+    });
+  }
+};
+
+// const deleteById = async () => {
+//   try {
+//     await axios.delete(`/api/cms-manager/${objectData.value?.id}`);
+//     await $notify({
+//       type: "success",
+//       title: "Успішно!",
+//       message: "Об'єкт видалено успішно",
+//     });
+//     await router?.back();
+//   } catch (error) {
+//     await $notify({
+//       type: "error",
+//       title: "Помилка!",
+//       message: "При спробі видалити об'єкт виникла помилка",
+//     });
+//   }
+// };
+
+watch(template, getDataById);
+onMounted(() => getDataById());
+
+const scheme = {
+  title: {
+    ua: "Назва",
+    type: "Text",
+    placeholder: "Назва",
+  },
+  enabled: {
+    ua: "Чи увімкнений",
+    type: "Switcher",
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/manager/manager-table/vs-manager-colection-table-add.vue

@@ -0,0 +1,84 @@
+<template>
+  <button
+    @click="formVisible = true"
+    class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+  >
+    Створити
+  </button>
+
+  <VsDialog title="Створити об'єкт" v-model:visible="formVisible">
+    <div>
+      <VsForm ref="form" :scheme v-model="formValue" />
+    </div>
+    <template #footer>
+      <div class="flex justify-end p-[20px] gap-[10px] border-t w-full">
+        <button
+          @click="formVisible = false"
+          class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-black border rounded-lg border-gray-200 hover:bg-gray-100 duration-300"
+        >
+          Скасувати</button
+        ><button
+          @click="createNewObject"
+          class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+        >
+          Створити
+        </button>
+      </div>
+    </template>
+  </VsDialog>
+</template>
+
+<script setup>
+import axios from "axios";
+import { getCurrentInstance, ref } from "vue";
+import { translit } from "../../../helpers/translite";
+
+const $notify = getCurrentInstance().proxy.$notify;
+const emit = defineEmits(["update-list"]);
+
+const props = defineProps({ template: { type: String, default: () => "" } });
+
+const formVisible = ref(false);
+const formValue = ref({});
+const form = ref();
+
+const createNewObject = async () => {
+  try {
+    await form.value.doValidation();
+    formValue.value.url = translit(formValue.value.title);
+    await axios.post(`/api/cms-manager/${props.template}`, formValue.value);
+    $notify({
+      type: "success",
+      title: "Успушно!",
+      message: "Об'єкт створено успішно",
+    });
+    formValue.value = {};
+    formVisible.value = false;
+    emit("update-list");
+  } catch (error) {
+    $notify({
+      type: "error",
+      title: "Помилка!",
+      message: "При спробі створити об'єкт сталася помилка",
+    });
+  }
+};
+
+const scheme = [
+  {
+    key: "title",
+    ua: "Назва",
+    type: "Text",
+    placeholder: "Назва",
+    validators: ["required"],
+  },
+  { key: "body", ua: "Контент", type: "TextEditor", validators: ["required"] },
+  {
+    ua: "Чи увімкнений",
+    name: "enabled",
+    type: "Switcher",
+  },
+];
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/manager/manager-table/vs-manager-collection-table.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="w-full">
+    <table
+      v-if="objectData?.rows?.length"
+      class="relative min-w-full divide-y-2 divide-gray-200 bg-white text-[12px]"
+    >
+      <thead
+        class="sticky top-[0px] z-[1] bg-white w-full after:absolute after:content-[''] after:block after:w-full after:h-px after:bg-stone-200"
+      >
+        <tr>
+          <th
+            v-for="(column, index) in columns"
+            :key="index"
+            class="text-start px-4 py-2 font-medium text-gray-900 max-w-[250px]"
+          >
+            {{ column?.ua }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200 dark:divide-neutral-700">
+        <tr
+          v-for="row in objectData?.rows"
+          class="odd:bg-gray-50"
+          @click="
+            $router.push(`/cms/manager/collection/${template}/${row?.id}`)
+          "
+        >
+          <td
+            v-for="column in columns"
+            class="px-4 py-2 text-gray-700 max-w-[250px] admin-component-is"
+          >
+            <component
+              :value="row?.[column?.name]"
+              :is="formats[column?.format?.toLowerCase()] || 'div'"
+              >{{ row?.[column?.name] }}</component
+            >
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <VsNotData v-else />
+  </div>
+</template>
+
+<script setup>
+import formats from "../../formats";
+import VsNotData from "../../shared-components/vs-not-data.vue";
+
+const props = defineProps({ objectData: Object, template: String });
+
+const columns = [
+  { ua: "Назва", name: "title", format: "Text" },
+  { ua: "Шлях", name: "url", format: "Text" },
+  { ua: "Чи увімкнений", name: "enabled", format: "Switch" },
+  { ua: "Дата створення", name: "cdate", format: "Date" },
+];
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/manager/vs-manager-menu.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="p-4 w-[260px] shrink-0 border-r h-[100vh]">
+    <div class=" " v-if="list?.length">
+      <h2
+        class="block text-[14px] font-medium text-gray-800 mb-2 dark:text-neutral-200"
+      >
+        Колекції
+      </h2>
+
+      <ul class="flex flex-col space-y-1">
+        <li
+          v-for="category in list?.filter((i) => i?.type == 'collection')"
+          :key="item?.id"
+        >
+          <router-link
+            :to="`/cms/manager/collection/${category?.template}`"
+            :class="[
+              $route?.params?.template === category?.template
+                ? 'bg-gray-200'
+                : '',
+            ]"
+            class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-200 focus:outline-none dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"
+          >
+            <IconPoint class="text-gray-500" />
+            {{ category?.name || category?.title }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+    <div class="pt-5">
+      <h2
+        class="block text-[14px] mb-2 font-medium text-gray-800 dark:text-neutral-200"
+      >
+        Одиничні типи
+      </h2>
+      <ul class="flex flex-col space-y-1">
+        <li
+          v-for="category in list?.filter((i) => i?.type == 'single')"
+          :key="item?.id"
+        >
+          <router-link
+            :to="`/cms/manager/single/${category?.template}`"
+            :class="[
+              $route?.params?.template === category?.template
+                ? 'bg-gray-200'
+                : '',
+            ]"
+            class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-200 focus:outline-none dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"
+          >
+            <IconPoint class="text-gray-500" />
+            {{ category?.name || category?.title }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script setup>
+import axios from "axios";
+import { ref } from "vue";
+import IconPoint from "../icons/icon-point.vue";
+
+const list = ref(null);
+
+const getList = async () => {
+  try {
+    const { data } = await axios.get("/api/cms-builder"); //
+    list.value = data?.rows || null;
+  } catch (error) {}
+};
+
+getList();
+</script>

package/src/components/media/Breadcrumb.vue

@@ -0,0 +1,73 @@
+<template>
+  <nav aria-label="Breadcrumb" class="mb-4">
+    <div class="flex items-start justify-between">
+      <ol class="flex flex-wrap items-center gap-[5px] min-h-8">
+        <li
+          v-for="(crumb, index) in breadcrumbs"
+          :key="index"
+          class="whitespace-nowrap"
+        >
+          <div class="flex items-center">
+            <button
+              @click="navigateTo(index)"
+              :class="[
+                'hover:text-blue-500 focus:outline-none flex items-center',
+                index === breadcrumbs.length - 1
+                  ? 'font-medium underline text-blue-500'
+                  : 'text-gray-500',
+              ]"
+              class="h-8 flex items-center"
+            >
+              <IconHome v-if="index === 0" class="w-4 h-4" />
+              <span v-else>{{ crumb }}</span>
+            </button>
+            <IconChewronRight
+              v-if="index < breadcrumbs.length - 1"
+              class="text-gray-400 w-3 h-3 ml-[10px]"
+            />
+          </div>
+        </li>
+      </ol>
+    </div>
+  </nav>
+</template>
+
+<script>
+import IconHome from "../icons/icon-home.vue";
+import IconChewronRight from "../icons/icon-chewron-right.vue";
+
+export default {
+  components: { IconHome, IconChewronRight },
+  props: {
+    initialPath: {
+      type: String,
+      default: "",
+    },
+    root: {
+      type: String,
+      default: "Root",
+    },
+  },
+  data() {
+    return {
+      breadcrumbs: [],
+    };
+  },
+  watch: {
+    initialPath: {
+      immediate: true,
+      handler(newPath) {
+        const pathSegments = newPath.split("/").filter(Boolean);
+        this.breadcrumbs = [this.root, ...pathSegments];
+      },
+    },
+  },
+  methods: {
+    navigateTo(index) {
+      const newPath =
+        index === 0 ? "" : this.breadcrumbs.slice(1, index + 1).join("/");
+      this.$emit("update-path", newPath);
+    },
+  },
+};
+</script>