@@ -338,6 +350,7 @@ interface FileItem {
displayName: string;
isFolder: boolean;
path?: string;
+ bucket?: string;
}
interface Props {
@@ -357,6 +370,7 @@ const toast = useToast();
const files = ref([]);
const filteredFiles = ref([]);
const selectedItems = ref([]);
+const selectedFilesInBrowser = ref([]);
const searchQuery = ref('');
const loading = ref(false);
const uploading = ref(false);
@@ -384,6 +398,15 @@ const headers = [
{ title: 'Actions', key: 'actions', sortable: false, align: 'end' as const },
];
+// Table headers for selection mode
+const headersSelectionMode = [
+ { title: '', key: 'checkbox', sortable: false, width: '50px' },
+ { title: 'Name', key: 'displayName', sortable: true },
+ { title: 'Size', key: 'sizeFormatted', sortable: true },
+ { title: 'Modified', key: 'lastModified', sortable: true },
+ { title: 'Actions', key: 'actions', sortable: false, align: 'end' as const },
+];
+
// Breadcrumb items
const breadcrumbItems = computed(() => {
const items = [
@@ -473,14 +496,35 @@ const filterFiles = () => {
);
};
+// Check if file is selected
+const isSelected = (item: FileItem) => {
+ return selectedFilesInBrowser.value.some(f => f.name === item.name);
+};
+
+// Toggle file selection
+const toggleSelection = (item: FileItem) => {
+ if (item.isFolder) return;
+
+ const index = selectedFilesInBrowser.value.findIndex(f => f.name === item.name);
+ if (index > -1) {
+ selectedFilesInBrowser.value.splice(index, 1);
+ } else {
+ selectedFilesInBrowser.value.push(item);
+ }
+
+ // Emit selection event
+ emit('file-selected', {
+ ...item,
+ path: item.name,
+ bucket: item.bucket || 'client-portal'
+ });
+};
+
// Handle file/folder click
const handleFileClick = (item: FileItem) => {
if (props.selectionMode && !item.isFolder) {
- // In selection mode, emit the file for attachment
- emit('file-selected', {
- ...item,
- path: item.name
- });
+ // In selection mode, toggle selection on click
+ toggleSelection(item);
return;
}
@@ -788,10 +832,22 @@ const formatDate = (date: string) => {
});
};
+// Show selection count at the bottom in selection mode
+const selectionCount = computed(() => {
+ return selectedFilesInBrowser.value.length;
+});
+
// Load files on mount
onMounted(() => {
loadFiles();
});
+
+// Add selection counter at the bottom for selection mode
+if (props.selectionMode) {
+ watch(selectionCount, (count) => {
+ console.log('[FileBrowser] Selection count:', count);
+ });
+}