@ozdao/prometheus-framework 0.2.48 → 0.2.51

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);
 

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

@@ -1,67 +1,126 @@
 <template>
   <transition name="slide-fade">
-    <div>
-      <section class="mn-b-medium radius-medium pd-semi bg-white">
-        <h2 class="mn-b-regular">Участники</h2>
-        <p class="t-transp p-big">Добавляйте новых участников организации и настраивайте права доступа.</p> 
+    <div class="pd-thin">
+      <section class="mn-b-medium radius-medium pd-semi bg-grey">
+        <h2 class="mn-b-regular">Members</h2>
+        <p class="t-transp p-big">Add new memberships to the group and configure access rights.</p> 
       </section>
-
-      <FeedDepartments 
-        :organization="organization.state.current"
-        :memberships="members.state.memberships"
-      />
-
+      
       <MembersAdd 
         :organization="organizationData"
         @send-invite="handleSendInvite"
       />
 
-      <MembersList 
-        :organization="organization"
-        :memberships="memberships"
-        :invites="invites.state.invites"
-        @removeInvite="removeInvite"
-        @removeMember="removeMember"
+      <Tab 
+        v-model:selected="tabMemberships"
+        class="mn-b-medium bg-grey radius-small"
+        :tabs="[
+          { name: 'Members',    value: 'members' }, 
+          { name: 'Invites',  value: 'invites' }, 
+        ]"
       />
+
+      <section class="mn-b-big radius-medium bg-white">
+        <!-- Members -->
+        <div 
+          v-if="tabMemberships === 'members'"
+          class="cols-1 gap-thin"
+        >
+          <User 
+            v-for="(member, index) in memberships.state.memberships" 
+            :key="index" 
+            :user="member" 
+            @click="$router.push(`/app/profile/${member._id}`)" 
+            class="bg-grey radius-small flex-nowrap flex  pd-medium"
+
+          />
+        </div>
+        <!-- Invites -->
+        <div 
+          v-if="tabMemberships === 'invites'"
+        > 
+          <span v-if="invites.length < 1">В организации нет приглашений</span>
+          <div 
+            v-for="(invite, index) in invites.state.invites" 
+            class="br-grey br-1px br-solid radius-small mn-b-thin flex-nowrap flex-v-center flex  pd-medium"
+          >
+
+            <span class="w-100 mn-r-small">{{invite.invitedEmail}} {{invite.invitedPhone}}</span>
+            <span class="t-transp">{{invite.status}}</span>
+
+            <div class="mn-l-medium flex-v-center flex">
+              <button @click="removeInvite(index,invite)" class="button-small button">×</button>
+            </div>
+
+          </div>
+        </div>
+
+
+      </section>
     </div>
   </transition>
 </template>
 
 <script setup>
