@ozdao/prometheus-framework 0.2.221 → 0.2.223

package/src/modules/events/components/elements/ButtonCheck.vue

@@ -1,34 +1,30 @@
 <template>
   <div>
-    <Button :submit="openPublicationPopup" class="bg-main button-small radius-extra button">
+    <Button :submit="startScan" class="bg-main button-small radius-extra button">
       Check Tickets
     </Button>
-
-    <Popup title="Добавить участника" @close-popup="closePublicationPopup" :isPopupOpen="isPublicationPopup"
-      class="w-max-30r h-max-30r t-left pd-big bg-white radius-big">
+    <Popup
+      title="Scan QR Code"
+      @close-popup="closePublicationPopup"
+      :isPopupOpen="isPublicationPopup"
+      class="w-max-30r h-max-30r t-left pd-big bg-white radius-big"
+    >
       <h3 class="mn-b-small">Scan QR Code</h3>
-
       <div class="h-max">
-        <QrcodeStream :track="paintBoundingBox" @detect="onDetect" @error="onError"></QrcodeStream>
+        <!-- Scanning will be handled by Capacitor, so we don't need a visual component here -->
       </div>
     </Popup>
   </div>
 </template>
 
 <script setup>
-// Deps
 import { ref } from 'vue'
-import { QrcodeStream } from 'vue-qrcode-reader'
-
-// In components
+import { BarcodeScanner } from '@capacitor-mlkit/barcode-scanning'
 import Popup from '@pf/src/components/Popup/Popup.vue'
 import Button from '@pf/src/components/Button/Button.vue'
-
-// Methods 
 import * as tickets from '@pf/src/modules/events/store/tickets'
 
-const emits = defineEmits('qrcodecheck')
-
+const emits = defineEmits(['qrcodecheck'])
 const isPublicationPopup = ref(false)
 const error = ref('')
 
@@ -40,67 +36,41 @@ function closePublicationPopup() {
   isPublicationPopup.value = false
 }
 
