@opengis/cms 0.0.21 → 0.0.22

package/src/main.ts

@@ -0,0 +1,41 @@
+import { createApp } from "vue";
+/*import formComponents from "./components/form-components";
+import referenceComponents from "./components/referencec";
+import iconsTypes from "./components/icons-types";*/
+import App from "./App.vue";
+
+import '@opengis/core/dist/index.css'
+import '@opengis/form/dist/index.css'
+// import v3core from '@opengis/v3-core';
+// import v3core from '../../v3-core/src/misc/import-file.ts';
+// 
+
+import richtext from '@opengis/richtext'
+//import richtext from '../../richtext/src/misc/import-file.js'
+
+import router from "./router";
+import { i18n, initI18n } from "./i18n.ts";
+// import "./assets/main.css";
+// import '@opengis/v3-core/dist/style.css';
+
+const app = createApp(App);
+/*v3core.install(app, createApp, {
+    i18nConfig: i18n,
+});*/
+
+/*Object.entries({ ...formComponents, ...iconsTypes, ...referenceComponents }).forEach(([key, value]) => {
+  app.component(key, value);
+});*/
+
+app.use(router);
+app.use(i18n);
+app.use(richtext, { i18nConfig: i18n });
+app.config.globalProperties.$settings = {
+  locale: 'uk', 
+  locales: ['en', 'uk']
+}
+
+// Ініціалізуємо i18n перед монтуванням
+initI18n().then(() => {
+  app.mount("#app");
+});

package/src/pages/Dashboard.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="w-full max-w-7xl mx-auto space-y-8">
+    <!-- Header Section -->
+    <DashboardHeader />
+    
+    <!-- Stats Cards -->
+    <StatsGrid :stats="statsData" />
+    
+    <!-- Main Content Grid -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <!-- Recent Content -->
+      <RecentContent 
+        :content="recentContent" 
+        class="lg:col-span-2" 
+      />
+      
+      <!-- Quick Actions -->
+      <div>
+        <QuickActions />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import DashboardHeader from '../components/dashboard/DashboardHeader.vue';
+import StatsGrid from '../components/dashboard/StatsGrid.vue';
+import RecentContent from '../components/dashboard/RecentContent.vue';
+import QuickActions from '../components/dashboard/QuickActions.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// Types
+interface StatItem {
+  id: string;
+  title: string;
+  value: string;
+  description: string;
+  change: {
+    value: string;
+    isPositive: boolean;
+  };
+  icon: string;
+  color: string;
+}
+
+interface ContentItem {
+  id: number;
+  type: 'Article' | 'Post';
+  status: 'published' | 'draft' | 'review';
+  title: string;
+  author: string;
+  updated_at: string;
+  views: number;
+}
+
+
+
+// Data
+const statsData = ref<StatItem[]>([
+  {
+    id: 'total-content',
+    title: t('dashboard.totalContent'),
+    value: '2,847',
+    description: t('dashboard.articlesPostsPages'),
+    change: { value: '+12.5%', isPositive: true },
+    icon: 'file-text',
+    color: 'blue'
+  },
+  {
+    id: 'active-users',
+    title: t('dashboard.activeUsers'),
+    value: '1,234',
+    description: t('dashboard.monthlyActiveUsers'),
+    change: { value: '+8.2%', isPositive: true },
+    icon: 'users',
+    color: 'emerald'
+  },
+  {
+    id: 'media-files',
+    title: t('dashboard.mediaFiles'),
+    value: '5,692',
+    description: t('dashboard.imagesVideosDocs'),
+    change: { value: '+23.1%', isPositive: true },
+    icon: 'image',
+    color: 'purple'
+  },
+  {
+    id: 'new-media',
+    title: t('dashboard.newMediaFiles'),
+    value: '89.2K',
+    description: t('dashboard.thisMonth'),
+    change: { value: '-2.4%', isPositive: false },
+    icon: 'eye',
+    color: 'orange'
+  }
+]);
+
+const recentContent = ref<ContentItem[]>([
+  {
+    id: 1,
+    type: 'Article',
+    status: 'published',
+    title: t('dashboard.gettingStartedWithNextJs14'),
+    author: t('dashboard.sarahJohnson'),
+    updated_at: '2024-01-15',
+    views: 1247
+  },
+  {
+    id: 2,
+    type: 'Post',
+    status: 'draft',
+    title: t('dashboard.advancedReactPatterns'),
+    author: t('dashboard.mikeChen'),
+    updated_at: '2024-01-14',
+    views: 0
+  },
+  {
+    id: 3,
+    type: 'Article',
+    status: 'published',
+    title: t('dashboard.uiUxDesignPrinciples'),
+    author: t('dashboard.emmaWilson'),
+    updated_at: '2024-01-13',
+    views: 892
+  },
+  {
+    id: 4,
+    type: 'Post',
+    status: 'review',
+    title: t('dashboard.databaseOptimizationTips'),
+    author: t('dashboard.alexRodriguez'),
+    updated_at: '2024-01-12',
+    views: 0
+  }
+]);
+
+const rewriteStatsData = (data: any) => {
+  statsData.value = statsData.value.map(stat => {
+    switch (stat.id) {
+      case 'total-content':
+        return { ...stat, value: data.totalContent?.toLocaleString() ?? stat.value };
+      case 'active-users':
+        return { ...stat, value: data.totalUsers?.toLocaleString() ?? stat.value };
+      case 'media-files':
+        return { ...stat, value: data.totalMediaFiles?.toLocaleString() ?? stat.value };
+      case 'new-media':
+        return { ...stat, value: data.newMediaFiles?.toLocaleString() ?? stat.value };
+      default:
+        return stat;
+    }
+  });
+}
+
+const fetchDashboardData = async () => {
+  const res = await fetch('api/cms-stat');
+  const data = await res.json();
+  
+  recentContent.value = data.recentContent;
+  rewriteStatsData(data.stat);
+};
+
+onMounted(() => {
+  fetchDashboardData();
+});
+</script>

