@ozdao/prometheus-framework 0.1.38 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/prometheus-framework",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "Web3 Framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",
@@ -140,10 +140,6 @@
     "./modules/reports/server": {
       "import": "./dist/reports.server.mjs",
       "require": "./dist/reports.server.js"
-    },
-    "./modules/icons": {
-      "import": "./dist/icons.client.js",
-      "require": "./dist/icons.client.cjs"
     }
   },
   "browser": {

package/src/components/LocationMarker/LocationMarker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="map-container">
+  <div class="pos-relative map-container">
     <div ref="mapContainer" class="w-100 h-100"></div>
     <button class="pos-absolute pos-t-regular pos-r-regular i-semi bg-second radius-extra" @click="setUserLocation">
       <svg class="i-medium" width="98" height="98" viewBox="0 0 98 98" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/components/LocationSelection/LocationSelection.vue

@@ -16,7 +16,7 @@
         placeholder="Enter delivery address"  
 
         class="
-          bg-black br-grey br-solid br-2px radius-big pd-medium mn-small
+          bg-white br-grey br-solid br-2px radius-big pd-medium mn-small
         "
 
         @update:country="newCountry => {

package/src/components/Navigation/Navigation.vue

@@ -14,7 +14,16 @@
         {{ t('HEADER.MENU.DISPENSARIES') }}
       </router-link>
     </li>
-     <li class="mn-r-semi">
+
+    <!-- <li class="mn-r-semi">
+      <router-link  
+        to="/gallery"
+      >
+        {{ t('HEADER.MENU.GALLERY') }}
+      </router-link>
+    </li> -->
+    
+    <li class="mn-r-semi">
       <router-link  
         to="/events"
       >
@@ -67,6 +76,7 @@ const text = {
           HOME: 'Home',
           MARKETPLACE: 'Marketplace',
           DISPENSARIES: 'Spots',
+          GALLERY: 'Gallery',
           EVENTS: 'Events',
           BLOG: "Community",
           GOVERNANCE: "Governance",
@@ -79,6 +89,7 @@ const text = {
           HOME: 'Главная',
           MARKETPLACE: 'Маркетплейс',
           DISPENSARIES: 'Места',
+          GALLERY: 'Галерея',
           EVENTS: 'События',
           BLOG: "Сообщество",
           GOVERNANCE: "Управление",

package/src/modules/auth/store/auth.js

@@ -214,10 +214,13 @@
 
   function getCookie(name) {
     if (process.env.MOBILE_APP) {
-      return CapacitorCookies.getCookie({
-        url: process.env.API_URL,
-        key: name
-      }).then(response => JSON.parse(response.value));
+      // return CapacitorCookies.getCookie({
+      //   url: process.env.API_URL,
+      //   key: name
+      // })
+      // .then(response => JSON.parse(response.value));
+      const cookie = Cookies.get(name);
+      return cookie ? JSON.parse(cookie) : null;
     } else {
       // Для веб-версии
       const cookie = Cookies.get(name);

package/src/modules/files/middlewares/server/md.js

@@ -23,6 +23,7 @@ const createMulterStorage = (folderName, publicPath) => {
 
       cb(null, userUploadPath);
     },
+    
     filename: function (req, file, cb) {
       cb(null, Date.now() + path.extname(file.originalname));
     }

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

@@ -0,0 +1,21 @@
+<template>
+	<div class="wrapper">
+		<Title :text="$t('gallery.title')" class="pd-medium" />
+
+		<div style="min-height: 100vh">
+			<GalleryWithCategories/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	/////////////////////////////
+	// COMPONENT DEPENDENCIES
+	/////////////////////////////
+	import { onMounted } from 'vue'
+	import { gsap } from "gsap/dist/gsap";
+  import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+
+	import Title from '@pf/src/modules/globals/components/sections/Title.vue';
+	import GalleryWithCategories from '@pf/src/modules/gallery/components/sections/GalleryWithCategories.vue';
+</script>

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

@@ -0,0 +1,408 @@
+<template>
+  <div>
+      <div class=" pd-medium 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 mn-r-big"
+          :class="{ 't-transp': 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">
+       <!-- :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>
+            <img :src="'/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"> 
+
+            <Upload
+              id="photo"
+              name="photo"
+              type="file"
+              class="t-black bg-grey pd-thin radius-small mn-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-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
+              "
+            />
+
+           
+
+            <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 { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const isEditablePath = false
+
+// 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 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) => {
+  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 (!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) => {
+  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/gallery.client.js

@@ -1,17 +1,14 @@
-// // Importing Vue components from the components directory
-// // import Profile from './components/pages/Profile.vue';
-// // import ProfileEdit from './components/pages/ProfileEdit.vue';
+import * as galleryStore from './store/gallery.store.js';
 
-// // 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 galleryRouter from './router/gallery.router.js';
 
-// // Importing Vue Router routes from the router directory
-// import filesRoutes from './router/files.router.js';
+import galleryPage from './components/pages/Gallery.vue'
 
-// // Exporting components, store modules, and routes
-// export {
-//   Profile,
-//   ProfileEdit,
-//   filesStore,
-//   filesRoutes
-// };
+// Exporting components, store modules, and routes
+export {
+  galleryStore,
+  galleryRouter,
+  filesStore,
+  filesRoutes
+};

package/src/modules/gallery/router/gallery.router.js

@@ -0,0 +1,10 @@
+const gallery = [{
+  name: 'Gallery',
+  path: 'gallery',
+  meta: {
+    title_hide: true
+  },
+  component: () => import(/* webpackChunkName: 'Gallery' */ '@pf/src/modules/gallery/components/pages/Gallery.vue'),
+}];
+
+export default gallery;

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

@@ -0,0 +1,22 @@
+<template>
+  <header class="w-100" itemprop="name">
+      <h2 class="h1" itemprop="headline">
+        <span class="text-fade-in">
+          <span class="text-splitted">{{ text }}</span>
+        </span>
+      </h2>
+    </header>
+</template>
+
+<script setup>
+import { ref, toRefs } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: 'Dreamy Moments Captured'
+  }
+})
+
+const { text } = toRefs(props)
+</script>

package/src/modules/marketplace/router/marketplace.js

@@ -30,7 +30,10 @@ const marketplace = [
           }
         ]
       },
-      {
+      
+    ],
+
+  },{
         path: 'products/recommendation',
         name: 'Product Recommmendation',
         meta: {
@@ -42,8 +45,6 @@ const marketplace = [
         component: () => import(/* webpackChunkName: 'Product Recommmendation' */ '@pf/src/modules/products/components/pages/ProductRecommmendation.vue'),
         props: route => ({ mood: route.query.mood }) 
       },
-    ]
-  }
 ];
 
 

