@ozdao/prometheus-framework 0.2.48 → 0.2.51

package/src/modules/mobile/components/Walkthrough/Walkthrough.vue

@@ -0,0 +1,195 @@
+<template>
+	<div class="pos-fixed pos-t-0 pos-l-0 w-100 h-100vh z-index-6 bg-white flex embla" ref="emblaNode">
+    <div class="w-100 embla__container z-index-1">
+      <div
+        v-for="(slide, index) in walkthrough"
+        :key="index"
+        class="flex-center pd-thin t-center flex-column flex embla__slide"
+        :style="{ opacity: tweenSlides.length ? tweenSlides[index] : undefined, transform: tweenSlides[index] ? `scale(${tweenSlides[index]})` : '' }"
+      >
+        <img class="w-100" :src="require(`@/assets/images/walkthrough/walkthrough_${index}.png`).default">
+      	<h3 class="mn-b-thin">{{slide.title}}</h3>
+      	<p class="p-big t-transp">{{slide.subtitle}}</p>
+      </div>
+
+      <div
+      	class="flex-center flex-column flex pd-big embla__slide"
+      >
+      	<img
+      		src="/logo/logo_square.svg" 
+      		class="i-extra radius-medium mn-b-small"
+      	>
+      	<h2 class="t-center mn-b-small">Welcome to The&nbsp;Commune</h2>
+      	<p class="p-medium t-transp mn-b-semi mn-r-auto mn-l-auto t-center">Join our community to connect, share, and learn from the best. Discover new opportunities and grow with us!</p>
+    
+      	<button @click="openFirstRoute('Sign Up')" class="w-100 bg-main button mn-b-thin">Sign Up</button> 
+      	<button @click="openFirstRoute('Sign In')" class="w-100 bg-white button mn-b-semi">Sign In</button>
+
+	      <p class="p-medium text-center mn-b-thin">Or explore as a guest:</p> 
+      	<button @click="setFirstUseFalse()" class="button bg-white w-100">Continue without registration</button>
+	    </div>
+
+    </div>
+    
+    <WavesBackground
+	    :style="{ transform: tweenValues[0] ? `translateX(${tweenValues[0]}%)` : '' }"
+    	class="pos-fixed pos-t-0 pos-l-0 z-index-0"
+    />
+    <!-- <ColorsBackground 
+	    :style="{ transform: tweenValues[0] ? `translateX(${tweenValues[0]}%)` : '' }"
+    	class="pos-fixed pos-t-0 pos-l-0 z-index-0"
+    /> -->
+    
+    <div class="z-index-5 flex-nowrap flex flex-center gap-small w-100 embla__dots">
+	    <div
+	      v-for="(snap, index) in scrollSnaps"
+	      :key="index"
+	      @click="scrollTo(index)"
+	      :class="[
+	        'embla__dot i-small radius-extra br-solid br-main br-2px',
+					{ 'bg-grey': index !== selectedIndex },
+	        { 'bg-main': index === selectedIndex }
+	      ]"
+	    >
+		  </div>
+
+		  <div @click.native="setFirstUseFalse()" class="pd-small radius-small br-solid br-main br-2px uppercase t-semi t-main pos-absolute pos-r-10"> 
+		  	skip
+		  </div>
+	  </div>
+	</div>
+
+</template>
+
+<script setup>
+	import { ref, onMounted } from 'vue';
+	import { useRoute, useRouter } from 'vue-router'
+
+	import emblaCarouselVue from 'embla-carousel-vue'; // Assuming a Vue version exists
+
+	import WavesBackground from '@/components/icons/backgrounds/WavesBackground.vue'
+	import ColorsBackground from '@/components/icons/backgrounds/ColorsBackground.vue'
+
+	const props = defineProps(['slides', 'options']);
+	const emits = defineEmits(['updateFirstUse'])
+	const router = useRouter()
+
+	// Set firstUse
+	import { Preferences } from '@capacitor/preferences';
+
+	async function setFirstUseFalse() {
+    await Preferences.set({
+      key: 'first-use',
+      value: JSON.stringify(false),
+    });
+
+    emits('updateFirstUse', false);
+  }
+
+  async function openFirstRoute(routeName) {
+		await router.push({name: routeName})
+
+		await Preferences.set({
+      key: 'first-use',
+      value: JSON.stringify(false),
+    });
+
+		emits('updateFirstUse', false);
+	}
+	// Set Slider
+	let walkthrough = [{
+		title: 'Communicate',
+		subtitle: 'Write posts, comments and put likes.'
+	},{
+		title: 'Party & Fun',
+		subtitle: 'Check the calendar for new events.'
+	},{
+		title: 'Discover',
+		subtitle: 'Browse the gallery of photos.'
+	}]
+
+	const [emblaNode, emblaApi] = emblaCarouselVue({ loop: false })
+
+	const selectedIndex = ref(0);
+	const scrollSnaps = ref([]);
+	const TWEEN_FACTOR = 3
+	const tweenValues = ref([])
+	const tweenSlides = ref([])
+
+	const scrollTo = (index) => emblaApi.value && emblaApi.value.scrollTo(index);
+
+	const onInit = (embla) => {
+	  scrollSnaps.value = emblaApi.value.scrollSnapList();
+	};
+
+	const onSelect = (embla) => {
+	  selectedIndex.value = emblaApi.value.selectedScrollSnap();
+	};
+
+	const onScroll = (embla) => {
+    const engine = emblaApi.value.internalEngine()
+    const scrollProgress = emblaApi.value.scrollProgress()
+
+    const stylesOpacity = emblaApi.value.scrollSnapList().map((scrollSnap, index) => {
+	    let diffToTarget = scrollSnap - scrollProgress
+
+	    if (engine.options.loop) {
+	      engine.slideLooper.loopPoints.forEach((loopItem) => {
+	        const target = loopItem.target()
+	        if (index === loopItem.index && target !== 0) {
+	          const sign = Math.sign(target)
+	          if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)
+	          if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress)
+	        }
+	      })
+	    }
+	    const tweenValue = 1 - Math.abs(diffToTarget * TWEEN_FACTOR)
+	    return  Math.min(Math.max(tweenValue, 0), 1)
+	  })
+
+		tweenSlides.value = stylesOpacity
+
+    const styles = emblaApi.value.scrollSnapList().map((scrollSnap, index) => {
+      let diffToTarget = scrollSnap - scrollProgress
+
+      if (engine.options.loop) {
+        engine.slideLooper.loopPoints.forEach((loopItem) => {
+          const target = loopItem.target()
+          if (index === loopItem.index && target !== 0) {
+            const sign = Math.sign(target)
+            if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)
+            if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress)
+          }
+        })
+      }
+      return diffToTarget * (1 / TWEEN_FACTOR) * 100
+    })
+
+    tweenValues.value = styles
+  }
+
+
+	onMounted(async() => {
+	  onInit(emblaApi);
+	  onSelect(emblaApi);
+	  onScroll(emblaApi);
+
+	  emblaApi.value.on('reInit', onInit);
+	  emblaApi.value.on('reInit', onSelect);
+	  emblaApi.value.on('select', onSelect);
+	  emblaApi.value.on('scroll', onScroll)
+	});
+</script>
+
+<style lang="scss">
+	.embla {
+    overflow: hidden;
+  }
+  .embla__container {
+    display: flex;
+  }
+  .embla__slide {
+    flex: 0 0 100%;
+    min-width: 0;
+  }
+</style>

