@opengis/cms 0.0.21 → 0.0.22

package/src/pages/settings/Logs.vue

@@ -0,0 +1,260 @@
+<template>
+
+ <div class="w-full max-w-7xl mx-auto space-y-6">
+     <SettingsTitle :title="$t('settings.logs.title')" :description="$t('settings.logs.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('settings.logs.title') }}
+        </h3>
+    </div>
+    <div class="p-6 space-y-4">
+        <div class="flex justify-between">
+            <VsFilter
+                :schema="filterScheme"
+                view="inline" 
+                @change="handleChange"
+            />
+            <button
+            v-if="logs?.length"
+            @click="exportToCSV"
+            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  bg-emerald-600 hover:bg-emerald-700">Експорт в CSV</button>
+        </div>
+         <div class="overflow-x-auto" v-if="logs?.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('settings.logs.table.objectId') }}</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ $t('settings.logs.table.dateTime') }}</th>
+                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ $t('settings.logs.table.changeType') }}</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="(log, index) in logs" :key="log?.change_id">
+
+                    <tr  class="cursor-pointer dark:text-white" :class="[log?.change_type == 'DELETE'?'pointer-events-none':'']" @click="toggle(log?.change_id)">
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{ log?.num }}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{ log?.entity_id }}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{ formatDateTime(log?.cdate) }}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">{{log?.change_type}}</td>
+                        <td class="px-4 py-2 text-sm text-gray-800 dark:text-white">
+                            <div v-if="log?.change_type !== 'DELETE'">
+                                <ArrowUp v-if="openIndex === log?.change_id"/>
+                                <ArrowDown v-else/>
+                            </div>
+                        </td>
+                    </tr>
+                    <Transition
+                    name="collapse"
+                    @enter="onEnter"
+                    @leave="onLeave"
+                    >
+                    <tr v-show="openIndex === log?.change_id && log?.change_type !== 'DELETE'">
+                        <td colspan="5" class="bg-gray-50 px-4 py-3 text-sm text-gray-600 overflow-hidden">
+                        <div ref="content" class="transition-all duration-300 ease-in-out">
+                            <p v-for="(col,index) in log?.data_log" :key="col?.change_data_id">
+                                <span v-if="col?.value_new !== col?.value_old">
+                                    <div class="flex flex-1 gap-2">
+                                        <div><strong>{{ index+1 }}. {{ col?.entity_key }}:</strong></div> 
+                                        <div v-if="log?.change_type === 'UPDATE'" class="flex gap-1">{{ col?.value_old }} <ArrowRightFromLine class="w-[16px] h-[16px]"/> {{ col?.value_new }}</div>
+                                        <div v-if="log?.change_type === 'INSERT'" class="flex">{{ col?.value_new }}</div>
+                                    </div>
+                                </span>
+                            </p>
+                        </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('settings.logs.table.noLogs') }}</h3>
+        </div>
+
+        <div class="my-5 pr-2" v-if="total !== null && total > 0">
+            <div class="paginationWrapper relative flex justify-center items-center gap-4" >
+                <button
+                    @click="handlePreviousPage"
+                    :disabled="page === 1"
+                    class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors border shadow-sm rounded-md text-xs h-8 w-8 p-0 bg-white border-slate-300 text-slate-600
+                     disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed
+                     hover:text-accent-foreground hover:bg-slate-50
+                     dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600"
+                >
+                    <ChevronLeft class="w-5 h-5" />
+                </button>
+                <button
+                    @click="handleNextPage"
+                    :disabled="page >= totalPages"
+                    class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors border shadow-sm rounded-md text-xs h-8 w-8 p-0 bg-white border-slate-300 text-slate-600
+                     disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed
+                     hover:text-accent-foreground hover:bg-slate-50
+                     dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600"
+                >
+                    <ChevronRight class="w-5 h-5" />
+                </button>
+            </div>
+        </div>
+
+    </div>
+ </div>
+ </div>
+</template>
+<script>
+import { useRoute } from 'vue-router'
+import SettingsTitle from '@/components/settings/SettingsTitle.vue';
+import {
+    TableCellsMerge,
+    ArrowDown,
+    ArrowUp,
+    ArrowRightFromLine,
+    ChevronLeft,
+    ChevronRight,
+} from "lucide-vue-next";
+import VsFilter from '@opengis/filter';
+
+export default {
+    components: {
+        SettingsTitle,
+        TableCellsMerge, 
+        ArrowDown,
+        ArrowUp,
+        ArrowRightFromLine,
+        ChevronLeft,
+        ChevronRight,
+        VsFilter
+    },
+    data() { 
+        return {
+            logs: null,
+            total: null,
+            openIndex: null,
+            limit: 16,
+            page: 1,
+            filterValue: '',
+            filterScheme: [],
+        }
+    },
+    computed: {
+        totalPages() {
+            return Math.ceil(this.total / this.limit);
+        }
+    },
+    async created() {   
+        /*this.route = useRoute()
+        this.filterValue = this.route.query?.filter || '';*/
+        this.$router.replace({ 
+                    query: { page: 1 } 
+                })
+        await this.getData();
+    },
+    methods: {
+        async getData() { 
+            try {
+                const response = await fetch(`/api/user-logs?limit=${this.limit}&page=${this.page}${(this.filterValue ==='no-url') ?  '':`&filter=${this.filterValue}`}`);
+                const data = await response.json();
+                this.logs = data?.rows;
+                this.total = data?.total;
+                this.filterScheme = data?.filters;
+            } catch (err) { 
+                console.error(err.toString())
+            }
+        },
+        async exportToCSV() {
+            window.open(`/api/export-user-logs${(this.filterValue ==='no-url') ?  '':`?filter=${this.filterValue}`}`, '_blank');
+            /*try {   
+                 await fetch(`/api/export-user-logs${(this.filterValue ==='no-url') ?  '':`?filter=${this.filterValue}`}`);
+
+            } catch (err) { 
+                console.error(err.toString())
+            }*/
+        },
+        async handleChange(event) { 
+            const filterStr = Object.entries(event?.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 handlePreviousPage() {
+            if (this.page > 1) {
+                await this.handlePageChange(this.page - 1);
+            }
+        },
+        async handleNextPage() {
+            if (this.page < this.totalPages) {
+                await this.handlePageChange(this.page + 1);
+            }
+        },
+        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'
+            })
+        },
+        formatDateTime(dateTimeString) {
+            if (!dateTimeString) return ''
+
+            const [datePart, timePart] = dateTimeString.split(' ')
+            if (!datePart || !timePart) return dateTimeString
+
+            const [year, month, day] = datePart.split('-')
+            const [hour, minute, secondWithMs] = timePart.split(':')
+            const second = secondWithMs?.slice(0, 2)
+
+            return `${day}.${month}.${year} ${hour}:${minute}:${second}`
+        }
+    }
+        
+}
+</script>

