@ozdao/prometheus-framework 0.2.112 → 0.2.114

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

@@ -1,400 +1,203 @@
 <template>
-  <div class="pos-relative w-100">
-    <div class="mn-b-semi flex-v-center flex-nowrap flex">
-      <h1 class="mn-r-small">Manage Gallery</h1>
-      <button  v-if="isEditablePath" @click="openModal(null)" class="t-white t-black bg-second i-big radius-extra">+</button>
-    </div>
-
-    <div ref="grid" class="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="cols-1 gap-thin pd-thin">
+    <SectionPageTitle
+      title="Manage Gallery"
+      @update:tabs_current="(update) => tab = update"
+      :tabs_current="tab"
+      :tabs="[
+        { name: 'All', value: 'all' },
+        { name: 'Featured', value: 'featured' },
+        { name: 'Published', value: 'published' },
+        { name: 'Draft', value: 'draft' },
+        { name: 'Archived', value: 'archived' }
+      ]"
+      :actions="[
+        { method: () => openPhotoPopup(null), label: 'Add Photo' }
+      ]"
+      class="mn-b-small bg-light bg-light radius-big"
+    />
+
+    <Feed
+      v-model:items="photos"
+      v-model:sort="gallery.state.sort"
+      :search="true"
+      :states="{
+        empty: {
+          title: 'No Photos Found',
+          description: 'Currently, there are no photos in gallery.'
+        },
+      }"
+      :store="{
+        read: (options) => gallery.read(options)
+      }"
+      :options="{
+        limit: 15,
+        owner: route.params._id,
+        ...(tab !== 'all' && { status: tab })
+      }"
+      v-slot="{ 
+        items 
+      }"
+      class="cols-3 gap-thin"
+    >
+      <div v-for="item in items"  :key="item._id" class="bg-light radius-small flex-column pos-relative flex-wrap">
+
+        <CardHeader 
+          :entity="item"
+          :entityType="'photo'"
+          :user="auth.state.user._id"
+          :owner="item.creator" 
+          :creator="item.creator"
+          :date="item.createdAt"
+          :actions="[
+            { method: () => deletePhoto(item._id), label: 'Delete' }
+          ]"
+          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="pd-small">
+          <Chips 
+            v-if="item.tags?.length > 0" 
+            :chips="item.tags"
           />
-          <div class="radius-small bg-white" v-else>
-            <img :src="'https://thecommunephuket.com/photos/' + item.cover" class="w-100 radius-small mn-b-small h-10r object-fit-cover " @click="openModal(item)" />
-            
-            <p class="t-black p-small mn-b-thin">
-              <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-b-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="(FILE_SERVER_URL || '') + 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-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"> 
-
-
-            <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
-              "
-            />
-
-            <EditImages :images="uploadedImages" @update:images="onUpdatedImages"  :uploadPath="'photos'" class="mn-b-semi"/>
-
-            <Button :submit="selectedImage._id ? updatePhoto : createPhoto" :callback="closeModal" class="mn-b-thin">
-              {{selectedImage._id ? 'Update' : 'Create'}}
-            </Button>
         </div>
-      </div>
-    </transition>
-    </div>
+     </div>
+    </Feed>
+
+    <Popup 
+      title="Add photo" 
+      @close-popup="closePhotoPopup" 
+      :isPopupOpen="isOpenPhotoPopup"
+      class="bg-white w-max-30r radius-big pd-big"
+    >
+      <img 
+        v-if="selectedImage.cover" 
+        :src="selectedImage.cover" 
+        class="radius-small w-100 mn-b-small h-20r object-fit-cover " 
+      />
+
+      <EditImages 
+        :images="uploadedImages" 
+        :uploadPath="'/photos'" 
+        @update:images="onUpdatedImages" 
+        class="mn-b-semi bg-light radius-medium"
+      />
+
+      <BlockTags
+        @tags-changed="newTags => selectedImage.tags = newTags"
+        :tags="selectedImage.tags"
+      />
+
+      <Button 
+        :submit="selectedImage._id ? updatePhoto : createPhoto" 
+        :callback="closePhotoPopup" 
+        class="mn-b-thin bg-main w-100"
+      >
+        {{selectedImage._id ? 'Update' : 'Publish'}}
+      </Button>
+    </Popup>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, reactive, computed } from 'vue'
+import { useRoute } from 'vue-router'
 
