@ozdao/prometheus-framework 0.2.118 → 0.2.119

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>

package/src/modules/gallery/components/sections/BackofficeGallery.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cols-1 gap-thin pd-thin">
     <SectionPageTitle
-      title="Manage Gallery"
+      title="Gallery"
       @update:tabs_current="(update) => tab = update"
       :tabs_current="tab"
       :tabs="[
@@ -19,8 +19,8 @@
 
     <Feed
       v-model:items="photos"
-      v-model:sort="gallery.state.sort"
-      :search="true"
+      v-model:sort="sort"
+      v-model:date="date"
       :states="{
         empty: {
           title: 'No Photos Found',
@@ -50,12 +50,26 @@
           :creator="item.creator"
           :date="item.createdAt"
           :actions="[
-            { method: () => deletePhoto(item._id), label: 'Delete' }
+            { method: () => deletePhoto(item), label: 'Delete' },
+            { method: () => changeStatus(item,'archived'), label: 'Archive' },
+            item.status === 'draft' ? 
+              { method: () => changeStatus(item,'published'), label: 'Publish' } : 
+              { method: () => changeStatus(item,'draft'), label: 'Draft' }
           ]"
           class="pd-small mn-b-small"
         />
 
-        <img :src="(FILE_SERVER_URL || '') + item.cover" class="w-100 h-20r object-fit-contain bg-black " @click="openPhotoPopup(photo)" />
+        <div class="pos-relative">
+          <img 
+            :src="(FILE_SERVER_URL || '') + item.cover" 
+            class="w-100 h-20r object-fit-contain bg-black " @click="openPreviewPopup(item)" 
+          />
+          <div 
+            class="pos-absolute pos-t-0 pos-r-0 pd-micro t-white uppercase t-semi p-small flex-center flex pd-r-small pd-l-small mn-r-small mn-t-small w-min bg-second radius-extra"
+          >
+            {{item.status}}
+          </div>
+        </div>
         
         <div class="pd-small">
           <Chips 
@@ -67,7 +81,17 @@
     </Feed>
 
     <Popup 
-      title="Add photo" 
+      @close-popup="closePreviewPopup" 
+      :isPopupOpen="isOpenPreviewPopup"
+      class="bg-black o-hidden w-100 h-100 radius-big"
+    >
+      <PhotoViewer
+        :photoUrl="selectedPhoto.image"
+      />
+    </Popup>
+
+    <Popup 
+      title="Add Photo" 
       @close-popup="closePhotoPopup" 
       :isPopupOpen="isOpenPhotoPopup"
       class="bg-white w-max-30r radius-big pd-big"
@@ -88,15 +112,33 @@
       <BlockTags
         @tags-changed="newTags => selectedImage.tags = newTags"
         :tags="selectedImage.tags"
+        :tagsSuggested="[
+          {text: 'people' },
+          {text: 'events' },
+          {text: 'place' },
+          {text: 'food' },
+          {text: 'drinks' },
+          {text: 'special' },
+        ]"
+        class="mn-b-semi"
       />
 
-      <Button 
-        :submit="selectedImage._id ? updatePhoto : createPhoto" 
-        :callback="closePhotoPopup" 
-        class="mn-b-thin bg-main w-100"
-      >
-        {{selectedImage._id ? 'Update' : 'Publish'}}
-      </Button>
+      <div class="flex-nowrap flex gap-thin">
+        <Button 
+          :submit="() => createPhoto('draft')" 
+          :callback="closePhotoPopup" 
+          class="t-nowrap bg-second w-100"
+        >
+          To drafts
+        </Button>
+         <Button 
+          :submit="() => createPhoto('published')" 
+          :callback="closePhotoPopup" 
+          class="bg-main w-100"
+        >
+          Publish
+        </Button>
+      </div>
     </Popup>
   </div>
 </template>
@@ -122,14 +164,47 @@ import gallery from '@pf/src/modules/gallery/store/gallery';
 import CardHeader  from '@pf/src/modules/globals/components/blocks/CardHeader.vue'
 import SectionPageTitle from '@pf/src/modules/globals/components/sections/SectionPageTitle.vue'
 
+import PhotoViewer from '@pf/src/modules/gallery/components/blocks/PhotoViewer.vue'
+
 import EditImages from '@pf/src/components/EditImages/EditImages.vue';
 import BlockTags from '@pf/src/components/FieldTags/BlockTags.vue';
 
 const route = useRoute();
 
-// Tab logic
+// Tabs
 const tab = ref('all')
+// Sort
+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
+})
 // Popup