-const result = ref(null)
-
-async function onDetect(detectedCodes) {
-  result.value = detectedCodes.map((code) => code.rawValue)
-
+async function startScan() {
+  openPublicationPopup()
+  
   try {
-    const qrcode = result.value[0] || ''
-
-    if (!qrcode) {
-      throw new Error('Troubles with qrcode reading');
+    await BarcodeScanner.isSupported()
+    const { barcodes } = await BarcodeScanner.scan()
+    
+    if (barcodes.length > 0) {
+      await processBarcode(barcodes[0].rawValue)
+    } else {
+      throw new Error('No barcode detected')
     }
-
-    const response = await tickets.actions.update({
-      _id: qrcode,
-      status: 'used',
-      check: true
-    })
-
-    alert("Ticket checked. And it's all right!");
   } catch (e) {
-    alert(`Ticket is not found, already used or deactivated!`);
-  }
-
-  emits('qrcodecheck')
-}
-
-function onError(err) {
-  error.value = `[${err.name}]: `
-
-  if (err.name === 'NotAllowedError') {
-    error.value += 'you need to grant camera access permission'
-  } else if (err.name === 'NotFoundError') {
-    error.value += 'no camera on this device'
-  } else if (err.name === 'NotSupportedError') {
-    error.value += 'secure context required (HTTPS, localhost)'
-  } else if (err.name === 'NotReadableError') {
-    error.value += 'is the camera already in use?'
-  } else if (err.name === 'OverconstrainedError') {
-    error.value += 'installed cameras are not suitable'
-  } else if (err.name === 'StreamApiNotSupportedError') {
-    error.value += 'Stream API is not supported in this browser'
-  } else if (err.name === 'InsecureContextError') {
-    error.value += 'Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'
-  } else {
-    error.value += err.message
+    error.value = e.message
+    alert(`Error: ${error.value}`)
+  } finally {
+    closePublicationPopup()
   }
 }
 
-function paintBoundingBox(detectedCodes, ctx) {
-  for (const detectedCode of detectedCodes) {
-    const {
-      boundingBox: { x, y, width, height }
-    } = detectedCode
-
-    ctx.lineWidth = 2
-    ctx.strokeStyle = '#007bff'
-    ctx.strokeRect(x, y, width, height)
+async function processBarcode(qrcode) {
+  try {
+    if (!qrcode) {
+      throw new Error('Troubles with qrcode reading')
+    }
+    const response = await tickets.actions.update({ _id: qrcode, status: 'used', check: true })
+    alert("Ticket checked. And it's all right!")
+  } catch (e) {
+    alert(`Ticket is not found, already used or deactivated!`)
+  } finally {
+    emits('qrcodecheck')
   }
 }
 </script>
 
 <style scoped>
 /* Existing styles can stay unchanged */
-</style>
+</style>

package/src/modules/events/components/pages/EditEvent.vue

@@ -21,6 +21,16 @@
       class="mn-b-semi w-100 bg-light pd-medium radius-small" 
     />
 
+    <h3 class="mn-b-small">Date</h3>
+    <VueDatePicker v-model="date"  range class="z-index-3 radius-small mn-b-semi bg-light" />
+
+   <!--    <Calendar
+        v-model:date="date"
+        :locale="$i18n.locale"
+        :allowRange="false"
+        class="radius-semi w-100 o-hidden bg-light"
+      /> -->
+
     <h3
       v-if="(auth.state.access.roles) && (auth.state.access.roles.includes('ROLE_MODERATOR') || auth.state.access.roles.includes('ROLE_ADMIN'))"
       class="mn-b-small"
@@ -28,21 +38,9 @@
       Tickets
     </h3>
 
-     <div 
-      v-if="(auth.state.access.roles) && (auth.state.access.roles.includes('ROLE_MODERATOR') || auth.state.access.roles.includes('ROLE_ADMIN'))"
-      class="mn-b-semi w-100 bg-light pd-medium radius-small"
-      @click="router.push({
-        name: 'Edit Event Tickets',
-        params: {
-          url: route.params.url
-        }
-      })"
-    >
-      Edit tickets
-    </div>
   
     <h3
-      v-if="(auth.state.access.roles) && (auth.state.access.roles.includes('ROLE_MODERATOR') || auth.state.access.roles.includes('ROLE_ADMIN'))"
+      v-if="!route.params.url && (auth.state.access.roles) && (auth.state.access.roles.includes('ROLE_MODERATOR') || auth.state.access.roles.includes('ROLE_ADMIN'))"
       class="mn-b-small"
     >
         Special Details
@@ -50,7 +48,7 @@
 
 
     <Checkbox 
-      v-if="(auth.state.access.roles) && (auth.state.access.roles.includes('ROLE_MODERATOR') || auth.state.access.roles.includes('ROLE_ADMIN'))"
+      v-if="!route.params.url && (auth.state.access.roles) && (auth.state.access.roles.includes('ROLE_MODERATOR') || auth.state.access.roles.includes('ROLE_ADMIN'))"
       :label="'Special'"
       :radio="event.special"
       @update:radio="updateEvent => event.special = !event.special"
@@ -344,25 +342,25 @@
       <Field
         v-model:field="event.specialData.previousTitle"
         placeholder="Title"
-        value="Explore our exclusive party archive"
+        :value="event.specialData.previousDescription || 'Explore our exclusive party archive'"
         class="w-100  bg-light radius-small pd-medium"
       />  
       <Field
         v-model:field="event.specialData.previousDescription"
         label="Description"
-        value="Experience the ultimate party vibe at The Commune! Elevate your evening with distinctive and exhilarating activities, ensuring an unforgettable time. Dive into the excitement and make every moment special."
+        :value="event.specialData.previousDescription || 'Experience the ultimate party vibe at The Commune! Elevate your evening with distinctive and exhilarating activities, ensuring an unforgettable time. Dive into the excitement and make every moment special.'"
         class="w-100  bg-light radius-small pd-medium"
       />  
       <Field
         v-model:field="event.specialData.previousLinkText"
         label="Button"
-        value="Check In Instagram"
+        :value="event.specialData.previousLinkText || 'Check In Instagram'"
         class="w-100  bg-light radius-small pd-medium"
       />  
       <Field
         v-model:field="event.specialData.previousLink"
         label="Link"
-        value="https://www.instagram.com/thecommune.phuket/"
+        :value="event.specialData.previousLink || 'https://www.instagram.com/thecommune.phuket/'"
         class="w-100  bg-light radius-small pd-medium"
       />
       
@@ -378,16 +376,6 @@
       />
     </div>
 
-		<h3 class="mn-b-small">Date</h3>
-    <VueDatePicker v-model="date"  range class="z-index-3 mn-b-semi bg-light" />
-
- <!--    <Calendar
-      v-model:date="date"
-      :locale="$i18n.locale"
-      :allowRange="false"
-      class="radius-semi w-100 o-hidden bg-light"
-    /> -->
-
     <h3 class="mn-b-small">Description</h3>
 		<section v-if="event" class="pd-b-extra w-100 bg-light pd-big radius-big">
       <Constructor 
@@ -405,29 +393,67 @@
     </section>
 
     <Popup 
-      title="Publish" 
+      title="Final Touches" 
       @close-popup="closePublicationPopup" 
       :isPopupOpen="isPublicationPopup"
       class="w-m-33r t-left pd-big bg-white radius-big"
-    >
-      <h3 class="mn-b-small">Final Touches</h3>
-      
+    > 
       <BlockTags
         @tags-changed="newTags => event.tags = newTags"
         :tags="event.tags"
+        class="mn-b-small"
       />
 
-      <h5 class="mn-b-thin">Add to public:</h5>
-      <SelectMulti
-        v-model="selectedOrganization"
-        :options="publics"
-        :multiple="false"
-        :taggable="false"
-        placeholder="Type to search or add tag"
-        label="name"
-        track-by="_id"
-        class="mn-b-medium bg-light radius-medium pd-small"
+      <h5 class="mn-b-thin">Add to public</h5>
+      <Card
+        v-if="selectedOrganization"
+        :photo="selectedOrganization.profile?.photo"
+        :title="selectedOrganization.profile?.name"
+        @click="() => { 
+          selectedOrganization = null
+        }"
+        class="h-4r w-100 bg-light pd-thin radius-medium  mn-b-thin"
       />
+
+      <section v-else class="mn-b-thin h-25r o-x-hidden o-y-scroll bg-light radius-big pd-small ">
+        <Feed
+          :showLoadMore="false" 
+          :search="{
+            placeholder: 'Search organization...',
+            class: 'bg-white mn-b-thin'
+          }"
+          :states="{
+            empty: {
+              title: 'No organizations Found',
+              description: 'Currently, there are no such organizations available.'
+            }
+          }"
+          :store="{
+            read: (options) => organizations.actions.read(options),
+            state: null
+          }"
+          :options="{
+            user: auth.state.user._id,
+            postable: auth.state.user._id
+          }"
+          v-slot="{ 
+            items 
+          }"
+        >
+          <Card
+            v-for="(organization, index) in items" 
+            v-memo="[organization._id, organization.profile.name]"
+            :photo="organization.profile?.photo"
+            :title="organization.profile?.name"
+            @click="() => { 
+              selectedOrganization = organization
+            }"
+            class="h-4r bg-white pd-thin radius-medium w-100 mn-b-thin"
+          />
+        </Feed>
+      </section>
+
+      
       <h5 v-if="selectedOrganization" class="mn-b-thin">Options:</h5>
       <div v-if="selectedOrganization" class="mn-b-medium br-grey-transp-25 br-2px br-solid pd-small radius-big">
         <Checkbox 
