@ozdao/prometheus-framework 0.2.322 → 0.2.324

package/src/modules/events/components/blocks/CardEvent.vue

@@ -62,24 +62,7 @@
     	<div
     		:class="{'mn-b-small': type !== 'short'}"
     		class="flex-v-center flex-nowrap flex"
-    		>
-					<div 
-					  class="w-max mn-r-thin pd-thin radius-small t-semi bg-main" 
-					 >
-							
-						<span 
-				     
-				    	class="t-semi"
-				    >
-				    	{{ formattedDate }}
-				    </span>
-				    <span 
-				    		v-if="type !== 'short'"
-				    	class="t-semi ">
-				        | {{ formattedTimeRange }}
-				    </span>
-					</div>
-
+    	>
 				 	<span 
 			    	v-if="type === 'short'" 
 			    	class="t-semi uppercase"
@@ -112,10 +95,33 @@
 
       <slot></slot>
       
-      <Chips 
-      	v-if="type !== 'short' && event.tags.length > 0" 
-      	:chips="event.tags"
-      />
+      <div class="flex flex-wrap gap-micro t-medium p-big justify-start align-center">
+        <span v-if="event.date?.start" class="mn-r-nano d-inline-block w-max pd-b-micro pd-t-micro pd-r-thin pd-l-thin radius-small t-medium bg-white">
+          <!-- <IconCalendar :fill="'rgb(var(--black))'" class="w-1r h-auto"/> -->
+          <!-- {{formatDate(event.date.start)}} -->
+
+						<span 
+				     
+				    	class="t-semi"
+				    >
+				    	{{ formattedDate }}
+				    </span>
+				    <span 
+				    		v-if="type !== 'short'"
+				    	class="t-semi ">
+				        | {{ formattedTimeRange }}
+				    </span>
+        </span>
+
+
+        <span
+          v-for="(chip, index) in event.tags"
+          :key="index"
+          class="d-inline-flex pd-b-micro   pd-t-micro pd-r-thin pd-l-thin radius-small bg-main"
+        >
+          {{ chip }}
+        </span>
+      </div>
 			<!-- <CardFooter
 				v-if="type !== 'short'"  
 				class="" 

package/src/modules/events/components/pages/Event.vue

@@ -30,7 +30,7 @@
 
           <div class="flex flex-wrap gap-micro t-medium p-big mn-b-semi justify-start align-center">
             <span v-if="event.date?.start" class="mn-r-nano d-inline-block w-max pd-b-micro pd-t-micro pd-r-thin pd-l-thin radius-small t-medium bg-white">
-              <!-- <IconCalendar :fill="'rgb(var(--black))'" class="w-1r h-auto"/> -->
+              <IconCalendar :fill="'rgb(var(--black))'" class="w-1r h-auto"/>
               {{formatDate(event.date.start)}}
             </span>
 
@@ -147,10 +147,6 @@
   import Countdown from "@pf/src/components/Countdown/Countdown.vue";
     
   import HeroEvent from '@pf/src/modules/events/components/sections/HeroEvent.vue';
-  import SectionMainGuest from '@pf/src/modules/events/components/sections/SectionMainGuest.vue';
-  import SectionSpecialGuests from '@pf/src/modules/events/components/sections/SectionSpecialGuests.vue';
-  import SectionLineUp from '@pf/src/modules/events/components/sections/SectionLineup.vue';
-  import SectionPreviousEvents from '@pf/src/modules/events/components/sections/SectionPreviousEvents.vue';
 
   import PhotoStack from "@pf/src/modules/globals/views/components/elements/PhotoStack.vue";
 
@@ -160,7 +156,7 @@
 
   import Image  from '@pf/src/modules/constructor/components/elements/Image.vue';
   import User from '@pf/src/modules/auth/views/components/blocks/CardUser.vue';
-  // import IconCalendar from '@pf/src/modules/icons/navigation/IconCalendar.vue';
+  import IconCalendar from '@pf/src/modules/icons/navigation/IconCalendar.vue';
 
   import * as events from '@pf/src/modules/events/store/events.js';
   import * as tickets from '@pf/src/modules/events/store/tickets.js';

package/src/modules/events/components/pages/Events.vue

@@ -1,89 +1,265 @@
 <template>