package/src/modules/organizations/components/blocks/CardDepartment.vue

@@ -3,12 +3,12 @@
     <!-- <Map :location="{lat: department.location.coordinates[1] ,lng: department.location.coordinates[0]}" class=""/> -->
 
     <div class="pd-medium w-100">
-     <svg  @click="$router.push(`/app/organization/${props.organization._id}/departments/${department._id}/edit`)" class="i-regular pos-absolute pos-r-0 pos-t-0 t-transp" width="652" height="652" viewBox="0 0 652 652" fill="none" xmlns="http://www.w3.org/2000/svg">
+     <svg  @click="$router.push(`/organizations/${props.organization}/departments/${department._id}/edit`)" class="i-regular pos-absolute pos-r-0 pos-t-0 t-transp" width="652" height="652" viewBox="0 0 652 652" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M515.693 9.52082C510.095 3.91669 502.49 0.765625 494.563 0.765625C486.635 0.765625 479.036 3.91669 473.432 9.52082L48.7255 434.307C44.8244 438.214 42.0848 443.125 40.8088 448.496L0.939444 615.069C-1.47202 625.168 1.528 635.788 8.86652 643.132C16.2103 650.47 26.8305 653.47 36.9292 651.059L203.516 611.261H203.511C208.88 609.985 213.792 607.246 217.699 603.35L642.485 178.496C648.089 172.892 651.241 165.293 651.241 157.366C651.241 149.439 648.089 141.835 642.485 136.235L515.693 9.52082ZM113.76 453.708L388.307 179.161L472.828 263.682L198.281 538.229L113.76 453.708ZM87.1041 511.5L140.416 564.812L70.3014 581.614L87.1041 511.5ZM515.091 221.793L430.195 136.897L494.184 72.9075L579.08 157.429L515.091 221.793Z" fill="rgb(var(--black))"/>
       </svg>
       
       <h3 
