@opengis/cms 0.0.22 → 0.0.26

package/src/pages/collections/ArticlesPage.vue

@@ -1,385 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch, inject, computed, nextTick } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { Plus, FileText, Calendar, Globe, User, ChevronDown, HelpCircle } from "lucide-vue-next";
-import UniversalTable from "../../components/ui/UniversalTable.vue";
-import UniversalTablePagination from "../../components/ui/UniversalTablePagination.vue";
-import { VsInputCheckbox } from "@opengis/form";
-import { useHead } from "@vueuse/head";
-import VsFilter from '@opengis/filter';
-import { confirm } from '@opengis/core';
-
-import { useI18n } from "vue-i18n";
-import EmptyData from "../../components/ui/EmptyData.vue";
-import CollectionsBreadcrumb from "../../components/collections/CollectionsBreadcrumb.vue";
-interface Article {
-  id: string;
-  title: string;
-  content?: string;
-  author: string;
-  category: string;
-  status: "published" | "draft" | "archived";
-}
-
-const route = useRoute();
-const router = useRouter();
-
-const tableData = ref<any>(null);
-const searchQuery = ref("");
-const { t, locale } = useI18n();
-const articles = ref<any[]>([]);
-const menu = inject("menu") || <any>[];
-const filter = ref<string>('');
-const page = ref(1);
-const showColumns = ref(false);
-const baseColumns = ref(["title","slug","author","publish_at","published_at","status"])
-const columns = ref([]);
-const options = ref<any[]>([]);
-const scheme = ref([]);
-const initialFilters = ref<Record<string, any>>({});
-const filterKey = ref(0); // Key для примусового перерендеру VsFilter
-const isLoading = ref(false); // Флаг для запобігання подвійних викликів
-
-interface FilterData {
-  data: Record<string, any>
-}
-
-const rewritingFilters = () => {
-  scheme.value = tableData.value?.filters.map((filter: any) => {
-    return {
-      ...filter,
-      label: filter.name,
-      id: filter.name,
-      inline: true,
-    }
-  });
-}
-
-const updateColumns = () => {
-  let selectedColumns = tableData.value?.columns.filter((col: any) => baseColumns?.value?.includes(col.name));
-
-  columns.value = selectedColumns.map((col: any) => {
-      switch (col.name) {
-        case "title":
-          return {
-            ...col,
-            title: col.name ? col.name.charAt(0).toUpperCase() + col.name.slice(1) : '--',
-            icon: FileText,
-          };
-        case "slug":
-          return {
-            ...col,
-            title: col.name ? col.name.charAt(0).toUpperCase() + col.name.slice(1) : '-',
-            icon: Globe,
-          };
-        case "author":
-          return {
-            ...col,
-            title: col.name ? col.name.charAt(0).toUpperCase() + col.name.slice(1) : '-',
-            icon: User,
-          };
-        case "publish_at":
-          return {  
-            ...col,
-            title: col.name ? col.name.charAt(0).toUpperCase() + col.name.slice(1) : '-',
-            icon: Calendar,
-          };
-        case "published_at":
-          return {  
-            ...col,
-            title: col.name ? col.name.charAt(0).toUpperCase() + col.name.slice(1) : '-',
-            icon: Calendar,
-          };
-        default:
-          return {
-            ...col,
-          title: col.name ? col.name.charAt(0).toUpperCase() + col.name.slice(1) : '-',
-        };
-    }
-  });
-
-  showColumns.value = false;
-};
-
-const titleOfCollection = computed(
-  () => {
-    return menu.value.find((item: any) => item.id === route.params.id)?.title
-  }
-);
-
-const breadcrumbItems = computed(() => {
-  const collectionTitle = titleOfCollection.value || route.params.id;
-  return [
-    {
-      label: collectionTitle,
-      route: `collections/${route.params.id}`,
-    },
-  ];
-});
-
-const handleBreadcrumbNavigate = (routePath: string) => {
-  if (routePath === 'collections') {
-    router.push('/collections');
-  } else {
-    router.push(`/${routePath}`);
-  }
-};
-
-const handleCreateArticle = () => {
-  router.push(`/collections/${route.params.id}/create`);
-};
-
-const handleRemoveArticle = async (article: Article) => {
-  console.log('handleRemoveArticle');
-  confirm({
-    title: t("builder.deleteTitle"),  
-    message: t("builder.deleteObject"),
-    type:'error',
-    onConfirm: async () => {
-        await fetch(`/api/cms/${route.params.id}/${article.id}`, { method: 'DELETE' });
-        fetchArticles();
-      }
-  });
-};
-
-const handleEditArticle = (article: Article) => {
-  router.push(`/collections/${route.params.id}/${article.id}`);
-};
-
-const fetchArticles = async () => {
-  if (isLoading.value) return; // Запобігаємо подвійним викликам
-  
-  isLoading.value = true;
-  try {
-    const res = await fetch(
-      `/api/cms/${route.params.id}?page=${page.value}&filter=${filter.value}`
-    );
-    const data = await res.json();
-    
-    articles.value = data.rows || [];
-    tableData.value = data;
-    
-    // Clean filter schema to only include valid IFilterItem properties
-    const cleanFilters = (data.filters || []).map((filter: any) => {
-      const { extra, title, ...cleanFilter } = filter;
-      return cleanFilter;
-    });
-    scheme.value = cleanFilters;
-
-    if(route.params.id === 'pages') {
-      baseColumns.value.push('type');
-    }
-
-    setOptions();
-    updateColumns();
-    // rewritingFilters();
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const setOptions = () => {
-  if (!tableData.value?.columns) return;
-  
-  const rawOptions = tableData.value.columns.map((col, index) => ({
-    text: col.label,
-    id: col.name,
-  }));
-
-  
-  options.value = [
-    ...baseColumns.value
-      .map(col => rawOptions.find(opt => opt.id === col))
-      .filter(Boolean),
-    ...rawOptions.filter(opt => !baseColumns.value.includes(opt.id))
-  ];
-}
-
-const filterFn = (row: any, query: string) => {
-  if (!query) return true;
-  const q = query.toLowerCase();
-  return columns.value.some((col: any) => {
-    const val = row[col.name];
-    return val && val.toString().toLowerCase().includes(q);
-  });
-};
-
-const filterChange = (filters: FilterData) => {
-  const filterStr = Object.entries(filters?.data)
-        .filter(([, v]) => v != null)
-        .map(([key, val]) => `${key}=${val}`)
-        .join('|');
-
-  filter.value = filterStr;
-  
-  // Оновлюємо URL з параметрами фільтрів
-  const query = { ...route.query };
-  if (filterStr) {
-    query.filter = filterStr;
-  } else {
-    delete query.filter;
-  }
-  
-  router.replace({ query });
-  // fetchArticles() буде викликано через watch(() => route.query, ...)
-};
-
-// Функція для ініціалізації фільтрів з URL
-const initializeFiltersFromUrl = () => {
-  if (route.query.filter) {
-    filter.value = route.query.filter as string;
-    
-    // Парсимо фільтри з URL для початкових значень
-    const filterParams = (route.query.filter as string).split('|');
-    const parsedFilters: Record<string, any> = {};
-    
-    filterParams.forEach(param => {
-      const [key, value] = param.split('=');
-      if (key && value) {
-        parsedFilters[key] = value;
-      }
-    });
-    
-    initialFilters.value = parsedFilters;
-  } else {
-    // Очищаємо фільтри, якщо в URL немає параметрів
-    filter.value = '';
-    initialFilters.value = {};
-    // Примусово перерендеруємо компонент фільтрів
-    filterKey.value++;
-  }
-};
-
-onMounted(() => {
-  initializeFiltersFromUrl();
-  fetchArticles();
-});
-
-watch(() => route.params.id, () => {
-  // Reset filters when collection changes
-  initialFilters.value = {};
-  filter.value = '';
-  scheme.value = [];
-  
-  // Clear URL filter parameters when switching collections
-  const query = { ...route.query };
-  delete query.filter;
-  router.replace({ query });
-  
-  // Примусово перерендеруємо компонент фільтрів
-  filterKey.value++;
-  
-  initializeFiltersFromUrl();
-  fetchArticles();
-});
-
-// Відстежуємо зміни в query параметрах для обробки навігації назад/вперед
-watch(() => route.query, async () => {
-  initializeFiltersFromUrl();
-  await nextTick(); // Чекаємо, поки всі зміни застосуються
-  fetchArticles();
-}, { deep: true });
-
-watch(page, async () => {
-  // При зміні сторінки перевіряємо, чи є фільтри в URL
-  if (!route.query.filter) {
-    filter.value = '';
-    initialFilters.value = {};
-    // Примусово перерендеруємо компонент фільтрів
-    filterKey.value++;
-  }
-  await nextTick(); // Чекаємо, поки всі зміни застосуються
-  fetchArticles();
-});
-
-// useHead({
-//   title: () => t("articles.title") + " | CMS",
-// });
-</script>
-
-<template>
-  <div class="space-y-6 max-w-7xl mx-auto">
-    <CollectionsBreadcrumb
-      :items="breadcrumbItems"
-      @navigate="handleBreadcrumbNavigate"
-    />
-    <div
-      class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
-    >
-      <div class="flex items-center gap-2">
-        <h1 class="text-3xl font-bold text-slate-800 dark:text-white mb-2">
-          {{ titleOfCollection }}
-        </h1>
-        <a :href="`https://cms.opengis.info/${locale}/guides/content/`" target="_blank" :title="$t('guide.content')">
-          <HelpCircle class="w-5 h-5" />
-        </a>
-      </div>
-      <button v-if="articles.length"
-        @click="handleCreateArticle"
-        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("articles.createArticle") }}
-      </button>
-    </div>
-
-    <div v-if="articles.length || filter.length"
-      class="text-card-foreground shadow-lg border-0 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm"
-    >
-      <div v-if="true" class="p-2 border-b border-gray-200 sm:px-4 sm:py-2 dark:border-gray-700">
-        <div class="flex flex-col gap-4 sm:flex-row">
-          <VsFilter
-            :key="filterKey"
-            :schema="scheme"
-            :history="true"
-            :value="initialFilters"
-            view="inline"
-            @change="filterChange"
-          />
-
-          <div class="relative flex items-center gap-2 ml-auto">
-            <div class="flex items-center gap-2 cursor-pointer text-sm border border-gray-300 rounded-md p-2 dark:text-white" @click="showColumns = !showColumns" v-if="options.length > 0">
-              <p>{{ $t("articles.showColumns") }}</p>
-              <ChevronDown class="w-4 h-4" />
-            </div>
-            <div class="absolute top-full right-1/2 translate-x-1/2 min-w-full p-4 z-10 bg-white border border-gray-300 rounded-md mt-2 dark:bg-slate-800 dark:border-slate-700" v-if="options.length > 0 && showColumns">
-              <div class="max-h-60 overflow-y-auto overflow-x-hidden">
-                <VsInputCheckbox
-                  v-if="options.length > 0 && showColumns"
-                  :options="options"
-                  v-model="baseColumns"
-                />
-              </div>
-              <button class="text-sm bg-blue-600 text-white rounded-md p-2 mt-4 w-full" @click="updateColumns">
-                {{ $t("articles.update") }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <UniversalTable
-        v-if="columns.length > 0"
-        class="max-h-[calc(100vh-270px)] overflow-y-auto"
-        :rows="articles"
-        :columns="columns"
-        :query="searchQuery"
-        :filterFn="filterFn"
-        @delete="handleRemoveArticle"
-        @edit="handleEditArticle"
-      />
-      <UniversalTablePagination
-        v-if="tableData?.total > 20"
-        :total="tableData?.filtered"
-        :count="tableData?.count"
-        v-model:page="page"
-        :limit="20"
-      />
-    </div>
-    <div v-else>
-      <EmptyData @action="handleCreateArticle"/>
-    </div>
-  </div>
-</template>

package/src/pages/collections/CollectionsPage.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="space-y-6 max-w-7xl mx-auto">
-    <div class="flex items-center justify-between mb-8">
-      <div class="flex gap-4">
-        <div>
-          <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-2">
-            {{ $t("navigation.collections") }}
-          </h1>
-          <p class="text-slate-600 dark:text-slate-300">
-            {{ $t("collections.selectCollection") }}
-          </p>
-        </div>
-        <a
-          :href="`https://cms.opengis.info/${locale}/guides/collections/`"
-          target="_blank"
-          :title="$t('guide.collections')"
-          class="mt-2"
-        >
-          <HelpCircle class="w-5 h-5" />
-        </a>
-      </div>
-
-      <div class="relative w-full max-w-sm">
-        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-          <Search class="w-5 h-5 text-gray-400" />
-        </div>
-        <input
-          v-model="searchQuery"
-          type="text"
-          class="block w-full py-2 pl-10 pr-3 leading-5 text-gray-900 placeholder-gray-500 transition-colors bg-white border border-gray-300 rounded-md dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400 focus:outline-none focus:ring-sky-500 focus:border-sky-500 dark:text-white sm:text-sm"
-          :placeholder="$t('collections.searchCollections')"
-        />
-      </div>
-    </div>
-
-    <div v-if="collections.length > 0">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"> 
-            <button v-for="collection in filteredCollections" :key="collection.id" @click="handleViewCollection(collection)" class="w-full border border-gray-200 bg-white rounded-lg p-4 text-left hover:shadow-md transition-all hover:border-gray-300">
-                <div class="flex items-start justify-between">
-                    <div class="flex items-start gap-3">
-                        <File v-if="collection.id === 'pages'" class="shrink-0 lucide lucide-page w-5 h-5 text-blue-600" />
-                        <Layers v-else class="shrink-0 lucide lucide-layers w-5 h-5 text-blue-600" />
-                        <div>
-                            <h4 class="text-sm font-semibold text-gray-800 mb-1">{{ collection.title }}</h4>
-                            <p class="text-xs text-gray-600">{{ collection.description || 'Опис відсутній'}}</p>
-                        </div>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <span class="text-xs text-gray-500 whitespace-nowrap">{{ collection.entries }} записів</span>
-                        <ChevronRight class="w-4 h-4 text-gray-400" />
-                    </div>
-                </div>
-            </button>           
-        </div>
-
-    </div>
-    <div v-else class="flex items-center justify-center min-h-[400px]">
-      <EmptyData />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, inject } from "vue";
-import { useRouter } from "vue-router";
-import { HelpCircle, File, Layers, ChevronRight, Search } from "lucide-vue-next";
-import { useI18n } from "vue-i18n";
-import CollectionsGrid from "../../components/collections/CollectionsGrid.vue";
-import EmptyData from "../../components/ui/EmptyData.vue";
-import type { Collection } from "../../props/builder";
-import { confirm } from "@opengis/core";
-
-const { t, locale } = useI18n();
-const router = useRouter();
-const fetchContentTypes = inject<any>("fetchContentTypes");
-
-const collections = ref<Collection[]>([]);
-const searchQuery = ref("");
-
-const filteredCollections = computed(() => {
-  // Фільтруємо тільки колекції (не single)
-  const onlyCollections = collections.value.filter(
-    (c) => c.type !== "single"
-  );
-
-  const q = searchQuery.value.trim().toLowerCase();
-  const searched = q
-    ? onlyCollections.filter((c: any) => {
-        const hay = [c?.title, c?.name, c?.id, c?.description]
-          .filter(Boolean)
-          .join(" ")
-          .toLowerCase();
-        return hay.includes(q);
-      })
-    : onlyCollections;
-
-  // Сортуємо: pages завжди перші
-  const sorted = [...searched].sort((a, b) => {
-    if (a.id === "pages") return -1;
-    if (b.id === "pages") return 1;
-    return 0;
-  });
-  return sorted;
-});
-
-async function fetchCollections() {
-  try {
-    const res = await fetch("/api/cms-type?type=collection");
-    if (!res.ok) throw new Error("Failed to fetch collections");
-    const data = await res.json();
-    collections.value = data.rows || [];
-  } catch (e) {
-    console.error("Error fetching collections:", e);
-  }
-}
-
-const handleEditCollection = (collection: Collection) => {
-  router.push(`/settings/collections/edit/${collection.id || collection.name}`);
-};
-
-const handleViewCollection = (collection: Collection) => {
-  router.push(`/collections/${collection.id}`);
-};
-
-const handleDeleteCollection = async (collection: Collection) => {
-  confirm({
-    title: t("builder.deleteTitle"),
-    message: t("builder.deleteObject"),
-    type: "error",
-    onConfirm: async () => {
-      try {
-        await fetch(`/api/cms-type/${collection.id}`, { method: "DELETE" });
-        fetchCollections();
-        if (fetchContentTypes) fetchContentTypes();
-      } catch (error) {
-        console.error("Error deleting collection:", error);
-      }
-    },
-  });
-};
-
-onMounted(() => {
-  fetchCollections();
-});
-</script>
-

