@ozdao/martyrs 0.2.454 → 0.2.456

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

@@ -1,10 +1,8 @@
 <template>
-  <section class="radius-tl-medium bg-white"> 
-
-
-    <div class="gap-medium pos-t-0 pos-sticky z-index-2 radius-medium ">
+  <section class="bg-white"> 
+    <div class="gap-medium pos-t-0 pos-sticky z-index-3 radius-medium ">
       <DatePicker
-        v-model:date="events.state.filter.date"
+        @update:date="handleDatePickerChange"
         :locale="$i18n.locale"
         :options="{
           dateStart: 0,
@@ -16,7 +14,7 @@
 
    <section class="pd-big mobile:pd-thin radius-tr-medium radius-tl-medium bg-white"> 
 
-    <div class="gap-medium radius-medium mn-b-big">
+    <div class="gap-medium radius-medium mn-b-semi">
       <h2
         class="mn-b-small"
       >
@@ -34,87 +32,18 @@
 
      <EventsHot 
       :options="{
-        status: 'featured'
       }"
-      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>
+    <FeaturedEvents class="mn-b-semi"/>
+    <SelectDate 
+      class="mn-b-semi"
+      @date-selected="handleDateSelection" 
+    />
 
-    <div class="gap-medium radius-medium mn-b-medium">
+    <div class="gap-medium radius-medium mn-b-semi">
 
       <h3
         class="mn-b-small"
@@ -139,12 +68,12 @@
             sort: 'numberOfMemberships',
             contain: ['blogposts'],
             lookup: ['blogposts'],
-            limit: 8
+            limit: 6
         }"
         v-slot="{ 
           items 
         }"
-        class="cols-4 gap-thin"
+        class="cols-2 gap-thin"
       >
         <CardOrganization 
           v-for="organization in items"
@@ -162,7 +91,7 @@
 
     </div>
     
-    <div class="gap-medium radius-medium mn-b-thin">
+    <div class="gap-medium radius-medium">
 
       <h3
         class="mn-b-small"
@@ -185,7 +114,7 @@
         }"
         :options="{
             user: auth.state.user._id,
-            limit: 10
+            limit: 9
         }"
         v-slot="{ 
           items 
@@ -199,7 +128,7 @@
           :event="event" 
           :user="auth.state.user._id" 
           :type="'normal'"
-          class="bg-light radius-big mn-t-thin"
+          class="bg-light radius-big"
         >
         </CardEvent>
       </Feed>
@@ -222,6 +151,7 @@
   import CitySelection from '@martyrs/src/modules/globals/views/components/partials/CitySelection.vue';
 
   import FeaturedEvents from '@martyrs/src/modules/events/components/sections/FeaturedEvents.vue';   
+  import SelectDate from '@martyrs/src/modules/events/components/sections/SelectDate.vue';   
 
   import EventsHot from '@martyrs/src/modules/events/components/sections/EventsHot.vue';   
   import CardEvent from '@martyrs/src/modules/events/components/blocks/CardEvent.vue';
@@ -242,64 +172,48 @@
   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);
-  };
+  // let baseDate = new Date();
+  // const formattedDate = formatDateForRouter(baseDate);
   
-  function formatDateForRouter(date) {
-    return `${date.getDate().toString().padStart(2, '0')}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getFullYear()}`;
-  }
+  // function formatDateForRouter(date) {
+  //   return `${date.getDate().toString().padStart(2, '0')}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getFullYear()}`;
+  // }
 
-  if (route.query) {
-    const query = route.query;
+  // if (route.query) {
+  //   const query = route.query;
     
-    const newFilterValue = {
-      tags: query.tags ? query.tags.split(',') : null,
-      date: query.date ? query.date : null,
-    };
-
-    events.state.filter = newFilterValue;  // <-- Modified
-  } else {
-    const newFilterValue = {
-      date: formattedDate,
-    };
-
-    events.state.filter = newFilterValue;
-  }
-
-  watch(() => events.state.filter, (newFilterValue, oldFilterValue) => {  // <-- Modified
-    const query = { ...route.query };
-
-    Object.keys(oldFilterValue).forEach(key => {
-      if (query[key]) {
-        delete query[key];
-      }
-    });
-
-    const newQueryValues = Object.fromEntries(
-      Object.entries(newFilterValue)
-        .filter(([key, value]) => (Array.isArray(value) && value.length > 0) || (typeof value === 'string' && value))
-        .map(([key, value]) => [key, Array.isArray(value) ? value.join(',') : value])
-    );
-    Object.assign(query, newQueryValues);
-
-    router.push({ query });
-  }, { deep: true })
+  //   const newFilterValue = {
+  //     tags: query.tags ? query.tags.split(',') : null,
+  //     date: query.date ? query.date : null,
+  //   };
+
+  //   events.state.filter = newFilterValue;  // <-- Modified
+  // } else {
+  //   const newFilterValue = {
+  //     date: formattedDate,
+  //   };
+
+  //   events.state.filter = newFilterValue;
+  // }
+
+  // watch(() => events.state.filter, (newFilterValue, oldFilterValue) => {  // <-- Modified
+  //   const query = { ...route.query };
+
+  //   Object.keys(oldFilterValue).forEach(key => {
+  //     if (query[key]) {
+  //       delete query[key];
+  //     }
+  //   });
+
+  //   const newQueryValues = Object.fromEntries(
+  //     Object.entries(newFilterValue)
+  //       .filter(([key, value]) => (Array.isArray(value) && value.length > 0) || (typeof value === 'string' && value))
+  //       .map(([key, value]) => [key, Array.isArray(value) ? value.join(',') : value])
+  //   );
+  //   Object.assign(query, newQueryValues);
+
+  //   router.push({ query });
+  // }, { deep: true })
 
   const isCitySelectionPopup = ref(false)
 
