@ozdao/prometheus-framework 0.2.118 → 0.2.119

package/src/components/DatePicker/Calendar.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="calendar">
-     <div v-if="allowRange" class="br-b br-solid br-grey gap-thin flex flex-nowrap pd-thin">
-      <button class="font-second pd-thin bg-main-transp-10 radius-small" @click="selectToday">Today</button>
-      <button class="font-second pd-thin bg-main-transp-10 radius-small" @click="selectLastWeek">Last Week</button>
-      <button class="font-second pd-thin bg-main-transp-10 radius-small" @click="selectLastMonth">Last Month</button>
-      <button class="font-second pd-thin bg-main-transp-10 radius-small" @click="selectLastYear">All time</button>
+     <div v-if="allowRange" class="br-b br-solid br-grey-transp-25 gap-thin flex flex-nowrap pd-thin">
+      <button @click="selectToday" class="font-second t-nowrap pd-thin bg-main-transp-10 radius-small" >Today</button>
+      <button @click="selectLastWeek" class="font-second t-nowrap pd-thin bg-main-transp-10 radius-small">Last Week</button>
+      <button @click="selectLastMonth" class="font-second t-nowrap pd-thin bg-main-transp-10 radius-small">Last Month</button>
+      <button @click="selectLastYear" class="font-second t-nowrap pd-thin bg-main-transp-10 radius-small">All time</button>
     </div>
-
     <div class="pd-thin flex flex-nowrap flex-v-center flex-justify-between">
-      <button class="aspect-ratio-1x1 w-10 pd-thin bg-main-transp-10 radius-small" @click="prevMonth">&lt;</button>
-      <span>{{ monthYear }}</span>
-      <button class="aspect-ratio-1x1 w-10 pd-thin bg-main-transp-10 radius-small" @click="nextMonth">&gt;</button>
+      <button  @click.stop="prevMonth" class="aspect-ratio-1x1 w-10 pd-thin bg-main-transp-10 radius-small">&lt;</button>
+      <span class="t-semi ">{{ monthYear }}</span>
+      <button @click.stop="nextMonth" class="aspect-ratio-1x1 w-10 pd-thin bg-main-transp-10 radius-small" >&gt;</button>
     </div>
 
-    <div class="calendar__body">
+    <div class="pd-thin calendar__body">
       <div class="calendar__week">
         <div v-for="(day, index) in daysOfWeek" :key="index" class="calendar__weekday">
           {{ day }}
@@ -30,7 +29,7 @@
             { 'calendar__date--range': isInRange(day.date) },
             { 'calendar__date--disabled': !isSameMonth(day.date) },
           ]"
-          @click="selectDate(day.date)"
+          @click.stop="selectDate(day.date)"
         >
           {{ day.day }}
         </div>
@@ -50,6 +49,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
+const dateCalendar = defineModel('date')
+
 const today = new Date()
 const currentDate = ref(today)
 const selectedDate = ref(null)
@@ -62,6 +63,11 @@ const toUTC = (date) => {
   return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
 }
 
