@opengis/cms 0.0.22 → 0.0.24

package/src/pages/menu/MenuItemPage.vue

@@ -1,183 +0,0 @@
-<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>
-        <div class="flex items-center gap-2">
-          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
-            {{ $t("menu.editMenu") }}
-          </h1>
-          <a :href="`https://cms.opengis.info/${locale}/guides/menu/`" target="_blank" :title="$t('guide.menu')">
-            <HelpCircle class="w-5 h-5" />
-          </a>
-        </div>
-      </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] flex flex-col" v-if="isForm">
-      <div class="flex ml-2 mb-6 w-min border border-gray-200 dark:border-gray-700 rounded-full overflow-hidden">
-        <button 
-          @click="isSortable = false"
-          :class="{'bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-white': !isSortable}"
-          class="text-gray-500 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700 whitespace-nowrap px-5 py-2 w-[200px] text-sm font-medium"
-        >{{ $t("menu.textEditor") }}</button>
-        <button 
-          @click="isSortable = true"
-          :class="{'bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-white': isSortable}"
-          class="text-gray-500 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700 whitespace-nowrap px-5 py-2 w-[200px] text-sm font-medium"
-        >{{ $t("menu.listTree") }}</button>
-      </div>
-      <MenuBody v-model="formValue" v-if="isSortable " />
-      <VForm v-else :schema="scheme" v-model="formValue" v-model:form="form" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import MenuBody from "../../components/menu/MenuBody.vue";
-import MonacoEditor from "../../components/form-components/MonacoEditor.vue";
-import { ref, computed, getCurrentInstance, onMounted, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { ArrowLeft, Save, HelpCircle } from "lucide-vue-next";
-import { useI18n } from "vue-i18n";
-import { dump as json2yml } from 'js-yaml';
-import { notify } from '@opengis/core';
-import { VForm, inputs } from '@opengis/form'
-inputs['vs-input-monaco-editor'] = MonacoEditor
-
-const { t, locale } = useI18n();
-
-const router = useRouter();
-const route = useRoute();
-
-const scheme = computed(() => [
-  {
-    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> | null>(null);
-const form = ref<any>({});
-const isForm = ref(false);
-const isSortable = ref(false);
-
-const formateData = (menuArray: any[]) => {
-  const result: Record<string, any> = {};
-  
-  for (const item of menuArray) {
-    const { title, value, children } = item;
-    
-    if (children && children.length > 0) {
-      // Якщо є дочірні елементи, рекурсивно обробляємо їх
-      result[title] = formateData(children);
-    } else {
-      // Якщо немає дочірніх елементів, зберігаємо value
-      result[title] = value;
-    }
-  }
-  
-  return result;
-}
-
-const handleSubmit = async () => {
-  let data = {...(formValue.value || {})};
-  let result = await form.value.validate();
-  if (result) {
-    notify({
-      type: "warning",
-      title: t("common.actions.warning"),
-      message: t("menu.createMenuFailed"),
-    });
-    return;
-  }
-
-  if (Array.isArray(data.items)) {
-    data.items = formateData(data.items);
-    data.content = json2yml(data.items);
-  }
-  
-  try {
-    await fetch(`/api/cms-menu/${route.params.id}`, {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-    });
-    
-    notify({
-      title: t("menu.menuUpdated"),
-      type: "success",
-      message: t("menu.menuUpdated"),
-    });
-    router.push("/menu");
-  } catch (error) {
-    notify({
-      title: t("menu.menuUpdateError"),
-      type: "error",
-      message: t("menu.menuUpdateError"),
-    });
-  }
-};
-
-const fetchMenu = async () => {
-  try {
-    const response = await fetch(`/api/cms-menu/${route.params.id}`);
-    const data = await response.json();
-    formValue.value = data;
-    isForm.value = true;
-  } catch (error) {
-    isForm.value = false;
-  }
-};
-
-onMounted(fetchMenu);
-</script>

package/src/pages/menu/MenuPage.vue

@@ -1,133 +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"
-    >
-      <div>
-        <div class="flex items-center gap-2">
-        <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-2">{{ $t("menu.title") }}</h1>
-        <a :href="`https://cms.opengis.info/${locale}/guides/menu/`" target="_blank" :title="$t('guide.menu')">
-          <HelpCircle class="w-5 h-5" />
-        </a>
-        </div>
-        <p class="text-slate-600 dark:text-slate-300">{{ $t("menu.description") }}</p>
-      </div> 
-      <router-link
-        to="/menu/create"
-        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"
-      >
-        <Plus class="w-4 h-4 mr-2" />
-        {{ $t("menu.menuAdd") }}
-      </router-link>
-    </div>
-    <div
-      class="overflow-hidden bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700"
-    >
-      <div v-if="filterScheme?.length > 0" class="p-4 border-b border-gray-200 sm:p-6 dark:border-gray-700">
-        <VsFilter
-         
-          :schema="filterScheme"
-          view="inline"
-          @change="handleChange"
-        />
-      </div>
-
-      <UniversalTable
-        :rows="singletons"
-        :columns="columns"
-        :query="searchQuery"
-        :filterFn="filterFn"
-        @edit="handleEditSingleton"
-        :onDelete="handleDeleteSingleton"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, getCurrentInstance } from "vue";
-import { useRouter } from "vue-router";
-import { Plus, Search, Filter, HelpCircle } from "lucide-vue-next";
-import UniversalTable from "../../components/ui/UniversalTable.vue";
-import { useI18n } from "vue-i18n";
-import VsFilter from '@opengis/filter';
-import { notify } from '@opengis/core';
-
-
-const { t, locale } = useI18n();
-
-interface Singleton {
-  menu_id: string;
-  name: string;
-  description: string;
-}
-
-const router = useRouter();
-const searchQuery = ref("");
-const singletons = ref<any[]>([]);
-const filterScheme = ref<any[]>([]);
-const filterValue = ref<string>('');
-const columns = ref([
-  { name: "name", title: t("menu.form.name"), type: "text" },
-  { name: "description", title: t("menu.form.description"), type: "text" },
-  { name: "locale", title: t("menu.form.language"), type: "select", data: [{ text: "uk", id: "uk" }, { text: "en", id: "en" }] },
-]);
-
-const fetchSingletons = async () => {
-  const res = await fetch("/api/cms-menu");
-  const data = await res.json();
-  const rows = data.rows;
-  singletons.value = rows;
-  
-  // Clean filter schema to only include valid IFilterItem properties
-  const cleanFilters = (data.filters || []).map((filter: any) => {
-    const { extra, title, ...cleanFilter } = filter;
-    return cleanFilter;
-  });
-  filterScheme.value = cleanFilters;
-};
-
-const handleEditSingleton = (singleton: Singleton) => {
-  router.push(`/menu/${singleton?.menu_id}`);
-};
-
-const handleDeleteSingleton = async (singleton: Singleton) => {
-  try {
-    await fetch(`/api/cms-menu/${singleton?.menu_id}`, { method: 'DELETE' });
-    await notify({
-      title: t("menu.menuDeleted"),
-      type: "success",
-      message: t("menu.menuDeleted"),
-    });
-    await fetchSingletons();
-  } catch (error) {
-    notify({
-      title: t("menu.menuDeleteError"),
-      type: "error",
-      message: t("menu.menuDeleteError"),
-    });
-  }
-};
-
-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 handleChange = (filters: any) => {
-  const filterStr = Object.entries(filters?.data)
-        .filter(([, v]) => v != null)
-        .map(([key, val]) => `${key}=${val}`)
-        .join('|');
-
-  filterValue.value = filterStr;
-}
-
-
-onMounted(fetchSingletons);
-</script>

package/src/pages/settings/ApiKeys.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="w-full max-w-7xl mx-auto space-y-6">
-    <SettingsTitle :title="$t('settings.api-keys.apiKeys')" :description="$t('settings.api-keys.apiKeysDescription')" />
-    <div class="space-y-6 max-w-7xl mx-auto">
-      <SettingsTable :icon="Key" :title="$t('settings.api-keys.apiKeys')" :color="'purple'">
-        <template #content>
-          <div v-for="key in apiKeys" :key="key.name" class="flex items-center justify-between p-4 border border-slate-200 dark:border-slate-600 rounded-lg bg-slate-50 dark:bg-slate-700">
-            <div>
-              <h3 class="font-medium text-slate-800 dark:text-slate-100">{{ key.label }}</h3>
-              <p class="text-sm text-slate-500 dark:text-slate-400">{{ key.value }}</p>
-            </div>
-            <div class="flex space-x-2">
-              <button class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border shadow-sm hover:text-accent-foreground h-8 rounded-md px-3 text-xs bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600">
-                <Eye class="w-4 h-4" />
-              </button>
-              <button class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border shadow-sm hover:text-accent-foreground h-8 rounded-md px-3 text-xs bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600">
-                <RefreshCcw class="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-          <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none text-white focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary-foreground shadow h-9 px-4 py-2 mt-4 bg-purple-600 hover:bg-purple-700">
-            {{ $t('settings.api-keys.generateNewKey') }}
-          </button>
-        </template>
-      </SettingsTable>
-      <SettingsTable v-model="notificationSettings" :icon="Shield" :title="$t('settings.api-keys.apiSecurity')" :color="'purple'" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Eye, RefreshCcw, Shield, Key } from 'lucide-vue-next';
-import { ref } from 'vue';
-import SettingsTitle from '@/components/settings/SettingsTitle.vue';
-import SettingsTable from '@/components/settings/SettingsTable.vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const apiKeys = [
-  {
-    name: 'production',
-    label: t('settings.api-keys.productionApiKey'),
-    value: 'pk_live_••••••••••••••••',
-  },
-  {
-    name: 'development',
-    label: t('settings.api-keys.developmentApiKey'),
-    value: 'pk_test_••••••••••••••••',
-  },
-];
-
-const notificationSettings = ref([
-  {
-    key: 'rateLimiting',
-    label: t('settings.api-keys.rateLimiting'),
-    description: t('settings.api-keys.rateLimitingDescription'),
-    checked: true,
-  },
-  {
-    key: 'corsProtection',
-    label: t('settings.api-keys.corsProtection'),
-    description: t('settings.api-keys.corsProtectionDescription'),
-    checked: true,
-  },
-  {
-    key: 'apiLogging',
-    label: t('settings.api-keys.apiLogging'),
-    description: t('settings.api-keys.apiLoggingDescription'),
-    checked: false,
-  },
-]);
-
-</script>
-

package/src/pages/settings/Appearance.vue

@@ -1,80 +0,0 @@
-<template>
-    <div class="w-full max-w-7xl mx-auto space-y-6">
-        <SettingsTitle :title="t('settings.appearance.appearance')" :description="t('settings.appearance.appearanceDescription')" />
-        <SettingsTable v-model="appearanceSettings" :icon="Palette" :title="t('settings.appearance.appearance')" :color="'pink'">
-            <template #content>
-              <div>
-                <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-slate-700 dark:text-slate-300">
-                  {{ $t('settings.appearance.colorTheme') }}
-                </label>
-                <div class="grid grid-cols-3 gap-3 mt-2">
-                  <button 
-                    v-for="theme in colorTheme"
-                    :key="theme.name"
-                    class="p-3 rounded-lg text-center"
-                    :class="theme.name === color ? theme.color : 'border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-500'"
-                    @click="toggleColor(theme.name)"
-                  >
-                    <div class="w-full h-8 rounded mb-2" :class="theme.bg"></div>
-                    <span class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ theme.name }}</span>
-                  </button>
-                </div>
-              </div>
-            </template>
-        </SettingsTable>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import SettingsTitle from '@/components/settings/SettingsTitle.vue';
-import SettingsTable from '@/components/settings/SettingsTable.vue';
-import { Palette } from 'lucide-vue-next';
-import { useTheme } from '@/composables/useTheme';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const { color, toggleColor } = useTheme();
-
-const colorTheme = [
-  {
-    name: 'blue',
-    color: 'border-2 bg-blue-50 border-blue-500 dark:bg-blue-900/20',
-    bg: 'bg-blue-600',
-  },
-  {
-    name: 'green',
-    color: 'border-2 bg-green-50 border-green-500 dark:bg-green-900/20',
-    bg: 'bg-green-600',
-  },
-  {
-    name: 'purple',
-    color: 'border-2 bg-purple-50 border-purple-500 dark:bg-purple-900/20',
-    bg: 'bg-purple-600',
-  },
-];
-
-const appearanceSettings = ref([
-  {
-    key: "darkMode",
-    label: t('settings.appearance.darkMode'),
-    description: t('settings.appearance.darkModeDescription'),
-    checked: true,
-  },
-  {
-    key: "compactMode",
-    label: t('settings.appearance.compactMode'),
-    description: t('settings.appearance.compactModeDescription'),
-    checked: false,
-  },
-  {
-    key: "animations",
-    label: t('settings.appearance.animations'),
-    description: t('settings.appearance.animationsDescription'),
-    checked: false,
-  },
-]);
-
-
-</script>