@ozdao/prometheus-framework 0.2.48 → 0.2.50

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
+        }
+      })" 
+    />
+
+    <PlaceholderUserpic
+      v-if="!user.profile?.photo && type !== 'short'"
+      class="radius-medium mn-r-thin i-thin"
+
+      @click.stop="$router.push({
+        name: user.type === 'user' ? 'User Profile' : 'Organization', 
+        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>

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

@@ -1,184 +1,158 @@
 <template>
-  <div class="for-transition w-100">
-    
-    <div class="pd-b-zero pd-t-zero pd-thin">
-      <Breadcrumbs class="pd-medium bg-grey radius-big"/>
-    </div>
+  <div class="for-transition pd-thin w-100">
+
+    <header class="mn-b-thin flex-nowrap flex bg-grey pd-medium radius-big">
+      <h1 v-if="route.params.department" class="mn-r-auto">Edit Department</h1>
+      <h1 v-else class="mn-r-auto">Create Department</h1>
 
-    <div class="pd-thin">
-      <header class="flex-nowrap flex bg-grey pd-medium radius-big">
-        <h1 v-if="route.params.department" class="mn-r-auto">Edit Spot</h1>
-        <h1 v-else class="mn-r-auto">Create Spot</h1>
+      <section class="flex-nowrap flex pd-thin">
+        <Button :submit="onSubmit" :callback="redirectTo" class="bg-main">Save Department</Button>
+      </section>
 
-        <section class="flex-nowrap flex pd-thin">
-          <Button :submit="onSubmit" :callback="redirectTo">Save Spot</Button>
-        </section>
+    </header>
 
-      </header>
+    <div class="mn-b-thin bg-grey pd-medium o-hidden radius-big">
+      <h3 class="mn-b-semi">Profile</h3>
+      
+      <div v-if="departments.state.department.profile" class="radius-small flex-nowrap flex">
+        <UploadImage 
+           v-model:photo="departments.state.department.profile.photo"
+          :uploadPath="'organizations/' + departments.state.department.name + '/avatars'"
+          class="w-8r aspect-1x1 o-hidden mn-r-small radius-extra" 
+        />
+        <div class="w-100 flex-child-grow-1 flex-child ">
+          <Field 
+            v-model:field="departments.state.department.profile.name"     
+            label="Name"  
+            placeholder="Department Name" 
+            class="mn-b-small bg-white radius-small pd-medium"
+            :validation="organizationName" 
+          />
+          <Field 
+            v-model:field="departments.state.department.profile.description"     
+            label="Description"  
+            placeholder="Department description (max 120 symbols)" 
+            class="bg-white radius-small pd-medium"
+            :validation="organizationName" 
+          />  
+        </div>
+      </div>
     </div>
 
-    <!-- <div class="pd-b-zero pd-t-zero pd-thin cols-2 gap-thin">
-    
-      <div class="flex-stretch flex-column flex">  
+    <Block
+      title="Team"
+      placeholder="No members added yet"
+      :actions="[{
+        label: '+',
+        function: () => openMemberPopup()
+      }]"
+      class="cols-1 gap-thin mn-b-thin"
+    > 
+      <User 
+        class="bg-grey o-hidden radius-small mn-b-thin" 
+        v-for="(member, index) in departments.state.department.members" 
+        :key="index" 
+        :user="member.user" 
+        :position="member.position" 
+        @click="openMemberPopup(index)"
+      />
+    </Block>
+
+    <Popup 
+      title="Добавить участника" 
+      @close-popup="closeMemberPopup" 
+      :isPopupOpen="isOpenAddMemberPopup"
+    >
+      <DepartmentMemberModify 
+        :members="departments.state.department.members" 
+        :member="selectedMember" 
+        :users="memberships.state.memberships"
+        @callback="closeMemberPopup"
+      />
+    </Popup>
+      
 
-        <div class="mn-b-thin bg-grey pd-medium o-hidden radius-big">
-          <h3 class="mn-b-semi">Profile</h3>
+    <div class="cols-2 gap-thin">
+    
+        <div class="bg-grey pd-medium o-hidden radius-big">
+          <h3 class="mn-b-semi">Department Settings</h3>
           
