@ozdao/prometheus-framework 0.2.156 → 0.2.158

package/src/modules/pages/views/components/blocks/CardPage.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div :class="$attrs.class">
+      <!-- {{ page.url }} -->
+      <div class="flex flex-nowrap gap-thin card-page-title">
+        <router-link
+          :to="router.resolve({ name: 'Page', params: { url: page.url.split('/') } }).href" 
+           class="
+            z-index-2
+            cursor-pointer
+            mn-r-auto
+            t-truncate
+          "
+          :class="{
+            't-main': $route.params.url && page.url === joinArrayToUrl($route.params.url)
+          }"
+        >
+          {{ page.name }}
+        </router-link>
+
+        <router-link
+          v-if="hasAdminRights"
+          :to="router.resolve({ name: 'Backoffice Pages Edit', params: { url: page.url.split('/') } }).href" 
+          class="
+            z-index-2
+            cursor-pointer 
+            card-page-actions
+            radius-extra pd-micro bg-second
+          "
+        >
+          <IconEdit
+            class="i-small"
+            classes="fill-white"
+          />
+        </router-link>
+
+        <button
+           v-if="hasAdminRights"
+          @click="createPage(page)"
+          class="
+            z-index-2
+            cursor-pointer 
+            card-page-actions
+            radius-extra pd-micro bg-second
+          "
+        >
+          <IconAdd
+            class="i-small"
+            :fill="'white'"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div v-if="page.children && page.children.length > 0 && page.children[0].url && showChildren" class="mn-l-small br-t br-solid br-black-transp-10">
+      <CardPage 
+        @createPage="createPage" 
+        v-for="childPage in page.children" 
+        :key="childPage.url" 
+        :page="childPage" 
+        :hasAdminRights="hasAdminRights"
+        :class="$attrs.class"
+      />
+    </div>
+    
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  import IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'
+  import IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue'
+
+  import Button  from '@pf/src/components/Button/Button.vue'
+  import Field from "@pf/src/components/Field/Field.vue"; 
+
+  import { useRouter } from 'vue-router'
+  
+  const router = useRouter()
+
+  const props = defineProps({
+    page: {
+      type: Object,
+      required: true
+    },
+    hasAdminRights: {
+      type: Boolean,
+      default: false
+    },
+    showChildren: {
+      type: Boolean,
+      default: true
+    }
+  })
+
+  const emits = defineEmits([
+    'createPage'
+  ])
+
+  const newPage = ref({
+    show: false,
+    name: null
+  })
+
+  async function createPage(page) {
+    emits('createPage', page)
+  }
+</script>
+
+<style lang="scss">
+.card-page-title {
+  .card-page-actions {
+    display: none;
+  }
+
+  &:hover {
+    .card-page-actions {
+      display: block;
+    }
+  }
+}
+</style>

package/src/modules/pages/views/components/pages/Page.vue