package/src/pages/EmailPage.vue

@@ -0,0 +1,183 @@
+<template>
+
+<div class="w-full max-w-7xl mx-auto space-y-6">
+     <SettingsTitle :title="$t('email.title')" :description="$t('email.description')" />
+     <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">
+            <TableCellsMerge class="text-emerald-500 mr-2"/>
+            {{ $t('email.title') }}
+        </h3>
+    </div>
+    <div class="p-6 space-y-4">
+        <div class="flex justify-between">
+            <VsFilter
+            :schema="filterScheme"
+            view="inline" 
+            @change="handleChange"
+            />
+        </div>
+         <div class="overflow-x-auto" v-if="email?.length">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-100">
+                    <tr>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">№</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ $t('feedback.table.email') }}</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ $t('feedback.table.cdate') }}</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700"></th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200" v-for="(email, index) in email" :key="email?.message_id">
+
+                    <tr class="cursor-pointer dark:text-white">
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{ email?.num }}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{ email?.email }}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{ formatDate(email?.created_at) }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class='bg-white dark:bg-slate-800 backdrop-blur-sm0 text-center p-6 rounded-xl' v-else>
+            <h3 class='text-lg font-semibold'>{{ $t('feedback.table.noFeedback') }}</h3>
+        </div>
+
+        <div class="my-5 pr-2">
+            <div class="paginationWrapper relative flex justify-center">
+                <VsPagination
+                :total
+                :maxPages="6"
+                :defaultPage="page"
+                :pageSize="limit"
+                :goTo="false"
+                size="medium"
+                backgroundColor="#e5e7eb"
+                :borderedCellSelected="true"
+                :pageSizes="[16, 32, 48]"
+                @pageChange="handlePageChange"
+                @pageSizeChange="changeLimit"
+                />
+            </div>
+        </div>
+
+    </div>
+ </div>
+ </div>
+</template>
+<script>
+import SettingsTitle from '@/components/settings/SettingsTitle.vue';
+import VsFilter from '@opengis/filter';
+import {
+    TableCellsMerge,
+    ArrowDown,
+    ArrowUp,
+    ArrowRightFromLine,
+} from "lucide-vue-next";
+
+export default {
+    components: {
+        SettingsTitle,
+        VsFilter,
+        TableCellsMerge,
+        ArrowDown,
+        ArrowUp,
+        ArrowRightFromLine
+    },
+    data() { 
+        return {
+            email: null,
+            total: 0,
+            openIndex: null,
+            limit: 16,
+            page: 1,
+            filterValue: '',
+            filterScheme: [],
+        }
+    },
+    async created() {   
+        this.$router.replace({ 
+                    query: { page: 1 } 
+                })
+        await this.getData();
+    },
+    methods: {
+        async getData() { 
+            try {
+                const response = await fetch(`/api/email-list?limit=${this.limit}&page=${this.page}`);
+                const data = await response.json();
+                this.email = data?.rows;
+                this.total = data?.total;
+                this.filterScheme = data?.filters;
+            } catch (err) { 
+                console.error(err.toString())
+            }
+        },
+        async handleChange(filters) { 
+            const filterStr = Object.entries(filters?.data)
+                .filter(([, v]) => v != null)
+                .map(([key, val]) => `${key}=${val}`)
+                .join('|');
+
+            this.filterValue = filterStr;
+            
+            if (this.filterValue ==='no-url') { 
+                this.$router.replace({ 
+                    query: { page: 1 } 
+                })
+            } else { 
+                this.$router.replace({ 
+                    query: { filter:this.filterValue, page: 1 } 
+                })
+               
+            };
+            this.page = 1;
+            await this.getData();
+        },
+         async handlePageChange(page) {
+             this.page = page;
+            if (this.filterValue==='no-url' || !this.filterValue) { 
+                this.$router.replace({ 
+                    query: { page } 
+                })
+            } else { 
+                this.$router.replace({ 
+                    query: { filter:this.filterValue, page} 
+                })
+               
+            }
+            await this.getData();
+        },
+        async changeLimit(limit) {
+            this.limit = limit;
+            this.page = 1;
+            await this.getData();
+        },
+        toggle(index) {
+            this.openIndex = this.openIndex === index ? null : index
+        },
+        onEnter(el) {
+            el.style.height = '0'
+            el.style.opacity = '0'
+            requestAnimationFrame(() => {
+                el.style.transition = 'all 0.3s ease'
+                el.style.height = el.scrollHeight + 'px'
+                el.style.opacity = '1'
+            })
+        },
+        onLeave(el) {
+            el.style.height = el.scrollHeight + 'px'
+            el.style.opacity = '1'
+            requestAnimationFrame(() => {
+                el.style.transition = 'all 0.3s ease'
+                el.style.height = '0'
+                el.style.opacity = '0'
+            })
+        },
+        formatDate(date) {
+            if (!date) return null;
+                const options = { year: "numeric", month: "2-digit", day: "2-digit" };
+                return new Date(date).toLocaleDateString("uk-UA", options);
+            }
+        }
+        
+}
+</script>

