Untitled
unknown
plain_text
9 months ago
14 kB
10
Indexable
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { DocumentIcon, EyeIcon } from '@heroicons/vue/24/outline'
import Pagination from '@/components/ui/pagination/Pagination.vue'
import apiClient from '@/services/api' // Assuming apiClient is configured for Axios/HTTP requests
// 1. State for Data and Loading
const documents = ref([]) // Holds the current page of documents fetched from the API
const totalItems = ref(0) // Holds the total number of documents (for pagination)
const isLoading = ref(true)
// 2. Pagination state
const currentPage = ref(1)
const itemsPerPage = ref(10)
// 3. Data Fetching Function (Main Logic)
const fetchActedDocuments = async () => {
isLoading.value = true
try {
const response = await apiClient.get('/dms/acted-documents', {
params: {
page: currentPage.value,
per_page: itemsPerPage.value,
// The backend DmsDocumentController.php is filtering by status='CLOSED_MGB_EMB'
},
})
// Assuming Laravel's paginated response structure:
// documents.data is the array of items, total is the total count.
documents.value = response.data.data || []
totalItems.value = response.data.total || 0
} catch (error) {
console.error('Error fetching acted documents:', error)
documents.value = []
totalItems.value = 0
} finally {
isLoading.value = false
}
}
// --- Lifecycle and Watchers ---
// Initial load when the component is mounted
onMounted(() => {
fetchActedDocuments()
})
// Watch for pagination changes and refetch data
watch([currentPage, itemsPerPage], () => {
fetchActedDocuments()
})
// The computed property simply exposes the fetched documents
const paginatedDocuments = computed(() => documents.value)
// Pagination event handlers
const handlePageChange = (page: number) => {
currentPage.value = page
}
const handleItemsPerPageChange = (items: number) => {
itemsPerPage.value = items
currentPage.value = 1
}
</script>
<template>
<div class="bg-white rounded-lg shadow p-3 sm:p-4 md:p-6 font-sans">
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-4 sm:mb-6">
<h2 class="text-lg sm:text-xl font-medium text-gray-900 mb-2 sm:mb-0">Acted Cases</h2>
</div>
<div v-if="isLoading">
<div class="hidden lg:block overflow-x-auto rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tl-lg">
Document No.
</th>
<th
class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
Subject
</th>
<th
class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tr-lg">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-100 animate-pulse">
<tr v-for="n in 5" :key="n" class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 whitespace-nowrap text-sm text-center">
<div class="h-4 bg-gray-200 rounded w-24 mx-auto"></div>
</td>
<td class="px-4 py-3 text-sm text-center max-w-xs">
<div class="h-4 bg-gray-200 rounded w-32 mx-auto"></div>
</td>
<td class="px-4 py-3 text-sm text-center">
<div class="flex justify-center space-x-2">
<div class="w-8 h-8 bg-gray-200 rounded-full"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block lg:hidden space-y-3">
<div v-for="n in 3" :key="n"
class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm animate-pulse">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center space-x-2 min-w-0 flex-1">
<div class="w-5 h-5 bg-gray-200 rounded-full"></div>
<div class="min-w-0 flex-1">
<div class="h-4 bg-gray-200 rounded w-24 mb-1"></div>
<div class="h-3 bg-gray-200 rounded w-16"></div>
</div>
</div>
<div class="h-4 bg-gray-200 rounded w-12"></div>
</div>
<div class="mb-3">
<div class="h-4 bg-gray-200 rounded w-20 mb-1"></div>
<div class="h-4 bg-gray-200 rounded w-full"></div>
</div>
<div class="flex justify-end space-x-2 pt-3 border-t border-gray-100">
<div class="w-8 h-8 bg-gray-200 rounded-full"></div>
</div>
</div>
</div>
</div>
<div v-else-if="documents.length === 0"
class="text-center py-12 border-2 border-dashed border-gray-200 rounded-lg bg-gray-50">
<DocumentIcon class="mx-auto h-10 w-10 text-gray-400" />
<div class="mt-2 text-base font-medium text-gray-900">No acted cases found</div>
<div class="mt-1 text-sm text-gray-500">Completed cases will appear here</div>
</div>
<template v-else>
<div class="hidden lg:block overflow-x-auto rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tl-lg">
Document No.
</th>
<th
class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
Subject
</th>
<th
class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tr-lg">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-100">
<tr v-for="doc in paginatedDocuments" :key="doc.incoming_initial_id"
class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700 text-center">
<span class="inline-flex items-center">
<DocumentIcon class="w-4 h-4 mr-1 text-gray-400" />
{{ doc.document_no }}
</span>
</td>
<td class="px-4 py-3 text-sm text-gray-700 text-center max-w-xs">
<div class="truncate" :title="doc.subject">{{ doc.subject }}</div>
</td>
<td class="px-4 py-3 text-center text-sm">
<div class="flex justify-center">
<button
class="text-gray-500 hover:text-blue-600 p-2 rounded-full hover:bg-gray-100 transition-colors duration-200"
title="View Case">
<EyeIcon class="w-5 h-5" />
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="hidden md:block lg:hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tl-lg">
Case Details
</th>
<th
class="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tr-lg">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-100">
<tr v-for="doc in paginatedDocuments" :key="doc.incoming_initial_id"
class="hover:bg-gray-50 transition-colors">
<td class="px-3 py-4">
<div class="flex items-start space-x-3">
<DocumentIcon class="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" />
<div class="min-w-0 flex-1">
<div class="text-sm font-medium text-gray-900">{{ doc.document_no }}</div>
<div class="text-sm text-gray-500 mt-1 line-clamp-2">{{ doc.subject }}</div>
</div>
</div>
</td>
<td class="px-3 py-4 text-center">
<button
class="text-gray-500 hover:text-blue-600 p-2 rounded-full hover:bg-gray-100 transition-colors duration-200"
title="View Case">
<EyeIcon class="w-4 h-4" />
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="block md:hidden space-y-4">
<div v-for="doc in paginatedDocuments" :key="doc.incoming_initial_id"
class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center space-x-3 min-w-0 flex-1">
<DocumentIcon class="w-6 h-6 text-gray-400 flex-shrink-0" />
<div class="min-w-0 flex-1">
<div class="text-sm font-semibold text-gray-900">{{ doc.document_no }}</div>
<div class="text-xs text-gray-500 mt-0.5">Case Number</div>
</div>
</div>
<span
class="px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full whitespace-nowrap">
Acted
</span>
</div>
<div class="mb-4">
<div class="text-sm font-medium text-gray-700 mb-2">Subject</div>
<div class="text-sm text-gray-600 leading-relaxed">{{ doc.subject }}</div>
</div>
<div class="flex justify-end pt-3 border-t border-gray-100">
<button
class="flex items-center justify-center text-gray-500 hover:text-blue-600 px-4 py-3 rounded-lg hover:bg-blue-50 transition-all duration-200 min-w-[88px]"
title="View Case Details">
<EyeIcon class="w-5 h-5 mr-2" />
<span class="text-sm font-medium">View Case</span>
</button>
</div>
</div>
</div>
<div v-if="totalItems > 0" class="mt-4 sm:mt-6">
<Pagination :total-items="totalItems" :initial-page="currentPage" :initial-items-per-page="itemsPerPage"
@page-change="handlePageChange" @items-per-page-change="handleItemsPerPageChange" />
</div>
</template>
</div>
</template>
Editor is loading...
Leave a Comment