-          <div v-if="departments.state.department.profile" class="radius-small flex-nowrap flex">
-            <UploadImage 
-               v-model:photo="departments.state.department.profile.photo"
-              :uploadPath="'organizations/' + departments.state.department.name + '/avatars'"
-              class="w-8r aspect-1x1 o-hidden mn-r-small radius-extra" 
+          <p class="p-medium mn-b-small">Please settings for your department:</p>
+          <div class="cols-1 gap-thin">
+            <h4>Products</h4>
+            <Checkbox 
+              label="Hidden department"
+              name="Delivery"
+              value="pickup"
+              class="w-100 mn-r-small bg-white radius-small pd-small"
+              :radio="departments.state.department.delivery"
             />
-            <div class="w-100 flex-child-grow-1 flex-child ">
-              <Field 
-                v-model:field="departments.state.department.profile.name"     
-                label="Name"  
-                placeholder="Spot Name" 
-                class="mn-b-small bg-white radius-small pd-medium"
-                :validation="organizationName" 
-              />
-              <Field 
-                v-model:field="departments.state.department.profile.description"     
-                label="Description"  
-                placeholder="Spot description (max 120 symbols)" 
-                class="bg-white radius-small pd-medium"
-                :validation="organizationName" 
-              />  
-            </div>
           </div>
         </div>
 
         <div class="bg-grey pd-medium o-hidden radius-big">
-          <h3 class="mn-b-semi">Details</h3>
+          <h3 class="mn-b-semi">Acessess</h3>
+          
+          <p class="p-medium mn-b-small">Please select organization accesses for user in department:</p>
           
-          <p class="p-medium mn-b-small">Please the available delivery options:</p>
-          <div class="mn-b-medium flex-nowrap flex">
+          <div class="cols-1 gap-thin">
+            <h4>Products</h4>
             <Checkbox 
-                label="Pickup"
+                label="See products"
                 name="Delivery"
                 value="pickup"
                 class="w-100 mn-r-small bg-white radius-small pd-small"
                 :radio="departments.state.department.delivery"
               />
               <Checkbox 
-                label="Delivery"
+                label="Edit products"
                 name="Delivery"
                 value="courier"
                  class="w-100 mn-r-small bg-white radius-small pd-small"
                 :radio="departments.state.department.delivery"
               />
               <Checkbox 
-                label="Post"
+                label="Delete orders"
                 name="Delivery"
                 value="post"
                  class="w-100 bg-white radius-small pd-small"
                 :radio="departments.state.department.delivery"
               />
-          </div>
-
-          <p class="p-medium mn-b-small">Please select the available payment methods:</p>
-          <div class="flex-nowrap flex">
+            <h4>Orders</h4>
             <Checkbox 
-                label="Cash"
-                name="Payment"
-                value="cash"
+                label="See orders"
+                name="Delivery"
+                value="pickup"
                 class="w-100 mn-r-small bg-white radius-small pd-small"
-                :radio="departments.state.department.payment"
+                :radio="departments.state.department.delivery"
               />
               <Checkbox 
-                label="Bank Transfer"
-                name="Payment"
-                value="bank"
+                label="Confirm orders"
+                name="Delivery"
+                value="courier"
                  class="w-100 mn-r-small bg-white radius-small pd-small"
-                :radio="departments.state.department.payment"
+                :radio="departments.state.department.delivery"
               />
               <Checkbox 
-                label="Crypto"
-                name="Payment"
-                value="crypto"
+                label="Delete orders"
+                name="Delivery"
+                value="post"
                  class="w-100 bg-white radius-small pd-small"
-                :radio="departments.state.department.payment"
+                :radio="departments.state.department.delivery"
               />
           </div>
         </div>
-      </div>
 