-        @click="$router.push(`/app/organization/${props.organization._id}/departments/${department._id}`)"
+        @click="$router.push(`/organizations/${props.organization}/departments/${department._id}`)"
         class="mn-b-small w-100"
         v-html="department.profile.name"
       />
@@ -67,7 +67,7 @@
         <template #content>
           <ul>
             <li v-if="department.subdepartments.length < 1">В отделе еще нет подотделов</li>
-            <DepartmentSub  v-for="(subdepartmentsartment, index) in department.subdepartments" @click="$router.push(`/app/organization/departments/${subdepartmentsartment._id}`)" :key="index" class="br-b br-solid br-grey" :department="subdepartmentsartment" />
+            <DepartmentSub  v-for="(subdepartmentsartment, index) in department.subdepartments" @click="$router.push(`/organization/departments/${subdepartmentsartment._id}`)" :key="index" class="br-b br-solid br-grey" :department="subdepartmentsartment" />
           </ul>
         </template>
       </Spoiler>

package/src/modules/organizations/components/blocks/DepartmentMemberModify.vue

@@ -1,76 +1,84 @@
 <template>
   <div>
-    <div class="br-grey radius-small mn-b-small">
-      <VueSelect 
-        v-if="props.department === null"
-        v-model="departmentForm.subdepartment"
-        :options="filteredDepartments"
-        :get-option-label='option => option.name' 
-        class="w-100 mn-b-small"
-      /> 
+
+    <div class="br-grey radius-small mn-small">
+      {{memberForm.id}}
+      <SelectMulti
+        v-if="props.member === null"
+        v-model="memberForm.user"
+        :options="users"
+        :multiple="false"
+        :taggable="false"
+        placeholder="Type to search or add type of organization"
+        class="mn-b-semi bg-grey pd-medium radius-small" 
+      />
+
       <div v-else class="pd-small br-grey br-1px br-solid">
-        {{ departmentForm.name ? departmentForm.name : 'Безымянный' }}
+        {{ memberForm.user.name ? memberForm.user.name : 'Безымянный' }}, {{memberForm.user.id}}
       </div>
+      <Field 
+        v-model:field="memberForm.position"  
+        label="Должность"  
+        placeholder="Название должности" 
+        class="bg-white "
+        :validation="organizationName" 
+      />
     </div>
 
-    <button :disabled="!departmentForm.subdepartment" v-if="props.department === null" @click="submitForm" class="w-100 button bg-second t-white">
-      Добавить отдел
+    <button :disabled="!memberForm.user._id || !memberForm.position" @click="submitForm" class="w-100 button bg-blue t-white">
+      {{ props.member !== null ? "Редактировать участника" : "Добавить участника" }}
     </button>
 
