@ozdao/prometheus-framework 0.2.155 → 0.2.157

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -34,9 +34,9 @@
         {{ item.name }}
       </router-link>
 
-      <span v-else>
+      <a v-else>
         {{ item.name }}
-      </span>
+      </a>
 
       <!-- Arrow -->
       <svg 
@@ -54,39 +54,62 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-
+import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import i18n from '@pf/src/modules/globals/localization/vue-i18n'
+import i18n from '@pf/src/modules/globals/localization/vue-i18n';
 
 const route = useRoute();
 const { t, locale } = useI18n();
 
-const breadcrumbs = computed(() => {
-  return route.matched
-    .map((route) => {
-      const title = route.meta?.title;
+function createRoute(array, route) {
+  return array
+    .map(segment => {
+      if (segment.startsWith(':')) {
+        let paramName = segment.replace(/[:?]/g, '');
+        return route.params[paramName] || null;
+      }
+      return segment;
+    })
+    .filter(segment => segment !== null)
+    .join('/');
+}
+
+const breadcrumbs = ref([]);
+
+function updateBreadcrumbs() {
+  breadcrumbs.value = route.matched
+    .map((r) => {
+      const title = r.meta?.title;
       const currentLocale = locale?.value;
     
       const name = title && currentLocale && title[currentLocale];
-      const path = route.path.replace(/:.+?\//g, (match) => '');
-      const isHidden = route.meta?.breadcrumbs?.hidden;
+
+      let path = r.path.split('/');
+      path = createRoute(path, route);
+
+      const isHidden = r.meta?.breadcrumbs?.hidden;
     
       return { name, path, isHidden };
     })
     .filter((breadcrumb) => {
       return breadcrumb.name && !breadcrumb.isHidden;
     });
-});
+}
+
+watch(
+  () => route.matched,
+  () => {
+    updateBreadcrumbs();
+  },
+  { immediate: true }
+);
 </script>
 
-<style lang='scss'>
-  .breadcrumbs { 
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
 
 
+<style lang='scss'>
+  .breadcrumbs { 
     height: 4rem;
 
     // border-bottom: 1px solid rgba(0,0,0,0.1);

package/src/components/Field/Field.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { ref, computed } from 'vue'
+  import { ref, computed, onUpdated, onMounted, nextTick } from 'vue'
 
   const emit = defineEmits(['update:field', 'focus', 'blur']);
 
@@ -19,6 +19,24 @@
     emit('update:field', props.value)
   }
 
+  const textarea = ref(null);
+
+  function resize() {
+    if (textarea.value) textarea.value.style.height = "1rem";
+    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + "px";
+  }
+
+
+  onUpdated(() => {
+   if (props.type === 'textarea') nextTick(() => {  { focus()} })
+    resize()
+  });
+
+  onMounted(() => {
+    if (props.type === 'textarea') nextTick(() => {  { focus()} })
+    resize()
+  });
+
   const text = ref(props.field);
 </script>
 
@@ -56,6 +74,7 @@
       />
       <textarea 
         v-else
+        ref="textarea"
         @input="event => text = emit('update:field', event.target.value)"
         @focus="event => emit('focus', event)"
         @blur="event => emit('blur', event)"
@@ -88,7 +107,7 @@
   </transition>
 </template>
 
-<style lang="scss" >
+<style lang="scss" scoped>
   input, textarea, span {
     line-height: 1;
     color: inherit;

package/src/components/Popup/Popup.vue

@@ -2,10 +2,10 @@
 
 		<transition name="TransitionTranslateY" appear>
 				<teleport to="body" v-if="isPopupOpen">
-					<div v-if="isPopupOpen" key="popup-content" class="pd-small popup-wrapper">
+					<div v-if="isPopupOpen" key="popup-content" class="pd-small z-index-6 popup-wrapper">
 
 						<transition name="TransitionTranslateY" mode="out-in">
-							<section class="pos-relative z-index-6" v-bind="$attrs" :class="$attrs.class">
+							<section class="pos-relative z-index-4" v-bind="$attrs" :class="$attrs.class">
 									<h4 v-if="title" class="mn-b-small">{{title}}</h4>
 									<IconCross :fill="'rgb(var(--white))'" @click="closePopup()" class="cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-medium z-index-5"/>
 									<slot></slot>

package/src/modules/auth/store/auth.js

@@ -107,8 +107,7 @@
     },
 
     async signup(user, type, invite) {
-
-
+      
       const { password, passwordRepeat } = state.user;
 
       console.log(password)

package/src/modules/backoffice/components/layouts/Backoffice.vue

@@ -1,24 +1,11 @@
 <template>
-  <section id="account" class="cols-1">
-    <!-- ---------------------------------------------------------------- -->
-    <!-- 02. Page Tabs  -->
-    <!-- ---------------------------------------------------------------- -->
-    <!-- <div class="pd-medium menu-tabs">
-      <button 
-        @click="$router.push('/account/community')" 
-        :class="{'product-tab-active': $route.path === '/account/community'}" 
-        class="mn-b-small product-tab"
-       >
-        Blog
-      </button>
-
-      <button 
-        @click="$router.push('/account/gallery')" 
-        :class="{'product-tab-active': $route.path === '/account/gallery'}" class="product-tab"
-      >
-        Gallery
-      </button>
-    </div> -->
+  <section id="account" class="gap-thin pd-thin cols-2-1_3">
+    
+    <div v-if="route.meta.sidebar" class="w-100">
+      <transition name="scaleIn" mode="out-in">
+        <component :is="route.meta.sidebar" />
+      </transition>
+    </div>
 
     <div class="w-100">
       <router-view  v-slot="{ Component, route }">
@@ -32,49 +19,36 @@
 </template>
 
 
-<script setup>
-
-
-
+<script setup="props">
+/////////////////////////////
+// COMPONENT DEPENDENCIES
+/////////////////////////////
+import { ref, onMounted } from 'vue';
+/////////////////////////////
+// HELPERS
+/////////////////////////////
+import { useRoute, useRouter } from 'vue-router'
+
+import * as auth  from '@pf/src/modules/auth/store/auth'
+import * as organizations  from '@pf/src/modules/organizations/store/organizations'
+
+const route = useRoute()
+const router = useRouter()
+/////////////////////////////
+// CREATED
+/////////////////////////////
+const props = defineProps({
+  favorites: Array,
+});
+
+const selectedOrganization = ref(null);
+const publics = ref([]);
+/////////////////////////////
+// MOUNTED
+/////////////////////////////
+onMounted(async () =>{
+})
 </script>
 
 <style lang="scss">
-.menu-tabs {
-
-  min-width: 16rem;
-  height: min-content;
-   
-  border-radius: 1rem;
-  background: #f7f7f7;
-
-  .product-tab {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-
-
-
-    background: transparent;
-
-    text-align: left;
-
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-    width: 100%;
-
-    svg { opacity: 0.33; margin-right: 1rem; }
-
-    &:hover {
-      cursor: pointer;
-    }
-    
-    &-active {
-      color: rgb(var(--main));
-      background: white;
-
-      svg { opacity: 1; path { fill: rgb(var(--main));}  }
-    }
-
-  }
-}
 </style>

package/src/modules/backoffice/components/pages/Dashboard.vue

@@ -1,131 +1,8 @@
 <template>
 	<div class="">
-		<h1 class="pd-medium radius-medium bg-light mn-b-small">Welcome to Backoffice2</h1>
+		<h1 class="pd-medium radius-medium bg-light mn-b-small">Welcome to Backoffice</h1>
+		
 		
-		<Menu 
-			class="bg-light mn-b-semi"
-		>
-			<MenuItem 
-		  	@click="router.push({
-		  		name: 'Organization Members'
-		  	})" 
-		  	class="cursor-pointer"
-		  >
-		  	<IconGroups class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-		    <span>
-		    	Members
-		    </span>
-		  </MenuItem>
-
-		  <MenuItem 
-		  	@click="router.push({
-		  		name: 'Backoffice Community'
-		  	})" 
-		  	class="cursor-pointer">
-		    <span>
-		    	Community
-		    </span>
-		  </MenuItem>
-
-		  <MenuItem 
-		  	@click="router.push({
-		  		name: 'Products'
-		  	})" 
-		  	class="cursor-pointer">
-		  	<IconProducts class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-		    <span>
-		    	Products
-		    </span>
-		  </MenuItem>
-
-		  <MenuItem 
-		  	@click="router.push({
-		  		name: 'Leftovers'
-		  	})" 
-		  	class="cursor-pointer">
-		  	<IconLeftovers class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-		    <span>
-		    	Leftovers
-		    </span>
-		  </MenuItem>
-
-		  <MenuItem 
-		  	@click="router.push({
-		  		name: 'Backoffice Orders'
-		  	})" 
-		  	class="cursor-pointer">
-		  	<IconOrders class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-		    <span>
-		    	Orders
-		    </span>
-		  </MenuItem>
-
-		  <MenuItem 
-		  	@click="router.push({
-		  		name: 'Backoffice Gallery'
-		  	})" 
-		  	class="cursor-pointer">
-		  	<IconGallery class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-		    <span>
-		    	Gallery
-		    </span>
-		  </MenuItem>
-		  
-		  <MenuItem 
-		  	@click="router.push({
-		  		name: 'Backoffice Events'
-		  	})" 
-		  	class="cursor-pointer">
-		  	<IconEvents class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
-		    <span>
-		    	Events
-		    </span>
-		  </MenuItem>
-
-		  <MenuItem 
-		  	@click="router.push({
-		  		name: 'Payments'
-		  	})" 
-		  	class="cursor-pointer">
-		    <span>
-		    	Payments
-		    </span>
-		  </MenuItem>
-		</Menu>
-
-		<Menu 
-			class="bg-light"
-		>
-			<MenuItem 
-		  	@click="router.push({
-		  		name: 'Backoffice Organizations'
-		  	})" 
-		  	class="cursor-pointer">
-		    <span>
-		    	Organizations
-		    </span>
-		  </MenuItem>
-
-		  <MenuItem 
-		  	@click="router.push({
-		  		name: 'Backoffice Pages'
-		  	})" 
-		  	class="cursor-pointer">
-		    <span>
-		    	Pages
-		    </span>
-		  </MenuItem>
-
-		  <MenuItem 
-		  	@click="router.push({
-		  		name: 'Backoffice Reports'
-		  	})" 
-		  	class="cursor-pointer">
-		    <span>
-		    	Reports
-		    </span>
-		  </MenuItem>
-		</Menu>
 	</div>
 </template>
 