@@ -0,0 +1,173 @@
+<template>
+      
+  <div v-if="page && page.content"  style="overflow: clip" class=" bg-light pos-relative"> 
+    
+    <div class="pd-medium pos-sticky mobile-only  z-index-1 pos-t-0 bg-light w-100 br-b br-solid br-black-transp-10">
+      <button @click="showMenu" class="cursor-pointer">
+        {{ isMenuOpen === false ? 'Show Menu' : 'Hide Menu' }}
+      </button>
+    </div>
+
+    <div  v-if="isMenuOpen" class="z-index-0  pos-relative">
+      <ul 
+        class="transition-ease-in-out w-100  bg-light"
+      >
+        <CardPage 
+          :page="pageParent" 
+          :hasAdminRights="hasAdminRights"
+          class="pd-thin"
+        />
+      </ul>  
+    </div>
+
+    <div  v-if="!isMenuOpen" class="cols-2-1_3 h-100 bg-light z-index-0 pos-relative">
+
+      <div v-if="pageParent.url !== page.url" class="desktop-only h-100 bg-white o-scroll z-index-0  pos-relative">
+        <ul 
+          class="transition-ease-in-out w-100  bg-light"
+        >
+          <CardPage 
+            :page="pageParent" 
+            :hasAdminRights="hasAdminRights"
+            class="bg-white pd-thin"
+          />
+        </ul>  
+      </div>
+
+      <div class="o-scroll pd-medium">
+        <Viewer
+          :content="page.content"
+          class=""
+        />
+
+        <div class="gap-thin cols-2">
+          <div  v-if="navigationPages.previousPage" class="bg-white pd-medium mn-b-thin radius-semi ">
+            <h4 class="mn-b-small" >Read Previous</h4>
+
+            <CardPage 
+              :page="navigationPages.previousPage" 
+              :showChildren="false"
+              class="h3 t-main bg-white mn-b-thin radius-semi"
+            />
+          </div>
+
+          <div v-if="navigationPages.children.length > 0" class="bg-white pd-medium mn-b-thin radius-semi ">
+            <h4 class="mn-b-small pd-micro ">Table of Contents</h4>
+            <CardPage 
+              v-for="childPage in navigationPages.children" 
+              :key="childPage.id"
+              :page="childPage" 
+              class="bg-white pd-micro  radius-semi"
+            />
+          </div>
+
+          <div v-if="navigationPages.nextPage" class="bg-white pd-medium mn-b-thin radius-semi">
+            <h4 class="mn-b-small" >Read Next</h4>
+            <CardPage 
+              :page="navigationPages.nextPage" 
+              class="h3 t-main  bg-white mn-b-thin radius-semi"
+              :showChildren="false"
+            />
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+  // Import libs
+  import { computed, onMounted, ref, onServerPrefetch } from 'vue'
+
+  import { useStore } from '@/store'
+  import { useRoute } from 'vue-router'
+  import { useI18n }    from 'vue-i18n'
+
+  import Viewer from '@pf/src/modules/constructor/components/sections/Viewer.vue';
+
+  import CardPage from '../blocks/CardPage.vue'
+
+  import * as pages from '../../store/pages';
+  import * as auth from '@pf/src/modules/auth/store/auth'
+
+  import { useGlobalMixins } from "@pf/src/modules/globals/mixins/mixins.js"
+
+  const isMenuOpen = ref(false)
+
+  function showMenu () {
+    isMenuOpen.value = !isMenuOpen.value
+  }
+
+  function flattenTree(tree) {
+    const pages = [];
+
+    function recursiveFlatten(nodes, parent = null) {
+      for (const node of nodes) {
+        pages.push({ ...node, parent }); // Сохраняем родителя для каждого узла
+        if (node.children.length > 0) {
+          recursiveFlatten(node.children, node);
+        }
+      }
+    }
+
+    recursiveFlatten(tree.children);
+    return pages;
+  }
+
+  // Получаем плоский список всех страниц
+  const allPages = computed(() => flattenTree(pageParent.value));
+
+  // Вычисляемая функция для нахождения предыдущей и следующей страниц
+  const navigationPages = computed(() => {
+    // Если текущая страница - рутовая
+    if (page.value._id === pageParent.value._id) {
+      return { children: page.value.children, previousPage: null, nextPage: null };
+    }
+
+    const currentIndex = allPages.value.findIndex(p => p._id === page.value._id);
+    
+    const previousPage = currentIndex > 0 
+      ? allPages.value[currentIndex - 1] 
+      : pageParent.value;  // Если нет предыдущего, берем родителя
+    
+    const nextPage = currentIndex < allPages.value.length - 1 
+      ? allPages.value[currentIndex + 1] 
+      : null;
+
+    return { previousPage, nextPage, children: [] };
+  });
+
+  const { 
+    normalizeUrlParam, 
+    joinArrayToUrl,
+    isAdmin
+  } = useGlobalMixins()
+
+  const hasAdminRights = computed(() => {
+    return isAdmin(auth.state.access.roles)
+  })
+
+  const { t, locale } = useI18n()
+
+  const store = useStore()
+  const route = useRoute()
+
+  const pageParent = ref(null)
+  const page = ref(null)
+
+  onMounted(async () => {
+    let urlParent = route.params.url
+    if (urlParent.length > 0) urlParent = urlParent[0]
+
+    pageParent.value = await pages.actions.read({url: urlParent})
+
+    let url = route.params.url
+    if (url.length > 0) url = joinArrayToUrl(url)
+    
+    page.value = await pages.actions.read({url: url})  
+  })
+</script>
+
+<style lang="scss">
+</style>

package/src/modules/pages/views/components/pages/PageEdit.vue