package/src/pages/collections/SingletonsPage.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="space-y-6 max-w-7xl mx-auto">
-    <div
-      class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
-    >
-      <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
-        {{ $t("singletons.title") }}
-      </h1>
-    </div>
-    <div
-      class="overflow-hidden bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700"
-    >
-      <div class="p-4 border-b border-gray-200 sm:p-6 dark:border-gray-700">
-        <div class="flex flex-col gap-4 sm:flex-row">
-          <div class="relative flex-1">
-            <div
-              class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
-            >
-              <Search class="w-5 h-5 text-gray-400" />
-            </div>
-            <input
-              type="text"
-              class="block w-full py-2 pl-10 pr-3 leading-5 text-gray-900 placeholder-gray-500 transition-colors bg-white border border-gray-300 rounded-md dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400 focus:outline-none focus:ring-sky-500 focus:border-sky-500 dark:text-white sm:text-sm"
-              :placeholder="$t('singletons.search')"
-              v-model="searchQuery"
-            />
-          </div>
-
-          <div class="flex space-x-2">
-            <button
-              class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition-colors bg-white border border-gray-300 rounded-md shadow-sm dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
-            >
-              <Filter class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" />
-              {{ $t("common.actions.filter") }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <UniversalTable
-        class="max-h-[calc(100vh-270px)] overflow-y-auto"
-        :rows="singletons"
-        :columns="columns"
-        :query="searchQuery"
-        :filterFn="filterFn"
-        @edit="handleEditSingleton"
-      />
-      <UniversalTablePagination
-        v-if="tableData?.total > 16"
-        :total="tableData?.total"
-        :count="tableData?.count || tableData?.total"
-        v-model:page="page"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useRouter } from "vue-router";
-import { Plus, Search, Filter } from "lucide-vue-next";
-import UniversalTable from "../../components/ui/UniversalTable.vue";
-import UniversalTablePagination from "../../components/ui/UniversalTablePagination.vue";
-import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
-
-interface Singleton {
-  id: string;
-  name: string;
-  description: string;
-  status: "published" | "draft";
-  lastModified: string;
-}
-
-const router = useRouter();
-const searchQuery = ref("");
-const singletons = ref<any[]>([]);
-const page = ref(1);
-const tableData = ref<any>(null);
-const limit = ref(16);
-
-const columns = [
-  {
-    name: "title",
-    title: t("common.title"),
-    type: "text",
-  },
-];
-
-const handleCreateSingleton = () => {
-  router.push("/singletons/create");
-};
-
-const handleEditSingleton = (singleton: Singleton) => {
-  router.push(`/collections/single/${singleton.name || singleton.id}`);
-};
-
-const fetchSingletons = async () => {
-  const res = await fetch(`/api/cms?page=${page.value}&limit=${limit.value}`);
-  const data = await res.json();
-  const rows = data.rows;
-  singletons.value = rows?.filter((row: any) => row.type === "single");
-  tableData.value = data;
-};
-
-const filterFn = (row: any, query: string) => {
-  if (!query) return true;
-  const q = query.toLowerCase();
-  return columns.value.some((col: any) => {
-    const val = row[col.name];
-    return val && val.toString().toLowerCase().includes(q);
-  });
-};
-
-watch(page, fetchSingletons);
-
-onMounted(fetchSingletons);
-</script>