@@ -456,17 +482,19 @@ import Calendar from '@pf/src/components/DatePicker/Calendar.vue'
 
 import Block from '@pf/src/components/Block/Block.vue';
 import Popup from '@pf/src/components/Popup/Popup.vue';
-import Field         from '@pf/src/components/Field/Field.vue'
+import Field from '@pf/src/components/Field/Field.vue'
 import BlockTags from '@pf/src/components/FieldTags/BlockTags.vue';
 import Checkbox from '@pf/src/components/Checkbox/Checkbox.vue';
 import SelectMulti from '@pf/src/components/SelectMulti/SelectMulti.vue';
 import Upload  from '@pf/src/components/Upload/Upload.vue';
-import UploadImage   from '@pf/src/components/UploadImage/UploadImage.vue';
-import EditImages           from '@pf/src/components/EditImages/EditImages.vue';
+import UploadImage from '@pf/src/components/UploadImage/UploadImage.vue';
+import EditImages from '@pf/src/components/EditImages/EditImages.vue';
+import Feed from '@pf/src/components/Feed/Feed.vue'
 import Button from '@pf/src/components/Button/Button.vue';   
 
+import Card from '@pf/src/modules/globals/views/components/blocks/Card.vue';
 
-  import IconDelete from '@pf/src/modules/icons/navigation/IconDelete.vue';
+import IconDelete from '@pf/src/modules/icons/navigation/IconDelete.vue';
 
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -528,18 +556,6 @@ onMounted(async () =>{
     name: event.value.owner.target.profile.name,
     photo: event.value.owner.target.profile.photo
   }
-
-  const dataPublics = await organizations.actions.read({
-    user: auth.state.user._id,
-    postable: auth.state.user._id,
-    limit: 100
-  })
-
-  publics.value = dataPublics.map(publicItem => ({
-    name: publicItem.profile.name,
-    _id: publicItem._id,
-    photo: publicItem.profile.photo
-  }));
 })
 
 const isPublicationPopup = ref(false)