@@ -0,0 +1,121 @@
+<template>
+  <!-- Toolbar -->
+  <div v-if="page">
+    <section v-if="page" class="w-100 mn-b-thin bg-light pd-big radius-semi">
+      <Constructor 
+        :content="page.content"
+        @update="update => page.content = update"
+      />
+    </section>
+   
+    <section v-if="page" class="pos-sticky pos-l-0 pos-b-0 w-100 ">
+      <div class="pd-thin radius-big  bg-main w-100 flex-nowrap flex">
+  
+       <Button 
+        v-if="route.params.url"
+        :submit="() => onDelete()" 
+        :callback="() => deletePageCallback()" 
+        class="t-nowrap bg-second w-max"
+      >
+        Delete
+      </Button>
+
+       <Button 
+        :submit="() => onSubmit()" 
+        class="mn-l-auto t-nowrap t-white bg-black w-max"
+      >
+        Save
+      </Button>
+     </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useGlobalMixins } from "@pf/src/modules/globals/mixins/mixins.js"
+
+const { 
+  normalizeUrlParam, 
+  joinArrayToUrl
+} = useGlobalMixins()
+
+
+import { state, actions } from '../../store/pages'
+
+import Button  from '@pf/src/components/Button/Button.vue'
+import Field from "@pf/src/components/Field/Field.vue"; 
+import CardPage from '../blocks/CardPage.vue'
+import Block from '@pf/src/components/Block/Block.vue';
+
+import Constructor from '@pf/src/modules/constructor/components/sections/Constructor.vue';
+
+import IconDelete from '@pf/src/modules/icons/navigation/IconDelete.vue'
+
+// import EditCategories from '@pf/src/modules/products/components/blocks/EditCategories.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const page = ref(null)
+
+onMounted(async () => {
+  let url
+
+  if (route.params.url) {
+    url = route.params.url
+
+    if (url.length > 0) url = joinArrayToUrl(url)
+  }
+
+  if (url) {
+    try {
+      page.value = await actions.read({url: url})
+    } catch (error) {
+      console.log('error', error)
+    }
+  } else {
+    page.value = state.current
+  }
+})
+
+async function onSubmit() {
+  page.value.name = page.value.content[0].content
+  if (!page.value.url) page.value.url = normalizeUrlParam(page.value.name)
+
+  try {
+    if (route.params.url) {
+      await actions.update(page.value)
+    } else {
+      await actions.create(page.value)
+    }
+  } catch (error) {
+    console.log('error', error)
+  }
+
+  router.push(router.resolve({ name: 'Backoffice Pages Edit', params: { url: page.value.url.split('/') } }).href)
+
+}
+
+function createPageCallback() {
+  router.push(router.resolve({ name: 'Backoffice Pages Edit', params: { url: newPage.value.url.split('/') } }).href)
+}
+
+async function onDelete() {
+  try {
+    await actions.delete(page.value)
+  } catch (error) {
+    console.log('error', error)
+  }
+}
+
+function deletePageCallback() {
+  if (page.value.parent) {
+    router.push(router.resolve({ name: 'Backoffice Pages Edit', params: { url: page.value.parent.url.split('/') } }).href)
+  } else {
+    router.push({ name: 'Backoffice Pages'})
+  }
+}
+</script>

package/src/modules/pages/views/components/pages/Pages.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <SectionPageTitle
+      title="Pages"
+      :actions="[
+        { to: { name: 'Backoffice Pages Add'}, label: 'Create Page' }
+      ]"
+      class="mn-b-small bg-light bg-light radius-big"
+    />
+
+    <Block
+      v-if="pagesAll"
+      class="mn-b-thin cols-1 gap-thin"
+    >
+      <!-- Objects -->
+      <CardPage v-for="page in pagesAll" :page="page" :hasAdminRights="hasAdminRights" class="bg-white pd-thin radius-small"/>
+    </Block>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, ref, toRefs, computed } from 'vue'
+  
+  import { useRoute,useRouter } from 'vue-router'
+
+  import Block from '@pf/src/components/Block/Block.vue';
+  import SectionPageTitle from '@pf/src/modules/globals/components/sections/SectionPageTitle.vue'
+
+  import CardPage from '../blocks/CardPage.vue'
+
+  import * as pages from '../../store/pages.js'
+  import * as auth from '@pf/src/modules/auth/store/auth'
+
+  import { useGlobalMixins } from "@pf/src/modules/globals/mixins/mixins.js"
+
+  const { 
+    normalizeUrlParam, 
+    joinArrayToUrl,
+    isAdmin
+  } = useGlobalMixins()
+
+  const hasAdminRights = computed(() => {
+    return isAdmin(auth.state.access.roles)
+  })
+
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const pagesAll = ref(null)
+
+  onMounted(async () => {
+    pagesAll.value = await pages.actions.read()
+  })
+
+</script>
+
+<style lang="scss">
+  
+</style>

package/src/modules/pages/views/components/partials/SidebarPages.vue

