generated from corrad-software/corrad-af-2024
825 lines
33 KiB
Vue
825 lines
33 KiB
Vue
<script setup>
|
|
import { ref, reactive, computed, onMounted, watch } from 'vue';
|
|
import { useNotifications } from '~/composables/useNotifications';
|
|
import RsButton from '~/components/RsButton.vue';
|
|
import RsCard from '~/components/RsCard.vue';
|
|
|
|
// Notifications
|
|
const { confirm } = useNotifications();
|
|
|
|
// Define page metadata
|
|
definePageMeta({
|
|
title: "DMS Settings",
|
|
middleware: ["auth"],
|
|
requiresAuth: true,
|
|
breadcrumb: [
|
|
{
|
|
name: "DMS",
|
|
path: "/dms",
|
|
},
|
|
{
|
|
name: "Settings",
|
|
path: "/dms/settings",
|
|
},
|
|
],
|
|
});
|
|
|
|
// Basic loading and error states
|
|
const isLoading = ref(true);
|
|
const isSaving = ref(false);
|
|
const saveError = ref('');
|
|
const saveSuccess = ref('');
|
|
|
|
// 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: 'workflow', name: 'Workflow & Automation', icon: '🔄' },
|
|
{ id: 'upload', name: 'Upload & Storage Settings', icon: '📤' },
|
|
{ id: 'system', name: 'System Settings', icon: '📅' }
|
|
];
|
|
|
|
// Current active category
|
|
const activeCategory = ref('access');
|
|
|
|
// Local reactive settings for form manipulation with default structure
|
|
const settings = reactive({
|
|
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
|
|
}
|
|
},
|
|
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,
|
|
archiveBeforeDelete: true
|
|
},
|
|
versionControl: {
|
|
enabled: true,
|
|
maxVersions: 10,
|
|
autoVersioning: true
|
|
}
|
|
},
|
|
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']
|
|
}
|
|
},
|
|
workflow: {
|
|
approvalFlows: {
|
|
enabled: true,
|
|
defaultFlow: 'department-head-approval',
|
|
customFlows: ['legal-review', 'finance-approval', 'director-sign-off']
|
|
},
|
|
notifications: {
|
|
emailNotifications: true,
|
|
inAppNotifications: true,
|
|
uploadAlerts: true,
|
|
deadlineReminders: true
|
|
},
|
|
automation: {
|
|
triggers: ['document-uploaded', 'approval-completed', 'deadline-reached'],
|
|
actions: ['move-to-folder', 'send-notification', 'create-task']
|
|
}
|
|
},
|
|
upload: {
|
|
fileTypes: {
|
|
allowed: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'jpg', 'png'],
|
|
blocked: ['exe', 'bat', 'cmd']
|
|
},
|
|
fileSizeLimit: 100,
|
|
quotas: {
|
|
perUser: 5000,
|
|
perGroup: 50000,
|
|
perProject: 100000
|
|
},
|
|
storage: {
|
|
type: 'local',
|
|
path: '/var/uploads/edms',
|
|
backupEnabled: true,
|
|
compressionEnabled: false
|
|
}
|
|
},
|
|
system: {
|
|
timezone: 'Asia/Kuala_Lumpur',
|
|
backupSchedule: 'daily',
|
|
logLevel: 'info',
|
|
maintenanceMode: false,
|
|
autoUpdates: false,
|
|
systemMonitoring: true,
|
|
performanceMetrics: true
|
|
}
|
|
});
|
|
|
|
// 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);
|
|
}
|
|
});
|
|
|
|
// Load settings from API
|
|
const loadSettings = async () => {
|
|
try {
|
|
isLoading.value = true;
|
|
saveError.value = '';
|
|
|
|
const response = await $fetch('/api/dms/settings', {
|
|
method: 'GET'
|
|
});
|
|
|
|
if (response && response.data) {
|
|
// Merge loaded settings with defaults
|
|
Object.assign(settings, response.data);
|
|
console.log('Settings loaded successfully:', response.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading settings:', error);
|
|
saveError.value = 'Failed to load settings. Using defaults.';
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// Save settings to API
|
|
const saveSettings = async () => {
|
|
try {
|
|
isSaving.value = true;
|
|
saveError.value = '';
|
|
saveSuccess.value = '';
|
|
|
|
const response = await $fetch('/api/dms/settings', {
|
|
method: 'POST',
|
|
body: settings
|
|
});
|
|
|
|
if (response && response.statusCode === 200) {
|
|
saveSuccess.value = 'Settings saved successfully!';
|
|
setTimeout(() => {
|
|
saveSuccess.value = '';
|
|
}, 3000);
|
|
} else {
|
|
saveError.value = 'Failed to save settings. Please try again.';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving settings:', error);
|
|
saveError.value = 'Error saving settings. Please try again.';
|
|
} finally {
|
|
isSaving.value = false;
|
|
}
|
|
};
|
|
|
|
// Reset to defaults
|
|
const resetToDefaultsConfirm = async () => {
|
|
const confirmed = await confirm({
|
|
title: 'Reset Settings',
|
|
message: 'Are you sure you want to reset all settings to defaults? This action cannot be undone.',
|
|
dangerous: true
|
|
});
|
|
|
|
if (confirmed) {
|
|
try {
|
|
isSaving.value = true;
|
|
saveError.value = '';
|
|
saveSuccess.value = '';
|
|
|
|
// Reset to default values
|
|
settings.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
|
|
}
|
|
};
|
|
|
|
// Save the reset settings
|
|
await saveSettings();
|
|
saveSuccess.value = 'Settings reset to defaults successfully!';
|
|
} catch (error) {
|
|
console.error('Error resetting settings:', error);
|
|
saveError.value = 'Error resetting settings. Please try again.';
|
|
}
|
|
}
|
|
};
|
|
|
|
// Export settings
|
|
const exportSettingsFile = () => {
|
|
try {
|
|
const dataStr = JSON.stringify(settings, null, 2);
|
|
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
|
|
|
|
const exportFileDefaultName = 'dms-settings.json';
|
|
|
|
const linkElement = document.createElement('a');
|
|
linkElement.setAttribute('href', dataUri);
|
|
linkElement.setAttribute('download', exportFileDefaultName);
|
|
linkElement.click();
|
|
} catch (error) {
|
|
console.error('Error exporting settings:', error);
|
|
saveError.value = 'Error exporting settings.';
|
|
}
|
|
};
|
|
|
|
// Import settings
|
|
const importSettingsFile = (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);
|
|
saveSuccess.value = 'Settings imported successfully!';
|
|
setTimeout(() => {
|
|
saveSuccess.value = '';
|
|
}, 3000);
|
|
} catch (error) {
|
|
console.error('Error importing settings:', error);
|
|
saveError.value = '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 && roleName.trim()) {
|
|
if (!settings.access.userRoles.includes(roleName.trim())) {
|
|
settings.access.userRoles.push(roleName.trim());
|
|
}
|
|
}
|
|
};
|
|
|
|
const removeUserRole = (role) => {
|
|
const index = settings.access.userRoles.indexOf(role);
|
|
if (index > -1) {
|
|
settings.access.userRoles.splice(index, 1);
|
|
}
|
|
};
|
|
|
|
// Load settings on mount
|
|
onMounted(async () => {
|
|
await loadSettings();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dms-settings h-screen flex flex-col">
|
|
<LayoutsBreadcrumb />
|
|
|
|
<div class="flex-1 min-h-0 p-4">
|
|
<RsCard
|
|
height="full"
|
|
overflow="hidden"
|
|
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 items-center space-x-2">
|
|
<RsButton @click="exportSettingsFile" variant="secondary-outline" size="sm" :disabled="isLoading || isSaving">
|
|
Export Settings
|
|
</RsButton>
|
|
|
|
<RsButton variant="secondary-outline" size="sm" :disabled="isLoading || isSaving">
|
|
Import Settings
|
|
</RsButton>
|
|
|
|
<RsButton @click="resetToDefaultsConfirm" variant="danger-outline" size="sm" :disabled="isLoading || isSaving">
|
|
Reset to Defaults
|
|
</RsButton>
|
|
<RsButton @click="saveSettings" variant="primary" size="sm" :disabled="isLoading || isSaving">
|
|
<span v-if="isSaving" class="flex items-center">
|
|
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Saving...
|
|
</span>
|
|
<span v-else>Save Settings</span>
|
|
</RsButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success/Error Messages -->
|
|
<div v-if="saveSuccess" class="mt-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded">
|
|
{{ saveSuccess }}
|
|
</div>
|
|
<div v-if="saveError" class="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
|
|
{{ saveError }}
|
|
</div>
|
|
</template>
|
|
|
|
<template #body>
|
|
<!-- Loading State -->
|
|
<div v-if="isLoading" class="flex items-center justify-center h-64">
|
|
<div class="text-center">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
|
<p class="text-gray-600 dark:text-gray-400">Loading DMS settings...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Content -->
|
|
<div v-else class="settings-layout flex h-full min-h-0">
|
|
<!-- 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 flex-shrink-0">
|
|
<div class="space-y-2">
|
|
<RsButton
|
|
v-for="category in settingsCategories"
|
|
:key="category.id"
|
|
@click="activeCategory = category.id"
|
|
:variant="activeCategory === category.id ? 'primary' : 'secondary-outline'"
|
|
class="flex items-center space-x-2 px-4 py-2 text-left w-full justify-start"
|
|
>
|
|
<span class="text-lg mr-3">{{ category.icon }}</span>
|
|
{{ category.name }}
|
|
</RsButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Content - Scrollable -->
|
|
<div class="settings-content flex-1 p-6 overflow-y-auto min-h-0">
|
|
|
|
<!-- 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 max-h-48 overflow-y-auto">
|
|
<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">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm">{{ role }}</span>
|
|
<RsButton @click="removeUserRole(role)" variant="danger-text" size="sm">
|
|
Remove
|
|
</RsButton>
|
|
</div>
|
|
</div>
|
|
<RsButton @click="addUserRole" variant="primary-text" size="sm">
|
|
+ Add Role
|
|
</RsButton>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
<label class="block text-sm font-medium mb-2">Naming Pattern</label>
|
|
<input type="text" v-model="settings.documents.namingConventions.pattern"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md"
|
|
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>
|
|
<div class="flex items-center space-x-2">
|
|
<RsButton @click="removeCustomField(index)" variant="danger-text" size="sm">
|
|
Remove
|
|
</RsButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<RsButton @click="addCustomField" variant="primary-text" size="sm">
|
|
+ Add Custom Field
|
|
</RsButton>
|
|
</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>
|
|
<label class="block text-sm font-medium mb-2">Predefined Tags</label>
|
|
<textarea v-model="predefinedTagsString"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md h-20"
|
|
placeholder="urgent, confidential, public, draft, final"></textarea>
|
|
</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>
|
|
|
|
<!-- Workflow Settings -->
|
|
<div v-if="activeCategory === 'workflow'" class="space-y-8">
|
|
<div>
|
|
<h2 class="text-xl font-semibold mb-4">🔄 Workflow & Automation</h2>
|
|
|
|
<!-- Approval Flows -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6 mb-6">
|
|
<h3 class="text-lg font-medium mb-4">Approval Workflows</h3>
|
|
<div class="space-y-4">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.workflow.approvalFlows.enabled" class="mr-2" />
|
|
Enable Approval Workflows
|
|
</label>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Default Approval Flow</label>
|
|
<select v-model="settings.workflow.approvalFlows.defaultFlow" class="w-full px-3 py-2 border border-gray-300 rounded-md">
|
|
<option value="department-head-approval">Department Head Approval</option>
|
|
<option value="legal-review">Legal Review</option>
|
|
<option value="finance-approval">Finance Approval</option>
|
|
<option value="director-sign-off">Director Sign-off</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notifications -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border p-6">
|
|
<h3 class="text-lg font-medium mb-4">Notification Settings</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-3">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.workflow.notifications.emailNotifications" class="mr-2" />
|
|
Email Notifications
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.workflow.notifications.inAppNotifications" class="mr-2" />
|
|
In-App Notifications
|
|
</label>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.workflow.notifications.uploadAlerts" class="mr-2" />
|
|
Upload Alerts
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" v-model="settings.workflow.notifications.deadlineReminders" class="mr-2" />
|
|
Deadline Reminders
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</RsCard>
|
|
</div>
|
|
</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> |