@@ -637,6 +653,7 @@ function onDelete() {
     border: 0;
     padding: var(--medium);
     padding-left: 3rem;
-    background: rgb(var(--grey))
+    background: rgb(var(--light));
+    border-radius: var(--small);
   }
 </style>

package/src/modules/events/components/pages/Event.vue

@@ -5,21 +5,7 @@
         v-if="isLoading"
         v-for="i in 3" :key="i"
       />
-    </TransitionGroup>
-
-    <transition 
-      name="fade"
-    >
-      <EmptyState 
-        v-if="!isLoading && !event"
-        title="No Event Found"
-        description="Currently, there are no events available. Please check back later."
-        class="pd-medium mn-b-thin bg-light radius-big"
-      />
-    </transition>
-
 
-    <!-- <TransitionGroup tag="ul" name="fade" class="container"> -->
       <HeroEvent
         v-if="!isLoading && event && event.special"
         :content="{
@@ -84,6 +70,7 @@
           />
 
           <SectionLineUp
+            v-if="event.specialData.lineup.lenth > 0"
             :content="{
               title: 'Lineup',
               lineup: event.specialData.lineup
@@ -160,7 +147,7 @@
     	:owner="auth.state.user._id"
     />
       
-  <!-- </TransitionGroup>   -->
+  </TransitionGroup>  
 
   </section>
 </template>

package/src/modules/events/components/pages/Events.vue

@@ -57,7 +57,8 @@
         :user="auth.state.user._id" 
         :type="'normal'"
         class="bg-light radius-big mn-b-medium"
-      />
+      >
+      </CardEvent>
     </Feed>
   </section>
 </template>

package/src/modules/events/components/pages/EventsBackoffice.vue

