generated from corrad-software/corrad-af-2024
676 lines
27 KiB
Vue
676 lines
27 KiB
Vue
<script setup>
|
|
import { ref, reactive, computed } from 'vue';
|
|
|
|
// Define page metadata
|
|
definePageMeta({
|
|
title: "DMS Settings",
|
|
middleware: ["auth"],
|
|
requiresAuth: true,
|
|
breadcrumb: [
|
|
{
|
|
name: "DMS",
|
|
path: "/dms",
|
|
},
|
|
{
|
|
name: "Settings",
|
|
path: "/dms/settings",
|
|
},
|
|
],
|
|
});
|
|
|
|
// Settings categories
|
|
const settingsCategories = [
|
|
{ id: 'access', name: 'User & Access Management', icon: '🔐' },
|
|
{ id: 'documents', name: 'Document & Folder Settings', icon: '📁' },
|
|
{ id: 'metadata', name: 'Metadata & Tagging', icon: '📝' },
|
|
{ id: 'upload', name: 'Upload & Storage Settings', icon: '📤' },
|
|
{ id: 'system', name: 'System Settings', icon: '📅' }
|
|
];
|
|
|
|
// Current active category
|
|
const activeCategory = ref('access');
|
|
|
|
// Settings data structure
|
|
const settings = reactive({
|
|
// User & Access Management
|
|
access: {
|
|
userRoles: ['Admin', 'Editor', 'Viewer', 'Uploader'],
|
|
rbacEnabled: true,
|
|
userGroups: ['HR Department', 'Finance', 'IT', 'Legal'],
|
|
permissions: {
|
|
view: true,
|
|
edit: true,
|
|
delete: false,
|
|
download: true,
|
|
share: true
|
|
},
|
|
authentication: {
|
|
ssoEnabled: false,
|
|
mfaRequired: false,
|
|
ldapIntegration: false,
|
|
sessionTimeout: 8
|
|
}
|
|
},
|
|
|
|
// Document & Folder Settings
|
|
documents: {
|
|
folderHierarchy: {
|
|
maxDepth: 5,
|
|
defaultStructure: ['Department', 'Project', 'Category', 'Year'],
|
|
folderTemplates: ['Standard', 'Project-based', 'Department-based']
|
|
},
|
|
namingConventions: {
|
|
autoGenerate: true,
|
|
mandatoryFields: ['title', 'department', 'date'],
|
|
pattern: '{department}_{title}_{date}'
|
|
},
|
|
retention: {
|
|
enabled: true,
|
|
defaultDays: 2555, // 7 years
|
|
archiveBeforeDelete: true
|
|
},
|
|
versionControl: {
|
|
enabled: true,
|
|
maxVersions: 10,
|
|
autoVersioning: true
|
|
}
|
|
},
|
|
|
|
// Metadata & Tagging
|
|
metadata: {
|
|
customFields: [
|
|
{ name: 'Department', type: 'dropdown', required: true },
|
|
{ name: 'Priority', type: 'select', required: false },
|
|
{ name: 'Project Code', type: 'text', required: true },
|
|
{ name: 'Review Date', type: 'date', required: false }
|
|
],
|
|
tagging: {
|
|
predefinedTags: ['urgent', 'confidential', 'public', 'draft', 'final'],
|
|
userGeneratedTags: true,
|
|
tagSuggestions: true
|
|
},
|
|
classification: {
|
|
autoClassification: true,
|
|
rules: ['confidential-keywords', 'department-based', 'file-type']
|
|
}
|
|
},
|
|
|
|
// Upload & Storage Settings
|
|
upload: {
|
|
fileTypes: {
|
|
allowed: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'jpg', 'png'],
|
|
blocked: ['exe', 'bat', 'cmd']
|
|
},
|
|
fileSizeLimit: 100, // MB
|
|
quotas: {
|
|
perUser: 5000, // MB
|
|
perGroup: 50000, // MB
|
|
perProject: 100000 // MB
|
|
},
|
|
storage: {
|
|
type: 'local', // local, s3, azure, google
|
|
path: '/var/uploads/edms',
|
|
backupEnabled: true,
|
|
compressionEnabled: false
|
|
}
|
|
},
|
|
|
|
// System Settings
|
|
system: {
|
|
timezone: 'Asia/Kuala_Lumpur',
|
|
backupSchedule: 'daily',
|
|
logLevel: 'info',
|
|
maintenanceMode: false,
|
|
autoUpdates: false,
|
|
systemMonitoring: true,
|
|
performanceMetrics: true
|
|
}
|
|
});
|
|
|
|
// Computed properties
|
|
const currentSettings = computed(() => {
|
|
return settings[activeCategory.value];
|
|
});
|
|
|
|
// Computed properties for array-to-string conversions
|
|
const predefinedTagsString = computed({
|
|
get: () => settings.metadata.tagging.predefinedTags.join(', '),
|
|
set: (value) => {
|
|
settings.metadata.tagging.predefinedTags = value.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
|
|
}
|
|
});
|
|
|
|
const allowedFileTypesString = computed({
|
|
get: () => settings.upload.fileTypes.allowed.join(', '),
|
|
set: (value) => {
|
|
settings.upload.fileTypes.allowed = value.split(',').map(type => type.trim()).filter(type => type.length > 0);
|
|
}
|
|
});
|
|
|
|
const blockedFileTypesString = computed({
|
|
get: () => settings.upload.fileTypes.blocked.join(', '),
|
|
set: (value) => {
|
|
settings.upload.fileTypes.blocked = value.split(',').map(type => type.trim()).filter(type => type.length > 0);
|
|
}
|
|
});
|
|
|
|
// Methods
|
|
const saveSettings = async () => {
|
|
try {
|
|
// In a real app, this would make an API call
|
|
console.log('Saving settings:', settings);
|
|
|
|
// Show success message
|
|
alert('Settings saved successfully!');
|
|
} catch (error) {
|
|
console.error('Error saving settings:', error);
|
|
alert('Error saving settings. Please try again.');
|
|
}
|
|
};
|
|
|
|
const resetToDefaults = () => {
|
|
if (confirm('Are you sure you want to reset all settings to defaults? This action cannot be undone.')) {
|
|
// Reset logic would go here
|
|
console.log('Resetting to defaults');
|
|
}
|
|
};
|
|
|
|
const exportSettings = () => {
|
|
const dataStr = JSON.stringify(settings, null, 2);
|
|
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
|
|
|
|
const exportFileDefaultName = 'edms-settings.json';
|
|
|
|
const linkElement = document.createElement('a');
|
|
linkElement.setAttribute('href', dataUri);
|
|
linkElement.setAttribute('download', exportFileDefaultName);
|
|
linkElement.click();
|
|
};
|
|
|
|
const importSettings = (event) => {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
try {
|
|
const importedSettings = JSON.parse(e.target.result);
|
|
Object.assign(settings, importedSettings);
|
|
alert('Settings imported successfully!');
|
|
} catch (error) {
|
|
alert('Error importing settings. Please check the file format.');
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
};
|
|
|
|
// Add/Remove methods for dynamic arrays
|
|
const addCustomField = () => {
|
|
settings.metadata.customFields.push({
|
|
name: '',
|
|
type: 'text',
|
|
required: false
|
|
});
|
|
};
|
|
|
|
const removeCustomField = (index) => {
|
|
settings.metadata.customFields.splice(index, 1);
|
|
};
|
|
|
|
const addUserRole = () => {
|
|
const roleName = prompt('Enter new role name:');
|
|
if (roleName && !settings.access.userRoles.includes(roleName)) {
|
|
settings.access.userRoles.push(roleName);
|
|
}
|
|
};
|
|
|
|
const removeUserRole = (role) => {
|
|
const index = settings.access.userRoles.indexOf(role);
|
|
if (index > -1) {
|
|
settings.access.userRoles.splice(index, 1);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dms-settings">
|
|
<LayoutsBreadcrumb />
|
|
|
|
<rs-card class="h-full">
|
|
<template #header>
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">DMS Settings</h1>
|
|
<div class="flex space-x-2">
|
|
<rs-button @click="exportSettings" class="!bg-gray-100 !text-gray-700 border">
|
|
<Icon name="ic:outline-download" class="mr-2" />
|
|
Export
|
|
</rs-button>
|
|
<label class="cursor-pointer">
|
|
<input type="file" @change="importSettings" accept=".json" class="hidden" />
|
|
<rs-button class="!bg-gray-100 !text-gray-700 border">
|
|
<Icon name="ic:outline-upload" class="mr-2" />
|
|
Import
|
|
</rs-button>
|
|
</label>
|
|
<rs-button @click="resetToDefaults" class="!bg-red-100 !text-red-700 border border-red-200">
|
|
<Icon name="ic:outline-refresh" class="mr-2" />
|
|
Reset
|
|
</rs-button>
|
|
<rs-button @click="saveSettings" class="!bg-blue-600 !text-white">
|
|
<Icon name="ic:outline-save" class="mr-2" />
|
|
Save Settings
|
|
</rs-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="settings-layout flex h-full">
|
|
<!-- Settings Navigation -->
|
|
<div class="settings-nav w-80 border-r border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-800">
|
|
<div class="space-y-2">
|
|
<button
|
|
v-for="category in settingsCategories"
|
|
:key="category.id"
|
|
@click="activeCategory = category.id"
|
|
class="w-full flex items-center space-x-3 px-4 py-3 text-left rounded-lg transition-colors"
|
|
:class="activeCategory === category.id
|
|
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
|
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
>
|
|
<span class="text-lg">{{ category.icon }}</span>
|
|
<span class="font-medium text-sm">{{ category.name }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Content -->
|
|
<div class="settings-content flex-1 p-6 overflow-y-auto">
|
|
|
|
<!-- User & Access Management -->
|
|
<div v-if="activeCategory === 'access'" class="space-y-8">
|
|
<div>
|
|
<h2 class="text-xl font-semibold mb-4">🔐 User & Access Management</h2>
|
|
|
|
<!-- User Roles -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6 mb-6">
|
|
<h3 class="text-lg font-medium mb-4">User Roles & Permissions</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">User Roles</label>
|
|
<div class="space-y-2">
|
|
<div v-for="role in settings.access.userRoles" :key="role" class="flex items-center justify-between bg-gray-50 dark:bg-gray-700 px-3 py-2 rounded">
|
|
<span>{{ role }}</span>
|
|
<button @click="removeUserRole(role)" class="text-red-500 hover:text-red-700">
|
|
<Icon name="ic:outline-delete" size="16" />
|
|
</button>
|
|
</div>
|
|
<button @click="addUserRole" class="text-blue-600 hover:text-blue-800 text-sm">+ Add Role</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Access Permissions</label>
|
|
<div class="space-y-3">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.access.permissions.view" class="mr-2" />
|
|
View Documents
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.access.permissions.edit" class="mr-2" />
|
|
Edit Documents
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.access.permissions.delete" class="mr-2" />
|
|
Delete Documents
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.access.permissions.download" class="mr-2" />
|
|
Download Documents
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.access.permissions.share" class="mr-2" />
|
|
Share Documents
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Authentication Settings -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6">
|
|
<h3 class="text-lg font-medium mb-4">Authentication Settings</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-4">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.access.authentication.ssoEnabled" class="mr-2" />
|
|
Enable Single Sign-On (SSO)
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.access.authentication.mfaRequired" class="mr-2" />
|
|
Require Multi-Factor Authentication
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.access.authentication.ldapIntegration" class="mr-2" />
|
|
LDAP/Active Directory Integration
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Session Timeout (hours)</label>
|
|
<input type="number" v-model="settings.access.authentication.sessionTimeout"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md" min="1" max="24" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document & Folder Settings -->
|
|
<div v-if="activeCategory === 'documents'" class="space-y-8">
|
|
<div>
|
|
<h2 class="text-xl font-semibold mb-4">📁 Document & Folder Settings</h2>
|
|
|
|
<!-- Folder Hierarchy -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6 mb-6">
|
|
<h3 class="text-lg font-medium mb-4">Folder Hierarchies</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Maximum Folder Depth</label>
|
|
<input type="number" v-model="settings.documents.folderHierarchy.maxDepth"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md" min="1" max="10" />
|
|
</div>
|
|
<div>
|
|
<rs-select
|
|
v-model="settings.documents.folderHierarchy.folderTemplates[0]"
|
|
:options="[
|
|
{ value: 'Standard', label: 'Standard' },
|
|
{ value: 'Project-based', label: 'Project-based' },
|
|
{ value: 'Department-based', label: 'Department-based' },
|
|
{ value: 'Custom', label: 'Custom' }
|
|
]"
|
|
label="Folder Template"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Naming Conventions -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6 mb-6">
|
|
<h3 class="text-lg font-medium mb-4">Document Naming Conventions</h3>
|
|
<div class="space-y-4">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.documents.namingConventions.autoGenerate" class="mr-2" />
|
|
Auto-generate document names
|
|
</label>
|
|
<div>
|
|
<rs-input
|
|
v-model="settings.documents.namingConventions.pattern"
|
|
label="Naming Pattern"
|
|
placeholder="{department}_{title}_{date}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Version Control -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6">
|
|
<h3 class="text-lg font-medium mb-4">Version Control</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-4">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.documents.versionControl.enabled" class="mr-2" />
|
|
Enable Version Control
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.documents.versionControl.autoVersioning" class="mr-2" />
|
|
Automatic Versioning
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Maximum Versions to Retain</label>
|
|
<input type="number" v-model="settings.documents.versionControl.maxVersions"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md" min="1" max="50" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metadata & Tagging -->
|
|
<div v-if="activeCategory === 'metadata'" class="space-y-8">
|
|
<div>
|
|
<h2 class="text-xl font-semibold mb-4">📝 Metadata & Tagging</h2>
|
|
|
|
<!-- Custom Metadata Fields -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6 mb-6">
|
|
<h3 class="text-lg font-medium mb-4">Custom Metadata Fields</h3>
|
|
<div class="space-y-4">
|
|
<div v-for="(field, index) in settings.metadata.customFields" :key="index"
|
|
class="grid grid-cols-4 gap-4 items-center bg-gray-50 dark:bg-gray-700 p-3 rounded">
|
|
<input type="text" v-model="field.name" placeholder="Field Name"
|
|
class="px-3 py-2 border border-gray-300 rounded-md" />
|
|
<select v-model="field.type" class="px-3 py-2 border border-gray-300 rounded-md">
|
|
<option value="text">Text</option>
|
|
<option value="dropdown">Dropdown</option>
|
|
<option value="date">Date</option>
|
|
<option value="number">Number</option>
|
|
<option value="select">Multi-select</option>
|
|
</select>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="field.required" class="mr-2" />
|
|
Required
|
|
</label>
|
|
<button @click="removeCustomField(index)" class="text-red-500 hover:text-red-700">
|
|
<Icon name="ic:outline-delete" size="20" />
|
|
</button>
|
|
</div>
|
|
<button @click="addCustomField" class="text-blue-600 hover:text-blue-800">
|
|
+ Add Custom Field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tagging System -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6">
|
|
<h3 class="text-lg font-medium mb-4">Tagging System</h3>
|
|
<div class="space-y-4">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.metadata.tagging.userGeneratedTags" class="mr-2" />
|
|
Allow User-Generated Tags
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.metadata.tagging.tagSuggestions" class="mr-2" />
|
|
Enable Tag Suggestions
|
|
</label>
|
|
<div>
|
|
<rs-textarea
|
|
v-model="predefinedTagsString"
|
|
label="Predefined Tags"
|
|
placeholder="urgent, confidential, public, draft, final"
|
|
:rows="3"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload & Storage Settings -->
|
|
<div v-if="activeCategory === 'upload'" class="space-y-8">
|
|
<div>
|
|
<h2 class="text-xl font-semibold mb-4">📤 Upload & Storage Settings</h2>
|
|
|
|
<!-- File Type Restrictions -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6 mb-6">
|
|
<h3 class="text-lg font-medium mb-4">File Type Restrictions</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Allowed File Types</label>
|
|
<textarea v-model="allowedFileTypesString"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md h-24"
|
|
placeholder="pdf, doc, docx, xls, xlsx"></textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Blocked File Types</label>
|
|
<textarea v-model="blockedFileTypesString"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md h-24"
|
|
placeholder="exe, bat, cmd"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Size and Quotas -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6">
|
|
<h3 class="text-lg font-medium mb-4">File Size Limits & Storage Quotas</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Max File Size (MB)</label>
|
|
<input type="number" v-model="settings.upload.fileSizeLimit"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md" min="1" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Per User Quota (MB)</label>
|
|
<input type="number" v-model="settings.upload.quotas.perUser"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Per Group Quota (MB)</label>
|
|
<input type="number" v-model="settings.upload.quotas.perGroup"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Per Project Quota (MB)</label>
|
|
<input type="number" v-model="settings.upload.quotas.perProject"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Settings -->
|
|
<div v-if="activeCategory === 'system'" class="space-y-8">
|
|
<div>
|
|
<h2 class="text-xl font-semibold mb-4">📅 System Settings</h2>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6">
|
|
<h3 class="text-lg font-medium mb-4">General System Configuration</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">System Timezone</label>
|
|
<select v-model="settings.system.timezone" class="w-full px-3 py-2 border border-gray-300 rounded-md">
|
|
<option value="Asia/Kuala_Lumpur">Asia/Kuala_Lumpur</option>
|
|
<option value="UTC">UTC</option>
|
|
<option value="America/New_York">America/New_York</option>
|
|
<option value="Europe/London">Europe/London</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Backup Schedule</label>
|
|
<select v-model="settings.system.backupSchedule" class="w-full px-3 py-2 border border-gray-300 rounded-md">
|
|
<option value="hourly">Hourly</option>
|
|
<option value="daily">Daily</option>
|
|
<option value="weekly">Weekly</option>
|
|
<option value="monthly">Monthly</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Log Level</label>
|
|
<select v-model="settings.system.logLevel" class="w-full px-3 py-2 border border-gray-300 rounded-md">
|
|
<option value="debug">Debug</option>
|
|
<option value="info">Info</option>
|
|
<option value="warning">Warning</option>
|
|
<option value="error">Error</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.system.maintenanceMode" class="mr-2" />
|
|
Maintenance Mode
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.system.autoUpdates" class="mr-2" />
|
|
Automatic Updates
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.system.systemMonitoring" class="mr-2" />
|
|
System Monitoring
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Placeholder for other categories -->
|
|
<div v-if="!['access', 'documents', 'metadata', 'upload', 'system'].includes(activeCategory)" class="space-y-8">
|
|
<div class="text-center py-12">
|
|
<div class="text-6xl mb-4">
|
|
{{ settingsCategories.find(c => c.id === activeCategory)?.icon }}
|
|
</div>
|
|
<h2 class="text-xl font-semibold mb-2">
|
|
{{ settingsCategories.find(c => c.id === activeCategory)?.name }}
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400">
|
|
Settings for this category are being developed and will be available in the next update.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</rs-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dms-settings {
|
|
height: calc(100vh - 64px);
|
|
}
|
|
|
|
.settings-layout {
|
|
height: calc(100vh - 200px);
|
|
}
|
|
|
|
.settings-nav {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.settings-content {
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Custom scrollbar for settings content */
|
|
.settings-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.settings-content::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.settings-content::-webkit-scrollbar-thumb {
|
|
background: #d1d5db;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.settings-content::-webkit-scrollbar-thumb:hover {
|
|
background: #9ca3af;
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
.settings-nav button {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
@apply rounded border-gray-300 text-blue-600 focus:ring-blue-500;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"],
|
|
select,
|
|
textarea {
|
|
@apply dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200;
|
|
}
|
|
</style> |