package/src/modules/backoffice/components/partials/Sidebar.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="">
+    <Menu 
+      class="bg-light mn-b-semi"
+    >
+      <MenuItem 
+        @click="router.push({
+          name: 'Organization Members'
+        })" 
+        class="cursor-pointer"
+      >
+        <IconGroups class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
+        <span>
+          Members
+        </span>
+      </MenuItem>
+
+      <MenuItem 
+        @click="router.push({
+          name: 'Backoffice Community'
+        })" 
+        class="cursor-pointer">
+        <span>
+          Community
+        </span>
+      </MenuItem>
+
+      <MenuItem 
+        @click="router.push({
+          name: 'Products'
+        })" 
+        class="cursor-pointer">
+        <IconProducts class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
+        <span>
+          Products
+        </span>
+      </MenuItem>
+
+      <MenuItem 
+        @click="router.push({
+          name: 'Leftovers'
+        })" 
+        class="cursor-pointer">
+        <IconLeftovers class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
+        <span>
+          Leftovers
+        </span>
+      </MenuItem>
+
+      <MenuItem 
+        @click="router.push({
+          name: 'Backoffice Orders'
+        })" 
+        class="cursor-pointer">
+        <IconOrders class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
+        <span>
+          Orders
+        </span>
+      </MenuItem>
+
+      <MenuItem 
+        @click="router.push({
+          name: 'Backoffice Gallery'
+        })" 
+        class="cursor-pointer">
+        <IconGallery class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
+        <span>
+          Gallery
+        </span>
+      </MenuItem>
+      
+      <MenuItem 
+        @click="router.push({
+          name: 'Backoffice Events'
+        })" 
+        class="cursor-pointer">
+        <IconEvents class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
+        <span>
+          Events
+        </span>
+      </MenuItem>
+
+      <MenuItem 
+        @click="router.push({
+          name: 'Payments'
+        })" 
+        class="cursor-pointer">
+        <span>
+          Payments
+        </span>
+      </MenuItem>
+    </Menu>
+
+    <Menu 
+      class="bg-light"
+    >
+      <MenuItem 
+        @click="router.push({
+          name: 'Backoffice Organizations'
+        })" 
+        class="cursor-pointer">
+        <span>
+          Organizations
+        </span>
+      </MenuItem>
+
+      <MenuItem 
+        @click="router.push({
+          name: 'Backoffice Pages'
+        })" 
+        class="cursor-pointer">
+        <span>
+          Pages
+        </span>
+      </MenuItem>
+
+      <MenuItem 
+        @click="router.push({
+          name: 'Backoffice Reports'
+        })" 
+        class="cursor-pointer">
+        <span>
+          Reports
+        </span>
+      </MenuItem>
+    </Menu>
+  </div>
+</template>
+
+
+<script setup="props">
+/////////////////////////////
+// COMPONENT DEPENDENCIES
+/////////////////////////////
+import { ref, onMounted } from 'vue';
+
+// Mobile Module
+import Menu from '@pf/src/components/Menu/Menu.vue'
+import MenuItem from '@pf/src/components/Menu/MenuItem.vue'
+import SelectMulti    from '@pf/src/components/SelectMulti/SelectMulti.vue'
+
+import IconProducts from '@pf/src/modules/icons/entities/IconProducts.vue'
+import IconEvents from '@pf/src/modules/icons/entities/IconEvents.vue'
+import IconGroups from '@pf/src/modules/icons/entities/IconGroups.vue'
+import IconCommunity from '@pf/src/modules/icons/entities/IconCommunity.vue'
+import IconGallery from '@pf/src/modules/icons/entities/IconGallery.vue'
+import IconOrders from '@pf/src/modules/icons/entities/IconOrders.vue'
+import IconLeftovers from '@pf/src/modules/icons/entities/IconLeftovers.vue'
+/////////////////////////////
+// HELPERS
+/////////////////////////////
+import { useRoute, useRouter } from 'vue-router'
+
+import * as auth  from '@pf/src/modules/auth/store/auth'
+import * as organizations  from '@pf/src/modules/organizations/store/organizations'
+
+const route = useRoute()
+const router = useRouter()
+/////////////////////////////
+// CREATED
+/////////////////////////////
+const props = defineProps({
+  favorites: Array,
+});
+
+const selectedOrganization = ref(null);
+const publics = ref([]);
+/////////////////////////////
+// MOUNTED
+/////////////////////////////
+onMounted(async () =>{
+})
+</script>
+
+<style lang="scss">
+</style>