@@ -0,0 +1,122 @@
+<template>
+	<div 
+		class="pd-thin"
+	>
+		<header 
+			class="mn-b-medium flex-v-center flex-nowrap flex"
+		>
+	      	<h2
+	      		class="mn-r-medium"
+	      	>
+	      		Events
+	      	</h2>
+	      	
+	      	<button 
+	      		v-if="auth.state.user._id === route.params.user || route.params._id"
+	      		@click="router.push({name: 'Create Event'})" 
+	      		class="radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second"
+	      	>
+	      		+
+	      	</button>
+		</header>
+
+		<Tab 
+			v-if="route.params._id"
+			v-model:selected="tabOrganization"
+			:tabs="[
+				{ name: 'My', 	value: 'owner' },
+				{ name: 'Participant', 	value: 'participant' },	
+			]"
+			class="mn-b-small o-hidden h5 radius-big bg-light"
+		/>
+
+		
+
+		<Feed
+      :states="{
+        empty: {
+          title: 'No Events Found',
+          description: 'Currently, there are no events available.'
+        }
+      }"
+      :store="{
+        read: (options) => events.read(options),
+      }"
+      :options="{
+        user: auth.state.user._id,
+        owner: route.params._id || route.params.user,
+        creator: route.params.user
+      }"
+      v-slot="{ 
+        items 
+      }"
+    >
+       <CardEvent 
+        @click="$router.push({name: 'Event', params: {url: event.url}})" 
+        v-for="(event,index) in items" 
+        :key="event._id" 
+        :event="event" 
+        :user="auth.state.user._id" 
+        :type="'normal'"
+        class="bg-light radius-big mn-b-medium"
+      >
+
+		     <div 
+		      v-if="route.params._id && hasAccess(route.params._id, 'gallery', 'read', auth.state.accesses)"
+		      class="mn-b-semi w-100 bg-second button t-white uppercase"
+		      @click.stop="router.push({
+		        name: 'Edit Event Tickets',
+		        params: {
+		          url: event.url
+		        }
+		      })"
+		    >
+		      Check tickets
+		    </div>
+      </CardEvent>
+    </Feed>
+
+   <!--  <Feed 
+			v-if="tabOrganization ==='owner'"
+	  	:user="auth.state.user._id"
+			:creator="route.params.user"
+			:owner="route.params._id"
+			:sortOrder="'asc'"
+		/> -->
+
+
+		<!-- <Feed 
+			v-if="tabOrganization ==='participant'"
+  		:user="auth.state.user._id"
+  		:participant="route.params.user"
+  		:owner="route.params._id"
+			:sortOrder="'desc'"
+		/> -->
+	</div>
+</template>
+
+<script setup>
+	import { watch, ref } from 'vue'
+	import { useRoute, useRouter } from 'vue-router'
+	// Components
+	import Tab  		from '@pf/src/components/Tab/Tab.vue'
+  import Feed from '@pf/src/components/Feed/Feed.vue'
+
+  import CardEvent from '@pf/src/modules/events/components/blocks/CardEvent.vue';
+
+	import * as auth from '@pf/src/modules/auth/views/store/auth';
+	import * as events from '@pf/src/modules/events/store/events.js'; 
+	// Accessing router
+	const route = useRoute()
+	const router = useRouter()
+	// State
+	let tab = route.query.tab ? route.query.tab : 'owner';
+
+	const tabOrganization = ref(tab)
+
+	route.query.tab = tabOrganization.value
+
+	watch(tabOrganization, (newValue) => {
+	  router.replace({ query: { ...route.query, tab: newValue } });
+	});
+</script>

package/src/modules/events/components/sections/HeroEvent.vue

@@ -11,6 +11,7 @@
 	  "
 	 >
    	<div 
+   		v-if="content.cover || content.video"
    		style="min-height: 20rem;"
    		class="desktop-only radius-big o-hidden bg-black  pos-relative"
    	>
@@ -37,12 +38,11 @@
 	  	o-hidden 
 	  	bg-black  
 	  	pd-big mn-r-auto mn-l-auto t-white flex-h-center flex-column o-hidden flex-v-start t-left flex w-100 h-100 gap-zero">
-    	<!-- <img loading="lazy" src="/logo/jungle-stereo-cosmonaut.png"  class="h-8r mn-b-small z-index-1"/> -->
-    	<div class="mn-b-big z-index-1 flex-nowrap flex gap-small">
+    	<div v-if="content.logos.length > 0" class="mn-b-big z-index-1 flex-nowrap flex gap-small">
 	    	<img loading="lazy" v-for="logo in content.logos" class="radius-thin object-fit-contain i-big" :src="logo">
 	    </div>
 
