239 lines
12 KiB
Vue
239 lines
12 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import axios from 'axios';
|
|
import { usePageTitle } from '../composables/Core/usePageTitle';
|
|
import { useNavigate } from '../composables/Core/useNavigate';
|
|
import { useModal } from '../composables/Core/useModal';
|
|
import { encodeHash } from '../composables/useUrlEncoder';
|
|
import { computed } from 'vue';
|
|
import SearchableTableWrapper from '../Components/Core/SearchableTableWrapper.vue';
|
|
import GovernanceResolutions from './Fragments/GovernanceResolutions.vue';
|
|
import DocumentRepository from './Fragments/DocumentRepository.vue';
|
|
|
|
const props = defineProps({
|
|
target: String
|
|
});
|
|
|
|
usePageTitle('Cooperative Details');
|
|
const { navigate } = useNavigate();
|
|
const modal = useModal();
|
|
|
|
const cooperative = ref(null);
|
|
const loading = ref(true);
|
|
const searchQuery = ref('');
|
|
const tableDensity = ref('comfortable');
|
|
const activeTab = ref('members');
|
|
|
|
const fetchDetails = async () => {
|
|
if (!props.target) return;
|
|
loading.value = true;
|
|
try {
|
|
const response = await axios.post('/Cooperatives/Get', { hashkey: props.target });
|
|
if (response.data.success) {
|
|
cooperative.value = response.data.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch cooperative details');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const viewMember = (userHashkey) => {
|
|
navigate({ page: 'UserInfoEdit', props: { target: userHashkey } });
|
|
};
|
|
|
|
const filteredMembers = computed(() => {
|
|
if (!cooperative.value?.members) return [];
|
|
if (!searchQuery.value) return cooperative.value.members;
|
|
|
|
const query = searchQuery.value.toLowerCase();
|
|
return cooperative.value.members.filter(m =>
|
|
(m.user?.fullname?.toLowerCase().includes(query)) ||
|
|
(m.user?.name?.toLowerCase().includes(query)) ||
|
|
(m.role?.toLowerCase().includes(query))
|
|
);
|
|
});
|
|
|
|
const shareRegisterLink = async () => {
|
|
const encodedHash = encodeHash(props.target);
|
|
const url = `${window.location.origin}/register-coop--${encodedHash}`;
|
|
const title = cooperative.value?.name ?? 'Join our Cooperative';
|
|
const text = `Register as a member of ${title}`;
|
|
|
|
if (navigator.share) {
|
|
try {
|
|
await navigator.share({ title, text, url });
|
|
} catch {
|
|
// user cancelled or share failed — silently ignore
|
|
}
|
|
} else {
|
|
await navigator.clipboard.writeText(url);
|
|
modal.show({ title: 'Link Copied', message: 'Registration link copied to clipboard.', variant: 'info' });
|
|
}
|
|
};
|
|
|
|
onMounted(fetchDetails);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cooperative-detail pb-5">
|
|
<div class="tf-container mt-4">
|
|
<div v-if="loading" class="text-center py-5">
|
|
<i class="fas fa-spinner fa-spin fa-2x text-primary mb-2"></i>
|
|
<p class="text-muted">Loading details...</p>
|
|
</div>
|
|
|
|
<div v-else-if="!cooperative" class="text-center py-5">
|
|
<p class="text-danger">Cooperative not found.</p>
|
|
<button @click="navigate({ page: 'CooperativeList' })" class="btn btn-primary rounded-pill px-4 mt-3">Back to List</button>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<!-- coop Header -->
|
|
<div class="card border-0 shadow-sm rounded-20 p-4 mb-4 bg-primary text-white overflow-hidden position-relative">
|
|
<div class="position-absolute top-0 end-0 opacity-10 p-4">
|
|
<i class="fas fa-landmark fa-6x rotate-15"></i>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3 position-relative">
|
|
<div class="bg-white text-primary rounded-circle p-3 shadow-lg">
|
|
<i class="fas fa-users fa-2x"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="fw_8 mb-1">{{ cooperative.name }}</h2>
|
|
<p class="mb-0 opacity-75"><i class="fas fa-map-marker-alt me-1"></i> {{ cooperative.address || 'No address provided' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="card border-0 shadow-sm rounded-20 mb-4 overflow-hidden">
|
|
<div class="d-flex border-bottom bg-light">
|
|
<button
|
|
v-for="tab in ['members', 'governance', 'documents']"
|
|
:key="tab"
|
|
@click="activeTab = tab"
|
|
:class="['flex-fill py-3 border-0 transition-all fw_7 text-capitalize',
|
|
activeTab === tab ? 'bg-white text-primary border-bottom-primary' : 'bg-transparent text-muted']"
|
|
>
|
|
<i :class="['me-2',
|
|
tab === 'members' ? 'fas fa-user-friends' :
|
|
tab === 'governance' ? 'fas fa-gavel' : 'fas fa-folder-open']">
|
|
</i>
|
|
{{ tab }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons (Conditional) -->
|
|
<div v-if="activeTab === 'members'" class="mb-4 d-flex justify-content-end gap-2 flex-wrap animate-fade-in">
|
|
<button v-if="!cooperative.is_member"
|
|
@click="navigate({ page: 'CooperativeMemberRegister', props: { target: props.target } })"
|
|
class="btn btn-success rounded-pill px-4 py-2 shadow-sm">
|
|
<i class="fas fa-id-card me-2"></i> Register as Member
|
|
</button>
|
|
<button @click="shareRegisterLink" class="btn btn-outline-primary rounded-pill px-4 py-2 shadow-sm">
|
|
<i class="fas fa-share-alt me-2"></i> Share Register Link
|
|
</button>
|
|
<button @click="navigate({ page: 'EnrollFarmer', props: { target: props.target } })" class="btn btn-primary rounded-pill px-4 py-2 shadow-sm">
|
|
<i class="fas fa-user-plus me-2"></i> Enroll New Farmer
|
|
</button>
|
|
<button @click="navigate({ page: 'BatchAddCooperativeMembers', props: { target: props.target } })" class="btn btn-primary rounded-pill px-4 py-2 shadow-sm">
|
|
<i class="fas fa-users-cog me-2"></i> Batch Add Members
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<transition name="fade" mode="out-in">
|
|
<div :key="activeTab">
|
|
<!-- Members Section -->
|
|
<div v-if="activeTab === 'members'" class="animate-fade-in">
|
|
<h4 class="fw_6 mb-3 text-dark d-flex align-items-center gap-2">
|
|
<i class="fas fa-users text-primary opacity-50"></i>
|
|
Members ({{ filteredMembers.length }}{{ searchQuery ? ' found' : '' }})
|
|
</h4>
|
|
|
|
<SearchableTableWrapper
|
|
v-model:search-value="searchQuery"
|
|
v-model:density-value="tableDensity"
|
|
:empty="filteredMembers.length === 0"
|
|
empty-title="No members found"
|
|
empty-message="Try a different search term or enroll new members."
|
|
empty-icon="fas fa-user-friends"
|
|
>
|
|
<template #table>
|
|
<thead>
|
|
<tr class="bg-light">
|
|
<th class="border-0">Member Name</th>
|
|
<th class="border-0">Role</th>
|
|
<th class="border-0 text-end">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="membership in filteredMembers" :key="membership.hashkey"
|
|
class="cursor-pointer"
|
|
@click="viewMember(membership.user.hashkey)">
|
|
<td class="border-0">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="bg-soft-primary text-primary rounded-circle p-2 member-avatar">
|
|
<i class="fas fa-user small"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="fw_6 mb-0 text-dark">{{ membership.user.fullname || membership.user.name }}</h6>
|
|
<small class="text-muted d-block opacity-75">ID: {{ membership.user.hashkey?.substring(0, 8) }}...</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="border-0">
|
|
<span class="badge rounded-pill bg-soft-info text-info px-3 py-2 fw_5">
|
|
{{ membership.role }}
|
|
</span>
|
|
</td>
|
|
<td class="border-0 text-end">
|
|
<button class="btn btn-icon btn-soft-primary rounded-circle shadow-sm border-0">
|
|
<i class="fas fa-chevron-right small"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</template>
|
|
</SearchableTableWrapper>
|
|
</div>
|
|
|
|
<!-- Governance Section -->
|
|
<div v-else-if="activeTab === 'governance'" class="animate-fade-in">
|
|
<GovernanceResolutions :org-hash="props.target" />
|
|
</div>
|
|
|
|
<!-- Documents Section -->
|
|
<div v-else-if="activeTab === 'documents'" class="animate-fade-in">
|
|
<DocumentRepository :org-hash="props.target" />
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rounded-20 { border-radius: 20px; }
|
|
.cursor-pointer { cursor: pointer; }
|
|
.hover-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
|
|
}
|
|
.bg-soft-primary { background-color: rgba(var(--primary-rgb), 0.1); }
|
|
.bg-soft-info { background-color: rgba(0, 184, 217, 0.1); }
|
|
.text-info { color: #00B8D9 !important; }
|
|
.member-avatar { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
|
|
.btn-soft-primary { background-color: rgba(var(--primary-rgb), 0.1); color: var(--primary); }
|
|
|
|
.border-bottom-primary { border-bottom: 3px solid var(--primary) !important; }
|
|
.transition-all { transition: all 0.2s ease; }
|
|
.rotate-15 { transform: rotate(-15deg); }
|
|
|
|
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
|
|
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
|
</style>
|