@ozdao/prometheus-framework 0.1.16 → 0.1.17

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

@@ -0,0 +1,414 @@
+<template>
+  <div class="pos-relative w-100">
+    <!-- <GradientOverlay> -->
+      <div class="w-100 o-hidden">
+      <div class=" pd-medium flex-nowrap flex pd-t-thin pd-b-thin o-scroll">
+        
+        <button  v-if="isEditablePath" @click="openModal(null)" class="mn-r-small t-white t-black bg-second button-small button">Add photos +</button>
+<!-- 
+        <a 
+          v-for="category in categories" 
+          :key="category" 
+          @click="filter(category)" 
+          class="h3 uppercase mn-r-big"
+          :class="{ 't-transp': selectedCategory !== category }"
+        >
+          {{ $t('gallery.categories.' + category) }}
+        </a> -->
+
+      </div>
+      </div>
+    <!-- <GradientOverlay/> -->
+
+    <div ref="grid" class="pd-medium cols-4 gap-thin">
+       <!-- :class="['grid-item pd-small', item.size.value, ...item.categories]" -->
+      <div 
+        v-for="(item, index) in filteredGallery" 
+        :key="item.id" 
+        :data-id="item.id"
+      >
+
+        <transition name="scaleIn" mode="in-out">
+          <img 
+            v-if="!isEditablePath && grid" 
+            :src="'https://thecommunephuket.com/photos/' + item.cover" 
+            class="w-100 h-100 o-hidden radius-medium object-fit-cover" 
+            @click="openModal(item.image)"
+          />
+          <div class="pd-small radius-small bg-white" v-else>
+            {{item._id}}
+            <img :src="'https://thecommunephuket.com/photos/' + item.cover" class="w-100 radius-small mn-small h-10r object-fit-cover " @click="openModal(item)" />
+            
+            <p class="t-black p-small mn-small">
+              <span class="uppercase t-transp ">Size</span>
+              <br>
+              <span class="pd-2px radius-big d-inline-block bg-grey">{{item.size.name}}</span>
+            </p>
+
+            <p class="t-black p-small mn-small uppe">
+              <span class="uppercase t-transp">Categories</span>
+              <br> 
+              <span class="pd-2px radius-big d-inline-block bg-grey t-semi" v-for="category in item.categories">{{category}}</span>
+            </p>
+            
+            <div class="flex-nowrap flex">
+            <!-- <button class="mn-r-thin button-small w-100 button"  @click="editPhoto(item)">Edit</button> -->
+             <button class="button-small w-100 button" @click="deletePhoto(item._id)">Delete</button>
+            </div>
+          </div>
+        </transition>
+      </div>
+
+      <!-- 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 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">
+            <span class="close" @click="closeModal">&times;</span>
+            <img v-if="typeof previewImage === 'string'" :src="previewImage" class="radius-small w-100 mn-small h-20r object-fit-cover " />
+            <img v-if="typeof previewImage === 'object' && selectedImage.image !== null" class="radius-small  w-100 mn-small h-20r object-fit-cover " :src="'/photos/' + selectedImage.cover"> 
+
+
+            <Select 
+              :options="sizeOptions"
+              label="Size"
+              v-model:select="selectedImage.size" 
+              placeholder="Select Size"
+              class="
+                bg-grey
+                pd-thin
+                radius-small
+                mn-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-medium
+                t-black
+              "
+            />
+
+            <EditImages :images="uploadedImages" @update:images="onUpdatedImages"  :uploadPath="'photos'" class="mn-semi"/>
+
+            <Button :submit="selectedImage._id ? updatePhoto : createPhoto" :callback="closeModal" class="mn-thin">
+              {{selectedImage._id ? 'Update' : 'Create'}}
+            </Button>
+        </div>
+      </div>
+    </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, reactive, computed } from 'vue'
+import { Button, Field, Select, Upload } from '@ozdao/prometheus-framework'
+import { state, actions } from '@pf/src/modules/gallery/store/gallery';
+
+import EditImages           from '@pf/src/components/EditImages/EditImages.vue';
+
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const isEditablePath = ref(true)
+
+// Gallery Grid
+const grid = ref(null)
+
+const categories = ['all', 'place', 'drinks', 'people', 'events']
+
+// Pagination
+let page = 1
+const limit = 10
+
+let sentinel = ref(null)
+let loading = ref(false)
+
+const uploadedImages = ref([])
+
+const onUpdatedImages = (newImages) => {
+  uploadedImages.value = newImages
+}
+
+const filteredGallery = computed(() => {
+  if (selectedCategory.value === 'all') {
+    return state.gallery
+  } else {
+    return state.gallery.filter(item => item.categories.includes(selectedCategory.value))
+  }
+})
+
+const loadMore = async () => {
+  loading.value = true
+  await actions.fetchGallery(page, limit)
+  loading.value = false
+}
+
+// Popup
+const modal = ref(null)
+// Popup
+const selectedImage = ref({
+  categories: '',
+  size: '',
+  image: false
+})
+
+const previewImage = ref(null)
+
+const openModal = (image) => {
+  console.log(isEditablePath.value)
+  if(isEditablePath.value) {
+    // Если мы находимся на пути /account/gallery, открываем редактирование
+    openEditModal(image)
+  } else {
+    // В противном случае открываем просмотр
+    modal.value = "modal"
+    selectedImage.value.image = image
+    disableScroll()
+  }
+}
+
+const openEditModal = (image) => {
+  modal.value = "edit-modal"
+  selectedImage.value = image || {
+    categories: '',
+    size: '',
+    image: null
+  }
+  disableScroll()
+}
+
+const closeModal = () => {
+  selectedImage.value = {
+    categories: '',
+    size: '',
+    image: false
+  }
+   previewImage.value = null;
+  enableScroll()
+}
+
+const disableScroll = () => {
+  document.body.style.overflow = 'hidden'
+  document.documentElement.style.overflow = 'hidden'
+}
+
+const enableScroll = () => {
+  document.body.style.overflow = ''
+  document.documentElement.style.overflow = ''
+}
+
+
+
+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 (uploadedImages.length < 1 || !selectedImage.value.categories || !selectedImage.value.size) {
+    console.error('All fields are required.')
+    return
+  }
+
+  await actions.createPhoto({
+    images: uploadedImages.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) => {
+  selectedCategory.value = category
+}
+
+onMounted(async () => {
+  await actions.fetchGallery(page, limit)
+
+  if (typeof window !== 'undefined') {
+    const observer = new IntersectionObserver(entries => {
+      if (entries.some(entry => entry.isIntersecting)) {
+        page += 1
+        loadMore()
+      }
+    })
+
+    observer.observe(sentinel.value)
+  }
+})
+
+</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

@@ -2,98 +2,112 @@
 // DEPENENCY
 // --------------------------------------------------
 const path = require('path');
-const { v4: uuidv4 } = require('uuid');
-// Multer
-const multer = require('multer');
-// Configure multer storage
-const photosPath = path.join(__dirname, '../../public/photos');
-
-const storage = multer.diskStorage({
-  destination: function(req, file, cb) {
-    cb(null, photosPath)
-  },
-  filename: function(req, file, cb) {
-    // Generate a 6-digit random number
-    const uniqueSuffix = Math.floor(100000 + Math.random() * 900000);
-    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
-  }
-});
-const upload = multer({ storage: storage });
-// --------------------------------------------------
-// Used models
-// --------------------------------------------------
-const db = require("../models");
-const Photo = db.photo;
 // --------------------------------------------------
 // METHODS
 // --------------------------------------------------
-exports.read = (req, res) => {
-  Photo.find()
-    .then(photos => {
-      if (!photos) {
+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});
+
+    if (page) {
+      const skipValue = (parseInt(page) - 1) * (limit ? parseInt(limit) : 10);
+      query = query.skip(skipValue);
+    }
+
+    if (limit) {
+      query = query.limit(parseInt(limit));
+    }
+
+    try {
+      const photos = await query;
+
+      if (!photos.length) {
         return res.status(404).send({ message: "Photos not found." });
       }
+
       res.status(200).send(photos);
-    })
-    .catch(err => {
-      if (err) {
-        return res.status(500).send({ message: err });
-      }
-    });
-};
+    } catch (err) {
+      res.status(500).send({ message: err.message || "An error occurred." });
+    }
+  };
 