-    	<h3 class="pd-thin z-index-1  w-max br-solid br-2px br-white radius-extra 	mn-b-thin">
+    	<h3 v-if="content?.subtitle" class="pd-thin z-index-1  w-max br-solid br-2px br-white radius-extra 	mn-b-thin">
 					{{content?.subtitle}}
 	    </h3>
 
@@ -54,9 +54,9 @@
 	    		{{content?.description}}
 	    </p>
 	  	
-	  	<p class="z-index-1 t-transp p-small mn-b-thin">
+	  	<p v-if="timeDifference >= 0" class="z-index-1 t-transp p-small mn-b-thin">
 				<span>
-					{{content?.ticketText }}
+					{{content?.ticketText || 'Buy ticket online with special price' }}
 				</span>
 
 				<span v-if="options?.price" class="mn-l-micro bg-white t-black pd-t-nano pd-b-nano pd-r-micro pd-l-micro radius-extra">
@@ -72,7 +72,7 @@
 	    	:date="options.date"
 	    />
 
-	    <div v-if="content?.ticketLinkStripe" class="z-index-1  mn-t-medium mn-b-small 	flex-nowrap flex gap-thin">
+	    <div v-if="content?.ticketLinkStripe && timeDifference >= 0" class="z-index-1  mn-t-medium mn-b-small 	flex-nowrap flex gap-thin">
 	    	<a href="#" @click="clickBuyTicket()" class="pd-l-medium pd-r-medium pd-t-small pd-b-small radius-extra uppercase t-medium t-black bg-white  ">
 	    			{{content?.ticketTextButton || 'Buy Ticket' }}
 	    	</a>
@@ -104,7 +104,6 @@
 
 	import Countdown from "@pf/src/components/Countdown/Countdown.vue"
 
-
 	const props = defineProps({
 		content: {
 			type: Object
@@ -119,14 +118,13 @@
 
 	var isPlaying = false;
 
-	function	checkAndPlayVideo() {
-		videoElement.value.onplaying = function() {
-		  isPlaying = true;
-		};
+	const targetDate = new Date(props.options.date).getTime();
+	const currentDate = ref(new Date().getTime());
+	const timeDifference = targetDate - currentDate.value;
 
-		videoElement.value.onpause = function() {
-		  isPlaying = false;
-		};	
+	function checkAndPlayVideo() {
+		if (videoElement.value) videoElement.value.onplaying = function() { isPlaying = true; };
+		if (videoElement.value) videoElement.value.onpause = function() { isPlaying = false; };	
   }
 
   function getVideoType(videoUrl) {
@@ -139,14 +137,14 @@
   }
 
 	async function playVid() {      
-    if (videoElement.value.paused && !isPlaying) {
+    if (videoElement.value?.paused && !isPlaying) {
       return videoElement.value.play();
     }
 	} 
 
 	onMounted(() => {
-		checkAndPlayVideo()
-		playVid()
+			checkAndPlayVideo()
+			playVid()
 	})
 	
 	function clickBuyTicket () {

package/src/modules/events/components/sections/SectionPreviousEvents.vue

@@ -85,23 +85,14 @@
 
 	var isPlaying = false;
 
-	function	checkAndPlayVideo() {
-    // Initializing values
-
-		// On video playing toggle values
-		videoElement.value.onplaying = function() {
-		  isPlaying = true;
-		};
-
-		// On video pause toggle values
-		videoElement.value.onpause = function() {
-		  isPlaying = false;
-		};	
+	function checkAndPlayVideo() {
+		if (videoElement.value) videoElement.value.onplaying = function() { isPlaying = true; };
+		if (videoElement.value) videoElement.value.onpause = function() { isPlaying = false; };	
   }
 
   // Play video function
 	async function playVid() {      
-    if (videoElement.value.paused && !isPlaying) {
+    if (videoElement.value?.paused && !isPlaying) {
       return videoElement.value.play();
     }
 	}