@@ -309,6 +223,42 @@
   function closeCitySelectionPopup() {
     isCitySelectionPopup.value = false;
   }
+ 
+  const handleDatePickerChange = (date) => {
+    if (date) {
+      // Убедимся, что у нас действительно объект даты
+      const selectedDate = new Date(date);
+      
+      // Создаем начало дня в локальной временной зоне
+      const startOfDay = new Date(selectedDate);
+      startOfDay.setHours(0, 0, 0, 0);
+      
+      // Создаем конец дня в локальной временной зоне
+      const endOfDay = new Date(selectedDate);
+      endOfDay.setHours(23, 59, 59, 999);
+      
+      router.push({
+        name: 'Events Search',
+        query: {
+          period: 'day',
+          periodStart: startOfDay.toISOString(),
+          periodEnd: endOfDay.toISOString()
+        }
+      });
+    }
+  };
+
+  // Update the existing handleDateSelection method
+  const handleDateSelection = (dateData) => {
+    console.log('Selected date data:', dateData);
+    router.push({
+      name: 'Events Search',
+      query: {
+        periodStart: dateData.startDate.toISOString(),
+        periodEnd: dateData.endDate.toISOString()
+      }
+    });
+  };
 </script>
 
 <style lang="scss">

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

@@ -58,14 +58,16 @@
 	      :options="{
 	        user: auth.state.user._id,
 	        owner: route.params._id,
-	        creator: route.params.user
+	        creator: route.params.user,
+	        sortParam: 'date.start',
+	        sortOrder: 'desc'
 	      }"
 	      v-slot="{ 
 	        items 
 	      }"
 	      class="cols-1 gap-thin"
 	    >
-	    	<Table 
+	    	<!-- <Table 
 						class="radius-semi bg-white"
 						:items="items"
 						:columns="[{ 
@@ -93,7 +95,7 @@
 					    label: 'Date',
 					    formatter: (value) => new Date(value).toLocaleDateString()
 					  }]" 
-					/>
+					/> -->
 	       <CardEvent 
 	        @click="$router.push({name: 'Event', params: {url: event.url}})" 
 	        v-for="(event,index) in items" 

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