-  <section class="pd-thin">
-    <header 
-      class="mn-b-medium flex-v-center flex-nowrap flex"
-    >
+  <section class="radius-tl-medium bg-white"> 
+
+
+    <div class="gap-medium pos-t-0 pos-sticky z-index-2 radius-medium ">
+      <DatePicker
+        v-model:date="events.state.filter.date"
+        :locale="$i18n.locale"
+        :options="{
+          dateStart: 0,
+          dateEnd: 30
+        }"
+        class="bs-black-small br-b br-solid br-black-transp-10 o-hidden bg-white  pd-l-zero pd-r-zero pd-medium"
+      />
+    </div>
+
+   <section class="pd-big mobile:pd-thin radius-tr-medium radius-tl-medium bg-white"> 
+
+    <div class="gap-medium radius-medium mn-b-big">
       <h2
-        class="mn-r-medium"
+        class="mn-b-small"
       >
-        Featured
+        Events in <p @click="openCitySelectionPopup" class="d-inline-block hover-bg-second hover-t-white  cursor-pointer transition-elastic transition-timing-1 h2 pd-micro pd-t-thin pd-r-small pd-l-small br-solid br-1px br-black-transp-10 radius-extra">Phuket</p>
       </h2>
-    </header>
-    
-    <List
-      :user="auth.state.user._id"
-      class="bg-light mn-b-medium radius-big"
-      :phase="'planned'"
-      :status="'featured'"
-    />
 
-    <h2
-      class="mn-b-medium"
-    >
-      All Events
-    </h2>
+      <Popup  
+        @close-popup="closeCitySelectionPopup" 
+        :isPopupOpen="isCitySelectionPopup"
+        class="w-m-33r t-left pd-medium bg-white radius-semi"
 
-    <DatePicker
-      v-model:date="events.state.filter.date"
-      :locale="$i18n.locale"
-      class="radius-semi o-hidden bg-light mn-b-thin pd-l-zero pd-r-zero pd-medium"
-    />
+      >
+        <CitySelection/>
+      </Popup>
 
-    <Feed
-      :states="{
-        empty: {
-          title: 'No Events Found',
-          description: 'Currently, there are no events available.'
-        }
-      }"
-      :store="{
-        read: (options) => events.read(options),
-        state: events.state
-      }"
+     <EventsHot 
       :options="{
-          user: auth.state.user._id,
-          date: events.state.filter.date,
-          limit: 10
-      }"
-      v-slot="{ 
-        items 
+        status: 'featured'
       }"
-    >
-       <CardEvent 
-        @click="$router.push({name: 'Event', params: {url: event.url}})" 
-        v-for="(event,index) in items" 
-        :key="event._id" 
-        :event="event" 
-        :user="auth.state.user._id" 
-        :type="'normal'"
-        class="bg-light radius-big mn-b-medium"
+      class=" mn-big-negative pd-big"
+    />
+    </div>
+
+
+    <div class="gap-medium radius-medium mn-b-thin">
+      <h3
+        class="mn-b-small"
+      >
+        Popular Events
+      </h3>
+      <FeaturedEvents class="gap-thin"/>
+    </div>
+
+    <div class="gap-medium radius-medium mn-b-medium">
+      <h3 class="mn-b-small">
+        Explore by Date
+      </h3>
+      
+      <div class="cols-4 gap-thin">
+        <div 
+          v-for="(date, index) in dateOptions" 
+          :key="index"
+          class="bg-light radius-medium pd-medium cursor-pointer"
+          @click="selectDate(date)"
+        >
+          <h4 class="t-medium">{{ date.label }}</h4>
+          <div class="text-small text-muted">{{ date.range }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="gap-medium radius-medium mn-b-medium">
+      
+      <h3
+        class="mn-b-small"
+      >
+        Popular Events
+      </h3>
+      
+      <Feed
+        :showLoadMore="false"
+        :LoadMore="false"
+        :states="{
+          empty: {
+            title: 'No Events Today',
+            description: 'Currently, there are no events available.'
+          }
+        }"
+        :store="{
+          read: (options) => events.read(options),
+          state: events.state
+        }"
+        :options="{
+            user: auth.state.user._id,
+            limit: 3,
+            page: 1
+        }"
+        v-slot="{ 
+          items 
+        }"
+        class="cols-3 gap-thin"
+      >
+         <CardEvent 
+          @click="$router.push({name: 'Event', params: {url: event.url}})" 
+          v-for="(event,index) in items" 
+          :key="event._id" 
+          :event="event" 
+          :user="auth.state.user._id" 
+          :type="'normal'"
+          class="bg-light radius-big mn-b-thin"
+        >
+        </CardEvent>
+      </Feed>
+      
+
+    </div>
+
+    <div class="gap-medium radius-medium mn-b-medium">
+
+      <h3
+        class="mn-b-small"
       >
