updates

pages/dashboard/file-browser.vue

@@ -113,17 +113,29 @@
     <v-card>
       <v-data-table
         v-model="selectedItems"
-        :headers="headers"
+        :headers="selectionMode ? headersSelectionMode : headers"
         :items="filteredFiles"
         :loading="loading"
         :items-per-page="25"
         class="elevation-0"
-        show-select
+        :show-select="!selectionMode"
         item-value="name"
       >
+        <!-- Custom checkbox for selection mode -->
+        <template v-if="selectionMode" v-slot:item.checkbox="{ item }">
+          <v-checkbox
+            :model-value="isSelected(item)"
+            @update:model-value="toggleSelection(item)"
+            :disabled="item.isFolder"
+            hide-details
+            density="compact"
+          />
+        </template>
+
         <template v-slot:item.displayName="{ item }">
           <div 
-            class="d-flex align-center py-2 cursor-pointer"
+            class="d-flex align-center py-2"
+            :class="{ 'cursor-pointer': !selectionMode || item.isFolder }"
             @click="handleFileClick(item)"
           >
             <v-icon :icon="item.icon" class="mr-3" :color="item.isFolder ? 'primary' : ''" />
@@ -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<FileItem[]>([]);
 const filteredFiles = ref<FileItem[]>([]);
 const selectedItems = ref<string[]>([]);
+const selectedFilesInBrowser = ref<FileItem[]>([]);
 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);
+  });
+}
 </script>
 
 <style scoped>