@ozdao/martyrs 0.2.518 → 0.2.520

package/src/modules/organizations/components/forms/DepartmentForm.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="cols-1 gap-thin o-y-scroll">
+    <Block
+      title="Profile"
+      class="mn-b-thin"
+    >
+      <div
+        class="cols-2-fit-content"
+      >
+        <UploadImage 
+          v-model:photo="currentDepartment.profile.photo"
+          :uploadPath="'organizations/' + currentDepartment.profile.name + '/departments'"
+          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="currentDepartment.profile.name"     
+            label="Name"  
+            placeholder="Department Name" 
+            class="mn-b-small bg-white radius-small pd-medium"
+          />
+          <Field 
+            v-model:field="currentDepartment.profile.description"     
+            label="Description"  
+            placeholder="Department description (max 120 symbols)" 
+            class="bg-white radius-small pd-medium"
+          />  
+        </div>
+      </div>
+    </Block>
+
+    <Block
+      title="Team"
+      placeholder="No members added yet"
+      :actions="[{
+        label: '+',
+        function: () => openMemberPopup()
+      }]"
+      class="cols-1 gap-thin mn-b-thin"
+    > 
+      <CardUser 
+        class="h-4r bg-white pd-thin radius-medium w-100" 
+        v-for="(member, index) in currentDepartment.members" 
+        :key="member._id || index" 
+        :user="member.user" 
+        :photo="member.user.profile.photo"
+        :name="member.user.profile.name || member.user.phone || member.user.email || member.user._id"
+        :position="member.position" 
+        :action="{
+          label: {
+            is: IconDelete,
+            props: { class: 'i-medium', fill: 'rgb(var(--white)' }
+          },
+          method: () => removeMember(member)
+        }"
+      />
+    </Block>
+
+    <div class="bg-light pd-medium o-hidden radius-medium mn-b-thin">
+      <h3 class="mn-b-semi">Department Settings</h3>
+      
+      <p class="p-medium mn-b-small">Please settings for your department:</p>
+      <div class="cols-1 gap-thin">
+        <Checkbox 
+          label="Hidden department"
+          name="hidden"
+          class="w-100 mn-r-small bg-white radius-small pd-small"
+          @update:radio="updated => currentDepartment.hidden = !currentDepartment.hidden"
+          :radio="currentDepartment.hidden"
+        />
+      </div>
+    </div>
+
+    <div class="bg-light pd-medium o-hidden radius-medium">
+      <h3 class="mn-b-semi">Accesses</h3>
+      
+      <p class="p-medium mn-b-small">Please select organization accesses for user in department:</p>
+      
+      <div class="cols-1 gap-thin">
+        <div v-for="(actions, category) in currentDepartment.accesses" :key="category" class="mn-b-small">
+          <Spoiler :status="false">
+            <template #header="{ isOpen }">
+              <h4 class="cursor-pointer flex-v-center flex gap-thin">
+                {{ category.charAt(0).toUpperCase() + category.slice(1) }}
+                <span class="t-small">{{ isOpen ? '▼' : '▶' }}</span>
+              </h4>
+            </template>
+            <template #content>
+              <div class="cols-1 gap-thin mn-t-thin">
+                <Checkbox
+                  v-for="(value, action) in actions"
+                  :key="action"
+                  :label="action"
+                  :name="action"
+                  :radio="value"
+                  @update:radio="updated => (currentDepartment.accesses[category][action] = !value)"
+                  class="w-100 mn-r-small bg-white radius-small pd-small"
+                />
+              </div>
+            </template>
+          </Spoiler>
+        </div>
+      </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="flex gap-thin mn-t-medium">
+      <Button
+        v-if="editingDepartment"
+        :submit="onDelete"
+        :showSuccess="true"
+        :showLoader="true"
+        class="bg-red"
+      >
+        Delete
+      </Button>
+      <Button
+        :showSuccess="false"
+        :showLoader="false"
+        class="bg-grey t-white w-100"
+        @click="$emit('close')"
+      >
+        Cancel
+      </Button>
+      <Button
+        class="bg-main w-100"
+        :submit="saveDepartment"
+      >
+        {{ editingDepartment ? 'Update Department' : 'Create Department' }}
+      </Button>
+    </div>
+
+    <!-- Member Selection Popup -->
+    <Popup 
+      title="Add member" 
+      @close-popup="closeMemberPopup" 
+      :isPopupOpen="isOpenAddMemberPopup"
+      class="bg-white w-max-30r radius-medium pd-big"
+    >
+      <Feed
+        :search="{
+          placeholder: 'Search member...',
+          class: 'bg-light mn-b-thin'
+        }"
+        :states="{
+          empty: {
+            title: 'No Members Found',
+            description: 'Currently, there are no members in organization.'
+          }
+        }"
+        :store="{
+          read: (options) => membershipsStore.read(options),
+          state: null
+        }"
+        :options="{
+          target: organizationId,
+          role: ['member', 'owner']
+        }"
+        v-slot="{ 
+          items 
+        }"
+        class="bg-light pd-medium w-min-20r w-max-40r radius-medium h-max-20r o-scroll"
+      >
+        <CardUser
+          v-for="(user, index) in items" 
+          :key="user._id"
+          :user="user.user"
+          :photo="user.user.profile?.photo"
+          :name="user.user.profile?.name || user.user.phone || user.user.email"
+          :disabled="isDuplicateMember(user.user._id)"
+          @click="() => addMemberToDepartment(user.user)"
+          class="h-4r bg-white pd-thin radius-medium w-100 mn-b-thin"
+          :class="{ 'opacity-50 cursor-not-allowed': isDuplicateMember(user.user._id) }"
+        />
+      </Feed>
+    </Popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+import UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';
+import Field from '@martyrs/src/components/Field/Field.vue';
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+import Block from '@martyrs/src/components/Block/Block.vue';
+import Feed from '@martyrs/src/components/Feed/Feed.vue';
+import Spoiler from '@martyrs/src/components/Spoiler/Spoiler.vue';
+
+import CardUser from '@martyrs/src/modules/auth/views/components/blocks/CardUser.vue';
+import IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';
+
+import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
+import membershipsStore from '@martyrs/src/modules/organizations/store/memberships.store.js';
+import departmentsStore from '@martyrs/src/modules/organizations/store/departments.store.js';
+
+const route = useRoute();
+
+const props = defineProps({
+  department: Object,
+  organizationId: String
+});
+
+const emit = defineEmits(['close', 'saved']);
+
+// State
+const editingDepartment = computed(() => !!props.department?._id);
+const isOpenAddMemberPopup = ref(false);
+
+// Create default department structure
+const createDefaultDepartment = () => ({
+  organization: props.organizationId,
+  profile: {
+    photo: '',
+    name: '',
+    description: '',
+    categories: [],
+  },
+  address: '',
+  location: {
+    lat: null,
+    lng: null,
+  },
+  worktime: [],
+  delivery: [],
+  payment: [],
+  members: [],
+  subdepartments: [],
+  hidden: false,
+  accesses: {
+    categories: {
+      create: false,
+      read: false,
+      edit: false,
+      delete: false,
+    },
+    rents: {
+      create: false,
+      read: false,
+      edit: false,
+      delete: false,
+    },
+    spots: {
+      create: false,
+      read: false,
+      edit: false,
+      delete: false,
+    },
+    members: {
+      read: false,
+      edit: false,
+      delete: false,
+    },
+    posts: {
+      create: false,
+      read: false,
+      edit: false,
+      delete: false,
+    },
+    events: {
+      create: false,
+      read: false,
+      edit: false,
+      delete: false,
+    },
+    tickets: {
+      create: false,
+      read: false,
+      edit: false,
+      delete: false,
+    },
+    gallery: {
+      read: false,
+      create: false,
+      edit: false,
+      delete: false,
+    },
+    inventory: {
+      read: false,
+      edit: false,
+      delete: false,
+    },
+    products: {
+      read: false,
+      edit: false,
+      delete: false,
+    },
+    orders: {
+      read: false,
+      confirm: false,
+      delete: false,
+    },
+    departments: {
+      read: false,
+      edit: false,
+      delete: false,
+    },
+  },
+});
+
+// Current department reactive state - create deep copy to avoid mutating original
+const currentDepartment = reactive(
+  props.department ? JSON.parse(JSON.stringify(props.department)) : createDefaultDepartment()
+);
+
+// Member management
+function openMemberPopup() {
+  isOpenAddMemberPopup.value = true;
+}
+
+function closeMemberPopup() {
+  isOpenAddMemberPopup.value = false;
+}
+
+function isDuplicateMember(userId) {
+  return currentDepartment.members.some(member => 
+    member.user._id === userId || member._id === userId
+  );
+}
+
+function addMemberToDepartment(user) {
+  if (!isDuplicateMember(user._id)) {
+    currentDepartment.members.push({ 
+      _id: user._id, 
+      user: user, 
+      position: 'Member' 
+    });
+    closeMemberPopup();
+  } else {
+    globals.actions.setError({ message: 'This user is already a member of this department' });
+  }
+}
+
+function removeMember(member) {
+  if (confirm("Are you sure you want to remove this member?")) {
+    const index = currentDepartment.members.findIndex(m => 
+      (m.user._id === member.user._id) || (m._id === member._id)
+    );
+    if (index > -1) {
+      currentDepartment.members.splice(index, 1);
+    }
+  }
+}
+
+// Save/Delete operations
+async function saveDepartment() {
+  try {
+    // Prepare department data
+    const departmentData = {
+      ...currentDepartment,
+      organization: props.organizationId
+    };
+
+    let result;
+    if (editingDepartment.value) {
+      // Update existing department
+      result = await departmentsStore.update({
+        ...departmentData,
+        _id: props.department._id
+      });
+    } else {
+      // Create new department
+      result = await departmentsStore.create(departmentData);
+    }
+
+    emit('saved', result);
+    emit('close');
+  } catch (error) {
+    console.error('Error saving department:', error);
+    globals.actions.setError(error);
+    throw error;
+  }
+}
+
+async function onDelete() {
+  if (confirm("Are you sure you want to delete this department?")) {
+    try {
+      await departmentsStore.delete({ _id: props.department._id });
+      emit('saved', null);
+      emit('close');
+    } catch (error) {
+      console.error('Error deleting department:', error);
+      globals.actions.setError(error);
+    }
+  }
+}
+</script>

