@opengis/cms 0.0.2 → 0.0.3

package/src/pages/vs-media.vue

@@ -0,0 +1,398 @@
+<template>
+  <div
+    class="w-full p-[20px] bg-gray-100 flex justify-center h-[calc(100vh-60px)]"
+  >
+    <div class="p-[20px] w-full max-w-[1640px]">
+      <div>
+        <div class="flex items-start justify-between">
+          <!-- Breadcrumb Component -->
+          <Breadcrumb :initialPath="currentDir" @update-path="updatePath" />
+
+          <!-- Search Input -->
+          <div class="flex gap-2 relative">
+            <div
+              class="flex items-center justify-between bg-white py-2 px-3 rounded-lg border border-gray-300 focus:outline-none focus:border-blue-500 text-sm w-[250px]"
+            >
+              <div class="flex items-center gap-[12px]">
+                <IconSearch />
+                <input
+                  v-model="searchQuery"
+                  type="text"
+                  placeholder="Пошук за назвою..."
+                  class="focus:outline-none"
+                />
+              </div>
+              <IconClose
+                class="w-4 h-4 cursor-pointer"
+                v-if="searchQuery"
+                @click="clearSearch"
+              />
+            </div>
+
+            <button
+              ref="dropdownButton"
+              @click="isAddDirModalOpen = true"
+              class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium border border-gray-300 rounded-lg text-gray-800 hover:bg-gray-100 bg-white"
+            >
+              <IconFolder2 />
+              Додати папку
+            </button>
+
+            <!-- Upload Button -->
+            <label
+              for="file-upload"
+              class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 cursor-pointer"
+            >
+              Завантажити
+              <input
+                id="file-upload"
+                type="file"
+                class="hidden"
+                @change="handleFileChange"
+              />
+            </label>
+          </div>
+        </div>
+
+        <!-- No data -->
+        <div
+          v-if="!filteredIcons?.length"
+          class="flex flex-col items-center justify-center h-64 bg-gray-50 rounded-lg border text-center"
+        >
+          <VsNotData text="" class="![&>div]:min-w-[100px] !w-auto" />
+        </div>
+
+        <!-- Grid of Icons -->
+        <div v-else>
+          <div class="grid grid-cols-2 lg:grid-cols-5 gap-3 xl:gap-5">
+            <div
+              v-for="icon in currentIcons"
+              :key="icon?.id"
+              class="flex flex-col bg-white border rounded-xl"
+              @click="icon.type === 'dir' ? navigateToDir(icon.name) : null"
+              :class="{
+                'cursor-pointer hover:border-blue-500': icon.type === 'dir',
+                'cursor-default': icon.type !== 'dir',
+              }"
+            >
+              <div class="relative group">
+                <div
+                  class="w-full h-36 sm:h-[170px] object-cover rounded-t-xl flex items-center justify-center"
+                >
+                  <div class="text-[#54aeff]" v-if="icon?.type === 'dir'">
+                    <IconFolder />
+                  </div>
+                  <img
+                    v-else
+                    class="object-contain max-h-[40px]"
+                    :src="`/api/cms-media/${icon?.token}`"
+                    :alt="icon?.name"
+                    :style="
+                      icon?.path?.includes('.svg')
+                        ? 'width:250px;max-height:100px'
+                        : ''
+                    "
+                  />
+                </div>
+              </div>
+
+              <div class="p-3 flex items-center gap-x-3 border-t">
+                <span
+                  v-if="icon.type !== 'dir'"
+                  class="flex shrink-0 justify-center items-center w-10 h-10 bg-white border border-solid text-gray-500 rounded-lg"
+                >
+                  <IconImage />
+                </span>
+                <div class="grow truncate" :title="icon?.name">
+                  <p
+                    class="block truncate text-sm font-semibold text-gray-800"
+                    :class="{ 'cursor-pointer': icon.type !== 'dir' }"
+                    @click.stop="
+                      icon.type !== 'dir' && copyToClipboard(icon?.name)
+                    "
+                  >
+                    {{ icon?.name }}
+                  </p>
+                  <p class="block truncate text-xs text-gray-500">
+                    {{ icon?.size }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Pagination -->
+          <VsPagination
+            v-if="filteredIcons.length > iconsPerPage"
+            :defaultPage="currentPage"
+            class="mt-6 focus-visible:outline-blue-500 flex !justify-center"
+            :total="filteredIcons.length"
+            :pageSize="iconsPerPage"
+            :maxPages="3"
+            :goTo="false"
+            @pageChange="currentPage = $event"
+          />
+        </div>
+      </div>
+
+      <VsDialog
+        v-model:visible="isAddDirModalOpen"
+        title="Додати папку"
+        size="small"
+        :closeClickBack="true"
+        @onClose="handeAddFolderClose"
+      >
+        <div class="p-4">
+          <VsText v-model="newDirName" placeholder="Назва нової папки.." />
+          <div class="flex justify-end">
+            <button
+              @click="addDir"
+              class="mt-4 py-2 px-4 text-white bg-blue-600 hover:bg-blue-700 rounded-lg"
+            >
+              Створити
+            </button>
+          </div>
+        </div>
+      </VsDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "../components/media/Breadcrumb.vue";
+import IconSearch from "../components/icons/icon-search.vue";
+import IconFolder from "../components/icons/icon-folder.vue";
+import IconFolder2 from "../components/icons/icon-folder2.vue";
+import IconClose from "../components/icons/icon-close.vue";
+import IconActions from "../components/icons/icon-actions.vue";
+import axios from "axios";
+import IconImage from "../components/icons/icon-image.vue";
+import VsNotData from "../components/shared-components/vs-not-data.vue";
+
+export default {
+  components: {
+    Breadcrumb,
+    IconSearch,
+    IconFolder,
+    IconFolder2,
+    IconClose,
+    IconImage,
+    IconActions,
+    VsNotData,
+  },
+  props: {
+    type: {
+      type: String,
+      default: "icon",
+    },
+  },
+  data() {
+    return {
+      icons: [],
+      currentPage: parseInt(this.$route.query.page, 10) || 1,
+      iconsPerPage: 15,
+      token: "",
+      searchQuery: "",
+      selectedFile: null,
+      isAddDirModalOpen: false,
+      newDirName: "",
+    };
+  },
+  watch: {
+    isAddDirModalOpen(n) {
+      if (!n) {
+        this.newDirName = "";
+      }
+    },
+  },
+  computed: {
+    currentDir() {
+      return this.$route.query.dir || "";
+    },
+    currentTab() {
+      return this.$route.query.tab || "";
+    },
+    filteredIcons() {
+      if (!this.searchQuery) return this.icons;
+      return this.icons.filter((icon) =>
+        icon.name.toLowerCase().includes(this.searchQuery.toLowerCase())
+      );
+    },
+    sortedIcons() {
+      return [...this.filteredIcons].sort((a, b) => {
+        if (a.type === "dir" && b.type !== "dir") return -1;
+        if (a.type !== "dir" && b.type === "dir") return 1;
+        return a.name.localeCompare(b.name);
+      });
+    },
+    currentIcons() {
+      const startIndex = (this.currentPage - 1) * this.iconsPerPage;
+      const endIndex = startIndex + this.iconsPerPage;
+      return this.sortedIcons.slice(startIndex, endIndex);
+    },
+  },
+  methods: {
+    async fetchIcons(dir) {
+      try {
+        const { data } = await axios.get(`/api/cms-media`, {
+          params: { dir },
+        });
+        this.icons = data?.data || [];
+        this.token = data?.token;
+      } catch (error) {
+        console.error("Error fetching icons:", error);
+      }
+    },
+    async addDir() {
+      if (!this.newDirName.trim()) {
+        this.$notify({
+          type: "error",
+          title: "Помилка",
+          message: "Назва папки не може бути порожньою.",
+        });
+        return;
+      }
+
+      try {
+        const response = await axios.post(`/api/cms-media/${this.token}`, {
+          name: this.newDirName,
+        });
+
+        this.$notify({
+          type: "success",
+          title: "Успіх!",
+          message: `Папку "${this.newDirName}" успішно створено.`,
+        });
+
+        this.fetchIcons(this.currentDir);
+
+        this.handeAddFolderClose();
+        this.newDirName = "";
+      } catch (error) {
+        console.error("Error creating directory:", error);
+        this.$notify({
+          type: "error",
+          title: "Помилка",
+          message:
+            error.response?.data?.message || "Не вдалося створити папку.",
+        });
+      }
+    },
+    handeAddFolderClose() {
+      this.isAddDirModalOpen = false;
+    },
+    navigateToDir(dirName) {
+      const newDir = `${this.currentDir}/${dirName}`.replace(/\/+/g, "/");
+      this.updateURL(newDir);
+    },
+    updatePath(newPath) {
+      this.updateURL(newPath);
+    },
+    updateURL(dir) {
+      this.$router.push({
+        query: {
+          ...this.$route.query,
+          dir,
+          page: this.currentPage,
+        },
+      });
+    },
+    async handleFileChange(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+
+      const formData = new FormData();
+      formData.append("file", file);
+
+      try {
+        const response = await axios.post(
+          `/api/cms-media/${this.token}`,
+          formData,
+          {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          }
+        );
+
+        this.$notify({
+          type: "success",
+          title: "Успіх!",
+          message: "Файл успішно додано!",
+        });
+
+        this.currentPage = 1;
+      } catch (error) {
+        console.error("Error uploading file:", error);
+        this.$notify({
+          type: "error",
+          title: "Помилка",
+          message: error.response.statustext || error.message || error,
+        });
+      } finally {
+        await this.fetchIcons(this.currentDir);
+      }
+    },
+    clearSearch() {
+      this.searchQuery = "";
+    },
+
+    copyToClipboard(textToCopy) {
+      try {
+        const tempTextArea = document.createElement("textarea");
+        tempTextArea.value = textToCopy;
+        document.body.appendChild(tempTextArea);
+        tempTextArea.select();
+        tempTextArea.setSelectionRange(0, textToCopy.length);
+        const successful = document.execCommand("copy");
+        document.body.removeChild(tempTextArea);
+
+        if (successful) {
+          this.$notify({
+            type: "success",
+            title: "Скопійовано!",
+            message: "Назву іконки успішно скопійовано.",
+          });
+        } else {
+          this.$notify({
+            type: "error",
+            title: "Помилка",
+            message: "Не вдалося скопіювати шлях.",
+          });
+        }
+      } catch (error) {
+        this.$notify({
+          type: "error",
+          title: "Помилка",
+          message: "Не вдалося скопіювати координати",
+        });
+        console.error("Copy failed", error);
+      }
+    },
+  },
+  watch: {
+    currentDir: {
+      immediate: true,
+      handler(newDir) {
+        this.fetchIcons(newDir);
+      },
+    },
+    currentTab: {
+      handler() {
+        this.currentPage = 1;
+      },
+    },
+    currentPage(newPage) {
+      this.$emit("update-url", {
+        query: {
+          ...this.$route.query,
+          page: newPage,
+        },
+      });
+    },
+  },
+  async mounted() {
+    await this.fetchIcons(this.currentDir);
+  },
+};
+</script>

package/src/router/router.js

@@ -0,0 +1,9 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import routes from './routes.config.js';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

package/src/router/routes.config.js

@@ -0,0 +1,40 @@
+export default [
+  {
+    name: 'app',
+    path: '/',
+    redirect: '/cms/manager',
+    children: [
+      {
+        name: 'cms',
+        path: '/cms',
+        component: () => import('../pages/vs-layout.vue'),
+        children: [
+          {
+            name: 'builder',
+            path: 'builder',
+            component: () => import('../pages/vs-builder.vue'),
+            children: [
+              { path: ':id', name: 'builder-item', component: () => import('../components/builder/vs-builder-content.vue') },
+            ]
+
+          },
+          {
+            name: 'manager',
+            path: 'manager',
+            component: () => import('../pages/vs-manager.vue'),
+            children: [
+              { path: 'collection/:template', name: 'manager-collection-item', component: () => import('../components/manager/children/vs-manager-collection-content.vue') },
+              { path: 'collection/:template/:id', name: 'manager-collection-form', component: () => import('../components/manager/children/vs-manager-collection-item-content.vue') },
+              { path: 'single/:template', name: 'manager-single-item', component: () => import('../components/manager/children/vs-manager-single-content.vue') },
+            ]
+          },
+          {
+            name: 'media',
+            path: 'media',
+            component: () => import('../pages/vs-media.vue'),
+          },
+        ],
+      },
+    ],
+  },
+];

package/src/templates/form-columns.js

@@ -0,0 +1,70 @@
+export default  [
+  {
+    key: "title",
+    placeholder: "Назва колонки українською",
+    ua: "Назва колонки українською",
+    type: "text",
+    slots: {
+      row: '<div class="flex items-center gap-2"><img class="block" height="24" width="30"  :src="`https://cdn.softpro.ua/data/npm/admin/column-types/icon-${row?.type?.toLowerCase()}.svg`"/> <span class="text-[12px]">{{ row?.title }}</span></div>',
+    },
+    validators: ["required"],
+  },
+  {
+    key: "type",
+    type: "radio",
+    ua: "Тип колонки",
+    view: "buttons",
+    style: {
+      class: "!w-[calc(50%-5px)]",
+    },
+    slots: {
+      label:
+        '<div class="flex items-center justify-start w-full gap-4"><img class="block" height="24" width="30"  :src="`https://cdn.softpro.ua/data/npm/admin/column-types/icon-${id?.toLowerCase()}.svg`"/><div class="flex flex-col items-start gap-1"><span class="text-black text-[14px]">{{text}}</span><span class="text-[12px]">{{description}}</span></div></div>',
+    },
+    options: [
+      {
+        id: "Text",
+        text: "Текст",
+        description: "Маленький або довгий текст, наприклад заголовок або опис",
+      },
+      {
+        id: "Number",
+        text: "Цифри",
+        description: "Числа (цілі, з плаваючою точкою, десяткові)",
+      },
+      {
+        id: "Email",
+        text: "Електронна пошта",
+        description: "Поле електронної пошти з фоматом перевірки",
+      },
+      {
+        id: "Date",
+        text: "Дата",
+        description: "Вибір дати з годинами, хвилинами та секундами",
+      },
+      {
+        id: "Switcher",
+        text: "Так/Ні",
+        description: "Так чи ні, 1 або 0, вірно чи хибно",
+      },
+      { id: "File", text: "Файл", description: "Різноманітні файли" },
+      {
+        id: "Select",
+        text: "Селект",
+        description: "Список значень, а потім виберіть одне",
+      },
+      {
+        id: "Badge",
+        text: "Бейдж",
+        description: "Стилізоване значення з переліку",
+      },
+    ],
+    validators: ["required"],
+  },
+  {
+    key: "enabled",
+    type: "Switcher",
+    ua: "Увімкнено",
+    col: 6,
+  },
+]

package/src/templates/form-template.js

@@ -0,0 +1,22 @@
+export default [
+  {
+    key: "name",
+    type: "Text",
+    ua: "Назва",
+    placeholder: "Назва",
+    validators: ["required"],
+  },
+  {
+    key: "template",
+    type: "Text",
+    ua: "Шаблон",
+    placeholder: "Шаблон",
+    validators: ["required"],
+  },
+  {
+    key: "description",
+    type: "Text",
+    ua: "Опис",
+    placeholder: "Опис",
+  },
+]

package/test/config.js

@@ -0,0 +1,17 @@
+import config from '../server/config.js';
+
+Object.assign(config, {
+  pg: config.pg || {
+    host: '192.168.3.160',
+    port: 5439,
+    database: 'ip_ukraine',
+    user: 'postgres',
+    password: 'postgres',
+  },
+  redis: config.redis || {
+    host: '192.168.3.160',
+    port: 6379,
+    family: 4,
+  },
+});
+export default config;

package/test/files/eye.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3335 8C1.3335 8 3.3335 3.33333 8.00016 3.33333C12.6668 3.33333 14.6668 8 14.6668 8C14.6668 8 12.6668 12.6667 8.00016 12.6667C3.3335 12.6667 1.3335 8 1.3335 8Z" stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/test/helper.js

@@ -0,0 +1,30 @@
+// This file contains code that we reuse
+// between our tests.
+import Fastify from 'fastify';
+
+import { redisClients, pgClients } from '@opengis/fastify-table/utils.js';
+
+import appService from '../server/app.js';
+
+// automatically build and tear down our instance
+async function build(t) {
+  // you can set all the options supported by the fastify CLI command
+  // const argv = [AppPath]
+  process.env.NODE_ENV = 'production';
+  const app = Fastify({ logger: false });
+  app.register(appService);
+  // close the app after we are done
+  t.after(() => {
+    Object.keys(pgClients).forEach((key) => {
+      pgClients[key].end();
+    });
+    Object.keys(redisClients || {}).forEach((key) => {
+      redisClients[key].quit();
+    });
+    app.close();
+  });
+
+  return app;
+}
+
+export default build;