-      </CardEvent>
-    </Feed>
+         Most Happening Organizers
+      </h3>
+      <Feed
+        :showLoadMore="false"
+        :LoadMore="false"
+        :states="{
+          empty: {
+            title: 'No Organization Found',
+            description: 'Currently, there are no organization available.'
+          }
+        }"
+        :store="{
+          read: (options) => organizations.actions.read(options),
+          state: organizations.state
+        }"
+        :options="{
+            user: auth.state.user._id,
+            sort: 'numberOfMemberships',
+            contain: ['blogposts'],
+            lookup: ['blogposts'],
+            limit: 8
+        }"
+        v-slot="{ 
+          items 
+        }"
+        class="cols-4 gap-thin"
+      >
+        <CardOrganization 
+          v-for="organization in items"
+          :key="organization._id" 
+          :organization="organization"
+          :user="auth.state.user"
+          :showProducts="false"
+          :showRating="false"
+          :showFeatured="false"
+          :showFollowers="false"
+          @updateMembership="handleMembershipUpdate"
+          class="pd-small w-100 pd-0 bg-light radius-semi o-hidden"
+        />
+      </Feed>
+
+    </div>
+    
+    <div class="gap-medium radius-medium mn-b-thin">
+
+      <h3
+        class="mn-b-small"
+      >
+        All Events
+      </h3>
+
+      <Feed
+        :search="true"
+         :showLoadMore="false"
+        :states="{
+          empty: {
+            title: 'No Events Today',
+            description: 'Currently, there are no events available.'
+          }
+        }"
+        :store="{
+          read: (options) => events.read(options),
+          state: events.state
+        }"
+        :options="{
+            user: auth.state.user._id,
+            limit: 10
+        }"
+        v-slot="{ 
+          items 
+        }"
+        class="cols-3 gap-thin"
+      >
+         <CardEvent 
+          @click="$router.push({name: 'Event', params: {url: event.url}})" 
+          v-for="(event,index) in items" 
+          :key="event._id" 
+          :event="event" 
+          :user="auth.state.user._id" 
+          :type="'normal'"
+          class="bg-light radius-big mn-t-thin"
+        >
+        </CardEvent>
+      </Feed>
+
+    </div>
+
+    </section>
   </section>
 </template>
 
 <script setup="props">