package/src/modules/organizations/components/forms/InviteForm.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <p class="mn-b-thin t-transp p-medium">{{ text }}</p> 
+
+    <section class="cols-1 mn-b-small radius-medium pd-semi bg-light pos-relative">
+      <div
+        v-for="(member, index) in members" 
+        :key="index" 
+        class="br-1px br-solid br-grey-transp-25 flex gap-thin radius-small mn-b-thin"
+      >
+        <Field 
+          v-model:field="member.contact"   
+          placeholder="Enter email or phone" 
+          class="w-100 pd-small radius-small bg-white"
+          :validation="contactValidation"
+        >
+          <div 
+            v-if="index < 1" 
+            @click="() => members.push({contact: ''})"  
+            class="radius-small h-100 i-big flex-center flex aspect-1x1 bg-green"
+          >
+            <IconAdd 
+              class="i-medium"
+              :fill="'rgb(var(--white)'"
+            />
+          </div>
+
+          <div 
+            v-else 
+            @click="() => members.splice(index, 1)" 
+            class="radius-small h-100 i-big flex-center flex aspect-1x1 bg-red"
+          >
+            <IconDelete 
+              class="i-medium"
+              :fill="'rgb(var(--white)'"
+            />
+          </div>
+        </Field>
+      </div>
+    </section>
+
+    <Button  
+      :submit="submitMembers" 
+      class="w-100 bg-main"
+    >
+      <span>Send invitations</span>
+    </Button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+import Field from '@martyrs/src/components/Field/Field.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+
+import IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';
+import IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';
+
+const props = defineProps({
+  organization: Object,
+  text: {
+    type: String,
+    default: 'Please enter email or phone number to send an invitation link:'
+  }
+});
+
+const emit = defineEmits(['send-invite']);
+
+// Validation
+const contactValidation = ref(null);
+
+// Members list
+const members = ref([{ contact: '' }]);
+
+async function submitMembers() {
+  return new Promise((resolve, reject) => {
+    emit('send-invite', members.value, resolve, reject);
+  });
+}
+</script>

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

