@opengis/cms 0.0.21 → 0.0.22

package/src/pages/settings/Settings.vue

@@ -0,0 +1,186 @@
+<template>
+  <div
+    class="flex-1 overflow-y-auto bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900"
+  >
+    <div class="w-full max-w-7xl mx-auto space-y-6">
+      <div class="mb-8">
+        <div class="flex items-center gap-2">
+          <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-2">
+            {{ $t("settings.title") }}
+          </h1>
+          <a :href="`https://cms.opengis.info/${locale}/config/general-settings/`" target="_blank" :title="$t('guide.settings')">
+            <HelpCircle class="w-5 h-5" />
+          </a>
+        </div>
+        <p class="text-slate-600 dark:text-slate-300">
+          {{ $t("settings.description") }}
+        </p>
+      </div>
+      <div class="space-y-6 max-w-7xl mx-auto">
+        <!-- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <SettingsCard
+            v-for="card in cards"
+            :key="card.title"
+            :path="card.path"
+            :title="card.title"
+            :description="card.description"
+            :button-text="card.buttonText"
+          >
+            <template #icon>
+              <component :is="card.icon" class="w-5 h-5 mr-2" />
+            </template>
+          </SettingsCard>
+        </div> -->
+        <div
+          class="rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm"
+        >
+          <div
+            class="flex flex-col space-y-1.5 p-6 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-slate-50 dark:from-slate-800 to-white dark:to-slate-800"
+          >
+            <h3
+              class="tracking-tight text-xl font-semibold text-slate-800 dark:text-slate-100 flex items-center"
+            >
+              <BellIcon class="w-5 h-5 mr-2" />{{ $t("settings.systemStatus") }}
+            </h3>
+          </div>
+          <div class="p-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div class="space-y-4">
+                <h3 class="font-medium text-slate-800 dark:text-slate-100">
+                  {{ $t("settings.siteInformation") }}
+                </h3>
+                <div class="space-y-2">
+                  <div class="flex justify-between items-center">
+                    <span class="text-sm text-slate-600 dark:text-slate-400"
+                      >{{ $t("settings.siteName") }}</span
+                    ><span
+                      class="text-sm font-medium text-slate-800 dark:text-slate-100"
+                      >CMS Pro</span
+                    >
+                  </div>
+                  <div class="flex justify-between items-center">
+                    <span class="text-sm text-slate-600 dark:text-slate-400"
+                      >{{ $t("settings.version") }}</span
+                    ><span
+                      class="text-sm font-medium text-slate-800 dark:text-slate-100"
+                      >2.1.0</span
+                    >
+                  </div>
+                  <div class="flex justify-between items-center">
+                    <span class="text-sm text-slate-600 dark:text-slate-400"
+                      >{{ $t("settings.environment") }}</span
+                    >
+                    <div
+                      class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent shadow hover:bg-primary/80 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
+                    >
+                      {{ $t("settings.production") }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="space-y-4">
+                <h3 class="font-medium text-slate-800 dark:text-slate-100">
+                  {{ $t("settings.systemHealth") }}
+                </h3>
+                <div class="space-y-2">
+                  <div class="flex justify-between items-center">
+                    <span class="text-sm text-slate-600 dark:text-slate-400"
+                      >{{ $t("settings.database") }}</span
+                    >
+                    <div
+                      class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent shadow hover:bg-primary/80 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
+                    >
+                      {{ $t("settings.connected") }}
+                    </div>
+                  </div>
+                  <div class="flex justify-between items-center">
+                    <span class="text-sm text-slate-600 dark:text-slate-400"
+                        >{{ $t("settings.cache") }}</span
+                    >
+                    <div
+                      class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent shadow hover:bg-primary/80 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
+                    >
+                      {{ $t("settings.active") }}
+                    </div>
+                  </div>
+                  <div class="flex justify-between items-center">
+                    <span class="text-sm text-slate-600 dark:text-slate-400"
+                      >{{ $t("settings.storage") }}</span
+                    >
+                    <div
+                      class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent shadow hover:bg-primary/80 bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
+                    >
+                      {{ $t("settings.used") }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SettingsCard from '../../components/SettingsCard.vue'
+import SettingsIcon from '../../components/icons/SettingsIcon.vue'
+import UsersIcon from '../../components/icons/UsersIcon.vue'
+import ShieldIcon from '../../components/icons/ShieldIcon.vue'
+import KeyIcon from '../../components/icons/KeyIcon.vue'
+import PaletteIcon from '../../components/icons/PaletteIcon.vue'
+import GlobeIcon from '../../components/icons/GlobeIcon.vue'
+import BellIcon from '../../components/icons/BellIcon.vue'
+import { HelpCircle } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
+
+const cards = [
+  {
+    title: t('settings.general.general'),
+    path: '/settings/general',
+    description: t('settings.general.general'),
+    buttonText: t('settings.configure'),
+    icon: SettingsIcon
+  },
+  {
+    title: t('settings.users.users'),
+    path: '/settings/users',  
+    description: t('settings.users.users'),
+    buttonText: t('settings.configure'),
+    icon: UsersIcon
+  },
+  {
+    title: t('settings.security'),
+    path: '/settings/security',
+    description: t('settings.security'),
+    buttonText: t('settings.configure'),
+    icon: ShieldIcon
+  },
+  {
+    title: t('settings.api-keys.apiKeys'),
+    path: '/settings/api-keys',
+    description: t('settings.api-keys.apiKeys'),
+    buttonText: t('settings.configure'),
+    icon: KeyIcon
+  },
+  {
+    title: t('settings.appearance.appearance'),
+    path: '/settings/appearance',
+    description: t('settings.appearance.appearance'),
+    buttonText: t('settings.configure'),
+    icon: PaletteIcon
+  },
+  {
+    title: t('settings.localization'),
+    path: '/settings/localization',
+    description: t('settings.localization'),
+    buttonText: t('settings.configure'),
+    icon: GlobeIcon
+  }
+]
+</script>
+
+<style scoped></style>

package/src/pages/settings/Users.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="w-full max-w-7xl mx-auto space-y-6">
+    <SettingsTitle
+      :title="$t('settings.users.users')"
+      :description="$t('settings.users.usersDescription')"
+    />
+    <SettingsTable
+      v-model="userSettings"
+      :icon="Users"
+      :title="$t('settings.users.userRegistration')"
+      :color="'green'"
+    />
+  </div>
+</template>
+
+<script setup>
+import { Users } from "lucide-vue-next";
+import { ref, onMounted, getCurrentInstance } from "vue";
+import SettingsTitle from "@/components/settings/SettingsTitle.vue";
+import SettingsTable from "@/components/settings/SettingsTable.vue";
+import { useI18n } from "vue-i18n";
+import { notify } from "@opengis/core";
+
+const { t } = useI18n();
+
+const userSettings = ref([
+  {
+    key: "allowRegistration",
+    label: t("settings.users.allowRegistration"),
+    description: t("settings.users.allowRegistrationDescription"),
+    checked: true,
+  },
+  {
+    key: "emailVerification",
+    label: t("settings.users.emailVerification"),
+    description: t("settings.users.emailVerificationDescription"),
+    checked: true,
+  },
+  {
+    key: "autoApprove",
+    label: t("settings.users.autoApprove"),
+    description: t("settings.users.autoApproveDescription"),
+    checked: false,
+  },
+  {
+    key: "defaultRole",
+    label: t("settings.users.defaultRole"),
+    description: "",
+    value: "Viewer",
+    options: [
+      { text: "Viewer", id: "Viewer" },
+      { text: "Contributor", id: "Contributor" },
+      { text: "Author", id: "Author" },
+    ],
+  },
+]);
+
+const fetchData = async () => {
+  const response = await fetch("/api/settings");
+  const data = await response.json();
+  setUserSettings(data?.settings?.users || {});
+};
+
+const setUserSettings = (data) => {
+  if (!data) return;
+  Object.entries(data).forEach(([key, value]) => {
+    const setting = userSettings.value.find((setting) => setting.key === key);
+    if (setting) {
+      setting.checked = value;
+    }
+  });
+};
+
+const saveChanges = async () => {
+  let data = {
+    users: {},
+  };
+
+  userSettings.value.forEach((setting) => {
+    data.users[setting.key] = setting.checked;
+  });
+  try {
+    await fetch("/api/settings", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    notify({
+      title: "Успішно",
+      message: "Налаштування успішно збережено",
+      type: "success",
+    });
+  } catch (error) {
+    console.error(error);
+    notify({
+      title: "Помилка",
+      message: "Помилка при збереженні налаштувань",
+      type: "error",
+    });
+  }
+};
+
+onMounted(() => {
+  fetchData();
+});
+</script>

package/src/pages/settings/general.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="w-full max-w-7xl mx-auto space-y-6">
+    <SettingsTitle
+      :title="$t('settings.general.general')"
+      :description="$t('settings.general.generalDescription')"
+    />
+
+    <div class="space-y-6 max-w-7xl mx-auto">
+      <SettingsTable
+        :icon="Settings"
+        :title="$t('settings.general.siteInformation')"
+        :color="'blue'"
+      >
+        <template #content>
+          <VsForm
+            v-model:form="form"
+            :schema="generalScheme(t)"
+            v-model="formValues"
+            :key="formKey"
+          />
+          <div class="flex justify-end space-x-2 pt-4">
+            <button
+              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm 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-9 px-4 py-2 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"
+            >
+              {{ $t("settings.general.cancel") }}
+            </button>
+            <button
+              @click="saveChanges"
+              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-white text-sm font-medium transition-colors focus-visible:outline-none 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 bg-blue-600 hover:bg-blue-700"
+            >
+              <Save class="w-4 h-4 mr-2" />
+              {{ $t("settings.general.saveChanges") }}
+            </button>
+          </div>
+        </template>
+      </SettingsTable>
+
+      <!-- <SettingsTable v-model="notificationSettings" :icon="Bell" :title="$t('settings.general.notifications')" :color="'blue'" /> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance, onMounted } from "vue";
+import { Save, Settings, Bell } from "lucide-vue-next";
+import SettingsTitle from "@/components/settings/SettingsTitle.vue";
+import SettingsTable from "@/components/settings/SettingsTable.vue";
+import { useI18n } from "vue-i18n";
+import generalScheme from "./generalScheme.js";
+import { notify } from "@opengis/core";
+const { t } = useI18n();
+import VsForm from "@opengis/form";
+
+const form = ref({});
+
+const formValues = ref({});
+
+const formKey = ref(0);
+
+const fetchData = async () => {
+  const response = await fetch("/api/settings");
+  const data = await response.json();
+  Object.assign(formValues.value, data?.settings?.site_info || {});
+  formKey.value++;
+  setNotificationSettings(data?.settings?.notifications || {});
+};
+
+const setNotificationSettings = (data) => {
+  if (!data) return;
+  Object.entries(data).forEach(([key, value]) => {
+    const setting = notificationSettings.value.find(
+      (setting) => setting.key === key
+    );
+    if (setting) {
+      setting.checked = value;
+    }
+  });
+};
+
+const saveChanges = async () => {
+  let result = await form.value.validate();
+  if (result) {
+    notify({
+      type: "warning",
+      title: t("common.actions.warning"),
+      message: t("settings.general.saveChangesFailed"),
+    });
+    return;
+  }
+  let data = {
+    notifications: {},
+  };
+
+  notificationSettings.value.forEach((setting) => {
+    data.notifications[setting.key] = setting.checked;
+  });
+  data.site_info = formValues.value;
+
+  try {
+    // await fetch("/api/cms-space", { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formValues.value) });
+    await fetch("/api/settings", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    notify({
+      title: t("settings.successTitle"),
+      message: t("settings.successMessage"),
+      type: "success",
+    });
+  } catch (error) {
+    console.error(error);
+    notify({
+      title: t("settings.errorTitle"),
+      message: t("settings.errorMessage"),
+      type: "error",
+    });
+  }
+};
+
+const notificationSettings = ref([
+  {
+    key: "email",
+    label: t("settings.general.emailNotifications"),
+    description: t("settings.general.emailNotificationsDescription"),
+    checked: true,
+  },
+  {
+    key: "push",
+    label: t("settings.general.pushNotifications"),
+    description: t("settings.general.pushNotificationsDescription"),
+    checked: false,
+  },
+  {
+    key: "sms",
+    label: t("settings.general.smsNotifications"),
+    description: t("settings.general.smsNotificationsDescription"),
+    checked: false,
+  },
+  {
+    key: "desktop",
+    label: t("settings.general.desktopNotifications"),
+    description: t("settings.general.desktopNotificationsDescription"),
+    checked: true,
+  },
+]);
+
+onMounted(() => {
+  fetchData();
+});
+</script>

package/src/pages/settings/generalScheme.js

@@ -0,0 +1,132 @@
+const scheme = (t) => [
+  {
+    key: "name",
+    label: t('settings.general.siteName'),
+    type: "text",
+    value: t('settings.general.siteName'),
+    col: 6,
+    validators: ["required"],
+  },
+  {
+    key: "url",
+    label: t('settings.general.siteUrl'),
+    type: "text",
+    value: t('settings.general.siteUrl'),
+    col: 6,
+    validators: ["required"],
+  },
+  {
+    key: "previewUrl",
+    label: t('settings.general.previewUrl'),
+    type: "text",
+    value: "http://ip.local.softpro.ua",
+    col: 3,
+    validators: ["required"],
+  },
+  {
+    key: "logo",
+    label: t('settings.general.logoSite'),
+    type: "file",
+    col: 3,
+    validators: ["required"],
+  },
+  {
+    key: "logo-cms",
+    label: t('settings.general.logoCms'),
+    type: "file",
+    col: 3,
+    validators: ["required"],
+  },
+  {
+    key: "image-login",
+    label: t('settings.general.imageLogin'),
+    type: "file",
+    col: 3,
+    validators: ["required"],
+  },
+  {
+    key: "description",
+    label: t('settings.general.siteDescription'),
+    type: "textarea",
+    value: t('settings.general.siteDescription'),
+  },
+  {
+    key: "language",
+    label: t('settings.general.language'),
+    type: "select",
+    col: 6,
+    validators: ["required"],
+    options: [
+      {
+        text: "Ukrainian",
+        id: "uk",
+      },
+      { text: "English", id: "en" },
+    ],
+  },
+  {
+    key: "languages",
+    label: t('settings.general.languages'),
+    type: "select",
+    multiple: true,
+    col: 6,
+    options: [
+      {
+        text: "Ukrainian",
+        id: "uk",
+      },
+      { text: "English", id: "en" },
+    ],
+  },
+  {
+    key: "contacts",
+    label: t('settings.general.contacts'),
+    type:"DataTable",
+    colModel:[
+      {
+        key:"title",
+        ua:t('settings.general.title'),
+        type:"text",
+      },
+      {
+        key:"content",
+        ua:t('settings.general.content'),
+        type:"text",
+      },
+      {
+        key:"url",
+        ua:t('settings.general.url'),
+        type:"text",
+      },
+    ]
+  },
+  {
+    key:"showSocialsNumber",
+    label: t('settings.general.showSocialsNumber'),
+    type:"number",
+  },
+  {
+    key: "socials",
+    label: t('settings.general.socials'),
+    type:"DataTable",
+    colModel:[
+      {
+        key:"id",
+        ua:t('settings.general.name'),
+        type:"text",
+      },
+      {
+        key:"link",
+        ua:t('settings.general.url'),
+        type:"text",
+      },
+    ]
+  },
+  {
+    key:"mapCoords", 
+    label: t('settings.general.mapCoords'),
+    type:"text",
+  }
+];
+
+export default scheme; 

package/src/pages/users/AddUser.vue

@@ -0,0 +1,106 @@
+<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">
+            <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"><svg
+                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-arrow-left-icon w-5 h-5">
+                            <path d="m12 19-7-7 7-7"></path>
+                            <path d="M19 12H5"></path>
+                        </svg>
+                    </button>
+                    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ id ? $t("users.editUser" ) : $t("users.createUser") }}</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">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-save-icon w-4 h-4 mr-2">
+                            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
+                            <polyline points="17 21 17 13 7 13 7 21"></polyline>
+                            <polyline points="7 3 7 8 15 8"></polyline>
+                        </svg> 
+                        {{ $t("common.actions.save") }}</button>
+                    </div>
+            </div>
+        </div>
+        <div class="container mx-auto bg-white rounded-md pb-4 px-5">
+            <VsForm v-if="schema" v-model="formValue" v-model:form="form" :schema="schema" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import VsForm from '@opengis/form';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { notify } from '@opengis/core';
+const schema = ref(null);
+const formValue = ref({});
+const form = ref({});
+const loading = ref(true);
+const router = useRouter();
+const { t } = useI18n();
+const token = ref(null);
+const id = useRoute().params.id;
+
+const handleSubmit = async () => {
+    let method = id ? 'PUT' : 'POST';
+
+    try {
+        let result = await form.value.validate();
+
+        if (result) {
+            notify({
+                type: "warning",
+                title: t("common.actions.warning"),
+                message: t("users.createUserFailed"),
+            });
+            return;
+        }
+
+        await fetch(`/api/table/${token.value}`, { method: method, body: JSON.stringify(formValue.value), headers: { 'Content-Type': 'application/json' } });
+            
+        notify({
+            type: "success",
+            title: t("common.actions.success"),
+            message: t("users.createUserSuccess"),
+        });
+
+        router.back();
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+
+const fetchData = async () => {
+    let url = id ? `/api/form/admin.users.table/${id}` : '/api/form/admin.users.table';
+
+    try {
+        const response = await fetch(url);
+        const data = await response.json();
+        
+        formValue.value = data?.data || {};
+        token.value = data.token;
+        schema.value = data.schema
+    } catch (error) {
+        schema.value = [];
+    } finally {
+        loading.value = false;
+    }
+}
+
+
+onMounted(() => {
+    fetchData();
+})
+</script>