@opengis/cms 0.0.21 → 0.0.22

package/src/pages/collections/contentForm.vue

@@ -0,0 +1,484 @@
+<template>
+  <div class="space-y-6 max-w-6xl mx-auto relative bg-white">
+    <div class="p-4 sticky top-[-24px] z-10 bg-white dark:bg-slate-800">
+      <CollectionsBreadcrumb
+        :items="breadcrumbItems"
+        @navigate="handleBreadcrumbNavigate"
+      />
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <button
+            @click="router.back()"
+            class="p-2 text-gray-500 rounded-full hover:text-gray-900 dark:text-gray-400 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <ArrowLeft class="w-5 h-5" />
+          </button>
+          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
+            {{ $t("builder.editCollection") }}
+            <span >"{{
+              articleData?.type === "single"
+                ? articleData.title
+                : menu.value?.find((item) => item.id === (route.params.collection || route.params.id))?.title
+            }}"</span>
+          </h1>
+          <a :href="`https://cms.opengis.info/${locale}/guides/content/`" target="_blank" :title="$t('guide.content')">
+            <HelpCircle class="w-5 h-5" />
+          </a>
+        </div>
+        <div class="flex items-center space-x-3">
+          <button
+            @click="handleSubmit"
+            type="submit"
+            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"
+          >
+            <Save class="w-4 h-4 mr-2" />
+            {{ $t("builder.save") }}
+          </button>
+        </div>
+      </div>
+      <div class="w-full mt-6 flex items-center justify-between">
+        <div
+          class="flex items-center w-full h-10 max-w-md grid-cols-3 p-1  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 class="flex items-center gap-2">
+          <label for="is_pin" class="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">{{$t('collections.pinPublication')}}</label>
+          <div class="relative">
+            <input 
+              type="checkbox" 
+              id="is_pin"
+              v-model="isPinModel" 
+              class="sr-only"
+            />
+            <div 
+              class="w-5 h-5 border-2 rounded transition-all duration-200 cursor-pointer flex items-center justify-center"
+              :class="articleData?.is_pin 
+                ? 'bg-sky-600 border-sky-600' 
+                : 'bg-white border-gray-300 hover:border-sky-400 dark:bg-gray-700 dark:border-gray-600 dark:hover:border-sky-400'"
+              @click="togglePin"
+            >
+              <svg 
+                v-if="articleData?.is_pin"
+                class="w-3 h-3 text-white" 
+                fill="currentColor" 
+                viewBox="0 0 20 20"
+              >
+                <path 
+                  fill-rule="evenodd" 
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <formWrapper
+      :columns="columns"
+      :initial-data="articleData"
+      @submit="handleSubmit"
+      @update="articleData = $event"
+    /> -->
+    <div
+      v-show="activeTab === 'content'"
+      class="container mx-auto bg-white rounded-md  pb-4 px-5"
+    >    
+      <VForm v-if="columns?.length" v-model="articleData" :schema="schema" v-model:form="formArticleData"/>
+    </div>
+    <div
+      v-show="activeTab === 'seo'"
+      class="container mx-auto bg-white rounded-md  pb-4 px-2"
+    >    
+      <VForm 
+        :schema="seoSchema" 
+        v-model:values="seoData" 
+        v-model:form="formSeoData" 
+      />
+    </div>
+    <div
+      v-if="activeTab === 'tags'"
+      class="container mx-auto bg-white rounded-md  pb-4 px-2"
+    >
+      <VsFormTags ref="tagsForm" v-model="articleData" />
+    </div>
+    <div
+      v-show="activeTab === 'preview'"
+      class="container mx-auto bg-white rounded-md pb-4 px-2"
+    >
+      <VsPreview :slug="articleData?.slug" :preview_path="preview_path"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import seoSchemaBase  from './schema/seo'
+import { ref, onMounted, computed, inject, getCurrentInstance, watch, nextTick, type Ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ArrowLeft, Save, HelpCircle } from "lucide-vue-next";
+// @ts-ignore
+import VsReference from '@/components/form-components/vs-form-reference-list.vue'
+// @ts-ignore
+import VsTiptap from '@/components/form-components/vs-form-tiptap.vue'
+// @ts-ignore
+import VsMediaSelect from '@/components/form-components/vs-form-media-select.vue'
+// @ts-ignore
+import VsRichtextMd from '@/components/form-components/vs-richtext-md.vue'
+// @ts-ignore
+import VsInteger from '@/components/form-components/vs-form-integer.vue'
+// @ts-ignore
+import VsDatatableForm from '@/components/form-components/vs-form-custom-datatable.vue'
+// @ts-ignore
+import VsRelationLink from '@/components/form-components/vs-form-reletion-link.vue'
+import { useI18n } from "vue-i18n";
+// import formWrapper from "../../components/collections/formWrapper.vue";
+import { getField } from "../../utils/getField";
+import { VForm, inputs } from '@opengis/form'
+
+//import { VForm, inputs } from '../../../../form/src/index'
+
+// inputs['vs-input-slug'] = inputs.VsInputText
+// inputs['vs-input-key-value'] = inputs.VsInputText
+inputs['vs-input-custom-datatable'] = VsDatatableForm;
+inputs['vs-input-reference'] = VsReference;
+inputs['vs-input-texteditor'] = VsTiptap;
+inputs['vs-input-mediaselect'] = VsMediaSelect;
+inputs['vs-input-file'] = VsMediaSelect;
+inputs['vs-input-image'] = VsMediaSelect;
+inputs['vs-input-richtext-md'] = VsRichtextMd;
+inputs['vs-input-integer'] = VsInteger;
+inputs['vs-input-relation-link'] = VsRelationLink;
+
+import VsFormTags from "../../components/form-components/VsFormTags.vue";
+import VsPreview from "../../components/ui/VsPreview.vue";
+import CollectionsBreadcrumb from "../../components/collections/CollectionsBreadcrumb.vue";
+import { notify } from '@opengis/core'
+const { t, locale } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const menu = inject<Ref<any[]>>("menu", ref([]));
+const columns = ref<any[]>([]);
+const formArticleData = ref<any>({});
+const formSeoData = ref<any>({});
+const tagsForm = ref<any>({});
+const preview_path = ref<string>("");
+
+const createLocalizedColumns = (columns: any[]) => {
+  const localizedColumns: any[] = [];
+
+  columns.forEach((item) => {
+    // Add original column
+    localizedColumns.push(item);
+
+    // If column has localization, create a copy with English suffix
+    if (item.localization) {
+      const localizedItem = {
+        ...item,
+        name: item.name + ":en",
+        label: item.label + " (en)",
+      };
+      localizedColumns.push(localizedItem);
+    }
+  });
+
+  return localizedColumns;
+};
+
+const schema = computed(() => columns.value?.map(getField));
+
+const seoSchema = computed(() => {
+  // Додаємо locale як залежність, щоб computed був реактивним до змін локалі
+  locale.value;
+  return seoSchemaBase.flatMap((field) => {
+    const baseField = {
+      ...field,
+      label: t(field.label),
+    };
+    if (field.localization) {
+      const localizedField = {
+        ...field,
+        key: `${field.key}:en`,
+        label: t(field.label) + ' (en)',
+      };
+      return [baseField, localizedField];
+    }
+    return [baseField];
+  });
+});
+
+const seoData = ref<any>({});
+
+const articleData = ref<Record<string, any>>({
+  title: "",
+  status: "draft" as const,
+});
+
+const tabsList = computed(() => {
+  const tabs = [
+    { id: "content", name: t("builder.content") },
+    { id: "seo", name: t("builder.seo") },
+    { id: "tags", name: t("builder.tags") },
+    
+  ];
+  if (preview_path.value) {
+    tabs.push({ id: "preview", name: t("builder.preview") });
+  }
+  
+  
+  return tabs;
+});
+const activeTab = ref("content");
+
+const collectionTitle = computed(() => {
+  const collection = (route.params?.collection || route.params?.id) as string;
+  return menu.value?.find((item: any) => item.id === collection)?.title || collection;
+});
+
+const articleTitle = computed(() => {
+  return articleData.value?.title || (route.params?.id ? t("builder.editCollection") : t("articles.createArticle"));
+});
+
+const breadcrumbItems = computed(() => {
+  const collection = (route.params?.collection || route.params?.id) as string;
+  const id = route.params?.id as string;
+  const items = [
+    {
+      label: collectionTitle.value,
+      route: `collections/${collection}`,
+    },
+  ];
+  
+  if (id) {
+    items.push({
+      label: articleTitle.value,
+      route: `collections/${collection}/${id}`,
+    });
+  } else {
+    items.push({
+      label: t("articles.createArticle"),
+      route: `collections/${collection}/create`,
+    });
+  }
+  
+  return items;
+});
+
+const handleBreadcrumbNavigate = (routePath: string) => {
+  if (routePath === 'collections') {
+    router.push('/collections');
+  } else {
+    router.push(`/${routePath}`);
+  }
+};
+
+onMounted(async () => {
+  // Визначаємо collection та id:
+  // - Якщо є route.params.collection, використовуємо його як collection
+  // - Якщо є route.params.id і немає route.params.collection, то route.params.id - це collection (стара структура)
+  // - Якщо є обидва параметри (collection та id), то id - це ідентифікатор статті
+  const collectionParam = route.params?.collection as string | undefined;
+  const idParam = route.params?.id as string | undefined;
+  
+  // Якщо є collection, використовуємо його, інакше використовуємо id (якщо це не сторінка редагування)
+  const collection = collectionParam || idParam as string;
+  // id статті існує тільки якщо є обидва параметри (collection та id)
+  const id = collectionParam && idParam ? idParam : undefined;
+
+  if (!id) {
+    if (!collection) return;
+    const res = await fetch(`/api/cms/${collection}/`);
+    const data = await res.json();
+    
+    columns.value = createLocalizedColumns(data.columns);
+    // let rows = data.rows;
+    // if (!Array.isArray(rows)) {
+    //   rows = [rows];
+    // }
+    // articleData.value = rows[0];
+  }
+
+  try {
+    if (!id || !collection) return;
+    const res = await fetch(`/api/cms/${collection}/${id}`);
+    if (!res.ok) throw new Error("Failed to fetch article");
+    const data = await res.json();
+
+    columns.value = createLocalizedColumns(data?.columns);
+    if(data?.preview_path) preview_path.value = data?.preview_path;
+
+    if (data.rows) {
+      let rows = data.rows;
+      if (!Array.isArray(rows)) {
+        rows = [rows];
+      }
+      articleData.value = rows[0];
+      
+      // Ініціалізуємо seoData з даних статті (з meta об'єкта)
+      await nextTick();
+      if (rows[0]?.meta) {
+        seoData.value = {
+          ...rows[0].meta,
+        };
+      } else {
+        seoData.value = {
+          title: '',
+          description: '',
+          keywords: '',
+          meta: {},
+        };
+      }
+      console.log('Initialized seoData from rows[0]:', seoData.value);
+    } else {
+      articleData.value = data;
+      
+      // Ініціалізуємо seoData з даних статті (з meta об'єкта)
+      await nextTick();
+      if (data?.meta) {
+        seoData.value = {
+          title: data.meta.title || '',
+          description: data.meta.description || '',
+          keywords: data.meta.keywords || '',
+          meta: { ...data.meta },
+        };
+        // Видаляємо title, description, keywords з meta, оскільки вони окремо
+        delete seoData.value.meta.title;
+        delete seoData.value.meta.description;
+        delete seoData.value.meta.keywords;
+      } else {
+        seoData.value = {
+          title: '',
+          description: '',
+          keywords: '',
+          meta: {},
+        };
+      }
+      console.log('Initialized seoData from data:', seoData.value);
+    }
+  } catch (e) {
+    console.error("Error fetching article:", e);
+  }
+});
+
+const isPinModel = computed({
+  get: () => articleData.value?.is_pin || false,
+  set: (value: boolean) => {
+    if (articleData.value) {
+      articleData.value.is_pin = value;
+    }
+  }
+});
+
+const togglePin = () => {
+  if (articleData.value) {
+    articleData.value.is_pin = !articleData.value.is_pin;
+  }
+};
+
+// Відстежуємо зміни в seoData для дебагу
+watch(seoData, (newVal) => {
+  console.log('seoData changed:', newVal);
+}, { deep: true });
+
+const handleSubmit = async (data: any) => {
+  const collection = route.params?.collection as string;
+  const id = route.params?.id as string;
+  
+  const error = await formArticleData.value.validate();
+  if (error) { 
+    notify({title: t("validation"), message: JSON.stringify(error), type: "warning",});
+    return; 
+  }
+  
+  // Відновлюємо об'єкти тегів перед відправкою
+  if (tagsForm.value?.restoreTagsBeforeSubmit) {
+    await tagsForm.value.restoreTagsBeforeSubmit();
+  }
+  
+  // Об'єднуємо articleData з seoData перед відправкою
+  // SEO дані мають бути в meta об'єкті
+  // Беремо актуальні дані з seoData (який оновлюється формою через v-model)
+  const currentSeoData = seoData.value || {};
+  const payload = {
+    ...articleData.value,
+    meta: {
+      ... currentSeoData,
+      ...(currentSeoData.meta || {}),
+    },
+  };
+  
+  console.log('Payload before submit:', payload);
+  
+  try {
+    const response = await fetch(`/api/cms/${collection}/${id?id:''}`, {
+      method: id? "PUT":'POST',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+    
+    if (!response.ok) {
+      // Пытаемся получить текст ответа
+      let errorText;
+      try {
+        const errorData = await response.json();
+        errorText = JSON.stringify(errorData, null, 2);
+      } catch {
+        errorText = await response.text();
+      }
+      throw new Error(`HTTP ${response.status}: ${errorText}`);
+    }
+    
+    // If this was a POST request (creating new item), redirect to edit mode
+    if (!id) {
+      try {
+        const responseData = await response.json();
+        const newId = responseData.id || responseData.data?.id;
+        if (newId) {
+          // Determine the correct route based on the current route
+          if (route.name === 'createArticle') {
+            // Redirect to edit article mode
+            await router.push(`/collections/${collection}/${newId}`);
+          } 
+        }
+      } catch (parseError) {
+        console.warn('Could not parse response to get ID:', parseError);
+        // Still show success notification even if we can't redirect
+      }
+    }
+    
+    notify({
+      title: t("common.success"),
+      message: t("common.successMessage"),
+      type: "success",
+    });
+    
+  } catch (error) {
+    console.error('Submit error:', error);
+    notify({
+      title: t("common.error"),
+      message: "Помилка збереження",
+      type: "error",
+    });
+  }
+  
+  
+  
+};
+</script>

package/src/pages/collections/schema/seo.ts

@@ -0,0 +1,27 @@
+
+export default [
+  {
+    key: "title",
+    label: "common.title",
+    localization: true,
+    type: "text",
+  },
+  {
+    key: "description",
+    label: "common.description",
+    localization: true,
+    type: "text",
+  },
+  {
+    key: "keywords",
+    label: "common.keywords",
+    localization: true,
+    type: "text",
+  },
+  {
+    key: "meta",
+    label: "common.meta",
+    type: "key-value",
+    ignore: ["title", "description", "keywords"],
+  },
+];

package/src/pages/menu/MenuAddPage.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="space-y-6 max-w-7xl mx-auto">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <button
+          @click="router.back()"
+          class="p-2 text-gray-500 rounded-full hover:text-gray-900 dark:text-gray-400 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+        >
+          <ArrowLeft class="w-5 h-5" />
+        </button>
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
+          {{ $t(route?.meta?.title as string) }}
+        </h1>
+      </div>
+      <div class="flex items-center space-x-3">
+        <button
+          @click="handleSubmit"
+          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"
+        >
+          <Save class="w-4 h-4 mr-2" />
+          {{ $t("common.actions.save") }}
+        </button>
+      </div>
+    </div>
+    <div class="max-w-[1000px]">
+      <VForm :schema="scheme" v-model="formValue" v-model:form="form" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, getCurrentInstance } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import MonacoEditor from "../../components/form-components/MonacoEditor.vue";
+import { ArrowLeft, Save } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import { notify } from '@opengis/core'
+import { VForm, inputs } from '@opengis/form'
+inputs['vs-input-monaco-editor'] = MonacoEditor
+
+const { t } = useI18n();
+
+const router = useRouter();
+const route = useRoute<any>();
+
+const scheme = ref<Record<string, any>>([
+  {
+    key: "name",
+    title: t("menu.form.name"),
+    type: "text",
+    placeholder: t("menu.form.name"),
+    required: true,
+    validators: ["required"],
+  },
+  {
+    key: "description",
+    title: t("menu.form.description"),
+    type: "text",
+    placeholder: t("menu.form.description"),
+    required: true,
+    validators: ["required"],
+  },
+  {key: "locale",
+    title: t("menu.form.language"),
+    type: "select",
+    placeholder: t("menu.form.language"),
+    options: [
+      {text: "Ukrainian", id: "uk"},
+      {text: "English", id: "en"},
+    ],
+    required: true,
+    validators: ["required"],
+  },
+  {
+    key: "content",
+    title: t("menu.form.content"),
+    type: "monaco-editor",
+    height: "500px",
+    language: "yaml",
+    theme: "vs-light",
+  },
+]);
+const formValue = ref<Record<string, any>>({});
+const form = ref<any>({});
+
+const handleSubmit = async () => {
+  try {
+    let result = await form.value.validate();
+    if (result) {
+      notify({
+        type: "warning",
+        title: t("common.actions.warning"),
+        message: t("menu.createMenuFailed"),
+      });
+      return;
+    }
+    await fetch("/api/cms-menu", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formValue.value),
+    });
+    notify({
+      title: t("common.success"),
+      type: "success",
+      message: t("common.successMessage"),
+    });
+    formValue.value = {};
+    router.push("/menu");
+  } catch (error) {
+    console.log(error);
+    notify({
+      title: t("common.error"),
+      type: "error",
+      message: t("common.errorMessage"),
+    });
+  }
+};
+</script>