@@ -1,11 +1,11 @@
 <template>
   <div class="for-transition w-100">
     
-    <div v-if="departments.state.department" id="dash" class="pd-medium bg-light">
+    <div v-if="departmentsStore.state.items.length > 0" id="dash" class="pd-medium bg-light">
       <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.profile.name }}</h2>
+          <h2 class="w-100">{{ departmentsStore.state.items[0].profile.name }}</h2>
 
           <router-link 
             :to="{
@@ -28,22 +28,22 @@
           </router-link>
 
         </div>
-        <p class="t-transp p-semi" v-html="departments.state.department.description"></p>
+        <p class="t-transp p-semi" v-html="departmentsStore.state.items[0].description"></p>
       </section>
 
      <section class="mn-b-medium radius-medium pd-semi bg-white">
         <h3 class="mn-b-regular">Команда</h3>
         <ul>
-          <li v-if="departments.state.department.members.length < 1">В отделе еще нет участников</li>
+          <li v-if="departmentsStore.state.items[0]?.members?.length < 1">В отделе еще нет участников</li>
           <User 
             class="br-b br-solid br-grey-transp-25" 
-            v-for="(member, index) in departments.state.department.members" 
+            v-for="(member, index) in departmentsStore.state.items[0]?.members || []" 
             :key="index" 
             :user="member.user" 
             :photo="member.user.profile.photo"
             :name="member.user.profile.name || member.user.phone || member.user.email || member.user._id"
             :position="member.position" 