package/src/pages/settings/PermissionsPage.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="space-y-6 w-full max-w-7xl mx-auto">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+      <h1 class="text-3xl font-bold text-slate-800 dark:text-white mb-2">{{$t('settings.permissions.title')}}</h1>
+      <button
+        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"
+      >
+        <Plus class="w-4 h-4 mr-2" />
+        {{$t('settings.permissions.inviteUser')}}
+      </button>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
+      <div class="md:col-span-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
+          <div class="flex items-center">
+            <div class="relative flex-1">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Search class="h-5 w-5 text-gray-400" />
+              </div>
+              <input
+                v-model="searchQuery"
+                type="text"
+                class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-sky-500 focus:border-sky-500 text-gray-900 dark:text-white sm:text-sm transition-colors"
+                :placeholder="$t('settings.permissions.searchUsers')"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead class="bg-gray-50 dark:bg-gray-750">
+              <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {{$t('settings.permissions.user')}}
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {{$t('settings.permissions.role')}}
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {{$t('settings.permissions.lastActive')}}
+                </th>
+                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {{$t('settings.permissions.actions')}}
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              <tr v-for="user in filteredUsers" :key="user.id" class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="h-10 w-10 rounded-full bg-sky-100 dark:bg-sky-900 flex items-center justify-center text-sky-600 dark:text-sky-300 font-medium text-sm">
+                      {{user.name.charAt(0).toUpperCase()}}
+                    </div>
+                    <div class="ml-4">
+                      <div class="text-sm font-medium text-gray-900 dark:text-white">{{user.name}}</div>
+                      <div class="text-sm text-gray-500 dark:text-gray-400">{{user.email}}</div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span :class="['px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full', getRoleBadgeColor(user.role)]">
+                    {{$t('settings.permissions.roles.' + user.role)}}
+                  </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                  {{user.lastActive}}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <button class="text-sky-600 hover:text-sky-900 dark:text-sky-400 dark:hover:text-sky-300 mr-3 transition-colors">
+                    {{$t('settings.permissions.edit')}}
+                  </button>
+                  <button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 transition-colors">
+                    {{$t('settings.permissions.remove')}}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="md:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
+          <h2 class="text-lg font-medium text-gray-900 dark:text-white">{{$t('settings.permissions.rolePermissions')}}</h2>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            {{$t('settings.permissions.rolePermissionsDescription')}}
+          </p>
+        </div>
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead class="bg-gray-50 dark:bg-gray-750">
+              <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {{$t('settings.permissions.permission')}}
+                </th>
+                <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {{$t('settings.permissions.admin')}}
+                </th>
+                <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {{$t('settings.permissions.editor')}}
+                </th>
+                <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {{$t('settings.permissions.author')}}
+                </th>
+                <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {{$t('settings.permissions.viewer')}}
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              <tr v-for="(permission, index) in permissions" :key="index" class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                <td class="px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
+                  {{permission.name}}
+                </td>
+                <td class="px-6 py-3 whitespace-nowrap text-center">
+                  <Check v-if="permission.admin" class="mx-auto h-5 w-5 text-green-500" />
+                  <X v-else class="mx-auto h-5 w-5 text-red-500" />
+                </td>
+                <td class="px-6 py-3 whitespace-nowrap text-center">
+                  <Check v-if="permission.editor" class="mx-auto h-5 w-5 text-green-500" />
+                  <X v-else class="mx-auto h-5 w-5 text-red-500" />
+                </td>
+                <td class="px-6 py-3 whitespace-nowrap text-center">
+                  <Check v-if="permission.author" class="mx-auto h-5 w-5 text-green-500" />
+                  <X v-else class="mx-auto h-5 w-5 text-red-500" />
+                </td>
+                <td class="px-6 py-3 whitespace-nowrap text-center">
+                  <Check v-if="permission.viewer" class="mx-auto h-5 w-5 text-green-500" />
+                  <X v-else class="mx-auto h-5 w-5 text-red-500" />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
+          <button class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-colors w-full">
+            {{$t('settings.permissions.customizePermissions')}}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { Plus, Search, Check, X } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
+import { useHead } from '@vueuse/head';
+import { notify } from '@opengis/core'
+const { t } = useI18n();
+useHead({
+  title: () => t('settings.permissions.title') + ' | CMS'
+});
+
+
+const fetchPermissions = async () => {
+  let userId = null;
+
+  try {
+    const response = await fetch('/user');
+    const data = await response.json();
+    userId = data?.user?.uid;
+  } catch (error) {
+    console.error(error);
+    notify({
+      title: t('settings.permissions.error'),
+      message: t('settings.permissions.errorMessage'),
+      type: 'error',
+    });
+  }
+
+  try {
+    const response = await fetch(`/api/cms-permissions/${userId}`);
+    const data = await response.json();
+    permissions.value = data?.permissions || [];
+  } catch (error) {
+    console.error(error);
+    notify({
+      title: t('settings.permissions.error'),
+      message: t('settings.permissions.errorMessage'),
+      type: 'error',
+    });
+  }
+};
+
+const searchQuery = ref('');
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  lastActive: string;
+}
+
+const users = ref<User[]>([
+  // { id: '1', name: 'Alex Morgan', email: 'alex@example.com', role: 'admin', lastActive: t('table.time.hoursAgo', { count: 2 }) },
+  // { id: '2', name: 'Jamie Chen', email: 'jamie@example.com', role: 'editor', lastActive: t('table.time.hoursAgo', { count: 4 }) },
+  // { id: '3', name: 'Sam Wilson', email: 'sam@example.com', role: 'author', lastActive: t('table.time.dayAgo') },
+  // { id: '4', name: 'Riley Thompson', email: 'riley@example.com', role: 'viewer', lastActive: t('table.time.daysAgo', { count: 3 }) },
+  // { id: '5', name: 'Jordan Lee', email: 'jordan@example.com', role: 'editor', lastActive: t('table.time.weekAgo', { count: 1 }) },
+]);
+
+const permissions = ref([
+  { name: t('settings.permissions.createContent'), admin: true, editor: true, author: true, viewer: false },
+  { name: t('settings.permissions.editContent'), admin: true, editor: true, author: true, viewer: false },
+  { name: t('settings.permissions.deleteContent'), admin: true, editor: true, author: false, viewer: false },
+  { name: t('settings.permissions.publishContent'), admin: true, editor: true, author: false, viewer: false },
+  { name: t('settings.permissions.manageMedia'), admin: true, editor: true, author: true, viewer: false },
+  { name: t('settings.permissions.manageUsers'), admin: true, editor: false, author: false, viewer: false },
+  { name: t('settings.permissions.manageSettings'), admin: true, editor: false, author: false, viewer: false },
+]);
+
+const filteredUsers = computed(() => {
+  if (!searchQuery.value) return users.value;
+  return users.value.filter(user => user.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || user.email.toLowerCase().includes(searchQuery.value.toLowerCase()));
+});
+
+function getRoleBadgeColor(role: string) {
+  switch (role) {
+    case 'admin':
+      return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
+    case 'editor':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+    case 'author':
+      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+    case 'viewer':
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
+  }
+}
+
+onMounted(fetchPermissions);
+</script>