+const toEndOfDayUTC = (date) => {
+  const endOfDay = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59));
+  return endOfDay;
+}
+
 const monthYear = computed(() => {
   const month = currentDate.value.toLocaleString('default', { month: 'long', timeZone: 'UTC' })
   const year = currentDate.value.getUTCFullYear()
@@ -84,7 +90,9 @@ const daysInMonth = computed(() => {
   const firstDayOfWeek = firstDay.getUTCDay()
 
   let date = new Date(firstDay)
+
   date.setUTCDate(date.getUTCDate() - firstDayOfWeek)
+
   for (let i = 0; i < firstDayOfWeek; i++) {
     days.push({
       date: new Date(date),
@@ -95,6 +103,7 @@ const daysInMonth = computed(() => {
   }
 
   let day = 1
+
   for (date = firstDay; date <= lastDay; date.setUTCDate(date.getUTCDate() + 1)) {
     days.push({
       date: new Date(date),
@@ -105,6 +114,7 @@ const daysInMonth = computed(() => {
   }
 
   const lastDayOfWeek = days[days.length - 1].date.getUTCDay()
+
   for (let i = lastDayOfWeek + 1; i <= 6; i++) {
     days.push({
       date: new Date(date),
@@ -136,18 +146,19 @@ const isSameMonth = (date) => {
 const isSelected = (date) => {
   if (props.allowRange) {
     if (startDate.value && endDate.value) {
-      return date >= startDate.value && date <= endDate.value
+      return date >= new Date(startDate.value) && toEndOfDayUTC(date) <= new Date(endDate.value);
     } else if (startDate.value) {
-      return date.getTime() === startDate.value.getTime()
+      return date.getTime() === new Date(startDate.value).getTime();
     }
   } else {
-    return selectedDate.value && date.getTime() === selectedDate.value.getTime()
+    return selectedDate.value && date.getTime() === new Date(selectedDate.value).getTime();
   }
 }
 
+
 const isInRange = (date) => {
   if (startDate.value && endDate.value) {
-    return date > startDate.value && date < endDate.value
+    return date > startDate.value && toEndOfDayUTC(date) < endDate.value
   }
   return false
 }
@@ -156,25 +167,29 @@ const selectDate = (date) => {
   const formattedDate = toUTC(date)
 
   if (!props.allowRange) {
-    emit('update:modelValue', formattedDate)
     selectedDate.value = formattedDate
+    dateCalendar.value = formattedDate
+
   } else if (!startDate.value && !endDate.value) {
-    emit('update:modelValue', formattedDate)
     startDate.value = formattedDate
+    dateCalendar.value.start = formattedDate
   } else if (!endDate.value) {
-    endDate.value = formattedDate
+
+    endDate.value = toEndOfDayUTC(date)
+
     if (formattedDate < startDate.value) {
-      const temp = startDate.value
+      const temp = toEndOfDayUTC(startDate.value)
+
       startDate.value = formattedDate
       endDate.value = temp
     }
-    emit('update:modelValue', { start: startDate.value, end: endDate.value })
+
+    dateCalendar.value = { start: startDate.value, end: endDate.value }
   } else {
     startDate.value = formattedDate
     endDate.value = null
-    emit('update:modelValue', formattedDate)
+    dateCalendar.value = {start: formattedDate, end: null }
   }
-  currentDate.value = formattedDate
 }
 
 const prevMonth = () => {
@@ -183,9 +198,6 @@ const prevMonth = () => {
     currentDate.value.getUTCMonth() - 1,
     1
   ))
-  // if (selectedDate.value && !isSameMonth(selectedDate.value)) {
-  //   selectedDate.value = null
-  // }
 }
 
 const nextMonth = () => {
@@ -194,48 +206,63 @@ const nextMonth = () => {
     currentDate.value.getUTCMonth() + 1,
     1
   ))
-  // if (selectedDate.value && !isSameMonth(selectedDate.value)) {
-  //   selectedDate.value = null
-  // }
 }
 
 const selectToday = () => {
-  const todayStart = new Date(today);
-  todayStart.setUTCHours(0, 0, 0, 0); // Начало дня в UTC
-  const todayEnd = new Date(todayStart);
-  todayEnd.setUTCHours(24, 0, 0, -1); // Конец дня в UTC (23:59:59)
-
-  startDate.value = toUTC(todayStart);
-  endDate.value = toUTC(todayEnd);
-  emit('update:modelValue', { start: startDate.value, end: endDate.value });
+  const today = new Date();  // Предположим, что переменная today - это текущая дата
+  const todayStart = new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate(), 0, 0, 0, 0)); // Начало дня в UTC
+  const todayEnd = new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate(), 23, 59, 59, 999)); // Конец дня в UTC
+
+  startDate.value = todayStart.toISOString();
+  endDate.value = todayEnd.toISOString();
+  dateCalendar.value =  { start: startDate.value, end: endDate.value };
 }
 
 const selectLastWeek = () => {
-  const lastWeek = new Date()
-  lastWeek.setUTCDate(lastWeek.getUTCDate() - 7)
-  startDate.value = toUTC(lastWeek)
-  endDate.value = toUTC(today)
-  emit('update:modelValue', { start: startDate.value, end: endDate.value })
+  const today = new Date();
+  const lastWeek = new Date(today);
+  lastWeek.setUTCDate(today.getUTCDate() - 7);
+  lastWeek.setUTCHours(0, 0, 0, 0);
+
+  startDate.value = lastWeek;
+  endDate.value = toEndOfDayUTC(today);
+  
+  today.setUTCHours(23, 59, 59, 999);
+
+  const start = lastWeek.toISOString();
+  const end = today.toISOString();
+  
+  dateCalendar.value = { start: start, end: end };
 }
 
 const selectLastMonth = () => {
-  const lastMonth = new Date()
-  lastMonth.setUTCMonth(lastMonth.getUTCMonth() - 1)
-  startDate.value = new Date(Date.UTC(lastMonth.getUTCFullYear(), lastMonth.getUTCMonth(), 1))
-  endDate.value = new Date(Date.UTC(
-    lastMonth.getUTCFullYear(),
-    lastMonth.getUTCMonth() + 1,
-    0
-  ))
-  emit('update:modelValue', { start: startDate.value, end: endDate.value })
+  const today = new Date();
+  
+  // Создаем дату для прошлого месяца
+  const lastMonth = new Date(today);
+  lastMonth.setUTCMonth(today.getUTCMonth() - 1);
+  lastMonth.setUTCHours(0, 0, 0, 0);
+  
+  // Устанавливаем конец текущего дня до 23:59:59
+  startDate.value = lastMonth;
+  endDate.value = toEndOfDayUTC(today);
+
+  today.setUTCHours(23, 59, 59, 999);
+  
+  // Форматируем даты в ISO строки
+  const start = lastMonth.toISOString();
+  const end = today.toISOString();
+  
+  dateCalendar.value = { start: start, end: end };
 }
 
+
+
 const selectLastYear = () => {
-  const lastYear = new Date()
-  lastYear.setUTCFullYear(lastYear.getUTCFullYear() - 1)
-  startDate.value = new Date(Date.UTC(lastYear.getUTCFullYear(), 0, 1))
-  endDate.value = new Date(Date.UTC(lastYear.getUTCFullYear(), 11, 31))
-  emit('update:modelValue', { start: startDate.value, end: endDate.value })
+
+  startDate.value = null;
+  endDate.value = null;
+  dateCalendar.value =  { start: null, end: null };
 }
 </script>
 

package/src/components/Feed/Feed.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div v-if="search" class="flex-nowrap flex gap-thin mn-b-thin">
+  <div v-if="search || date || sort" class="flex-nowrap flex gap-thin mn-b-thin">
 
     <BlockSearch 
       v-if="search"
@@ -9,17 +9,19 @@
       @search="updateSearch"
     />
 
-    <div class="flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100">
+   <!--  <div class="flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100">
       <IconFilter class="w-1r h-auto"/>
-    </div>
+    </div> -->
 
     <Dropdown 
+      v-if="date"
       :label="{
-        component: ButtonDate
+        component: ButtonDate,
+        props: { date: date }
       }" 
-      :class="search.class || 'bg-light'"
-      class="flex-child flex-child-grow-1 flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big"
-      :align="'right'"
+      :class="date.class || 'bg-light'"
+      class="flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big"
+      :align="search ? 'right' : 'left'"
     >
 
       <Calendar
@@ -37,9 +39,9 @@
         props: { order: sort.order },
         class: 'w-1r'
       }" 
-      :class="search.class || 'bg-light'"
+      :class="sort.class || 'bg-light'"
       class="radius-extra aspect-1x1 h-100"
-      :align="'right'"
+      :align="search ? 'right' : 'left'"
     >
 
       <BlockSorting
@@ -181,8 +183,8 @@ let sentinel = ref(null)
 let currentSkip = ref(props.options.skip ? props.options.skip : 0);
 let currentLimit = ref(props.options.limit ? props.options.limit : 10);
 
-let sortParam = ref(sort.value?.param || 'createdAt');
-let sortOrder = ref(sort.value?.order || 'asc');
+// let sortParam = ref(sort.value?.param || 'createdAt');
+// let sortOrder = ref(sort.value?.order || 'asc');
 
 let currentSearch = ref('');
 
@@ -203,8 +205,10 @@ const loadMoreItems = async () => {
       skip: currentSkip.value,
       limit: currentLimit.value,
       search: currentSearch.value,
-      sortParam: sortParam.value,
-      sortOrder: sortOrder.value,
+      dateStart: date.value ? date.value.start : null,
+      dateEnd: date.value ? date.value.end : null,
+      sortParam: sort.value ? sort.value.param : null,
+      sortOrder: sort.value ? sort.value.order : null,
       ...props.options
     });
 
@@ -223,11 +227,14 @@ const loadMoreItems = async () => {
 };
 
 const fetchItems = async () => {
+  console.log('Date is', date.value)
   const data = await props.store.read({
     skip: currentSkip.value,
     limit: currentLimit.value,
-    sortParam: sortParam.value,
-    sortOrder: sortOrder.value,
+    dateStart: date.value ? date.value.start : null,
+    dateEnd: date.value ? date.value.end : null,
+    sortParam: sort.value ? sort.value.param : null,
+    sortOrder: sort.value ? sort.value.order : null,
     search: currentSearch.value,
     ...props.options
   });
@@ -252,6 +259,27 @@ watch(() => props.external, (newVal, oldVal) => {
   }
 }, { deep: true });
 
+watch(() => date.value, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    fetchItems();
+  }
+}, { deep: true });
+
+watch(() => sort.value?.order, (newVal, oldVal) => {
+
+  if (newVal !== oldVal) {
+    fetchItems();
+  }
+}, { deep: true });
+
+watch(() => sort.value?.param, (newVal, oldVal) => {
+
+  if (newVal !== oldVal) {
+    fetchItems();
+  }
+}, { deep: true });
+
+
 watch(() => props.options, (newVal, oldVal) => {
   if (
     newVal.organization !== oldVal.organization ||
@@ -261,7 +289,8 @@ watch(() => props.options, (newVal, oldVal) => {
     newVal.search !== oldVal.search ||
     newVal.status !== oldVal.status ||
     newVal.hidden !== oldVal.hidden ||
-    newVal.type !== oldVal.type
+    newVal.type !== oldVal.type ||
+    newVal.tags !== oldVal.tags
   ) {
     fetchItems();
   }

package/src/components/FieldTags/BlockTags.vue

@@ -17,40 +17,47 @@
       class="mn-b-thin bg-light radius-medium pd-small"
     />
 
-    <p class="mn-b-medium">
-      <p class="p-small mn-b-thin">Suggested:</p>
-
-      <span 
-        v-if="filteredSuggestedItems.length > 0" 
-        v-for="(tag,index) in filteredSuggestedItems" 
-        @click="addTag(tag)"
-        class="cursor-pointer t-medium ti-tag-toDefactor"
-        :class="{'mn-r-micro':index !== filteredSuggestedItems.length - 1}"
-      >
-        {{ tag.text }}
-      </span>
-      <span v-else>You added all suggested tags</span> 
-    </p>
+    <p class="p-small mn-b-thin">Suggested:</p>
+
+    <span 
+      v-if="filteredSuggestedItems.length > 0" 
+      v-for="(tag,index) in filteredSuggestedItems" 
+      @click="addTag(tag)"
+      class="cursor-pointer t-medium ti-tag-toDefactor"
+      :class="{'mn-r-micro':index !== filteredSuggestedItems.length - 1}"
+    >
+      {{ tag.text }}
+    </span>
+    <span v-else>You added all suggested tags</span> 
   </div>
 </template>
 
 <script setup>
 import FieldTags from '@pf/src/components/FieldTags/FieldTags.vue'
-import { ref, computed, defineEmits, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 
 const emits = defineEmits(['tags-changed']);
-const props = defineProps(['tags']);
+const props = defineProps({
+  tags: {
+    type: Array
+  },
+  tagsSuggested: {
+    type: Array,
+    default: [
+      { text: 'story' },
+      { text: 'news' },
+      { text: 'guide' },
+      { text: 'discussion' },
+      { text: 'photos' },
+    ]
+  }
+});
 
 const tag = ref('');
 
 const selectedTags = ref([]);
-const autocompleteItems = ref([
-  { text: 'story' },
-  { text: 'news' },
-  { text: 'guide' },
-  { text: 'discussion' },
-  { text: 'photos' },
-]);
+
+const autocompleteItems = ref(props.tagsSuggested);
 
 if (props.tags) selectedTags.value = props.tags.map(tag => ({text: tag}))
   

package/src/components/Popup/Popup.vue

@@ -6,8 +6,8 @@
 
 						<transition name="TransitionTranslateY" mode="out-in">
 							<section class="pos-relative z-index-4" v-bind="$attrs" :class="$attrs.class">
-									<h4 class="mn-b-small">{{title}}</h4>
-									<IconCross @click="closePopup()" class="cursor-pointer pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-regular z-index-5"/>
+									<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>
 							</section>  
 						</transition>

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

@@ -9,60 +9,14 @@
         Featured
       </h2>
     </header>
+    
     <List
       :user="auth.state.user._id"
       class="bg-light mn-b-medium radius-big"
       :phase="'planned'"
     />
 
-
-    <div class="cols-2 gap-medium pd-medium bg-light radius-big">
-      <div class="">
-        <h2
-          class="mn-b-medium"
-        >
-          Finished Events
-        </h2>
-        <List
-          :user="auth.state.user._id"
-          class="bg-white mn-b-medium radius-big"
-          :phase="'finished'"
-        />
-      </div>
-
-      <div class="">
-        <h2
-          class="mn-b-medium"
-        >
-          Planned
-        </h2>
-        <List
-          :user="auth.state.user._id"
-          class="bg-white mn-b-medium radius-big"
-          :phase="'planned'"
-        />
-      </div>
-    </div>
-
-
-    <header 
-      class="mn-b-medium flex-v-center flex-nowrap flex"
-    >
-      <h2
-        class="mn-r-medium"
-      >
-        All Events
-      </h2>
-      
-      <button 
-        @click="router.push({name: 'Create Event'})" 
-        class="radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second"
-      >
-        +
-      </button>
-    </header>
-
-     <DatePicker
+    <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"

package/src/modules/gallery/components/blocks/PhotoViewer.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="photo-container" @wheel="handleWheel" @mousedown="startDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
+    <img :src="photoUrl" :style="imgStyle" ref="image" @load="initialize" />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+
+const props = defineProps({
+  photoUrl: String,
+  show: Boolean,
+});
+
+const scale = ref(1);
+const position = reactive({ x: 0, y: 0 });
+const dragging = ref(false);
+const startPosition = reactive({ x: 0, y: 0 });
+const startScale = ref(1);
+const startDistance = ref(0);
+
+const imgStyle = computed(() => ({
+  transform: `scale(${scale.value}) translate(${position.x}px, ${position.y}px)`,
+}));
+
+const handleWheel = (event) => {
+  event.preventDefault();
+  const delta = event.deltaY > 0 ? -0.1 : 0.1;
+  scale.value = Math.min(Math.max(1, scale.value + delta), 3);
+};
+
+const startDrag = (event) => {
+  event.preventDefault();
+  dragging.value = true;
+  startPosition.x = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX;
+  startPosition.y = event.type === 'mousedown' ? event.clientY : event.touches[0].clientY;
+  const move = (moveEvent) => {
+    if (dragging.value) {
+      const currentX = moveEvent.type === 'mousemove' ? moveEvent.clientX : moveEvent.touches[0].clientX;
+      const currentY = moveEvent.type === 'mousemove' ? moveEvent.clientY : moveEvent.touches[0].clientY;
+      position.x += (currentX - startPosition.x) / scale.value;
+      position.y += (currentY - startPosition.y) / scale.value;
+      startPosition.x = currentX;
+      startPosition.y = currentY;
+    }
+  };
+  const endDrag = () => {
+    dragging.value = false;
+    document.removeEventListener('mousemove', move);
+    document.removeEventListener('mouseup', endDrag);
+    document.removeEventListener('touchmove', move);
+    document.removeEventListener('touchend', endDrag);
+  };
+  document.addEventListener('mousemove', move);
+  document.addEventListener('mouseup', endDrag);
+  document.addEventListener('touchmove', move);
+  document.addEventListener('touchend', endDrag);
+};
+
+const handleTouchStart = (event) => {
+  if (event.touches.length === 2) {
+    const touch1 = event.touches[0];
+    const touch2 = event.touches[1];
+    const distanceX = Math.abs(touch1.clientX - touch2.clientX);
+    const distanceY = Math.abs(touch1.clientY - touch2.clientY);
+    startDistance.value = Math.sqrt(distanceX ** 2 + distanceY ** 2);
+    startScale.value = scale.value;
+  } else {
+    startDrag(event);
+  }
+};
+
+const handleTouchMove = (event) => {
+  if (event.touches.length === 2) {
+    event.preventDefault();
+    const touch1 = event.touches[0];
+    const touch2 = event.touches[1];
+    const distanceX = Math.abs(touch1.clientX - touch2.clientX);
+    const distanceY = Math.abs(touch1.clientY - touch2.clientY);
+    const newDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2);
+    const scaleFactor = newDistance / startDistance.value;
+    scale.value = Math.min(Math.max(1, startScale.value * scaleFactor), 3);
+  }
+};
+
+const handleTouchEnd = (event) => {
+  if (event.touches.length === 0) {
+    startDistance.value = 0;
+  }
+};
+
+const initialize = () => {
+  scale.value = 1;
+  position.x = 0;
+  position.y = 0;
+};
+</script>
+
+<style scoped>
+.photo-container {
+  width: 100%;
+  height: 100%;
+  background: black;
+  overflow: hidden;
+  position: relative;
+  cursor: grab;
+}
+
+.photo-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: scale-down;
+  transition: transform 0.3s;
+}
+</style>