-            @click="$router.push(`/app/profile/${member.user._id}`)" 
+            @click="$router.push({ name: 'User Profile', params: { _id: member.user._id } })" 
           />
         </ul>
       </section>
@@ -51,8 +51,8 @@
       <section class="mn-b-medium radius-medium pd-semi bg-white">
         <h3 class="mn-b-regular">Подотделы</h3>
         <ul>
-          <li v-if="departments.state.department.subdepartments.length < 1">В отделе еще нет подотделов</li>
-          <DepartmentSub v-for="(subdepartment, index) in departments.state.department.subdepartments" @click="$router.push(`/app/organization/departments/${subdepartment._id}`)" :key="index" class="br-b br-solid br-grey-transp-25" :department="subdepartment" />
+          <li v-if="departmentsStore.state.items[0]?.subdepartments?.length < 1">В отделе еще нет подотделов</li>
+          <DepartmentSub v-for="(subdepartment, index) in departmentsStore.state.items[0]?.subdepartments || []" @click="$router.push(`/app/organization/departments/${subdepartment._id}`)" :key="index" class="br-b br-solid br-grey-transp-25" :department="subdepartment" />
         </ul> 
       </section>
     </div>
@@ -65,14 +65,14 @@ import { useRoute, useRouter } from 'vue-router';
 import Spoiler from '@martyrs/src/components/Spoiler/Spoiler.vue';
 import DepartmentSub from '@martyrs/src/modules/organizations/components/blocks/DepartmentSub.vue';
 import User from '@martyrs/src/modules/auth/views/components/blocks/CardUser.vue';
-import * as departments from '@martyrs/src/modules/organizations/store/departments.js';
+import departmentsStore from '@martyrs/src/modules/organizations/store/departments.store.js';
 
 import IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'
 
 const router = useRouter();
 const route = useRoute();
 
-await departments.actions.readOne(route.params.department);
+await departmentsStore.read({ _id: route.params.department });
 </script>
 
 <style scoped>

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

@@ -75,7 +75,7 @@
       title="Add member" 
       @close-popup="closeMemberPopup" 
       :isPopupOpen="isOpenAddMemberPopup"
-      class="bg-white w-max-30r radius-big pd-big"
+      class="bg-white w-max-30r radius-medium pd-big"
     >
       <Feed
         :search="{
@@ -99,7 +99,7 @@
         v-slot="{ 
           items 
         }"
-        class="bg-light pd-medium w-min-20r w-max-40r radius-big h-max-20r o-scroll"
+        class="bg-light pd-medium w-min-20r w-max-40r radius-medium h-max-20r o-scroll"
       >
         <CardUser
           v-for="(user, index) in items" 
@@ -119,7 +119,7 @@
 
     <div class="cols-2 gap-thin">
     
-        <div class="bg-light pd-medium o-hidden radius-big">
+        <div class="bg-light pd-medium o-hidden radius-medium">
           <h3 class="mn-b-semi">Department Settings</h3>
           
           <p class="p-medium mn-b-small">Please settings for your department:</p>
@@ -134,7 +134,7 @@
           </div>
         </div>
 
-        <div class="bg-light pd-medium o-hidden radius-big">
+        <div class="bg-light pd-medium o-hidden radius-medium">
           <h3 class="mn-b-semi">Acessess</h3>
           
           <p class="p-medium mn-b-small">Please select organization accesses for user in department:</p>
@@ -221,16 +221,16 @@ import DepartmentSub from "@martyrs/src/modules/organizations/components/blocks/
 import CardUser from '@martyrs/src/modules/auth/views/components/blocks/CardUser.vue'
 
 import * as globals from "@martyrs/src/modules/globals/views/store/globals.js";
-import * as departments from "@martyrs/src/modules/organizations/store/departments.js";
-import * as memberships from "@martyrs/src/modules/organizations/store/memberships.js";
+import departmentsStore from "@martyrs/src/modules/organizations/store/departments.store.js";
+import membershipsStore from "@martyrs/src/modules/organizations/store/memberships.store.js";
 
 const router = useRouter();
 const route = useRoute();
 
 async function fetchData() {
-  const users = ref(memberships.state.memberships);
+  const users = ref(membershipsStore.state.items);
   // await departments.actions.read({organization: route.params._id});
-  if (route.params.department) await departments.actions.readOne(route.params.department);
+  if (route.params.department) await departmentsStore.read({ _id: route.params.department });
 }
 
 fetchData();