-  import { computed, onMounted, watch } from 'vue';
+  import { computed, onMounted, watch, ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
 
   import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue';
   import Feed from '@pf/src/components/Feed/Feed.vue'
+  import Popup from '@pf/src/components/Popup/Popup.vue'
   import DatePicker from '@pf/src/components/DatePicker/DatePicker.vue'
 
+  import CitySelection from '@pf/src/modules/globals/views/components/partials/CitySelection.vue';
 
-  import List from '@pf/src/modules/events/components/sections/List.vue';   
+  import FeaturedEvents from '@pf/src/modules/events/components/sections/FeaturedEvents.vue';   
+
+  import EventsHot from '@pf/src/modules/events/components/sections/EventsHot.vue';   
   import CardEvent from '@pf/src/modules/events/components/blocks/CardEvent.vue';
+  import CardOrganization from '@pf/src/modules/organizations/components/blocks/CardOrganization.vue'
+
   // Import state
-  import * as events from '@pf/src/modules/events/store/events.js'; 
   import * as auth from '@pf/src/modules/auth/views/store/auth'
+  import * as organizations from '@pf/src/modules/organizations/store/organizations'
+  import * as memberships from '@pf/src/modules/organizations/store/memberships'
+
 
+  import * as events from '@pf/src/modules/events/store/events.js'; 
+
+  const handleMembershipUpdate = ({ membership, status, target }, statusName, statusNumber) => {
+    memberships.mutations.handleMembershipUpdate(organizations.state.current, membership, status, target, statusName, statusNumber)
+  };
   // State
   const route = useRoute();
   const router = useRouter();
 
   let baseDate = new Date();
   const formattedDate = formatDateForRouter(baseDate);
+
+  const dateOptions = [
+    { label: 'Today', range: 'Tue, 4th Feb' },
+    { label: 'Tomorrow', range: 'Wed, 5th Feb' },
+    { label: 'This Weekend', range: '8th - 9th Feb' },
+    { label: 'This Week', range: '3rd - 9th Feb' },
+    { label: 'Next Weekend', range: '15th - 16th Feb' },
+    { label: 'Next Week', range: '10th - 16th Feb' },
+    { label: 'This Month', range: '1st - 28th Feb' },
+    { label: 'Custom Date', range: 'Pick Range' }
+  ];
+
+  const selectDate = (date) => {
+    // Здесь можно добавить логику выбора даты
+    console.log('Selected date:', date);
+  };
   
   function formatDateForRouter(date) {
     return `${date.getDate().toString().padStart(2, '0')}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getFullYear()}`;
@@ -94,7 +270,7 @@
     
     const newFilterValue = {
       tags: query.tags ? query.tags.split(',') : null,
-      date: query.date ? query.date : formattedDate,
+      date: query.date ? query.date : null,
     };
 
     events.state.filter = newFilterValue;  // <-- Modified
@@ -124,6 +300,15 @@
 
     router.push({ query });
   }, { deep: true })
+
+  const isCitySelectionPopup = ref(false)
+
+  function openCitySelectionPopup() {
+    isCitySelectionPopup.value = true;
+  }
+  function closeCitySelectionPopup() {
+    isCitySelectionPopup.value = false;
+  }
 </script>
 
 <style lang="scss">

package/src/modules/events/components/sections/EventsHot.vue

@@ -0,0 +1,93 @@
+<template>
+  <Slider
+    :store="{
+      read: (options) => events.read({ 
+        skip, 
+        limit,
+        user: userId,
+        period,
+        status 
+      })
+    }"
+    :text="{
+      en: {
+        title: 'No Featured Events Found',
+        description: 'Currently, there are no featured events available.'
+      }
+    }"
+    v-slot="{ 
+      item
+    }"
+    class="slider-hotpost flex-child-default"
+  >
+
+    <router-link 
+      :to="{name: 'Event', params: {url: item.url}}" 
+      class="cursor-pointer pos-relative flex flex-justify-end flex-column h-25r bg-semi radius-medium o-hidden pd-medium t-white bg-dark"
+    >
+      <Media 
+        :url="(FILE_SERVER_URL || '') + item.cover"
+        class="pos-absolute pos-t-0 pos-r-0 z-index-1 w-100 h-100 object-fit-cover bg-light"
+      />
+
+      <div class="pos-relative z-index-2">
+        <h3 
+          class="mn-b-small"
+        >
+          {{ item.name }}
+        </h3>
+        <span v-if="item.date?.start" class="mn-r-nano d-inline-block w-max pd-b-micro pd-t-micro pd-r-thin pd-l-thin radius-small t-medium bg-white">
+          <span class="t-semi t-black" > 
+            {{item.location}} / {{formatDate(item.date.start, { language: $i18n.locale, monthName: true,  })}} 
+          </span>
+        </span> 
+      </div>
+    </router-link>
+
+  </Slider>
+</template>
+
+<script setup>
+import { ref, onMounted, defineProps } from 'vue'
+
+import Feed from '@pf/src/components/Feed/Feed.vue'
+import Slider from '@pf/src/components/Slider/Slider.vue'
+import Media from '@pf/src/components/Media/Media.vue'
+
+import * as events from '@pf/src/modules/events/store/events.js'; 
+import * as auth from '@pf/src/modules/auth/views/store/auth'
+
+const props = defineProps({
+  skip: {
+    type: Number,
+    default: 0
+  },
+  limit: {
+    type: Number,
+    default: 8
+  },
+  userId: {
+    type: String,
+    default: () => auth.state.user._id
+  },
+  period: {
+    type: String,
+    default: 'year'
+  },
+  status: {
+    type: String,
+    default: 'featured'
+  }
+})
+</script>
+
+<style lang="scss">
+.slider-hotpost .embla__slide {
+  flex: 0 0 75%;
+}
+@media screen and (max-width: 1025px) {
+  .slider-hotpost .embla__slide {
+    flex: 0 0 75%;
+  }
+}
+</style>