-      <div class="bg-grey pd-medium o-hidden radius-big">
-        <h3 class="mn-b-semi">Location</h3>
-        <Address
-          :apiKey="GOOGLE_MAPS_API_KEY" 
-          :address="departments.state.department.address" 
-          :location="departments.state.department.location"     
-          label="Address"    
-          placeholder="Enter delivery address"  
-          class="
-            bg-white radius-small pd-small mn-b-small
-          "
-          @update:location="newLocation => {
-            departments.state.department.location = newLocation;
-          }"
-          @update:address="newAddress => {
-            departments.state.department.address = newAddress;
-          }"
-        />
-
-        <p class="mn-b-small p-medium">Or choose on map:</p>
-
-        <LocationMarker 
-          :address="departments.state.department.address" 
-          :location="departments.state.department.location" 
-          :apiKey="GOOGLE_MAPS_API_KEY" 
-          class="radius-big o-hidden"
-          @update:location="newLocation => {
-            departments.state.department.location = newLocation;
-          }"
-          @update:address="newAddress => {
-            departments.state.department.address = newAddress;
-          }"
-        />
 
       </div>
-    </div> -->
 
-    <section class="flex-nowrap flex pd-thin">
-      <Button :submit="onDelete" :callback="redirectToDash" class="bg-grey">Delete Spot</Button>
+    <section  v-if="route.params.department"  class="flex-nowrap flex pd-thin">
+      <Button :submit="onDelete" :callback="redirectToDash" class="bg-grey">Delete Department</Button>
     </section>
     
 
 
-    <!-- <div id="dash" class="pd-medium bg-white">
-     
-
-      <div class="mn-b-regular  flex-v-center flex-nowrap flex">
-        <h3 class="mn-r-small">Команда</h3>
-        <div>
-          <a  class="t-main h5" @click="openMemberPopup()">+</a>
-        </div>
-      </div>
-
-      <Popup title="Добавить участника" @close-popup="closeMemberPopup" :isPopupOpen="isOpenAddMemberPopup">
-        <DepartmentMemberModify 
-          :members="departments.state.department.members" 
-          :member="selectedMember" 
-          :users="users"
-          @callback="closeMemberPopup"
-        />
-      </Popup>
-
-
-      <ul class=mn-b-small>
-        <li v-if="departments.state.department.members.length < 1">В отделе еще нет участников</li>
-        <User 
-          class="bg-grey o-hidden radius-small mn-b-thin" 
-          v-for="(member, index) in departments.state.department.members" 
-          :key="index" 
-          :user="member.user" 
-          :position="member.position" 
-          @click="openMemberPopup(index)"
-        />
-      </ul>
-
+    <div id="dash" class="pd-medium bg-white">
 
       <Popup title="Добавить подотдел" @close-popup="closeDepartmentPopup" :isPopupOpen="isOpenDepartmentPopup">
         <DepartmentSubDepartmentModify 
@@ -208,7 +182,7 @@
         </ul> 
 
       
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -219,7 +193,6 @@ import Cookies from "js-cookie";
 import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'
 import UploadImage from '@pf/src/components/UploadImage/UploadImage.vue';
 
-
 import Tab from "@pf/src/components/Tab/Tab.vue";
 import Field from "@pf/src/components/Field/Field.vue";
 import Select from "@pf/src/components/Select/Select.vue";
@@ -228,6 +201,7 @@ import Address from "@pf/src/components/Address/Address.vue";
 import LocationMarker from "@pf/src/components/LocationMarker/LocationMarker.vue";
 import Button from "@pf/src/components/Button/Button.vue";
 import Popup from "@pf/src/components/Popup/Popup.vue";
+import Block from '@pf/src/components/Block/Block.vue';
 
 import EditArray from "@pf/src/modules/organizations/components/blocks/EditArray.vue";
 import DepartmentSub from "@pf/src/modules/organizations/components/blocks/DepartmentSub.vue";
@@ -235,9 +209,11 @@ import DepartmentMemberModify from "@pf/src/modules/organizations/components/blo
 import DepartmentSubDepartmentModify from "@pf/src/modules/organizations/components/blocks/DepartmentMemberModify.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";
 import * as memberships from "@pf/src/modules/organizations/store/memberships";
 
+
+
 const router = useRouter();
 const route = useRoute();
 const tabOrganization = ref("details");
@@ -245,7 +221,7 @@ const showAddNew = ref(false);
 
 async function fetchData() {
   if (route.params.department) {
-    await memberships.actions.read(route.params.department);
+    await memberships.actions.read({target: route.params._id});
   }
   const users = ref(memberships.state.memberships);