Interface (Files Block)

Overview 
 The FileTable component is a Vue component that provides a user interface for managing and uploading files. It allows users to view existing files in a table format, filter and search through files, and upload new files to specific locations. 
 Key Features 
 
 Table view of existing files with sorting and filtering capabilities 
 File upload functionality with source and data type selection 
 Progress bar for file uploads 
 Refresh functionality to update the file list 
 
 Component Structure 
 Data Properties 
 
 
 pagination : Controls table pagination 
 
 search : Stores the current search term 
 
 selectedType , selectedSource , selectedStatus : For filtering the file table 
 
 typeOptions , sourceOptions , statusOptions : Options for the filter dropdowns 
 
 rows : Stores the main data displayed in the table 
 
 columns : Defines the structure of the table 
 
 uploadView : Toggles between file table view and upload view 
 
 selectedDataTypeUpload , selectedSourceUpload : For selecting upload options 
 
 dataTypeUploadOptions , sourceUploadOptions : Options for upload dropdowns 
 
 filesToUpload : Stores files selected for upload 
 
 uploadInProgress , uploadProgress : Manages upload state and progress 
 
 Computed Properties 
 
 
 filteredData : Returns the filtered and searched data for the table 
 
 Methods 
 
 
 changeToUploadFiles() : Toggles between file table view and upload view 
 
 refreshFiles() : Refreshes the file list by triggering a workflow 
 
 startWorkflow(user_code, payload) : Initiates a new workflow 
 
 checkWorkflowStatus(workflowID, resolve, reject) : Checks the status of a running workflow 
 
 fetchFiles() : Fetches and processes the list of files 
 
 handleFileUpload(event) : Handles file selection for upload 
 
 uploadFiles() : Manages the file upload process 
 
 getPath() : Generates the upload path based on selected options 
 
 uploadFile(file, path, currentFileIndex, totalFiles) : Uploads a single file 
 
 Usage Guide 
 Viewing Files 
 
 The component displays a table of files with columns for File, Type, Source, and Status 
 Use the search bar to filter files by any field 
 Use the Data Type, Source, and Status dropdowns to further filter the table 
 
 Uploading Files 
 
 Click the '+' button to switch to the upload view 
 Select the Source and Data Type for the upload 
 Choose files to upload using the file input 
 Click "Upload Files" to start the upload process 
 A progress bar will display the upload progress 
 
 Refreshing Data 
 
 Click the refresh button (circular arrow icon) to fetch the latest data from the server 
 
 API Integration 
 The component interacts with several API endpoints: 
 
 File listing: ${apiBaseUrl}/api/v1/explorer/view/?path=components/data_files.json 
 
 Workflow start: ${apiBaseUrl}/workflow/api/workflow/run-workflow/ 
 
 Workflow status check: ${apiBaseUrl}/workflow/api/workflow/${workflowID}/ 
 
 File upload: ${apiBaseUrl}/api/v1/explorer/upload/ 
 
 
 Notes for Developers 
 
 The component uses custom icons ( IconPlus , IconRefresh ) which should be properly imported 
 Authorization is handled by the authorization() function from @/utils/customFetch 
 
 The component relies on the Quasar framework for UI components (e.g., q-table , q-input , q-select ) 
 File uploads include a timestamp in the filename to ensure uniqueness 
 
 Potential Enhancements 
 
 Implement pagination on the server-side for better performance with large datasets 
 Add more robust error handling and user notifications for upload failures 
 Implement file chunking for large file uploads (commented out in the current version) 
 Add a preview feature for uploaded files 
 Implement drag-and-drop functionality for file uploads