package/src/modules/events/components/sections/FeaturedEvents.vue

@@ -1,30 +1,32 @@
 <template>
-  <div class="cols-2 gap-medium pd-medium bg-light radius-big">
-    <div class="">
-      <h3
-        class="mn-b-medium"
+  <div class="cols-2">
+        <div class="bg-light pd-medium mn-b-medium radius-semi">
+      <h4
+        class="mn-b-small"
       >
-        Finished Events
-      </h3>
+        Planned
+      </h4>
       <List
         :user="auth.state.user._id"
-        class="bg-white mn-b-medium radius-big"
-        :phase="'finished'"
+        class="bg-white radius-medium"
+        :phase="'planned'"
       />
     </div>
 
-    <div class="">
-      <h3
-        class="mn-b-medium"
+    <div class="bg-light pd-medium  mn-b-medium radius-semi">
+      <h4
+        class="mn-b-small"
       >
-        Planned
-      </h3>
+        Finished 
+      </h4>
       <List
         :user="auth.state.user._id"
-        class="bg-white mn-b-medium radius-big"
-        :phase="'planned'"
+        class="bg-white radius-medium"
+        :phase="'finished'"
       />
     </div>
+
+
   </div>
 </template>
 

package/src/modules/events/components/sections/List.vue

@@ -93,7 +93,7 @@
   const isLoading = ref(true);
 
   const skip = ref(0);
-  const limit = ref(5);
+  const limit = ref(3);
 
   onMounted(async () => {
     const data = await events.read({

package/src/modules/events/events.client.js

@@ -21,6 +21,7 @@ function initializeEvents(app, store, router, options = {}) {
   const routesEvents = createEventRoutes('', options);
   
   router.addRoute(route, routesEvents);
+  router.addRoute('Backoffice Root', createEventRoutes('Backoffice', options));
   
   store.addStore('events', storeEvents);
 }

package/src/modules/events/router/events.js

@@ -106,7 +106,3 @@ export function createEventRoutes(prefix = '', options = {}) {
 
   return routes;
 }
-
-// Example usage:
-// const eventsRoutes = createEventRoutes('Admin', { basePath: 'admin/events' });
-// export default eventsRoutes;

package/src/modules/events/store/events.js

@@ -12,6 +12,7 @@ const state = reactive({
     tags: [],
     period: '',
     date: null,
+    date2: null,
     // pagination
   },
   pagination: {

package/src/modules/globals/views/components/layouts/App.vue

@@ -18,7 +18,6 @@
     </section>
   </transition>
 
-  <!-- {{current_url}} -->
   <transition name="moveFromTop" mode="out-in" appear>
     <component
       v-if="route.meta.sidebar && globals.state.isOpenSidebar"
@@ -28,9 +27,9 @@
         globals.state.isOpenSidebar = !globals.state.isOpenSidebar 
       }"
 
-      class="transition-ease-in-out pos-absolute w-70 z-index-0  bg-light"
+      class="transition-ease-in-out pos-absolute w-20 z-index-0  bg-white br-r br-solid br-black-transp"
       :class="{
-        'pos-l-70-negative': !globals.state.isOpenSidebar,
+        'pos-l-20-negative': !globals.state.isOpenSidebar,
         'pos-l-0': globals.state.isOpenSidebar
       }"
       v-slot="{ Component }"
@@ -38,7 +37,7 @@
       <component
         v-if="route.meta.navigation"
         :is="route.meta.navigation"
-        class="h3 pd-big cols-1" 
+        class="p-big pd-small cols-1" 
       />
     </component>
   </transition>
@@ -46,7 +45,7 @@
   <router-view 
     v-slot="{ Component }"
     :class="{
-      'pos-l-70': globals.state.isOpenSidebar,
+      'pos-l-20': globals.state.isOpenSidebar,
       'pos-l-0': !globals.state.isOpenSidebar,
     }"
     @click="globals.state.isOpenSidebar ? a => globals.state.isOpenSidebar = false : a => { console.log('not succes') }"