package/src/modules/backoffice/router/admin.js

@@ -16,21 +16,6 @@
 //       // meta: { authorize: ["ROLE_MODERATOR"] }, 
 //       component: () => import(/* webpackChunkName: 'FastOrders' */ '@/components/pages/admin/FastOrders.vue')
 //     },{
-//       path: 'pages',
-//       name: 'Pages',
-//       // meta: { authorize: ["ROLE_MODERATOR"] }, 
-//       component: () => import(/* webpackChunkName: 'Pages' */ '@/components/pages/admin/Pages.vue')
-//     },{
-//       path: 'pages/add',
-//       name: 'PageAdd',
-//       // meta: { authorize: ["ROLE_MODERATOR"] }, 
-//       component: () => import(/* webpackChunkName: 'PageAdd' */ '@/components/pages/admin/PageEdit.vue')
-//     },{
-//       path: 'pages/:url',
-//       name: 'PageEdit',
-//       // meta: { authorize: ["ROLE_MODERATOR"] }, 
-//       component: () => import(/* webpackChunkName: 'PAgeEdit' */ '@/components/pages/admin/PageEdit.vue')
-//     },{
 //       path: 'users',
 //       name: 'Users',
 //       component: () => import(/* webpackChunkName: 'Users' */ '@/components/pages/admin/Users.vue')

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

