generated from corrad-software/corrad-af-2024
465 lines
23 KiB
Vue
465 lines
23 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useDmsStore } from '~/stores/dms';
|
|
import DMSNavigation from '~/components/dms/navigation/DMSNavigation.vue';
|
|
|
|
// Define page metadata
|
|
definePageMeta({
|
|
title: "Document Management System",
|
|
middleware: ["auth"],
|
|
requiresAuth: true,
|
|
breadcrumb: [
|
|
{
|
|
name: "Dashboard",
|
|
path: "/dashboard",
|
|
},
|
|
{
|
|
name: "DMS",
|
|
path: "/dms",
|
|
},
|
|
],
|
|
});
|
|
|
|
// Set up store
|
|
const dmsStore = useDmsStore();
|
|
|
|
// Local state
|
|
const showFileViewer = ref(false);
|
|
const currentDocument = ref(null);
|
|
const searchQuery = ref('');
|
|
const isSearching = ref(false);
|
|
const currentPath = ref('JKR Cawangan Kota Bharu, Kelantan');
|
|
const viewMode = ref('explorer'); // explorer, cabinets, list
|
|
|
|
// File selection state
|
|
const selectedFiles = ref([]);
|
|
const isSelecting = 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 = [...dmsStore.currentItems];
|
|
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;
|
|
};
|
|
|
|
// Navigate to a location
|
|
const navigateTo = (path) => {
|
|
currentPath.value = path;
|
|
// In a real app, we would fetch the contents of this location
|
|
clearSelection();
|
|
};
|
|
|
|
// Search functionality
|
|
const handleSearch = async () => {
|
|
if (!searchQuery.value.trim()) return;
|
|
|
|
isSearching.value = true;
|
|
await dmsStore.searchDocuments(searchQuery.value);
|
|
isSearching.value = false;
|
|
};
|
|
|
|
// Clear search
|
|
const clearSearch = () => {
|
|
searchQuery.value = '';
|
|
dmsStore.clearSearch();
|
|
};
|
|
|
|
// Format file size
|
|
const formatFileSize = (size) => {
|
|
if (!size) return '0 B';
|
|
|
|
if (typeof size === 'string') {
|
|
// If already formatted (like "4MB"), return as is
|
|
if (size.endsWith('B')) return size;
|
|
|
|
// Try to parse the size if it's a number in string form
|
|
const parsed = parseFloat(size);
|
|
if (isNaN(parsed)) return size;
|
|
size = parsed;
|
|
}
|
|
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
let i = 0;
|
|
while (size >= 1024 && i < units.length - 1) {
|
|
size /= 1024;
|
|
i++;
|
|
}
|
|
return `${size.toFixed(2)} ${units[i]}`;
|
|
};
|
|
|
|
// Mock data for the example
|
|
const mockFiles = [
|
|
{
|
|
id: 'file1',
|
|
name: 'Pembangunan_Sistem_IT_2021.pdf',
|
|
type: 'file',
|
|
extension: 'pdf',
|
|
size: '4MB',
|
|
modified: '2021-05-20',
|
|
status: 'locked',
|
|
info: {
|
|
title: 'Projek Pembangunan Sistem IT',
|
|
subject: 'Dokumen spesifikasi sistem',
|
|
state: 'Kelantan',
|
|
date: '2021-05-20',
|
|
user: 'Mohd Faizal bin Abdullah',
|
|
storeDate: '2021-05-25'
|
|
}
|
|
},
|
|
{
|
|
id: 'file2',
|
|
name: 'Projek_Jalan_Raya_Kota_Bharu.pdf',
|
|
type: 'file',
|
|
extension: 'pdf',
|
|
size: '5MB',
|
|
modified: '2021-06-15',
|
|
status: 'unlocked'
|
|
},
|
|
{
|
|
id: 'file3',
|
|
name: 'Anggaran_Kos_Projek_MRT3.xlsx',
|
|
type: 'file',
|
|
extension: 'xlsx',
|
|
size: '3MB',
|
|
modified: '2021-07-10',
|
|
status: 'locked'
|
|
},
|
|
{
|
|
id: 'file4',
|
|
name: 'EIA_Empangan_Nenggiri.pdf',
|
|
type: 'file',
|
|
extension: 'pdf',
|
|
size: '15MB',
|
|
modified: '2021-04-18',
|
|
status: 'locked'
|
|
}
|
|
];
|
|
|
|
// Lifecycle hooks
|
|
onMounted(() => {
|
|
// In a real app, we would load the initial data here
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dms-page">
|
|
<LayoutsBreadcrumb />
|
|
|
|
<rs-card class="h-full">
|
|
<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="Search in current folder..."
|
|
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-3">
|
|
<div class="flex items-center bg-gray-100 dark:bg-gray-800 rounded-md overflow-hidden border border-gray-200 dark:border-gray-700">
|
|
<button
|
|
@click="changeViewMode('explorer')"
|
|
class="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center"
|
|
:class="viewMode === 'explorer' ? 'bg-white dark:bg-gray-700 shadow-sm' : ''"
|
|
>
|
|
<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" class="mr-1"><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="text-sm">Explorer View</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="changeViewMode('cabinets')"
|
|
class="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center"
|
|
:class="viewMode === 'cabinets' ? 'bg-white dark:bg-gray-700 shadow-sm' : ''"
|
|
>
|
|
<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" class="mr-1"><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="text-sm">Cabinets View</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="changeViewMode('list')"
|
|
class="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center"
|
|
:class="viewMode === 'list' ? 'bg-white dark:bg-gray-700 shadow-sm' : ''"
|
|
>
|
|
<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" class="mr-1"><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="text-sm">List View</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<rs-button size="sm" color="primary" class="flex items-center">
|
|
<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" class="flex items-center">
|
|
<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>
|
|
Create New
|
|
</rs-button>
|
|
|
|
<div class="flex items-center border border-gray-200 dark:border-gray-700 rounded-md px-3 py-1 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-1"><path d="M11 5h10"></path><path d="M11 9h10"></path><path d="M11 13h10"></path><path d="M3 17h18"></path><path d="M3 5l4 4"></path><path d="M3 13l4-4"></path></svg>
|
|
<span class="text-sm">Sort</span>
|
|
</div>
|
|
</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">
|
|
Nama
|
|
</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">
|
|
Jenis
|
|
</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">
|
|
Saiz
|
|
</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 mockFiles"
|
|
: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>
|
|
</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 -->
|
|
<div v-if="currentDocument" class="w-72 border-l border-gray-200 dark:border-gray-700 overflow-y-auto bg-gray-50 dark:bg-gray-800">
|
|
<div class="p-4">
|
|
<div class="text-center mb-4 bg-white dark:bg-gray-700 p-8 rounded shadow-sm">
|
|
<div v-if="currentDocument.extension === 'pdf'" class="flex justify-center mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" 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>
|
|
</div>
|
|
<div v-else-if="currentDocument.extension === 'xlsx'" class="flex justify-center mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#1D6F42" stroke-width="1" 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" fill="white"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<rect x="8" y="12" width="8" height="6" fill="#1D6F42"></rect>
|
|
<line x1="8" y1="16" x2="16" y2="16" stroke="white"></line>
|
|
<line x1="11" y1="12" x2="11" y2="18" stroke="white"></line>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-lg font-medium">{{ currentDocument.name }}</h2>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-4">
|
|
<h3 class="text-lg font-medium mb-3">Document Information</h3>
|
|
|
|
<div class="grid grid-cols-3 gap-2 mb-2">
|
|
<div class="col-span-1 text-gray-500 dark:text-gray-400">Title:</div>
|
|
<div class="col-span-2 text-right">{{ currentDocument.info?.title || 'N/A' }}</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 mb-2">
|
|
<div class="col-span-1 text-gray-500 dark:text-gray-400">Subject:</div>
|
|
<div class="col-span-2 text-right">{{ currentDocument.info?.subject || 'N/A' }}</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 mb-2">
|
|
<div class="col-span-1 text-gray-500 dark:text-gray-400">State:</div>
|
|
<div class="col-span-2 text-right">{{ currentDocument.info?.state || 'N/A' }}</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 mb-2">
|
|
<div class="col-span-1 text-gray-500 dark:text-gray-400">Date:</div>
|
|
<div class="col-span-2 text-right">{{ currentDocument.info?.date || currentDocument.modified }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
|
|
<h3 class="text-lg font-medium mb-3">Document Details</h3>
|
|
|
|
<div class="grid grid-cols-3 gap-2 mb-2">
|
|
<div class="col-span-1 text-gray-500 dark:text-gray-400">File Name:</div>
|
|
<div class="col-span-2 text-right">{{ currentDocument.name }}</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 mb-2">
|
|
<div class="col-span-1 text-gray-500 dark:text-gray-400">Type:</div>
|
|
<div class="col-span-2 text-right">{{ currentDocument.extension.toUpperCase() }}</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 mb-2">
|
|
<div class="col-span-1 text-gray-500 dark:text-gray-400">Size:</div>
|
|
<div class="col-span-2 text-right">{{ currentDocument.size }}</div>
|
|
</div>
|
|
|
|
<div v-if="currentDocument.info?.user" class="grid grid-cols-3 gap-2 mb-2">
|
|
<div class="col-span-1 text-gray-500 dark:text-gray-400">Author:</div>
|
|
<div class="col-span-2 text-right">{{ currentDocument.info.user }}</div>
|
|
</div>
|
|
|
|
<div v-if="currentDocument.info?.storeDate" class="grid grid-cols-3 gap-2 mb-2">
|
|
<div class="col-span-1 text-gray-500 dark:text-gray-400">Date modified:</div>
|
|
<div class="col-span-2 text-right">{{ currentDocument.info.storeDate }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2 mt-6">
|
|
<rs-button size="sm" color="primary" block class="flex-1">
|
|
<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"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
|
Preview
|
|
</rs-button>
|
|
<rs-button size="sm" color="secondary" block class="flex-1">
|
|
<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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
|
|
Download
|
|
</rs-button>
|
|
</div>
|
|
|
|
<rs-button v-if="currentDocument.status === 'locked'" size="sm" color="default" block class="mt-2">
|
|
<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"><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>
|
|
Request Access
|
|
</rs-button>
|
|
</div>
|
|
</div>
|
|
</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> |