@opengis/cms 0.0.22 → 0.0.24

package/src/pages/MediaPage.vue

@@ -1,372 +0,0 @@
-<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

@@ -1,207 +0,0 @@
-<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>