@opengis/cms 0.0.21 → 0.0.22

package/src/pages/builder/BuilderPage.vue

@@ -0,0 +1,195 @@
+<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("builder.collections") }}</h1> 
+          <p class="text-slate-600 dark:text-slate-300">{{ $t("builder.manageContentCollections") }}</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="flex items-center gap-3">
+        <div class="relative">
+        <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('builder.searchCollections')"
+          v-model="searchQuery"
+        />
+      </div>
+        <div class="flex items-center bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-lg p-1 max-w-[fit-content]">
+          <button 
+            class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors rounded-md text-xs h-8 w-8 p-0 hover:bg-blue-700 hover:text-white cursor-pointer"
+            :class="{ 'bg-blue-600 text-white': collectionView === 'list' }"
+            @click="collectionView = 'list'"
+          >
+            <IconList class="dark:text-blue-50 w-4 h-4" />
+          </button>
+          
+          <button 
+            class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors rounded-md text-xs h-8 w-8 p-0 hover:bg-blue-700 hover:text-white cursor-pointer"
+            :class="{ 'bg-blue-600 text-white': collectionView === 'grid' }"
+            @click="collectionView = 'grid'"
+          >
+            <IconGrid class="dark:text-blue-50 w-4 h-4" />
+          </button>
+        </div>
+        <CreateForm />
+      </div>
+    </div>
+
+    <div>
+      <UniversalTable
+        class="max-h-[calc(100vh-270px)] overflow-y-auto overflow-x-hidden"
+        :columns="columns"
+        :rows="filteredCollections"
+        :onDelete="handleDeleteCollection"
+        @edit="handleEditCollection"
+        @view="handleGoToContent"
+        v-if="collectionView === 'list'"
+      >
+        <template #actions="{ row }">
+          <button
+            class="inline-flex items-center justify-center whitespace-nowrap font-medium border rounded-md text-xs h-8 w-8 p-0 border-slate-300 bg-white transition-all duration-200 shadow-sm group
+            dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600 dark:hover:border-slate-500 dark:hover:text-slate-200
+            hover:bg-blue-50 hover:border-blue-300 hover:text-blue-600"
+            @click="handleGoToContent(row)"
+          >
+            <List class="text-slate-800 dark:text-slate-200 w-4 h-4 group-hover:text-blue-600 dark:group-hover:text-blue-50" />
+          </button>
+        </template>
+      </UniversalTable>
+      <CollectionsGrid 
+        v-if="collectionView === 'grid'" 
+        :collections="filteredCollections" 
+        @edit="handleEditCollection"
+        @view="handleGoToContent"
+        @delete="handleDeleteCollection"
+        class="max-h-[calc(100vh-270px)] overflow-y-auto overflow-x-hidden"
+      />
+      <UniversalTablePagination
+        v-if="tableData?.total > 16"
+        :total="tableData?.filtered"
+        :count="tableData?.count || tableData?.total"
+        v-model:page="page"
+        :limit="limit"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, inject, watch } from "vue";
+import CreateForm from "../../components/builder/CreateForm.vue";
+import { useRouter } from "vue-router";
+import { List, Search, Layers, HelpCircle } from "lucide-vue-next";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { useDebounce } from "../../composables/useDebounce";
+import UniversalTable from "../../components/ui/UniversalTable.vue";
+import UniversalTablePagination from "../../components/ui/UniversalTablePagination.vue";
+import IconList from "../../components/icons/icon-list.vue";
+import IconGrid from "../../components/icons/icon-grid.vue";
+import CollectionsGrid from "../../components/collections/CollectionsGrid.vue";
+import { useCollectionView } from '../../composables/useCollectionView';
+import type { Collection } from '../../props/builder';
+
+const { t, locale } = useI18n();
+
+const router = useRouter();
+
+const columns = [
+  { name: "name", title: t("builder.collectionName"), type: "text", icon: Layers },
+  { name: "title", title: t("builder.title"), type: "text", icon: Layers },
+  { name: "description", title: t("common.description"), type: "text" },
+  { name: "entries", title: t("builder.entries"), type: "number" },
+  { name: "fields", title: t("builder.fields"), type: "number" },
+  { name: "status", title: t("builder.status"), type: "text" },
+  { name: "last_edit", title: t("builder.lastModified"), type: "date" },
+];
+
+const searchQuery = ref("");
+const debouncedSearchQuery = useDebounce(searchQuery, 300);
+
+useHead({
+  title: () => t("collections.title") + " | CMS",
+});
+
+const collections = ref<Collection[]>([]);
+const fetchContentTypes = inject<any>("fetchContentTypes");
+const page = ref(1);
+const limit = ref(16);
+const tableData = ref<any>(null);
+
+const { collectionView, toggleCollectionView } = useCollectionView();
+
+async function fetchCollections() {
+  try {
+    const searchParam = debouncedSearchQuery.value ? `&search=${encodeURIComponent(String(debouncedSearchQuery.value))}` : '';
+    const url = `/api/cms-type?page=${page.value}&limit=${limit.value}${searchParam}`;
+    console.log('Fetching collections with URL:', url);
+    
+    const res = await fetch(url);
+    if (!res.ok) throw new Error("Failed to fetch collections");
+    const data = await res.json();
+    
+    console.log('Collections fetched:', data);
+    collections.value = data.rows;
+    tableData.value = data;
+  } catch (e) {
+    console.error("Error fetching collections:", e);
+  }
+}
+
+onMounted(() => {
+  fetchCollections();
+});
+
+const filteredCollections = computed(() => {
+  const sorted = [...collections.value].sort((a, b) => {
+    if (a.id === 'pages') return -1;
+    if (b.id === 'pages') return 1;
+    return 0;
+  });
+  return sorted;
+});
+
+const handleDeleteCollection = async (collection: Collection) => {
+  try {
+    await fetch(`/api/cms-type/${collection.id}`, { method: 'DELETE' });
+    fetchCollections();
+    fetchContentTypes();
+  } catch (error) {
+    console.error("Error deleting collection:", error);
+  }
+};
+
+const handleEditCollection = (collection: Collection) => {
+  router.push(`/settings/collections/edit/${collection.id || collection.name}`);
+};
+
+const handleGoToContent = (collection: Collection) => {
+  if (collection.type === "single") {
+    router.push(`/collections/single/${collection.name}`);
+  } else {
+    router.push(`/collections/${collection.name}`);
+  }
+};
+
+
+watch(page, () => {
+  fetchCollections();
+});
+
+
+watch(debouncedSearchQuery, (newValue) => {
+  console.log('Search query changed:', newValue);
+  page.value = 1; // Reset to first page when searching
+  fetchCollections();
+});
+</script>