@@ -0,0 +1,122 @@
+<template>
+  <section class="pd-big mobile:pd-thin bg-white"> 
+    <h3 class="mn-b-small">
+      {{ pageTitle }}
+    </h3>
+    <Feed
+      :search="true"
+      :showLoadMore="false"
+      :states="{
+        empty: {
+          title: 'No Events',
+          description: 'Currently, there are no events available.'
+        }
+      }"
+      :store="{
+        read: (options) => events.read(options),
+        state: events.state
+      }"
+      :options="feedOptions"
+      v-slot="{ items }"
+      class="cols-1 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"
+      >
+      </CardEvent>
+    </Feed>
+  </section>
+</template>
+
+<script setup="props">
+  import { computed, onMounted, watch, ref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import Feed from '@martyrs/src/components/Feed/Feed.vue'
+  import DatePicker from '@martyrs/src/components/DatePicker/DatePicker.vue' 
+  import CardEvent from '@martyrs/src/modules/events/components/blocks/CardEvent.vue';
+  // Import state
+  import * as auth from '@martyrs/src/modules/auth/views/store/auth'
+  import * as events from '@martyrs/src/modules/events/store/events.js'; 
+
+  import { useI18n } from 'vue-i18n';
+
+  // State
+  const route = useRoute();
+  const router = useRouter();
+  const { locale, t } = useI18n();
+
+  // Generate feed options based on route query parameters
+  const feedOptions = computed(() => {
+    const options = {
+      user: auth.state.user._id,
+      limit: 9
+    };
+    
+    if (route.query.periodStart) {
+      options.periodStart = route.query.periodStart;
+    }
+    
+    if (route.query.periodEnd) {
+      options.periodEnd = route.query.periodEnd;
+    }
+
+    return options;
+  });
+
+  // Format date for display in title
+  const formatDate = (dateString, format = 'long') => {
+    try {
+      const date = new Date(dateString);
+      
+      if (isNaN(date.getTime())) {
+        return '';
+      }
+      
+      return new Intl.DateTimeFormat(locale.value, 
+        format === 'long' ? 
+          { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' } : 
+          { year: 'numeric', month: 'short', day: 'numeric' }
+      ).format(date);
+    } catch (error) {
+      console.error('Error formatting date:', error);
+      return dateString;
+    }
+  };
+
+  // Generate page title based on query parameters
+ const pageTitle = computed(() => {
+  const startDate = route.query.periodStart;
+  const endDate = route.query.periodEnd;
+  
+  if (startDate && endDate) {
+    // Check if the dates represent a single day by comparing just the date parts
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    
+    // Compare only the date portions (year, month, day)
+    const isSameDay = start.getFullYear() === end.getFullYear() &&
+                     start.getMonth() === end.getMonth() &&
+                     start.getDate() === end.getDate();
+    
+    if (isSameDay) {
+      return `Events on ${formatDate(startDate)}`;
+    }
+    
+    // Otherwise it's a date range
+    return `Events from ${formatDate(startDate, 'short')} to ${formatDate(endDate, 'short')}`;
+  }
+  
+  // Fallback case
+  return 'All Events';
+});
+</script>
+
+<style lang="scss">
+  
+</style>

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

@@ -1,11 +1,9 @@
 <template>
-  <Slider
+  <SliderNative
     :store="{
       read: (options) => events.read({ 
         skip, 
         limit,
-        user: userId,
-        period,
         status 
       })
     }"
@@ -44,14 +42,14 @@
       </div>
     </router-link>
 
-  </Slider>
+  </SliderNative>
 </template>
 
 <script setup>
 import { ref, onMounted, defineProps } from 'vue'
 
 import Feed from '@martyrs/src/components/Feed/Feed.vue'
-import Slider from '@martyrs/src/components/Slider/Slider.vue'
+import SliderNative from '@martyrs/src/components/Slider/Slider.native.vue'
 import Media from '@martyrs/src/components/Media/Media.vue'
 
 import * as events from '@martyrs/src/modules/events/store/events.js'; 

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

@@ -1,32 +1,30 @@
 <template>
-  <div class="cols-2">
-        <div class="bg-light pd-medium mn-b-medium radius-semi">
-      <h4
+  <div class="columns-wrapper scroll-hide gap-thin">
+    <div class="column flex flex-column flex-child-default">
+      <h3
         class="mn-b-small"
       >
         Planned
-      </h4>
+      </h3>
       <List
         :user="auth.state.user._id"
-        class="bg-white radius-medium"
+        class="bg-light o-hidden h-100    pd-thin radius-medium"
         :phase="'planned'"
       />
     </div>
 
-    <div class="bg-light pd-medium  mn-b-medium radius-semi">
-      <h4
+    <div class="column flex flex-column flex-child-default">
+      <h3
         class="mn-b-small"
       >
         Finished 
-      </h4>
+      </h3>
       <List
         :user="auth.state.user._id"
-        class="bg-white radius-medium"
+        class="bg-light o-hidden h-100  pd-thin radius-medium"
         :phase="'finished'"
       />
     </div>
-
-
   </div>
 </template>
 
@@ -44,6 +42,40 @@
   const router = useRouter();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.columns-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.columns-wrapper {
+  display: flex;
+  width: 100%;
   
-</style>
+  @media (min-width: 768px) {
+    /* Десктоп: 2 колонки рядом */
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  @media (max-width: 767px) {
+    /* Мобильные устройства: горизонтальный скролл */
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.column {
+  @media (max-width: 767px) {
+    /* Настройки для мобильных устройств */
+    max-width: 90%;
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+    
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style> 

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

@@ -6,7 +6,7 @@
       <Loader v-if="isLoading" class="z-index-5 pos-t-50 left-t-50 pos-absolute"/>
     </transition> -->
 
-    <TransitionGroup tag="ul" name="fade" class="o-hidden bg-light radius-big">
+    <TransitionGroup tag="ul" name="fade" class="o-hidden bg-white radius-medium">
       <SkeletonEventShort
         v-if="isLoading"
         v-for="i in limit" :key="i"
@@ -20,7 +20,7 @@
         v-if="!isLoading && eventsList.length < 1"
         title="No Planned Events "
         description="No events available. Please check back later."
-        class="pd-medium mn-b-thin bg-light radius-semi"
+        class="pd-medium h-100 bg-white radius-medium"
       />
     </transition>
 
@@ -34,7 +34,7 @@
         :event="event" 
         :owner="user" 
         :type="'short'"
-        class="pd-medium"
+        class="pd-medium mobile:pd-thin"
         :class="{
           'br-b br-solid br-black-transp-10': index !== eventsList.length - 1
         }"