-exports.create = [
-  upload.single('image'),
-  async (req, res) => {
+  const create = async (req, res) => {
     try {
-      const newPhoto = {
-        categories: req.body.categories,
-        size: JSON.parse(req.body.size),
-        image: req.file.filename,
+      // Извлечение данных из тела запроса
+      const { categories, size, images } = req.body;
+
+      // Проверка, что все необходимые данные предоставлены
+      if (!categories || !size || !images || images.length === 0) {
+        return res.status(400).send({ message: "All fields are required." });
       }
       
-      const photo = await Photo.create(newPhoto);
+      // Проход по всем изображениям и их создание
+      const photos = [];
 
-      if (!photo) {
-        return res.status(404).send({ message: "Photo is not created." });
+      for (let imageLink of images) {
+        const newPhoto = {
+          categories,
+          size,
+          image: imageLink,
+          cover: 'thumbnail_' + imageLink,
+        };
+        
+        const photo = await Photo.create(newPhoto);
+        if (!photo) {
+          return res.status(404).send({ message: `Photo with link ${imageLink} is not created.` });
+        }
+        photos.push(photo);
       }
 
-      res.status(200).send(photo);
+      res.status(200).send(photos);
     } catch (error) {
-      console.log(error)
+      console.log(error);
       res.status(500).send({ message: error });
     }
   }
-];
-
 
+  const update = (req, res) => {
+    Photo.findOneAndUpdate({_id:req.body._id}, req.body, { new: true })
+      .exec()
+      .then(photo => {
+        if (!photo) {
+          return res.status(404).send({ message: "Something went wrong when updating photo." });
+        }
+        res.status(200).send(photo);
+      })
+      .catch(err => {
+        console.log(err)
+        return res.status(500).send({ message: err });
+      });
+  };
 
-exports.update = (req, res) => {
-  Photo.findOneAndUpdate({_id:req.body._id}, req.body, { new: true })
-    .exec()
-    .then(photo => {
-      if (!photo) {
-        return res.status(404).send({ message: "Something went wrong when updating photo." });
-      }
-      res.status(200).send(photo);
-    })
-    .catch(err => {
-      console.log(err)
-      return res.status(500).send({ message: err });
-    });
-};
+  const deletePhoto = (req, res) => {
+    Photo.findOneAndDelete({_id: req.params._id})
+      .exec()
+      .then(photo => {
+        if (!photo) {
+          return res.status(404).send({ message: "Photo is not deleted." });
+        }
+        res.status(200).send(photo);
+      })
+      .catch(err => {
+        return res.status(500).send({ message: err });
+      });
+  };
 
-exports.delete = (req, res) => {
-  Photo.findOneAndDelete({_id: req.params._id})
-    .exec()
-    .then(photo => {
-      if (!photo) {
-        return res.status(404).send({ message: "Photo is not deleted." });
-      }
-      res.status(200).send(photo);
-    })
-    .catch(err => {
-      return res.status(500).send({ message: err });
-    });
+  return {
+    read,
+    create,
+    update,
+    delete: deletePhoto
+  };
 };
 
+module.exports = controllerFactory;

package/src/modules/gallery/gallery.client.js

@@ -0,0 +1,17 @@
+// // Importing Vue components from the components directory
+// // import Profile from './components/pages/Profile.vue';
+// // import ProfileEdit from './components/pages/ProfileEdit.vue';
+
+// // Importing Vuex store modules from the store directory
+// import * as filesStore from './store/files.store.js';
+
+// // Importing Vue Router routes from the router directory
+// import filesRoutes from './router/files.router.js';
+
+// // Exporting components, store modules, and routes
+// export {
+//   Profile,
+//   ProfileEdit,
+//   filesStore,
+//   filesRoutes
+// };

package/src/modules/gallery/gallery.server.js

@@ -0,0 +1,13 @@
+// Importing controllers from the controllers directory
+const galleryController = require('./controllers/gallery.controller.js');
+// Importing routes from the routes directory
+const galleryRoutes = require('./routes/gallery.routes.js');
+// Models
+// const FileModel = require('./models/file.model.js');
+
+// Exporting controllers, routes, and models
+module.exports = {
+  galleryController,
+  galleryRoutes,
+  // FileModel
+};

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

@@ -1,16 +1,22 @@
-const mongoose = require('mongoose');
+module.exports = (mongoose) => {
+  const Photochema = new mongoose.Schema({
+    categories: {
+      type: [String],
+    },
+    size: {
+      type: Object,
+    },
+    cover: {
+      type: String,
+      required: true
+    },
+    image: {
+      type: String,
+      required: true
+    },
+  })
 
-const photoSchema = new mongoose.Schema({
-  categories: {
-    type: [String],
-  },
-  size: {
-    type: Object,
-  },
-  image: {
-    type: String,
-    required: true
-  },
-});
+  const Photo = mongoose.model("Photo", Photochema);
 
-module.exports = mongoose.model('Photo', photoSchema);
+  return Photo;
+};