package/src/pages/builder/EditCollectionPage.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="max-w-6xl mx-auto">
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="mb-2 text-2xl font-semibold text-gray-900">
+          {{ $t("builder.editCollection") }}
+          <span class="lowercase">{{ title }}</span>
+        </h1>
+        <p class="text-gray-600">{{ $t("builder.editContentForYourSite") }}</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <router-link
+          to="/settings/collections"
+          class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border bg-background hover:text-accent-foreground h-10 px-4 py-2 border-gray-300 text-gray-700 hover:bg-gray-50"
+          >{{ $t("common.actions.back") }}</router-link
+        ><button
+          @click="createContent"
+          class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-white rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-primary-foreground h-10 px-4 py-2 bg-blue-600 hover:bg-blue-700"
+        >
+          {{ $t("common.actions.save") }}
+        </button>
+      </div>
+    </div>
+    <div class="w-full">
+      <div
+        class="flex items-center w-full h-10 max-w-md grid-cols-3 p-1 mb-6 bg-white border border-gray-200 rounded-md text-muted-foreground"
+      >
+        <button
+          v-for="tab in tabsList"
+          :key="tab.id"
+          @click="activeTab = tab.id"
+          class="inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm data-[state=active]:bg-blue-50 data-[state=active]:text-blue-700 data-[state=active]:border-blue-200"
+          :class="
+            tab.id === activeTab
+              ? 'bg-blue-50 text-blue-700 border-blue-200'
+              : ''
+          "
+        >
+          {{ tab.name }}
+        </button>
+      </div>
+    </div>
+    <div
+      v-if="isLoading"
+      class="container mx-auto bg-white rounded-md py-4 px-2 bg-opacity-50"
+    >
+      <component
+        :is="tabs[activeTab]"
+        v-model:yaml="values.yaml"
+        v-model:data="values.data"
+        v-model:form="form"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, getCurrentInstance, inject } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import tabs from "../../components/builder/tabs";
+import { useI18n } from "vue-i18n";
+import { notify } from '@opengis/core'
+const { t } = useI18n();
+const fetchContentTypes = inject("fetchContentTypes");
+
+const activeTab = ref("edit");
+const values = ref({ yaml: "", data: { columns: [], type: "collection" } });
+const form = ref({});
+const title = ref("");
+const route = useRoute();
+const router = useRouter();
+const isLoading = ref(false);
+
+const tabsList = computed(() => [
+  // {
+  //   name: "YAML",
+  //   id: "monaco",
+  // },
+  {
+    name: t("builder.edit"),
+    id: "edit",
+  },
+  {
+    name: t("builder.preview"),
+    id: "preview",
+  },
+]);
+
+const getCollection = async () => {
+  try {
+    const response = await fetch(`/api/cms-type/${route.params.id}`);
+    const data = await response.json();
+    
+    // Create a new object to avoid direct mutation of reactive data
+    const newData = {
+      ...data,
+      columns: Array.isArray(data.columns)
+        ? data.columns
+        : Object.entries(data?.columns || {})?.map(([name, column]) => ({
+            ...column,
+            name,
+          })),
+    };
+    
+    // Update the reactive values in a single operation
+    values.value = {
+      ...values.value,
+      data: newData
+    };
+    
+    title.value = newData.title || newData.name;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoading.value = true;
+  }
+};
+
+const createContent = async () => {
+  try {
+    let result = await form.value.validate();
+    if (result) {
+      notify({
+        type: "warning",
+        title: t("common.actions.warning"),
+        message: t("builder.editFieldFailed"),
+      });
+      return;
+    }
+    
+    const response = await fetch(
+      `/api/cms-type/${route.params.id}`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(activeTab.value === "monaco" ? values.value?.yaml : values.value?.data)
+      }
+    );
+    router.push(`/settings/collections`);
+    fetchContentTypes();
+    notify({
+      type: "success",
+      title: t("common.actions.success"),
+      message: t("collections.collectionCreated"),
+    });
+  } catch (error) {
+    console.error(error);
+    notify({
+      type: "error",
+      title: t("common.actions.error"),
+      message: t("collections.collectionCreationFailed"),
+    });
+  }
+};
+
+onMounted(() => {
+  getCollection();
+});
+</script>
+
+<style lang="scss" scoped></style>