-    <button v-if="props.department !== null" @click="removeMember" class="w-100 button bg-fourth t-white">
-      Удалить отдел
-    </button> 
+    <button  v-if="props.member !== null" @click="removeMember" class="w-100 button bg-red t-white">
+      Удалить участника
+    </button>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
-import VueSelect from "vue-select";
+import { ref, watch, computed } from "vue";
+// Import components
+import SelectMulti    from '@pf/src/components/SelectMulti/SelectMulti.vue'
 import Field from "@pf/src/components/Field/Field.vue";
 import Select from "@pf/src/components/Select/Select.vue";
+
 const props = defineProps({
   isPopupOpen: Boolean,
-  department: Number,
-  departments: Array,
-  maindepartment: Object,
-  alldepartments: Array,
+  member: Number,
+  members: Array,
+  users: Array,
 });
 
-const emits = defineEmits(['callback', 'remove']);
+const emits = defineEmits(['callback','remove'])
 
-const departmentForm = ref({
-  subdepartment: null,
+const memberForm = ref({
+  user: "",
+  position: "",
 });
 
-if (props.department !== null) {
-  departmentForm.value = props.departments[props.department];
+if (props.member !== null) {
+  memberForm.value = props.members[props.member]
 }
 
-function filterDepartments(allDepartments, departments, editingDepartment) {
-  return allDepartments.filter((department) => {
-    if (departments.some((dept) => dept._id === department._id)) {
-      return false;
-    }
-    if (editingDepartment._id === department._id) {
-      return false;
-    }
-    return true;
-  });
-}
+import * as inputsValidation from '@pf/src/modules/middlewares/client/inputs.validation'
+const placeValidation = ref(null)
 
-const filteredDepartments = computed(() => {
-  return filterDepartments(props.alldepartments, props.departments, props.maindepartment);
-});
 
 async function submitForm() {
-  props.departments.push(departmentForm.value.subdepartment);
-  emits("callback");
+   if (props.member !== null) {
+    props.members[props.member] = memberForm.value
+    emits("callback");
+  } else {
+    props.members.push(memberForm.value);
+    emits("callback");
+  }
 }
 
 async function removeMember() {
-  props.departments.splice(props.department, 1);
-  emits("callback");
+    props.members.splice(props.member, 1);
+    emits("callback");
 }
+
 </script>
 
 <style scoped>
@@ -89,4 +97,4 @@ input {
   border: 1px solid #ccc;
   border-radius: 5px;
 }
-</style>
+</style>

package/src/modules/organizations/components/blocks/User.vue

@@ -1,23 +1,55 @@
 <template>
-  <div class="pd-small flex-nowrap flex">
-    <!-- <img :src="(FILE_SERVER_URL || '') + avatar" :alt="`${name} avatar`" class="user-card__avatar" /> -->
-    <div class="user-card__info">
-      <p class="user-card__name">{{ user.name ? user.name : 'Безымянный' }}</p>
-      <p class="t-transp">{{ position }}</p>
-    </div>
+  <div class="">
+    <img 
+      v-if="user.profile?.photo.length > 0 && type !== 'short'" 
+      :src="(FILE_SERVER_URL || '') + member.profile.photo" 
+      class="radius-medium object-fit-cover mn-r-thin i-thin" 
+
+      @click.stop="$router.push({
+        name: user.type === 'user' ? 'User Profile' : 'Organization', 
+        params: {
+          _id: user._id
+        }
+      })" 
+    />
+    {{user}}123
+    <PlaceholderUserpic
+      v-if="!user.profile?.photo && type !== 'short'"
+      class="radius-medium mn-r-thin i-thin"
+
+      @click.stop="$router.push({
+        name: 'User Profile', 
+        params: {
+          _id: user._id
+        }
+      })" 
+    />
+    <!-- <div class="user-card__info"> -->
+      <!-- <p class="user-card__name">{{ user.profile?.name || 'Безымянный' }}</p> -->
+   <!-- </div> -->
+      <div class="mn-r-auto">
+        <span class=" mn-r-small">{{user.profile?.email}} {{user.profile?.phone}}</span>
+        <span class="t-transp">{{user.role}}</span>
+        <br>
+        <span class="mn-r-auto t-transp">Member since (date) {{user.createdAt}}</span>
+      </div>
+
+      <div v-if="user.position !== 'Основатель'" class="mn-l-medium flex-v-center flex">
+        <button @click="removeMember(user)" class="button-small button">×</button>
+      </div>
+ 
   </div>
 </template>
 
 <script setup>
 