package/src/pages/FeedbackPage.vue

@@ -0,0 +1,232 @@
+<template>
+
+<div class="w-full max-w-7xl mx-auto space-y-6">
+     <SettingsTitle :title="$t('feedback.title')" :description="$t('feedback.description')" />
+     <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">
+            <TableCellsMerge class="text-emerald-500 mr-2"/>
+            {{ $t('feedback.title') }}
+        </h3>
+    </div>
+    <div class="p-6 space-y-4">
+        <div class="flex justify-between">
+            <VsFilter
+            :schema="filterScheme"
+            view="inline" 
+            @change="handleChange"
+            />
+        </div>
+         <div class="overflow-x-auto" v-if="feedback?.length">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-100">
+                    <tr>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">№</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ $t('feedback.table.userName') }}</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ $t('feedback.table.email') }}</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ $t('feedback.table.cdate') }}</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ $t('feedback.table.phone') }}</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700"></th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200" v-for="(feedback, index) in feedback" :key="feedback?.message_id">
+
+                    <tr  class="cursor-pointer dark:text-white" @click="toggle(feedback?.message_id)">
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{ feedback?.num }}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{feedback?.user_name}}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{ feedback?.email }}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{ formatDate(feedback?.created_at) }}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{feedback?.phone}}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">
+                            <div>
+                                <ArrowUp v-if="openIndex === feedback?.message_id"/>
+                                <ArrowDown v-else/>
+                            </div>
+                        </td>
+                    </tr>
+                    <Transition name="collapse" @enter="onEnter" @leave="onLeave">
+                    <tr v-show="openIndex === feedback?.message_id">
+                        <td colspan="6" class="bg-gray-50 px-4 py-3 text-sm text-gray-700 dark:text-slate-300">
+                        <div ref="content" class="transition-all duration-300 ease-in-out space-y-2">
+
+                            <div v-if="feedback?.message_text">
+                            <b>{{ $t('feedback.table.messageText') }}:</b>
+                            <p class="whitespace-pre-line mt-1">{{ feedback.message_text }}</p>
+                            </div>
+
+                            <div v-if="feedback?.feedback_type">
+                            <b>{{ $t('feedback.table.feedbackType') }}:</b>
+                            <span>{{ feedback.feedback_type }}</span>
+                            </div>
+
+                            <div v-if="feedback?.telegram_link">
+                                <b>Telegram:</b>
+                                <a :href="feedback.telegram_link" class="text-blue-500 underline " target="_blank">{{ feedback.telegram_link }}</a>
+                            </div>
+
+                            <div v-if="feedback?.linkedin_link">
+                                <b>LinkedIn:</b>
+                                <a :href="feedback.linkedin_link" class="text-blue-500 underline " target="_blank">{{ feedback.linkedin_link }}</a>
+                            </div>
+
+                            <div v-if="feedback?.portfolio_link">
+                                <b>{{ $t('feedback.table.portfolioLink') }}:</b>
+                                <a :href="feedback.portfolio_link" class="text-blue-500 underline " target="_blank">{{ feedback.portfolio_link }}</a>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    </Transition>
+                </tbody>
+            </table>
+        </div>
+        <div class='bg-white dark:bg-slate-800 backdrop-blur-sm0 text-center p-6 rounded-xl' v-else>
+            <h3 class='text-lg font-semibold'>{{ $t('feedback.table.noFeedback') }}</h3>
+        </div>
+
+        <div class="my-5 pr-2">
+            <div class="paginationWrapper relative flex justify-center">
+                <VsPagination
+                :total
+                :maxPages="6"
+                :defaultPage="page"
+                :pageSize="limit"
+                :goTo="false"
+                size="medium"
+                backgroundColor="#e5e7eb"
+                :borderedCellSelected="true"
+                :pageSizes="[16, 32, 48]"
+                @pageChange="handlePageChange"
+                @pageSizeChange="changeLimit"
+                />
+            </div>
+        </div>
+
+    </div>
+ </div>
+ </div>
+</template>
+<script>
+import SettingsTitle from '@/components/settings/SettingsTitle.vue';
+import {
+    TableCellsMerge,
+    ArrowDown,
+    ArrowUp,
+    ArrowRightFromLine,
+} from "lucide-vue-next";
+import VsFilter from '@opengis/filter';
+
+export default {
+    components: {
+        SettingsTitle,
+        TableCellsMerge,
+        ArrowDown,
+        ArrowUp,
+        ArrowRightFromLine,
+        VsFilter
+    },
+    data() { 
+        return {
+            feedback: null,
+            total: 0,
+            openIndex: null,
+            limit: 16,
+            page: 1,
+            filterValue: '',
+            filterScheme: [],
+        }
+    },
+    async created() {   
+        this.$router.replace({ 
+                    query: { page: 1 } 
+                })
+        await this.getData();
+    },
+    methods: {
+        async getData() { 
+            try {
+                const response = await fetch(`/api/feedback?limit=${this.limit}&page=${this.page}${(this.filterValue ==='no-url') ?  '':`&filter=${this.filterValue}`}`);
+                const data = await response.json();
+                this.feedback = data?.rows;
+                this.total = data?.total;
+                
+                // Clean filter schema to only include valid IFilterItem properties
+                const cleanFilters = (data?.filters || []).map((filter) => {
+                    const { extra, title, ...cleanFilter } = filter;
+                    return cleanFilter;
+                });
+                this.filterScheme = cleanFilters;
+            } catch (err) { 
+                console.error(err.toString())
+            }
+        },
+        async handleChange(filters) {
+            const filterStr = Object.entries(filters?.data)
+                .filter(([, v]) => v != null)
+                .map(([key, val]) => `${key}=${val}`)
+                .join('|');
+
+            this.filterValue = filterStr;
+            
+            if (this.filterValue ==='no-url') { 
+                this.$router.replace({ 
+                    query: { page: 1 } 
+                })
+            } else { 
+                this.$router.replace({ 
+                    query: { filter:this.filterValue, page: 1 } 
+                })
+               
+            };
+            this.page = 1;
+            await this.getData();
+        },
+         async handlePageChange(page) {
+             this.page = page;
+            if (this.filterValue==='no-url' || !this.filterValue) { 
+                this.$router.replace({ 
+                    query: { page } 
+                })
+            } else { 
+                this.$router.replace({ 
+                    query: { filter:this.filterValue, page} 
+                })
+               
+            }
+            await this.getData();
+        },
+        async changeLimit(limit) {
+            this.limit = limit;
+            this.page = 1;
+            await this.getData();
+        },
+        toggle(index) {
+            this.openIndex = this.openIndex === index ? null : index
+        },
+        onEnter(el) {
+            el.style.height = '0'
+            el.style.opacity = '0'
+            requestAnimationFrame(() => {
+                el.style.transition = 'all 0.3s ease'
+                el.style.height = el.scrollHeight + 'px'
+                el.style.opacity = '1'
+            })
+        },
+        onLeave(el) {
+            el.style.height = el.scrollHeight + 'px'
+            el.style.opacity = '1'
+            requestAnimationFrame(() => {
+                el.style.transition = 'all 0.3s ease'
+                el.style.height = '0'
+                el.style.opacity = '0'
+            })
+        },
+        formatDate(date) {
+            if (!date) return null;
+                const options = { year: "numeric", month: "2-digit", day: "2-digit" };
+                return new Date(date).toLocaleDateString("uk-UA", options);
+            }
+    }
+        
+}
+</script>