@opengis/cms 0.0.21 → 0.0.22

package/src/pages/menu/MenuItemPage.vue

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

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

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

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