@@ -1,11 +1,14 @@
 import layoutBackoffice from '../components/layouts/Backoffice.vue'
+import Sidebar from '../components/partials/Sidebar.vue'
+
 import layoutEmpty from '@pf/src/modules/globals/components/layouts/Empty.vue';
 
 import * as validationAuth from '@pf/src/modules/middlewares/client/auth.validation.js';
 
 const backofficeRoutes = [{
   path: 'backoffice',
-  component: layoutEmpty,
+  name: 'Backoffice Root',
+  component: layoutBackoffice,
   beforeEnter: [
     validationAuth.requiresAdmin,
   ],
@@ -17,6 +20,7 @@ const backofficeRoutes = [{
         en: 'Backoffice',
         ru: 'Управление'
       },
+      sidebar: Sidebar,
       authorize: []
     },
     component: () => import(/* webpackChunkName: 'BackofficeGallery' */ '../components/pages/Dashboard.vue'),

package/src/modules/community/components/blocks/CardBlogpost.vue

@@ -48,6 +48,7 @@
 			<div v-if="type !== 'blogpostPage'" class="cursor-pointer mn-b-thin flex-nowrap flex w-100">
 
 				<Text 
+					v-if="!hideTitle"
 				 	:text="blogpost.name || ''" 
 				 	:maxLen="80" 
 				 	class="h3 d-block"
@@ -76,7 +77,7 @@
 			</p>
 
 			<h3 
-				v-if="type === 'blogpostPage'" 
+				v-if="type === 'blogpostPage' && !hideTitle" 
 				class="mn-b-small h2"
 			>
 				{{blogpost.name}}
@@ -155,6 +156,10 @@
 		hideDescription: {
 			type: Boolean,
 			default: false
+		},
+		hideTitle: {
+			type: Boolean,
+			default: false
 		}
 	})