+
+  import PlaceholderUserpic from '@pf/src/modules/icons/placeholders/PlaceholderUserpic.vue'
+
   const props = defineProps({
     user: {
       type: Object,
       required: true
-    },
-    position: {
-      type: String,
-      required: true
     }
     // Define other props here
   });

package/src/modules/organizations/components/pages/Department.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="for-transition w-100">
     
-    <div id="dash" class="pd-medium bg-grey">
+    <div v-if="departments.state.department" id="dash" class="pd-medium bg-grey">
       <section class="mn-b-medium radius-medium pd-semi bg-white">
          <div class="flex-nowrap flex mn-b-small">
-          <h2 class="w-100">{{ departments.state.department.name }}</h2>
 
-          <svg @click="$router.push(`/app/organization/departments/${departments.state.department._id}/edit`)"  class="i-regular t-transp" width="652" height="652" viewBox="0 0 652 652" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <h2 class="w-100">{{ departments.state.department.profile.name }}</h2>
+
+          <svg @click="$router.push(`/organizations/${route.params._id}/departments/${route.params.department}/edit`)"  class="i-regular t-transp" width="652" height="652" viewBox="0 0 652 652" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M515.693 9.52082C510.095 3.91669 502.49 0.765625 494.563 0.765625C486.635 0.765625 479.036 3.91669 473.432 9.52082L48.7255 434.307C44.8244 438.214 42.0848 443.125 40.8088 448.496L0.939444 615.069C-1.47202 625.168 1.528 635.788 8.86652 643.132C16.2103 650.47 26.8305 653.47 36.9292 651.059L203.516 611.261H203.511C208.88 609.985 213.792 607.246 217.699 603.35L642.485 178.496C648.089 172.892 651.241 165.293 651.241 157.366C651.241 149.439 648.089 141.835 642.485 136.235L515.693 9.52082ZM113.76 453.708L388.307 179.161L472.828 263.682L198.281 538.229L113.76 453.708ZM87.1041 511.5L140.416 564.812L70.3014 581.614L87.1041 511.5ZM515.091 221.793L430.195 136.897L494.184 72.9075L579.08 157.429L515.091 221.793Z" fill="rgb(var(--black))"/>
           </svg>
 
@@ -22,7 +23,7 @@
             class="br-b br-solid br-grey" 
             v-for="(member, index) in departments.state.department.members" 
             :key="index" 
-            :user="member.user" 
+            :user="member" 
             :position="member.position" 
             @click="$router.push(`/app/profile/${member.user._id}`)" 
           />
@@ -46,12 +47,12 @@ import { useRoute, useRouter } from 'vue-router';
 import Spoiler from '@pf/src/components/Spoiler/Spoiler.vue';
 import DepartmentSub from '@pf/src/modules/organizations/components/blocks/DepartmentSub.vue';
 import User from '@pf/src/modules/organizations/components/blocks/User.vue';
-import * as departments from '@pf/src/modules/spots/store/spots';
+import * as departments from '@pf/src/modules/organizations/store/departments';
 
 const router = useRouter();
 const route = useRoute();
 
-await departments.actions.readOne(route.params._id);
+await departments.actions.readOne(route.params.department);
 </script>
 
 <style scoped>