-import Field         from '@pf/src/components/Field/Field.vue'
-  import Button        from '@pf/src/components/Button/Button.vue'
-  import Select        from '@pf/src/components/Select/Select.vue'
+import Field from '@pf/src/components/Field/Field.vue'
+import Button from '@pf/src/components/Button/Button.vue'
+import Select from '@pf/src/components/Select/Select.vue'
+import Chips  from '@pf/src/components/Chips/Chips.vue'
+import Checkbox from '@pf/src/components/Checkbox/Checkbox.vue';
+import SelectMulti from '@pf/src/components/SelectMulti/SelectMulti.vue';
+import Popup from '@pf/src/components/Popup/Popup.vue'
+import Feed from '@pf/src/components/Feed/Feed.vue'
 
-import * as gallery from '@pf/src/modules/gallery/store/gallery';
+import * as auth from '@pf/src/modules/auth/store/auth';
+import * as organizations from '@pf/src/modules/organizations/store/organizations';
+  
+import gallery from '@pf/src/modules/gallery/store/gallery';
 
-import EditImages           from '@pf/src/components/EditImages/EditImages.vue';
+import CardHeader  from '@pf/src/modules/globals/components/blocks/CardHeader.vue'
+import SectionPageTitle from '@pf/src/modules/globals/components/sections/SectionPageTitle.vue'
 
+import EditImages from '@pf/src/components/EditImages/EditImages.vue';
+import BlockTags from '@pf/src/components/FieldTags/BlockTags.vue';
 
-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 route = useRoute();
 
+// Tab logic
+const tab = ref('all')
+// Popup
+const isOpenPhotoPopup = ref(false);
+function openPhotoPopup(photo) {
+  isOpenPhotoPopup.value = true;
+  selectedPhoto.value = photo;
+}
+function closePhotoPopup() {
+  isOpenPhotoPopup.value = false;
+  selectedPhoto.value = null;
+}
+// Selected Photo
+const selectedPhoto = ref(null);
+const selectedCategory = ref('all')
+const selectedImage = ref({
+  tags: null,
+  image: null
+})
 const uploadedImages = ref([])
-
 const onUpdatedImages = (newImages) => {
   uploadedImages.value = newImages
 }
-
-const filteredGallery = computed(() => {
-  if (selectedCategory.value === 'all') {
-    return gallery.state.gallery
-  } else {
-    return gallery.state.gallery.filter(item => item.categories.includes(selectedCategory.value))
-  }
-})
+// Gallery Grid
+const grid = ref(null)
+const photos = ref([])
+const categories = ['all', 'place', 'drinks', 'people', 'events']
 
 const loadMore = async () => {
   loading.value = true
-  await gallery.actions.fetchGallery(page, limit)
+  await gallery.read(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 gallery.actions.deletePhoto(id);
-};
-
-const editPhoto = (photo) => {
-  openModal(photo);
+  await gallery.delete(id);
 };
 
 const updatePhoto = async () => {
-  await gallery.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]);
-  }
+  await gallery.update(selectedImage.value)
+  closePhotoPopup()
 }
 
-// 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.')
+const createPhoto = async () => {
+  if (uploadedImages.length < 1) {
+    alert('Upload at least 1 image')
     return
   }
 
-  await gallery.actions.createPhoto({
+  let createdPhotos = await gallery.create({
     images: uploadedImages.value,
-    size: selectedImage.value.size,
-    categories: typeof selectedImage.value.categories === 'string' ? selectedImage.value.categories.split(',').map(item => item.trim()) : selectedImage.value.categories
+    tags: selectedImage.value.tags,
+    owner: {
+      type: 'Organization',
+      target: route.params._id
+    },
+    creator: {
+      type: 'User',
+      target: auth.state.user._id
+    }
   })
-  closeModal()
-}
-
 
-
-let selectedCategory = ref('all')
-
-const filter = (category) => {
-  selectedCategory.value = category
+  for (let createdPhoto of createdPhotos) {
+    gallery.addItem(createdPhoto, photos.value)
+  }
 }
 
 onMounted(async () => {
-  await gallery.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>