@opengis/cms 0.0.21 → 0.0.22

package/src/pages/collections/ArticlesPage.vue

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

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

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