+// Preview Photo
+const isOpenPreviewPopup = ref(false);
+function openPreviewPopup(photo) {
+  isOpenPreviewPopup.value = true;
+  selectedPhoto.value = photo;
+}
+function closePreviewPopup() {
+  isOpenPreviewPopup.value = false;
+  selectedPhoto.value = null;
+}
+// Add Photo
 const isOpenPhotoPopup = ref(false);
 function openPhotoPopup(photo) {
   isOpenPhotoPopup.value = true;
@@ -138,6 +213,8 @@ function openPhotoPopup(photo) {
 function closePhotoPopup() {
   isOpenPhotoPopup.value = false;
   selectedPhoto.value = null;
+  uploadedImages.value = [];
+  selectedImage.value = { tags: null, image: null };
 }
 // Selected Photo
 const selectedPhoto = ref(null);
@@ -151,26 +228,20 @@ const onUpdatedImages = (newImages) => {
   uploadedImages.value = newImages
 }
 // Gallery Grid
-const grid = ref(null)
 const photos = ref([])
-const categories = ['all', 'place', 'drinks', 'people', 'events']
 
-const loadMore = async () => {
-  loading.value = true
-  await gallery.read(page, limit)
-  loading.value = false
-}
-
-const deletePhoto = async (id) => {
-  await gallery.delete(id);
+const deletePhoto = async (item) => {
+  await gallery.delete(item._id);
+  gallery.removeItem(item, photos.value)
 };
 
-const updatePhoto = async () => {
-  await gallery.update(selectedImage.value)
-  closePhotoPopup()
+const changeStatus = async (item, status) => {
+  item.status = status
+  await gallery.update(item)
+  gallery.updateItem(item, photos.value)
 }
 
-const createPhoto = async () => {
+const createPhoto = async (status) => {
   if (uploadedImages.length < 1) {
     alert('Upload at least 1 image')
     return
@@ -179,6 +250,7 @@ const createPhoto = async () => {
   let createdPhotos = await gallery.create({
     images: uploadedImages.value,
     tags: selectedImage.value.tags,
+    status: status,
     owner: {
       type: 'Organization',
       target: route.params._id
@@ -193,10 +265,6 @@ const createPhoto = async () => {
     gallery.addItem(createdPhoto, photos.value)
   }
 }
-
-onMounted(async () => {
-})
-
 </script>
 
 <style scoped>

package/src/modules/gallery/controllers/gallery.controller.js

@@ -10,51 +10,57 @@ const controllerFactory = (db) => {
   const Photo = db.photo;
 
   const read = async (req, res) => {
-      
-      let stages = [
-        ...queryProcessorGlobals.getBasicOptions(
-          req.query
-        ), 
-        // For creator
-        queryProcessorGlobals.getCreatorUserLookupStage(), 
-        queryProcessorGlobals.getCreatorOrganizationLookupStage(),
-        queryProcessorGlobals.getCreatorCustomerLookupStage(),
-        // For owner
-        queryProcessorGlobals.getOwnerUserLookupStage(),
-        queryProcessorGlobals.getOwnerOrganizationLookupStage(),
-        queryProcessorGlobals.getAddFieldsCreatorOwnerStage(),
-        queryProcessorGlobals.removeTempPropeties(),
-        // Pagination
-        ...queryProcessorGlobals.getSortingOptions(
-          req.query.sortParam,
-          req.query.sortOrder,
-        ),
-        ...queryProcessorGlobals.getPaginationOptions(
-          req.query.skip,
-          req.query.limit
-        )
-      ];
-      
-      try {
-        const photos = await Photo.aggregate(stages);
 
-        console.log(photos)
+    console.log(req.query.tags)
+
+    let stages = [
+      ...queryProcessorGlobals.getBasicOptions(
+        req.query
+      ), 
+      // Date Filter
+      ...queryProcessorGlobals.getFilterDate(req.query.dateStart, req.query.dateEnd),
+      // Tags
+      ...queryProcessorGlobals.getTagsOptions(req.query.tags), 
+      // For creator
+      queryProcessorGlobals.getCreatorUserLookupStage(), 
+      queryProcessorGlobals.getCreatorOrganizationLookupStage(),
+      queryProcessorGlobals.getCreatorCustomerLookupStage(),
+      // For owner
+      queryProcessorGlobals.getOwnerUserLookupStage(),
+      queryProcessorGlobals.getOwnerOrganizationLookupStage(),
+      queryProcessorGlobals.getAddFieldsCreatorOwnerStage(),
+      queryProcessorGlobals.removeTempPropeties(),
+      // Pagination
+      ...queryProcessorGlobals.getSortingOptions(
+        req.query.sortParam,
+        req.query.sortOrder,
+      ),
+      ...queryProcessorGlobals.getPaginationOptions(
+        req.query.skip,
+        req.query.limit
+      )
+    ];
+
+    console.log(stages)
+    
+    try {
+      const photos = await Photo.aggregate(stages);
 
-        if (!photos) {
-          return res.status(404).send({ errorCode: "PHOTOS_NOT_FOUND", message: "Photos not found." });
-        }
+      if (!photos) {
+        return res.status(404).send({ errorCode: "PHOTOS_NOT_FOUND", message: "Photos not found." });
+      }
 
-        res.status(200).send(photos);
+      res.status(200).send(photos);
 
-      } catch (err) {
-        console.log(err);
-        res.status(500).send({ errorCode: "GET_PHOTOS_FAILED", message: "Error occurred while fetching photos.", error: err });
-      }
-    };
+    } catch (err) {
+      console.log(err);
+      res.status(500).send({ errorCode: "GET_PHOTOS_FAILED", message: "Error occurred while fetching photos.", error: err });
+    }
+  };
 
   const create = async (req, res) => {
     try {
-      const { tags, creator, owner, images } = req.body;
+      const { tags, creator, owner, status, images } = req.body;
 
       if (!creator || !owner || !images || images.length === 0) {
         return res.status(400).send({ message: "All fields are required." });
@@ -71,6 +77,7 @@ const controllerFactory = (db) => {
           creator,
           owner,
           image,
+          status,
           cover: path.join(directory, 'thumbnail_' + filename) // создаем путь для миниатюры
         };
         

package/src/modules/globals/components/blocks/CardHeader.vue

@@ -158,7 +158,7 @@
 					class="cursor-pointer z-index-2"
 				>
 					<section 
-						class="bg-black pd-thin radius-small"
+						class="bg-black flex-column flex gap-thin pd-thin radius-small"
 					>
 						<FormReport 
 							v-if="user !== creator.target._id"

package/src/modules/globals/components/elements/ButtonDate.vue

@@ -1,66 +1,60 @@
 <template>
   <div 
     @click="handleClick"
-    class="flex-center flex"
+    class="cursor-pointer flex-center flex"
   >
     <IconCalendar class="w-1r mn-r-thin h-auto"/>
-    <span class="t-semi">11 Apr - 18 Mar 23</span>
+    <span class="t-semi">{{ formattedDate }}</span>
   </div>
 </template>
 
 <script setup>
-import { toRefs } from 'vue';
-
+import { toRefs, computed } from 'vue';
 import IconCalendar from '@pf/src/modules/icons/navigation/IconCalendar.vue'
 
 const props = defineProps({
   action: {
     type: Function,
   },
+  date: {
+    type: Object
+  }
 });
 
-const { action } = toRefs(props);
+const { action, date } = toRefs(props);
+
+const formattedDate = computed(() => formatDate(date.value));
 
 const handleClick = () => {
   if (action.value) action.value();
 };
-</script>
 
-<style scoped>
-.bg-white {
-  background-color: white;
-}
-.cursor-pointer {
-  cursor: pointer;
-}
-.pd-thin {
-  padding: 0.5rem;
-}
-.w-2r {
-  width: 2rem;
-}
-.t-center {
-  text-align: center;
-}
-.t-black {
-  color: black;
-}
-.radius-small {
-  border-radius: 0.25rem;
-}
-.flex-justify-between {
-  justify-content: space-between;
-}
-.flex-column {
-  flex-direction: column;
-}
-.flex {
-  display: flex;
-}
-.aspect-1x1 {
-  aspect-ratio: 1 / 1;
-}
-.transition-linear {
-  transition: width 0.3s linear;
+function formatDate(dateObj) {
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  
+  const { start, end } = dateObj;
+
+  if (start === null && end === null) {
+    return `All Time`;
+  }
+
+  const startDate = new Date(start);
+  const startDay = startDate.getUTCDate(); // Используем getUTCDate() для дня
+  const startMonth = months[startDate.getUTCMonth()]; // Используем getUTCMonth() для месяца
+  const startYear = startDate.getUTCFullYear(); // Используем getUTCFullYear() для года
+
+  if (!end) {
+    // Если нет end, выводим полную дату для start
+    return `${startDay} ${startMonth} ${startYear}`;
+  }
+
+  const endDate = new Date(end);
+  const endDay = endDate.getUTCDate(); // Используем getUTCDate() для дня
+  const endMonth = months[endDate.getUTCMonth()]; // Используем getUTCMonth() для месяца
+  const endYear = endDate.getUTCFullYear(); // Используем getUTCFullYear() для года
+
+  // Если есть start и end, для start не выводим год, а для end выводим
+  return `${startDay} ${startMonth} - ${endDay} ${endMonth} ${endYear}`;
 }
-</style>
+
+</script>

package/src/modules/globals/components/layouts/Client.vue

@@ -65,7 +65,7 @@
 				'pos-l-0': !store.globals.state.isOpenSidebar
 			}"
 		>
-			<!-- <ShopCart /> -->
+			<ShopCart />
 
 			<Status 
 				v-if="store.globals.state.error.show" 

package/src/modules/globals/components/sections/SectionPageTitle.vue

@@ -49,7 +49,7 @@ const props = defineProps({
   title: String,
   actions: Array,
   tabs: Array,
-  tabs_current: Object
+  tabs_current: [Object, String]
 });
 
 const updateTabsCurrent = (newValue) => {

package/src/modules/globals/controllers/utils/queryProcessor.js

@@ -22,9 +22,27 @@ function getBasicOptions(query) {
   }
 }
 
+function getFilterDate(start, end) {
+  let filter = {};
+
+  if (start !== null) {
+    filter.$gte = new Date(start);
+  }
+  if (end !== null) {
+    filter.$lte = new Date(end);
+  }
+
+  if (start === 'null' && end === 'null') {
+    return [];
+  } else {
+    return [{ $match: { createdAt: filter } }];
+  }
+}
+
 function getTagsOptions(tags) {
-  if (tags && tags.length > 0) {
-    [{ $in: tags.split(',') }]
+  if (tags) {
+    const tagsArray = Array.isArray(tags) ? tags : [tags];
+    return [{ $match: { tags: { $in: tagsArray } } }];
   } else {
     return [];
   }
@@ -159,6 +177,7 @@ module.exports = {
   getSortingOptions, 
   getPaginationOptions,
   getTagsOptions,
+  getFilterDate,
   // Creator and Owner
   getCreatorUserLookupStage,
   getCreatorOrganizationLookupStage,

package/src/modules/globals/services/globals.store.js

@@ -65,7 +65,7 @@ class Store {
 
   async update(item) {
     return await this.request('/update', {
-      method: 'POST',
+      method: 'PUT',
       body: item
     });
   }
@@ -83,9 +83,9 @@ class Store {
     state.splice(0, state.length, ...items);
   }
 
-  addItem(item, state) {
+  addItem(item, state, property = '_id') {
     const targetState = state || this.state.items;
-    const existingItemIndex = targetState.findIndex(i => i._id === item._id);
+    const existingItemIndex = targetState.findIndex(i => i[property] === item[property]);
     
     if (existingItemIndex === -1) {
       targetState.splice(0, 0, item);
@@ -94,22 +94,18 @@ class Store {
     }
   }
 
-  updateItem(item, state) {
-    const targetState = state ? state.items : this.state.items;
-
-    const index = targetState.findIndex(i => i._id === item._id);
-
-    if (index !== -1) {
-      targetState.splice(index, 1, item); // замена найденного элемента обновленным
+  updateItem(item, state, property = '_id') {
+      const targetState = state || this.state.items;
+      const index = targetState.findIndex(i => i[property] === item[property]);
+      if (index !== -1) {
+        targetState.splice(index, 1, item);
+      }
     }
-  }
-
-  removeItem(item, state) {
-    const targetState = state ? state.items : this.state.items;
-
-    // Поиск и удаление элемента по его _id
-    const index = targetState.findIndex(i => i._id === item._id);
 
+  removeItem(item, state, property = '_id') {
+    const targetState = state || this.state.items;
+    // Поиск и удаление элемента по указанному ключу
+    const index = targetState.findIndex(i => i[property] === item[property]);
     if (index !== -1) {
       targetState.splice(index, 1);
     }

package/src/modules/icons/skeletons/SkeletonBlogpost.vue

@@ -1,7 +1,7 @@
 <template>
   <svg width="100%" height="20rem" xmlns="http://www.w3.org/2000/svg">
     <!-- Фоновый прямоугольник для всей карточки -->
-    <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="rgb(var(--grey))"/>
+    <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="rgb(var(--light))"/>
     
     <!-- Имитация шапки карточки -->
     <rect x="15" y="15" rx="4" ry="4" width="40%" height="20" fill="rgba(var(--black),0.05)"></rect>