@opengis/cms 0.0.22 → 0.0.24

package/src/pages/builder/BuilderPage.vue

@@ -1,195 +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("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

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