@@ -0,0 +1,112 @@
+<template>
+  <Block
+    v-if="pagesAll"
+    class="mn-b-thin pd-small radius-semi cols-1 gap-thin"
+  >
+  
+    <CardPage 
+      v-for="page in pagesAll" 
+      :page="page" 
+      class="radius-small pd-thin"
+      :hasAdminRights="hasAdminRights"
+      @createPage="openPulicationPopup"
+    />
+
+    <Popup  
+      @close-popup="closePublicationPopup" 
+      :isPopupOpen="isPublicationPopup"
+      class="w-m-33r t-left pd-big bg-white radius-big"
+    >
+      <div class="h-max-20r o-scroll">
+        <Constructor 
+          :content="newPage.content"
+          @update="update => newPage.content = update"
+        />
+      </div>
+      <Button 
+        :submit="() => onSubmit()" 
+        class="mn-l-auto t-nowrap t-white bg-black w-max"
+      >
+        Save
+      </Button>
+    </Popup>
+  </Block>
+</template>
+
+<script setup>
+  import { onMounted, ref, toRefs, computed } from 'vue'
+  
+  import { useRoute,useRouter } from 'vue-router'
+
+  import Block from '@pf/src/components/Block/Block.vue';
+  import Popup from '@pf/src/components/Popup/Popup.vue'
+  import Button from '@pf/src/components/Button/Button.vue'
+
+  import Constructor from '@pf/src/modules/constructor/components/sections/Constructor.vue';
+
+  import CardPage from '../blocks/CardPage.vue'
+
+  import * as pages from '../../store/pages.js'
+  import * as auth from '@pf/src/modules/auth/store/auth'
+
+  import { useGlobalMixins } from "@pf/src/modules/globals/mixins/mixins.js"
+
+  const { 
+    normalizeUrlParam, 
+    joinArrayToUrl,
+    isAdmin
+  } = useGlobalMixins()
+
+  const hasAdminRights = computed(() => {
+    return isAdmin(auth.state.access.roles)
+  })
+ 
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const pagesAll = ref(null)
+
+  onMounted(async () => {
+    pagesAll.value = await pages.actions.read()
+  })
+  // /////////////////////////////////////////
+  // Publication Popup
+  // /////////////////////////////////////////
+  const newPage = ref({
+    url: null,
+    name: null,
+    parent: null,
+    content: []
+  })
+
+  const isPublicationPopup = ref(false)
+
+  function openPulicationPopup(page) {
+    isPublicationPopup.value = true;
+
+    newPage.value.parent = page
+  }
+  function closePublicationPopup() {
+    isPublicationPopup.value = false;
+
+    newPage.value = {
+      url: null,
+      name: null,
+      parent: null,
+      content: []
+    }
+  }
+
+  async function onSubmit() {
+    newPage.value.name = newPage.value.content[0].content
+    newPage.value.url = newPage.value.parent.url + '/' + normalizeUrlParam(newPage.value.name)
+    newPage.value.parent = newPage.value.parent._id
+  
+    await pages.actions.create(newPage.value)
+
+    router.push(router.resolve({ name: 'Backoffice Pages Edit', params: { url: newPage.value.url.split('/') } }).href)
+  }
+
+
+</script>

package/src/modules/pages/views/router/pages.backoffice.router.js

@@ -0,0 +1,46 @@
+import layoutEmpty from '@pf/src/modules/globals/components/layouts/Empty.vue';
+import Sidebar from '@pf/src/modules/backoffice/components/partials/Sidebar.vue'
+
+import SidebarPages from '../components/partials/SidebarPages.vue'
+
+const pages = {
+  path: 'pages',
+  component: layoutEmpty,
+  meta: {
+    title: {
+      en: 'Pages',
+      ru: 'Информация'
+    },
+    sidebar: Sidebar
+  },
+  children: [{
+    path: '',
+    name: 'Backoffice Pages',
+    component: () => import(/* webpackChunkName: 'Pages' */ '../components/pages/Pages.vue')
+  },{
+    path: 'add',
+    name: 'Backoffice Pages Add',
+    meta: {
+      title: {
+        en: 'New Page',
+        ru: 'Новая страница'
+      },
+      sidebar: SidebarPages
+    },
+    component: () => import(/* webpackChunkName: 'PageAdd' */ '../components/pages/PageEdit.vue')
+  },{
+    path: ':url+',
+    name: 'Backoffice Pages Edit',
+    meta: {
+      title: {
+        en: 'Edit Page',
+        ru: 'Редактировать страницу'
+      },
+      sidebar: SidebarPages
+    },
+    component: () => import(/* webpackChunkName: 'PAgeEdit' */ '../components/pages/PageEdit.vue')
+  }]
+}
+
+export default pages;
+

package/src/modules/pages/views/router/pages.router.js

@@ -0,0 +1,25 @@
+import layoutEmpty from '@pf/src/modules/globals/components/layouts/Empty.vue';
+
+const pages = {
+  path: 'pages',
+  component: layoutEmpty,
+  meta: {
+    title: {
+      en: 'Pages',
+      ru: 'Информация'
+    }
+  },
+  children: [{
+    path: ':url+',
+    name: 'Page',
+    meta: {
+      title: {
+        en: 'Page',
+        ru: 'Страница'
+      }
+    },
+    component: () => import(/* webpackChunkName: 'Page' */ '../components/pages/Page.vue')
+  }]
+}
+
+export default pages;