@ozdao/prometheus-framework 0.2.117 → 0.2.119

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>

package/src/modules/gallery/components/pages/Gallery.vue

@@ -1,15 +1,112 @@
 <template>
-	<div class="wrapper">
-		<Title :text="$t('gallery.title')" class="pd-medium" />
+	<div class="cols-1 gap-thin pd-thin">
+		<SectionPageTitle
+      :title="$t('gallery.title')"
+      @update:tabs_current="(update) => tab = update"
+      :tabs_current="tab"
+      :tabs="[
+        { name: 'All', value: 'all' },
+        { name: 'Place', value: 'place' },
+        { name: 'Drinks', value: 'drinks' },
+        { name: 'People', value: 'people' },
+        { name: 'Events', value: 'events' }
+      ]"
+      class="mn-b-small bg-light bg-light radius-big"
+    />
+    <Popup 
+      @close-popup="closePreviewPopup" 
+      :isPopupOpen="isOpenPreviewPopup"
+      class="bg-black o-hidden w-100 h-100 radius-big"
+    >
+      <PhotoViewer
+        :photoUrl="selectedPhoto.image"
+      />
+    </Popup>
 
-		<div style="min-height: 100vh">
-			<GalleryWithCategories/>
-		</div>
+		<Feed
+      v-model:items="photos"
+      v-model:sort="sort"
+      v-model:date="date"
+      :states="{
+        empty: {
+          title: 'No Photos Found',
+          description: 'Currently, there are no photos in gallery.'
+        },
+      }"
+      :store="{
+        read: (options) => gallery.read(options)
+      }"
+      :options="{
+        limit: 15,
+        status: 'published',
+        ...(tab !== 'all' && { tags: tab })
+      }"
+      v-slot="{ 
+        items 
+      }"
+      class="cols-3 gap-thin"
+    >
+      <div v-for="item in items"  :key="item._id" class="bg-light radius-medium o-hidden flex-column pos-relative flex-wrap">
+        <div class="w-100 h-100 pos-relative">
+          <img 
+            :src="(FILE_SERVER_URL || '') + item.cover" 
+            class="w-100 h-100 object-fit-cover bg-black " @click="openPreviewPopup(item)" 
+          />
+        </div>
+     	</div>
+    </Feed>
 	</div>
 </template>
 
 <script setup>
+	import { ref, onMounted, reactive, computed } from 'vue'
+
 	import Title from '@pf/src/modules/globals/components/sections/Title.vue';
 
-	import GalleryWithCategories from '@pf/src/modules/gallery/components/sections/GalleryWithCategories.vue';
+	import Feed from '@pf/src/components/Feed/Feed.vue'
+	import Popup from '@pf/src/components/Popup/Popup.vue'
+
+	import SectionPageTitle from '@pf/src/modules/globals/components/sections/SectionPageTitle.vue'
+
+	import PhotoViewer from '@pf/src/modules/gallery/components/blocks/PhotoViewer.vue'
+
+	import gallery from '@pf/src/modules/gallery/store/gallery';
+
+	const photos = ref([])
+
+	const tab = ref('all')
+
+	let sort = ref({
+	  param: 'createdAt',
+	  order: 'desc',
+	  options: [{
+	    label: 'Date',
+	    value: 'createdAt'
+	  },{
+	    label: 'Popularity',
+	    value: 'views'
+	  },{
+	    label: 'Creator',
+	    value: 'creator'
+	  }]
+	})
+	// Date
+	let date = ref({
+	  start: null,
+	  end: null
+	})
+
+	const selectedPhoto = ref(null);
+
+	// Preview Photo
+	const isOpenPreviewPopup = ref(false);
+	function openPreviewPopup(photo) {
+	  isOpenPreviewPopup.value = true;
+	  selectedPhoto.value = photo;
+	}
+	function closePreviewPopup() {
+	  isOpenPreviewPopup.value = false;
+	  selectedPhoto.value = null;
+	}
+
 </script>