@ozdao/prometheus-framework 0.2.112 → 0.2.113

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

@@ -1,21 +1,21 @@
 <template>
   <div>
-      <div class=" pd-medium flex-v-center gap-big flex-nowrap flex pd-t-thin pd-b-thin o-scroll">
-        <a 
-          v-for="category in categories" 
-          :key="category" 
-          @click="filter(category)" 
-          class="h3 uppercase"
-          :class="{ 
-            't-transp': selectedCategory !== category,
-            'pd-thin bg-main radius-small': selectedCategory === category  
-          }"
-        >
-          {{ $t('gallery.categories.' + category) }}
-        </a>
-
-        <button  v-if="isEditablePath" @click="openModal(null)" class="t-black bg-second button-small button">+</button>
-      </div>
+    <div class=" pd-medium flex-v-center gap-big flex-nowrap flex pd-t-thin pd-b-thin o-scroll">
+      <a 
+        v-for="category in categories" 
+        :key="category" 
+        @click="filter(category)" 
+        class="h3 uppercase"
+        :class="{ 
+          't-transp': selectedCategory !== category,
+          'pd-thin bg-main radius-small': selectedCategory === category  
+        }"
+      >
+        {{ $t('gallery.categories.' + category) }}
+      </a>
+
+      <button  v-if="isEditablePath" @click="openModal(null)" class="t-black bg-second button-small button">+</button>
+    </div>
 
     <div ref="grid" class="pd-medium cols-4 gap-thin">
       <div 
@@ -37,74 +37,18 @@
       <!-- Loader -->
       <!-- <div v-show="loading" class="loader">Loading...</div>   -->
       <!-- Sentinel -->
-      <div ref="sentinel" class="sentinel"></div> 
-
-      <transition name="modal">
-        <div v-show="selectedImage.image !== false && modal === 'modal'" class="modal pd-thin">
-          <div class="modal-content radius-big">
-            <div class="">
-              <span class="close" @click="closeModal">&times;</span>
-              <img :src="'https://thecommunephuket.com/photos/' + selectedImage.image">
-            </div>
-          </div>
-        </div>
-      </transition>
-
-      <transition name="modal">
+      <div ref="sentinel" class="sentinel"/>
 
-      <div v-if="selectedImage.image !== false && modal === 'edit-modal'"  class="flex-v-center flex m modal pd-big">   
-        <div class="modal-content radius-small pd-medium bg-white">
+      <div v-show="selectedImage.image !== false && modal === 'modal'" class="modal pd-thin">
+        <div class="modal-content radius-big">
+          <div class="">
             <span class="close" @click="closeModal">&times;</span>
-            <img v-if="typeof previewImage === 'string'" :src="previewImage" class="radius-small w-100 mn-b-small h-20r object-fit-cover " />
-            <img v-if="typeof previewImage === 'object' && selectedImage.image !== null" class="radius-small  w-100 mn-b-small h-20r object-fit-cover " :src="'/photos/' + selectedImage.cover"> 
-
-            <Upload
-              id="photo"
-              name="photo"
-              type="file"
-              class="t-black bg-grey pd-thin radius-small mn-b-thin"
-              @file-change="onFileChange"
-              multiple="true"
-              v-if="!selectedImage._id"
-            />
-
-
-            <Select 
-              :options="sizeOptions"
-              label="Size"
-              v-model:select="selectedImage.size" 
-              placeholder="Select Size"
-              class="
-                bg-grey
-                pd-thin
-                radius-small
-                mn-b-thin
-                t-black
-              "
-            />
-           
-            <Field 
-              v-model:field="selectedImage.categories" 
-              type="text"
-              label="Categories"  
-              placeholder="Enter categories for image (comma separated)" 
-              class="
-                bg-grey
-                pd-thin
-                radius-small
-                mn-b-medium
-                t-black
-              "
-            />
-
-           
-
-            <Button :submit="selectedImage._id ? updatePhoto : createPhoto" :callback="closeModal" class="mn-b-thin">
-              {{selectedImage._id ? 'Update' : 'Create'}}
-            </Button>
+            <img :src="'https://thecommunephuket.com/photos/' + selectedImage.image">
+          </div>
         </div>
       </div>
-    </transition>
+
+
     </div>
   </div>
 </template>
@@ -118,7 +62,8 @@ import Button        from '@pf/src/components/Button/Button.vue'
 import Select        from '@pf/src/components/Select/Select.vue'
 import Upload        from '@pf/src/components/Upload/Upload.vue'
 
-import { state, actions } from '@pf/src/modules/gallery/store/gallery';
+import gallery from '@pf/src/modules/gallery/store/gallery';
+
 
 const route = useRoute()
 
