generated from corrad-software/corrad-af-2024
371 lines
17 KiB
Vue
371 lines
17 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { useDmsStore } from '~/stores/dms';
|
|
import DMSNavigation from '~/components/dms/navigation/DMSNavigation.vue';
|
|
|
|
// Define page metadata
|
|
definePageMeta({
|
|
title: "My Documents",
|
|
middleware: ["auth"],
|
|
requiresAuth: true,
|
|
breadcrumb: [
|
|
{
|
|
name: "Dashboard",
|
|
path: "/dashboard",
|
|
},
|
|
{
|
|
name: "DMS",
|
|
path: "/dms",
|
|
},
|
|
{
|
|
name: "My Documents",
|
|
path: "/dms/my-documents",
|
|
},
|
|
],
|
|
});
|
|
|
|
// Set up store
|
|
const dmsStore = useDmsStore();
|
|
|
|
// Local state
|
|
const searchQuery = ref('');
|
|
const isSearching = ref(false);
|
|
const currentPath = ref('My Documents');
|
|
const viewMode = ref('explorer'); // explorer, cabinets, list
|
|
const selectedFiles = ref([]);
|
|
const isSelecting = ref(false);
|
|
const currentDocument = ref(null);
|
|
const showFileViewer = ref(false);
|
|
|
|
// Toggle file selection
|
|
const toggleFileSelection = (file) => {
|
|
const index = selectedFiles.value.findIndex(f => f.id === file.id);
|
|
if (index === -1) {
|
|
selectedFiles.value.push(file);
|
|
} else {
|
|
selectedFiles.value.splice(index, 1);
|
|
}
|
|
};
|
|
|
|
// Clear selection
|
|
const clearSelection = () => {
|
|
selectedFiles.value = [];
|
|
isSelecting.value = false;
|
|
};
|
|
|
|
// Select all files
|
|
const selectAllFiles = () => {
|
|
selectedFiles.value = [...myFiles];
|
|
isSelecting.value = true;
|
|
};
|
|
|
|
// Check if a file is selected
|
|
const isFileSelected = (file) => {
|
|
return selectedFiles.value.some(f => f.id === file.id);
|
|
};
|
|
|
|
// Toggle view mode
|
|
const changeViewMode = (mode) => {
|
|
viewMode.value = mode;
|
|
};
|
|
|
|
// View a file
|
|
const viewFile = (file) => {
|
|
if (isSelecting.value) {
|
|
toggleFileSelection(file);
|
|
return;
|
|
}
|
|
|
|
currentDocument.value = file;
|
|
showFileViewer.value = true;
|
|
};
|
|
|
|
// Search functionality
|
|
const handleSearch = async () => {
|
|
if (!searchQuery.value.trim()) return;
|
|
|
|
isSearching.value = true;
|
|
// In a real app, we would call an API to search
|
|
setTimeout(() => {
|
|
isSearching.value = false;
|
|
}, 800);
|
|
};
|
|
|
|
// Clear search
|
|
const clearSearch = () => {
|
|
searchQuery.value = '';
|
|
};
|
|
|
|
// Mock data for the example
|
|
const myFiles = [
|
|
{
|
|
id: 'file1',
|
|
name: 'Project_Proposal_2023.pdf',
|
|
type: 'file',
|
|
extension: 'pdf',
|
|
size: '2.4MB',
|
|
modified: '2023-01-15',
|
|
status: 'unlocked',
|
|
createdBy: 'Current User'
|
|
},
|
|
{
|
|
id: 'file2',
|
|
name: 'Budget_Estimation_Q1.xlsx',
|
|
type: 'file',
|
|
extension: 'xlsx',
|
|
size: '1.8MB',
|
|
modified: '2023-02-10',
|
|
status: 'unlocked',
|
|
createdBy: 'Current User'
|
|
},
|
|
{
|
|
id: 'file3',
|
|
name: 'Meeting_Minutes_March.docx',
|
|
type: 'file',
|
|
extension: 'docx',
|
|
size: '578KB',
|
|
modified: '2023-03-22',
|
|
status: 'locked',
|
|
createdBy: 'Current User'
|
|
},
|
|
{
|
|
id: 'file4',
|
|
name: 'Technical_Specifications.pdf',
|
|
type: 'file',
|
|
extension: 'pdf',
|
|
size: '3.2MB',
|
|
modified: '2023-02-28',
|
|
status: 'unlocked',
|
|
createdBy: 'Current User'
|
|
}
|
|
];
|
|
|
|
// Lifecycle hooks
|
|
onMounted(() => {
|
|
// In a real app, we would fetch the user's documents here
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dms-page">
|
|
<LayoutsBreadcrumb />
|
|
|
|
<rs-card class="h-full">
|
|
<template #header>
|
|
<div class="flex flex-wrap items-center justify-between gap-4">
|
|
<h1 class="text-xl font-bold text-primary">My Documents</h1>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<!-- Search box -->
|
|
<div class="relative">
|
|
<input
|
|
v-model="searchQuery"
|
|
@keyup.enter="handleSearch"
|
|
type="text"
|
|
placeholder="Search my documents..."
|
|
class="pl-10 pr-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 w-64"
|
|
/>
|
|
<span
|
|
class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</span>
|
|
<button
|
|
v-if="searchQuery"
|
|
@click="clearSearch"
|
|
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="explorer-layout h-full flex flex-col">
|
|
<!-- Address bar (Windows Explorer style) -->
|
|
<div class="address-bar border-b border-gray-200 dark:border-gray-700 p-2 flex items-center gap-2">
|
|
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
|
</button>
|
|
|
|
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</button>
|
|
|
|
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
|
|
</button>
|
|
|
|
<div class="flex-1 flex items-center px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 text-gray-500"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
|
<span>{{ currentPath }}</span>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Filter in current view..."
|
|
class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 w-56"
|
|
/>
|
|
<span class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View options toolbar -->
|
|
<div class="view-toolbar border-b border-gray-200 dark:border-gray-700 p-2 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
@click="changeViewMode('explorer')"
|
|
class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
|
|
:class="viewMode === 'explorer' ? 'bg-gray-100 dark:bg-gray-800' : ''"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
|
|
<span class="ml-1 text-sm">Explorer View</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="changeViewMode('cabinets')"
|
|
class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
|
|
:class="viewMode === 'cabinets' ? 'bg-gray-100 dark:bg-gray-800' : ''"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
|
|
<span class="ml-1 text-sm">Cabinets View</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="changeViewMode('list')"
|
|
class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
|
|
:class="viewMode === 'list' ? 'bg-gray-100 dark:bg-gray-800' : ''"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
|
|
<span class="ml-1 text-sm">List View</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<rs-button size="sm" color="primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
|
|
Upload
|
|
</rs-button>
|
|
<rs-button size="sm" color="secondary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
|
New
|
|
</rs-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content area -->
|
|
<div class="flex-1 flex overflow-hidden">
|
|
<!-- Left sidebar navigation -->
|
|
<DMSNavigation />
|
|
|
|
<!-- File explorer main content -->
|
|
<div class="flex-1 overflow-y-auto">
|
|
<!-- List view -->
|
|
<table class="min-w-full">
|
|
<thead class="bg-gray-50 dark:bg-gray-800">
|
|
<tr>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-6">
|
|
<input
|
|
type="checkbox"
|
|
class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
|
@click="selectAllFiles"
|
|
>
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Name
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Type
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Size
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Modified Date
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
|
<tr
|
|
v-for="file in myFiles"
|
|
:key="file.id"
|
|
@click="viewFile(file)"
|
|
class="hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
|
|
:class="{ 'bg-blue-50 dark:bg-blue-900/20': isFileSelected(file) }"
|
|
>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<input
|
|
type="checkbox"
|
|
class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
|
:checked="isFileSelected(file)"
|
|
@click.stop="toggleFileSelection(file)"
|
|
>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<span class="text-gray-500 mr-2">
|
|
<svg v-if="file.extension === 'pdf'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<path d="M9 15h6"></path>
|
|
<path d="M9 11h6"></path>
|
|
</svg>
|
|
<svg v-else-if="file.extension === 'xlsx'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<rect x="8" y="12" width="8" height="6"></rect>
|
|
<line x1="8" y1="16" x2="16" y2="16"></line>
|
|
<line x1="11" y1="12" x2="11" y2="18"></line>
|
|
</svg>
|
|
<svg v-else-if="file.extension === 'docx'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<line x1="10" y1="9" x2="8" y2="9"></line>
|
|
</svg>
|
|
</span>
|
|
<div class="flex items-center">
|
|
<span>{{ file.name }}</span>
|
|
<span v-if="file.status === 'locked'" class="ml-2 text-red-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<span class="uppercase">{{ file.extension }}</span>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
{{ file.size }}
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
{{ file.modified }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Right sidebar for document details - optional -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</rs-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dms-page {
|
|
height: calc(100vh - 64px - 48px - 32px); /* Adjust based on your layout */
|
|
}
|
|
|
|
.explorer-layout {
|
|
height: calc(100vh - 200px); /* Adjust based on your layout */
|
|
}
|
|
</style> |