package/src/modules/organizations/components/sections/Feed.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="feed">
+  <section class="pos-relative">
     <TransitionGroup tag="ul" name="fade" class="o-hidden bg-grey radius-big">
       <SkeletonOrganization
         v-if="isLoading"
@@ -16,7 +16,7 @@
       />
     </transition>
 
-    <TransitionGroup tag="ul" name="fade" class="container">
+    <TransitionGroup tag="ul" name="fade" class="cols-1">
       <CardOrganization 
         v-if="!isLoading && organizationsList.length > 0"
         @click="$router.push({name: 'Organization', params: {_id: organization._id}})" 

package/src/modules/products/components/pages/ProductRecommmendation.vue

@@ -3,7 +3,6 @@
         <Loader v-if="loading" :status="loadingText" class="pos-fixed"/>
 
         <div v-if="!loading && !showInput" class="section">
-            <Breadcrumbs class="mn-big fill-white t-white"/>
 
             <div v-if="!loading" class="mn-big">
                 <InputBig 
@@ -14,11 +13,14 @@
                     :action="t('action')"
                     @update:input="inputValue = $event"
                     @action="submitInput"
-                    class="t-black bs-blur-regular w-100"
+                    class="t-white bs-blur-regular w-100"
                  />
             </div>
 
-            <SectionProduct :product="products.state.current" :recommendation="products.state.current.recommendation" />
+            <SectionProduct 
+                :product="products.state.current" 
+                :recommendation="products.state.current.recommendation" 
+            />
         </div>
     </div>
 </template>