@@ -204,62 +149,6 @@ const enableScroll = () => {
 }
 
 
-
-const sizeOptions = [
-  { name: 'Small',  value: '' },
-  { name: 'Regular',value: 'grid-item--width1 grid-item--height1' },
-  { name: 'Medium', value: 'grid-item--width2 grid-item--height2' },
-  { name: 'Big',    value: 'grid-item--width3 grid-item--height3' },
-];
-
-
-const deletePhoto = async (id) => {
-  await actions.deletePhoto(id);
-};
-
-const editPhoto = (photo) => {
-  openModal(photo);
-};
-
-const updatePhoto = async () => {
-  await actions.updatePhoto(selectedImage.value)
-  closeModal()
-}
-
-
-// To handle file input change
-const onFileChange = (e) => {
-  const files = e.files;
-  selectedImage.value.image = files; // Assign the files array to the image property
-
-  // Show a preview of the first image if multiple files are selected
-  if (files && files.length > 0) {
-    const reader = new FileReader()
-    reader.onload = e => {
-      previewImage.value = e.target.result;
-    }
-    reader.readAsDataURL(files[0]);
-  }
-}
-
-// Function to create photo
-const createPhoto = async (e) => {
-  // Your function body
-  if (!selectedImage.value.image || !selectedImage.value.categories || !selectedImage.value.size) {
-    console.error('All fields are required.')
-    return
-  }
-
-  await actions.createPhoto({
-    ...selectedImage.value,
-    size: selectedImage.value.size,
-    categories: typeof selectedImage.value.categories === 'string' ? selectedImage.value.categories.split(',').map(item => item.trim()) : selectedImage.value.categories
-  })
-  closeModal()
-}
-
-
-
 let selectedCategory = ref('all')
 
 const filter = (category) => {
@@ -284,111 +173,4 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.grid {
-  width: 100%;
-}
-.grid-item {
-  width: 33%;
-  height: 33vh;
-}
-
-.grid-item--width1 {
-  width: 50%;
-}
-.grid-item--height1 {
-  height: 50vh;
-}
-
-.grid-item--width2 {
-  width: 66%;
-}
-.grid-item--height2 {
-  height: 66vh;
-}
-
-.grid-item--width3 {
-  width: 100%;
-}
-.grid-item--height3 {
-  height: 100vh;
-}
-
-.modal {
-  position: fixed; 
-  z-index: 1; 
-  left: 0;
-  top: 0;
-  width: 100%; 
-  height: 100%; 
-  overflow: auto; 
-  background-color: rgba(0,0,0,0.9); 
-  z-index: 50;
-}
-
-.modal-content {
-  margin: auto;
-/*  display: flex;*/
-  z-index: 5;
-  width: 100%;
-  height: 100%;
-  overflow: scroll;
-}
-
-.close {
-  position: fixed;
-      top: 3rem;
-    right: 4rem;
-
-  color: #f1f1f1;
-  font-size: 40px;
-  font-weight: bold;
-  transition: 0.3s;
-  z-index: 10;
-}
-
-.close:hover,
-.close:focus {
-  color: #bbb;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-/* Transitions */
-.modal-enter-active, .modal-leave-active {
-  transition: opacity .5s;
-}
-.modal-enter, .modal-leave-to {
-  opacity: 0;
-}
-
-@media screen and (max-width:  1024px) {
-.grid {
-  width: 100%;
-}
-.grid-item {
-  width: 50%;
-  height: 25vh;
-}
-
-.grid-item--width1 {
-  width: 50%;
-}
-.grid-item--height1 {
-  height: 25vh;
-}
-
-.grid-item--width2 {
-  width: 100%;
-}
-.grid-item--height2 {
-  height: 50vh;
-}
-
-.grid-item--width3 {
-  width: 100%;
-}
-.grid-item--height3 {
-  height: 50vh;
-}
-}
 </style>

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

@@ -1,7 +1,8 @@
+const path = require('path');
 // --------------------------------------------------
 // DEPENENCY
 // --------------------------------------------------
-const path = require('path');
+const queryProcessorGlobals = require('@pf/src/modules/globals/controllers/utils/queryProcessor');
 // --------------------------------------------------
 // METHODS
 // --------------------------------------------------
@@ -9,68 +10,86 @@ const controllerFactory = (db) => {
   const Photo = db.photo;
 
   const read = async (req, res) => {
-    const { page, limit } = req.query;
-
-    console.log(req.query)
-    console.log(req.body)
-
-    let query = Photo.find().sort({$natural: -1});
+      
+      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);
 
-    if (page) {
-      const skipValue = (parseInt(page) - 1) * (limit ? parseInt(limit) : 10);
-      query = query.skip(skipValue);
-    }
+        console.log(photos)
 
-    if (limit) {
-      query = query.limit(parseInt(limit));
-    }
+        if (!photos) {
+          return res.status(404).send({ errorCode: "PHOTOS_NOT_FOUND", message: "Photos not found." });
+        }
 
-    try {
-      const photos = await query;
+        res.status(200).send(photos);
 
-      if (!photos.length) {
-        return res.status(404).send({ message: "Photos not found." });
+      } catch (err) {
+        console.log(err);
+        res.status(500).send({ errorCode: "GET_PHOTOS_FAILED", message: "Error occurred while fetching photos.", error: err });
       }
-
-      res.status(200).send(photos);
-    } catch (err) {
-      res.status(500).send({ message: err.message || "An error occurred." });
-    }
-  };
+    };
 
   const create = async (req, res) => {
     try {
-      // Извлечение данных из тела запроса
-      const { categories, size, images } = req.body;
+      const { tags, creator, owner, images } = req.body;
 
-      // Проверка, что все необходимые данные предоставлены
-      if (!categories || !size || !images || images.length === 0) {
+      if (!creator || !owner || !images || images.length === 0) {
         return res.status(400).send({ message: "All fields are required." });
       }
       
-      // Проход по всем изображениям и их создание
       const photos = [];
 
-      for (let imageLink of images) {
-        const filename = path.basename(imageLink);
+      for (let image of images) {
+        const filename = path.basename(image);
+        const directory = path.dirname(image);
 
         const newPhoto = {
-          categories,
-          size,
-          image: filename, // Теперь сохраняется только имя файла
-          cover: 'thumbnail_' + filename, // Путь для тумбнейла теперь использует только имя файла
+          tags,
+          creator,
+          owner,
+          image,
+          cover: path.join(directory, 'thumbnail_' + filename) // создаем путь для миниатюры
         };
         
-        const photo = await Photo.create(newPhoto);
+        let photo = await Photo.create(newPhoto);
+
         if (!photo) {
-          return res.status(404).send({ message: `Photo with link ${imageLink} is not created.` });
+          return res.status(404).send({ message: `Photo with link ${image} is not created.` });
         }
+
+        photo = await Photo.findOne({ _id: photo._id }).populate('creator.target').populate('owner.target')
+
+        console.log(photo)
+
         photos.push(photo);
       }
 
       res.status(200).send(photos);
     } catch (error) {
-      console.log(error);
+      console.log(error)
       res.status(500).send({ message: error });
     }
   }

package/src/modules/gallery/models/photo.model.js

@@ -1,26 +1,35 @@
-module.exports = (mongoose) => {
-  const Photochema = new mongoose.Schema({
-    categories: {
-      type: [String],
-    },
-    size: {
-      type: Object,
-    },
+const applyCommonSchema = require('@pf/src/modules/globals/models/common.schema.js');
+const applyEngagementSchema = require('@pf/src/modules/globals/models/engagement.schema.js');
+const applyOwnershipSchema = require('@pf/src/modules/globals/models/ownership.schema.js');
+
+module.exports = (db) => {
+  const PhotoSchema = new db.mongoose.Schema({
     cover: {
       type: String,
       required: true
     },
+    tags: {
+      type: Array
+    },
     image: {
       type: String,
       required: true
     },
   }, {
     timestamps: { 
-        currentTime: () => Date.now() 
+      currentTime: () => Date.now() 
     }
-})
+  })
+
+  applyCommonSchema(PhotoSchema,db);
+  applyEngagementSchema(PhotoSchema,db);
+  applyOwnershipSchema(PhotoSchema,db);
+
+  const Photo = db.mongoose.model("Photo", PhotoSchema);
 
-  const Photo = mongoose.model("Photo", Photochema);
+  Photo.collection.dropIndexes(function (err, results) {
+    // Handle errors
+  });
 
   return Photo;
 };

package/src/modules/gallery/routes/gallery.routes.js

@@ -9,7 +9,7 @@ module.exports = function(app, db, origins) {
   const { authJwt } = middlewareFactoryGlobal(db);
 
   app.get(
-    "/api/gallery",
+    "/api/gallery/read",
     controller.read
   );
   
@@ -19,13 +19,13 @@ module.exports = function(app, db, origins) {
     controller.create
   );
 
-  app.post(
+  app.put(
     "/api/gallery/update",
     [authJwt.verifyToken],
     controller.update
   );
 
-  app.post(
+  app.delete(
     "/api/gallery/delete/:_id",
     [authJwt.verifyToken],
     controller.delete

package/src/modules/gallery/store/gallery.js

@@ -1,80 +1,5 @@
-// Dependencies
-import axios from 'axios';
-import { reactive } from "vue";
+import Store from '@pf/src/modules/globals/services/globals.store.js'
 
-const clientUrl = process.env.API_URL;
+const gallery = new Store(`${process.env.API_URL}/api/gallery`)
 
-const $axios = axios.create({baseURL: clientUrl, withCredentials: true})
-
-// State
-const state = reactive({
-  gallery: [],
-});
-
-const actions = {
-  async fetchGallery(page, limit) {
-    const params = [];
-    if (page) params.push(`page=${page}`);
-    if (limit) params.push(`limit=${limit}`);
-    const url = `/api/gallery${params.length ? `?${params.join('&')}` : ''}`;
-
-    try {
-      const response = await $axios.get(url);
-
-      console.log(response)
-
-      if (response && response.data) {
-        state.gallery = [...state.gallery, ...response.data];
-        return response.data; // Optionally return the fetched data
-      }
-    } catch (error) {
-      console.error('Error fetching gallery:', error);
-      throw error; // Re-throwing the error allows the caller to handle it, if needed
-    }
-  },
-  
-  async createPhoto(photos) {
-    try {
-      const response = await $axios.post('/api/gallery/create', photos)
-      console.log(response.data)
-      state.gallery = [...response.data, ...state.gallery];
-    } catch (error) {
-      console.error(error);
-    }
-  },
-
-  async updatePhoto (photo) {
-    try {
-      const updatedPhoto = {
-        ...photo,
-        categories: typeof photo.categories === 'string' ? photo.categories.split(',').map(item => item.trim()) : photo.categories,
-      };
-      const response = await axios.post(`/api/gallery/update`, updatedPhoto);
-      const index = state.gallery.findIndex(p => p._id === photo._id);
-      if (index !== -1) {
-        state.gallery[index] = response.data;
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  },
-
-
-  async deletePhoto (photoId) {
-    try {
-
-      const response =  await $axios.post(`/api/gallery/delete/${photoId}`);
-      const index = state.gallery.findIndex(p => p._id === photoId);
-      if (index !== -1) {
-        state.gallery.splice(index, 1);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  },
-};
-
-export {
-  state,
-  actions
-};
+export default gallery

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

@@ -24,7 +24,7 @@ const updateSearch = (search) => {
 </script>
 
 <template>
-  <div class="flex-v-center flex-nowrap flex pd-small bg-grey w-100 radius-big">
+  <div class="flex-v-center flex-nowrap flex pd-small bg-light w-100 radius-big">
     <IconSearch class="i-medium t-transp mn-r-thin" />
 
     <Field

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

@@ -0,0 +1,77 @@
+<script setup>
+import { ref } from 'vue';
+
+import Radio from "@pf/src/components/Radio/Radio.vue";
+
+import ButtonSort  from '@pf/src/modules/globals/components/elements/ButtonSort.vue'
+import IconSort from '@pf/src/modules/icons/navigation/IconSort.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Sorting Options'
+  },
+  options: {
+    type: Array,
+    default: [{
+      label: 'Date',
+      value: 'createdAt'
+    },{
+      label: 'Popularity',
+      value: 'popularity'
+    },{
+      label: 'Creator',
+      value: 'creator'
+    }]
+  }
+});
+
+const param = defineModel('param')
+const order = defineModel('order')
+</script>
+
+<template>
+  <div class="w-100 o-hidden">
+    <h4 class="mn-b-thin">{{title}}</h4>
+
+    <Radio 
+      v-for="option in options"
+      v-model:radio="param"
+      :label="option.label"
+      :value="option.value"
+      class="w-100 mn-b-thin"
+    />
+
+    <div class="w-100 flex-nowrap flex gap-micro">
+      <button 
+        @click.stop="() => order = 'asc'"
+        :class="{
+          'bg-white t-black': order === 'asc'
+        }"
+        class="radius-semi flex-center w-100 uppercase p-small flex-nowrap flex gap-thin pd-thin br-solid br-1px br-grey-transp-25 w-100"
+      >
+        <IconSort
+          :order="'asc'"
+          :fill="order === 'asc' ? 'rgb(var(--black))' : 'rgb(var(--white))'"
+          class="i-small"
+        />
+        Ascending
+      </button>
+
+      <button 
+        @click.stop="() => order = 'desc'"
+        :class="{
+          'bg-white t-black': order === 'desc'
+        }"
+        class="radius-semi flex-center w-100 uppercase p-small flex-nowrap flex gap-thin pd-thin br-solid br-1px br-grey-transp-25 w-100"
+      >
+        <IconSort
+          :order="'desc'"
+          :fill="order === 'desc' ? 'rgb(var(--black))' : 'rgb(var(--white))'"
+          class="i-small"
+        />
+        Descending
+      </button>
+    </div>
+  </div>
+</template>