@opengis/cms 0.0.21 → 0.0.22

package/src/pages/MediaPage.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="w-full max-w-7xl mx-auto space-y-6 h-full">
+    <div class="flex justify-between items-center mb-8">
+      <div>
+        <div class="flex items-center gap-2">
+          <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-2">{{ $t("media.title") }}</h1>
+          <a :href="`https://cms.opengis.info/${locale}/guides/view/#5-медіа`" target="_blank" :title="$t('guide.media')">
+            <HelpCircle class="w-5 h-5" />
+          </a>
+        </div>
+        <p class="text-slate-600 dark:text-slate-300">{{ $t("media.description") }}</p>
+      </div>
+
+      <MediaViewControls
+        v-model="viewMode"
+        @create-folder="isCreateFolderOpen = true"
+        @file-change="handleFileChange"
+      />
+    </div>
+    <div class="h-[calc(100%-100px)]">
+      <div class="flex gap-6 h-full">
+        <div class="space-y-4 flex-1">
+          <div class="flex items-center justify-between">
+            <MediaBreadcrumb
+              :current-path="currentPath"
+              @navigate="navigateToFolder"
+              @navigate-back="navigateBack"
+            />
+          </div>
+          <div class="relative z-[1] rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm mb-6 p-4">
+            <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center gap-4 flex-1">
+                  <div class="relative flex-1 max-w-md">
+                    <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500" />
+                    <input 
+                      type="text" 
+                      :placeholder="$t('media.search')" 
+                      class="w-full pl-10 pr-4 py-2 text-sm border border-slate-200 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500"
+                      v-model="searchQuery"
+                    >
+                  </div>
+                  <div class="flex items-center gap-2 relative">
+                    <span class="text-xs font-bold">{{ $t("media.sortBy.title") + ': ' }}</span>
+                    <button 
+                      class="relative z-[1000] inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors border shadow-sm h-8 rounded-md px-3 text-xs bg-white border-slate-300 text-slate-700
+                      disabled:pointer-events-none disabled:opacity-50 
+                      hover:text-accent-foreground hover:bg-slate-50
+                      dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600" 
+                      @click="isSortByOpen = !isSortByOpen"
+                    >
+                    <ChevronDown class="w-4 h-4" />
+                    <span class="text-xs font-bold">{{ sortByOptions.get(sortBy) }}</span>
+                    <div v-if="isSortByOpen" class="w-full absolute top-full left-1/2 transform -translate-x-1/2 mt-2 z-50 bg-white dark:bg-slate-700 flex flex-col items-start border border-slate-200 dark:border-slate-600">
+                      <span class="text-left text-xs font-bold w-full p-2 hover:bg-slate-100 dark:hover:bg-slate-600 border-b border-slate-200 dark:border-slate-600" @click.stop="sorting('name')">{{ $t("media.sortBy.name") }}</span>
+                      <span class="text-left text-xs font-bold w-full p-2 hover:bg-slate-100 dark:hover:bg-slate-600" @click.stop="sorting('filesize')">{{ $t("media.sortBy.filesize") }}</span>
+                    </div>
+                  </button>
+                  </div>
+                </div>
+                <VsFilter
+            :schema="filterScheme"
+            view="inline" 
+            :value="filterValue"
+            @change="handleChange"
+            />
+                <div class="flex items-center gap-2">
+                  <button 
+                    class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 h-8 px-3 text-xs rounded-md"
+                    :class="{
+                      'shadow bg-blue-600 hover:bg-blue-700 text-white': viewMode === 'grid',
+                      'border shadow-sm hover:text-accent-foreground    bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600': viewMode === 'list',
+                    }"
+                    @click="viewMode = 'grid'"
+                  >
+                    <Grid class="w-4 h-4" />
+                  </button>
+                  <button 
+                    class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 h-8 px-3 text-xs rounded-md"
+                    :class="{
+                      'shadow bg-blue-600 hover:bg-blue-700 text-white': viewMode === 'list',
+                      'border shadow-sm hover:text-accent-foreground bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600': viewMode === 'grid',
+                    }"
+                    @click="viewMode = 'list'"
+                  >
+                    <List class="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+          </div>
+
+          <MediaGrid
+            v-if="viewMode === 'grid' && files.length > 0"
+            :files="files"
+            :selected-file="selectedFile"
+            :is-delete-button="true"
+            @file-click="handleFileClick"
+            @delete-file="handleDeleteFile"
+            @delete-folder="handleDeleteFolder"
+          />
+
+          <MediaList
+            v-else-if="files.length > 0"
+            :files="files"
+            :selected-file="selectedFile"
+            @file-click="handleFileClick"
+            @delete-folder="handleDeleteFolder"
+            :is-delete-button="true"
+          />
+        </div>
+
+        <MediaFileInfo 
+          :file="selectedFile" 
+          @delete-file="handleDeleteFile" 
+        />
+      </div>
+    </div>
+    
+
+    <MediaCreateFolder
+      v-model="isCreateFolderOpen"
+      @create="handleCreateFolder"
+    />
+
+    <FileUploadProgress :uploads="uploads" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import MediaBreadcrumb from "../components/media/MediaBreadcrumb.vue";
+import MediaViewControls from "../components/media/MediaViewControls.vue";
+import MediaGrid from "../components/media/MediaGrid.vue";
+import MediaList from "../components/media/MediaList.vue";
+import MediaFileInfo from "../components/media/MediaFileInfo.vue";
+import MediaCreateFolder from "../components/media/MediaCreateFolder.vue";
+import FileUploadProgress from "../components/media/FileUploadProgress.vue";
+import { Grid, List, Search, ChevronDown, HelpCircle } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import VsFilter from '@opengis/filter';
+import { useDebounce } from "../composables/useDebounce";
+
+const router = useRouter();
+const route = useRoute();
+const { t, locale } = useI18n();
+
+// State
+const viewMode = ref("grid");
+const currentPath = ref([]);
+const selectedFile = ref(null);
+const files = ref([]);
+const isCreateFolderOpen = ref(false);
+const pathHistory = ref([]);
+const uploads = ref([]); // [{id, name, progress, status}]
+const searchQuery = ref("");
+const isSortByOpen = ref(false);
+const sortBy = ref("name");
+const filterScheme = ref([
+{
+    name: "date",
+    type: "date",
+    label: "Дата завантаження"
+  }
+]);
+const filterValue = ref( route.query.filter ? route.query.filter.split('|').map(el=>el.split('=')).reduce((f,[k,v])=>Object.assign(f,{[k]:v}),{}) : {} );
+
+const sortByOptions = new Map([
+  ["name", t("media.sortBy.name")],
+  ["filesize", t("media.sortBy.filesize")],
+]);
+
+// Methods
+const sorting = (sort) => {
+  sortBy.value = sort;
+  isSortByOpen.value = false;
+
+  files.value = files.value.sort((a, b) => {
+    if(a?.type === "dir") return -1;
+
+    if (sort === "name") {
+      return a?.name?.localeCompare(b?.name);
+    } else if (sort === "filesize") {
+      return b?.filesize - a?.filesize;
+    }
+  })
+}
+
+const navigateToFolder = (path) => {
+  currentPath.value = path;
+  pathHistory.value = [...pathHistory.value, path];
+  selectedFile.value = null;
+  fetchFiles();
+};
+
+const navigateBack = () => {
+  if (pathHistory.value.length > 1) {
+    pathHistory.value.pop(); // Remove current path
+    currentPath.value = pathHistory.value[pathHistory.value.length - 1];
+    selectedFile.value = null;
+    fetchFiles();
+  }
+};
+
+const handleFileClick = (file) => {
+  if (file.type === "dir") {
+    navigateToFolder([...currentPath.value, file.name]);
+  } else {
+    selectedFile.value = file.id === selectedFile.value?.id ? null : file;
+  }
+};
+
+const handleDeleteFile = async(file) => {
+  if(file?.id) {
+    try {
+      await fetch(`/api/cms-media/${file.id}`, { method: 'DELETE' });
+      await fetchFiles();
+      selectedFile.value = null;
+    } catch (err) {
+      console.error("Delete error:", err);
+    }
+  }
+};
+
+const searchFiles = async () => {
+  const response = await fetch("/api/cms-media?subdir=" + currentPath.value.join("/") + "&search=" + searchQuery.value);
+  const data = await response.json();
+  files.value = data.data ? data.data : [];
+}
+
+const handleDeleteFolder = async(folder) => {
+  let deletePath = "";
+  currentPath.value.forEach((path) => {
+    let parsedPath = path.replace(/ /g, "+");
+
+    deletePath += parsedPath + "/";
+  })
+
+  deletePath += folder.name.replace(/ /g, "+");
+
+  try {
+      await fetch(`/api/cms-media?subdir=${deletePath}`, {
+        method: 'DELETE',
+        headers: {
+          "X-Skip-Session": "true",
+        },
+      });
+      await fetchFiles();
+      selectedFile.value = null;
+    } catch (err) {
+      console.error("Delete error:", err);
+    }
+};
+
+const handleFileChange = async (e) => {
+  const uploadedFiles = Array.from(e.target.files);
+  if (!uploadedFiles.length) return;
+
+  uploads.value = uploadedFiles.map((file, idx) => ({
+    id: idx + "-" + Date.now(),
+    name: file.name,
+    progress: 0,
+    status: "uploading", // uploading | success | error
+  }));
+
+  const path = currentPath.value.join("/");
+
+  for (let idx = 0; idx < uploadedFiles.length; idx++) {
+    const file = uploadedFiles[idx];
+    const formData = new FormData();
+    formData.append("file", file);
+    try {
+      const response = await fetch(`/api/cms-media/upload?subdir=${path}`, {
+        method: 'POST',
+        headers: {
+          "X-Skip-Session": "true",
+        },
+        body: formData,
+      });
+      
+      // Simulate upload progress since fetch doesn't support it natively
+      for (let progress = 0; progress <= 100; progress += 10) {
+        uploads.value[idx].progress = progress;
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+
+      setTimeout(() => {
+        uploads.value[idx].status = "success";
+        uploads.value[idx].progress = 100;
+      }, 1000);
+    } catch (err) {
+      uploads.value[idx].status = "error";
+    }
+  }
+
+  await fetchFiles();
+
+  // Автоматично ховаємо через 3 сек після завершення всіх
+  setTimeout(() => {
+    uploads.value = [];
+  }, 3000);
+};
+
+const handleCreateFolder = async (formData) => {
+  try {
+    const path = currentPath.value.join("/");
+    await fetch(`/api/cms-media/upload?subdir=${path}/${formData.name}`, { method: 'POST' });
+    isCreateFolderOpen.value = false;
+    await fetchFiles();
+  } catch (err) {
+    error.value = "Failed to create folder";
+  } finally {
+    uploads.value = [];
+  }
+};
+
+const fetchFiles = async () => {
+  try {
+    const path = currentPath.value.join("/");
+    let url = `/api/cms-media?subdir=${path}`;
+    if (filterValue.value && Object.keys(filterValue.value).length > 0) {
+      url += `&filter=${Object.entries(filterValue.value).map(([key, val]) => `${key}=${val}`)}`;
+    }
+    const response = await fetch(url);
+    const data = await response.json();
+    files.value = data.data ? data.data : [];
+
+    sorting("name");
+  } catch (err) {
+    error.value = "Failed to fetch files";
+    console.error("Fetch error:", err);
+    files.value = [];
+  }
+};
+
+const handleChange = async (filters) => { 
+            const filterStr = Object.entries(filters?.data)
+                .filter(([, v]) => v != null)
+                .map(([key, val]) => `${key}=${val}`)
+                .join('|');
+
+            filterValue.value = filters?.data;
+            
+            if (filterValue.value ==='no-url') { 
+            } else { 
+                router.replace({ 
+                    query: { filter:filterStr } 
+                })
+            };
+            await fetchFiles();
+        };
+
+watch(currentPath, (n) => {
+  if (n.length > 0) {
+    router.push({ query: { path: '/' + n.join("/") } });
+  } else {
+    router.push({ query: { path: undefined } });
+  }
+});
+
+const searchFilesDebounced = useDebounce(searchQuery.value, 300);
+
+watch(searchQuery, useDebounce((val) => {
+  searchFiles();
+}, 500));
+
+onMounted(() => {
+  pathHistory.value = [[]];
+  fetchFiles();
+});
+</script>
+
+<style></style>

package/src/pages/TagsPage.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="space-y-6 max-w-7xl mx-auto">
+        <div class="flex items-center justify-between mb-8"> 
+            <div>
+                <div class="flex items-center gap-2">
+                    <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-2">{{ $t("tags.title") }}</h1>
+                    <a :href="`https://cms.opengis.info/${locale}`" target="_blank" :title="$t('guide.general')">
+                        <HelpCircle class="w-5 h-5" />
+                    </a>
+                </div>
+                <p class="text-slate-600 dark:text-slate-300">{{ $t("tags.description") }}</p>
+            </div>
+            <button
+                v-if="tags?.rows?.length > 0"
+                @click="isOpen = true"
+                class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium h-9 px-4 py-2 bg-blue-600 text-white shadow-md transition-all duration-200 transform
+                hover:bg-blue-700 hover:shadow-lg hover:scale-105
+                focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 
+                disabled:pointer-events-none disabled:opacity-50"
+            >
+                <Plus class="w-4 h-4 mr-2" />
+                {{ $t("tags.createTag") }}
+            </button>
+        </div>
+        <div class="rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm overflow-hidden">
+            <EmptyData
+                v-if="!tags || tags?.rows?.length === 0"
+                :title="t('tags.emptyTitle')"
+                :description="t('tags.emptyDescription')"
+                :button-text="t('tags.emptyButton')"
+                :show-button="true"
+                @action="isOpen = true"
+            />
+            <UniversalTable 
+                v-if="tags?.rows?.length > 0"
+                :columns="columns" 
+                :rows="tags.rows" 
+                :on-edit="handleEditTag"
+                @delete="handleDeleteTag"
+            />
+            <UniversalTablePagination
+                v-if="tags?.total > limit"
+                :total="tags?.total"
+                :count="count"
+                v-model:page="page"
+                :limit="limit"
+            />
+        </div>
+        <VsModal
+            teleport="#modal"
+            :visible="isOpen"
+            :title="t( isEdit ? 'tags.editTag' : 'tags.createTag')"
+            @close="closeForm()"
+        >
+            <VForm v-model="formValue" :schema="schema" v-model:form="form" />
+            <template #footer>
+                <div class="flex justify-end p-4 gap-2 border-t w-full">
+                    <button @click="closeForm()" class="bg-gray-500 text-white px-4 py-2 rounded-md">{{ t('common.actions.cancel') }}</button>
+                    <button @click="handleCreateTag" class="bg-blue-500 text-white px-4 py-2 rounded-md">{{ t('common.actions.save') }}</button>
+                </div>
+            </template>
+        </VsModal>
+    </div>
+</template>
+
+<script setup>
+    import { ref, onMounted, computed, watch } from 'vue';
+    import UniversalTable from '@/components/ui/UniversalTable.vue';
+    import UniversalTablePagination from '@/components/ui/UniversalTablePagination.vue';
+    import { useI18n } from 'vue-i18n';
+    import { Plus, HelpCircle } from 'lucide-vue-next';
+    import EmptyData from '@/components/ui/EmptyData.vue';
+    import { VForm } from "@opengis/form";
+    // import { VForm } from '../../../form/src/index'
+    import { VsModal } from "@opengis/core";
+    import { notify } from '@opengis/core';
+    const { t, locale } = useI18n();
+
+
+    const tags = ref([]);
+    const isOpen = ref(false);
+    const formValue = ref({
+        color: "#000000",
+    });
+    const form = ref({});
+    const isEdit = ref(false);
+    const limit = ref(14);
+    const page = ref(1);
+    const count = computed(() => {
+        const maxCount = page.value * limit.value;
+        return maxCount > tags.value.total ? tags.value.total : maxCount;
+    });
+
+    const columns = [
+        { name: "value", title: t("tags.form.name"), type: "text" },
+        { name: "count_data", title: t("tags.form.count_data"), type: "text" },
+        { name: "color", title: t("tags.form.color"), type: "color" },
+        { name: "created_at", title: t("tags.form.created_at"), type: "date" },
+        { name: "description", title: t("tags.form.description"), type:"text" },
+    ];
+
+    const schema = {
+        slug:{
+            label: t("tags.form.slug"),
+            type: "slug",
+            parent: "value",
+            validators: ["required"],
+        },
+        value:{
+            label: t("tags.form.name"),
+            type: "text",
+            validators: ["required"],
+        },
+        'value:en':{
+            label: t("tags.form.name") + " (en)",
+            type: "text",
+            validators: ["required"],
+        },
+        color:{
+            label: t("tags.form.color"),
+            type: "color",
+            validators: ["required"],
+        },
+        description: {
+            label: t("tags.form.description"),
+            type:"textarea"
+        },
+        topic: {
+            label: t("tags.form.topic"),
+            type:"textarea"
+        }
+    }
+
+    const fetchTags = async () => {
+        try {
+            const response = await fetch(`/api/tags?page=${page.value}&limit=${limit.value}`);
+            const data = await response.json();
+            tags.value = data;
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    const handleDeleteTag = async (tag) => {
+        try {
+            await fetch(`/api/tags/${tag.tag_id}`, { method: 'DELETE' })
+            fetchTags();
+        } catch (error) {
+            console.error(error);
+        }
+    }
+    const closeForm = () => {
+        isOpen.value = false;
+        isEdit.value = false;
+        formValue.value = {};
+    }
+    const handleEditTag = async (tag) => {
+        isEdit.value = true;
+        isOpen.value = true;
+        formValue.value = tag;
+        formValue.value['locale'] = { "en": tag.value_en, "uk": tag.value };
+    }
+
+    const handleCreateTag = async () => {
+        try {
+            let result = await form.value.validate();
+            if (result) {
+                notify({
+                    type: "warning",
+                    title: t("common.actions.warning"),
+                    message: t("tags.createTagFailed"),
+                });
+                return;
+            }
+            formValue.value['locale'] = { "en": formValue.value['value:en'], "uk": formValue.value['value'] };
+            
+            if (isEdit.value) {
+                await fetch(`/api/tags/${formValue.value.tag_id}`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(formValue.value)
+                })
+            } else {
+                await fetch('/api/tags', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(formValue.value)
+                })
+            }
+
+            fetchTags();
+            isOpen.value = false;
+            isEdit.value = false;
+            formValue.value = {};
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    watch(page, () => {
+        fetchTags();
+    })
+
+    onMounted(() => {
+        fetchTags();
+    })
+</script>