-import { ref,onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router'
 
-import FeedDepartments from '@pf/src/modules/organizations/components/sections/FeedDepartments.vue'
+import Feed from '@pf/src/components/Feed/Feed.vue'
+import Tab      from '@pf/src/components/Tab/Tab.vue'
+import Block      from '@pf/src/components/Block/Block.vue'
+
+import PlaceholderUserpic from '@pf/src/modules/icons/placeholders/PlaceholderUserpic.vue'
+
 import MembersAdd from '@pf/src/modules/organizations/components/sections/MembersAdd.vue';
-import MembersList from '@pf/src/modules/organizations/components/sections/MembersList.vue';
+
 // Mobile Module
 import Menu from '@pf/src/modules/mobile/components/Menu/Menu.vue'
 import MenuItem from '@pf/src/modules/mobile/components/Menu/MenuItem.vue'
 
+import User from '@pf/src/modules/organizations/components/blocks/User.vue';
+
+
 import * as auth      from '@pf/src/modules/auth/store/auth'
-import * as invites from '@pf/src/modules/organizations/store/invites';
-import * as members from '@pf/src/modules/organizations/store/memberships';
+import * as invites from '@pf/src/modules/auth/store/invites';
+import * as memberships from '@pf/src/modules/organizations/store/memberships';
 import * as organization  from '@pf/src/modules/organizations/store/organizations'
+import * as departments from '@pf/src/modules/organizations/store/departments';
 
 const route   = useRoute()
-
+const router   = useRouter()
 const organizationData = ref(null)
 
+const tabMemberships = ref('members')
+
 onMounted(async () => {
   organizationData.value = (await organization.actions.read({_id: route.params._id, user: auth.state.user._id}))[0]
-  await members.actions.read(route.params._id)
+  await memberships.actions.read({target: route.params._id});
   await invites.actions.read(organizationData.value._id);
 })
 
+const FirstLevelDepartments = computed(() => {
+  const departmentsState = departments.state.departments;
+
+  const subdepartmentIds = departmentsState.flatMap(department =>
+    department.subdepartments.map(subdepartment => subdepartment._id)
+  );
+
+  return departmentsState.filter(department =>
+    !subdepartmentIds.includes(department._id)
+  );
+});
+
 async function handleSendInvite(invite) {
   await invites.actions.create(organizationData.value._id, invite);
 }
 
-async function removeMember(member) {
-  await members.actions.delete(member._id);
+async function removeMember(index,member) {
+  memberships.state.memberships.splice(index, 1);
+  await memberships.actions.delete(member._id);
 }
 
-async function removeInvite(invite) {
+async function removeInvite(index,invite) {
+  invites.state.invites.splice(index, 1);
   await invites.actions.delete(invite._id);
 }
 </script>

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

@@ -11,8 +11,7 @@
 		/>
 
 		<!-- MEMBERS TAB -->
-
-		<!-- <Menu 
+		<Menu 
 			class="mn-b-regular bg-grey"
 		>
 		  <MenuItem 
@@ -29,7 +28,58 @@
 		    	{{organization.state.current.numberOfMembers}} members
 		    </span>
 		  </MenuItem> 
-		</Menu> -->
+		</Menu>
+
+		<div class="cols-2 pd-medium bg-grey radius-bg">
+
+			<Block
+		    title="Departments"
+				:actions="[{
+	        label: '+',
+	        function: () => $router.push(`/organizations/${route.params._id}/departments/create`)
+	      }]"
+		  >
+		  	<Feed
+		      :states="{
+		        empty: {
+		          title: 'No Departments Found',
+		          description: 'Currently, there are no departments available.'
+		        }
+		      }"
+		      :store="{
+		        read: (options) => departments.actions.read(route.params._id),
+		        state: null
+		      }"
+		      :options="{
+		          user: auth.state.user._id,
+		          sort: 'numberOfMemberships',
+		          limit: 10
+		      }"
+		      v-slot="{ 
+		        items 
+		      }"
+		    >
+		      <CardDepartment
+		        v-for="(department, index) in items"
+		        :key="index"
+		        :department="department"
+		        :organization="route.params._id"
+		        class="radius-big bg-white pos-relative mn-b-thin"
+		      />
+		     </Feed>
+			</Block>
+		   <div>
+		   	<User 
+		      v-for="(member, index) in organization.state.current.memberships" 
+		      :key="index" 
+		      :user="member" 
+		      :position="member.position" 
+		      class="bg-grey radius-small flex-nowrap flex  pd-medium"
+		    />
+
+	    </div>
+    </div>
+
 
 		<Tab 
 			v-model:selected="tabOrganization"
@@ -114,7 +164,6 @@
 
 			</transition>
 
-
 			<transition name="slide-fade">
 				<div v-if="tabOrganization === 'spots'">
 					<Feed
@@ -173,6 +222,11 @@
 	// Mobile Module
 	import Menu from '@pf/src/modules/mobile/components/Menu/Menu.vue'
 	import MenuItem from '@pf/src/modules/mobile/components/Menu/MenuItem.vue'
+	// Organizations
+	import DepartmentSub from '@pf/src/modules/organizations/components/blocks/DepartmentSub.vue';
+	import User from '@pf/src/modules/organizations/components/blocks/User.vue';
+	// Ssds
+	import CardDepartment from '@pf/src/modules/organizations/components/blocks/CardDepartment.vue';
 	// Feeds
 	import FeedEvents from '@pf/src/modules/events/components/sections/Feed.vue'; 
 	import FeedCommunity from '@pf/src/modules/community/components/sections/Feed.vue'; 
@@ -185,6 +239,7 @@
 	import * as auth 			from '@pf/src/modules/auth/store/auth'
 	import * as organization 	from '@pf/src/modules/organizations/store/organizations'
 	import * as memberships 	from '@pf/src/modules/organizations/store/memberships'
+	import * as departments from '@pf/src/modules/organizations/store/departments';
 	// Spots
 	import * as spots from '@pf/src/modules/spots/store/spots';
 	// Init router