Interface

Overview

This standard-workflow-interface module provides a comprehensive interface for managing states and files within a workflow system. The interface is divided into two main components: StateTable and FileTable, which are displayed side by side in the main application view.

Main Application Structure

The main application is defined in App.vue and consists of two primary components:

1. StateTable
2. FileTable

These components are laid out side by side using a flex container for optimal screen utilization.

Key Components

1. StateTable

The StateTable component manages and displays workflow states.

Interface (States & Input blocks)

Key features:

• Displays a list of workflow states
• Allows filtering and searching of states
• Provides detailed view of each state
• Enables starting workflows and managing state status

2. FileTable

The FileTable component manages and displays files within the system.

Interface (Files Block)

Key features:

• Displays a list of files with their types, sources, and statuses
• Allows filtering and searching of files
• Provides file upload functionality
• Enables refreshing the file list

User Interface

The interface is divided into two main sections:

1. Left Side (StateTable):

   • Tabs for switching between "States" and "Inputs"
   • Search and filter options
   • Table displaying state information
   • Expandable rows for detailed state information

2. Right Side (FileTable):

   • Table displaying file information
   • Search and filter options
   • File upload functionality

Common Features

• Both components feature a refresh button (circular arrow icon) to update their respective data.
• The interface uses a consistent design language, with similar table layouts and filter options.

API Integration

Both components interact with backend APIs for data retrieval and manipulation. The API calls are managed through custom fetch functions defined in customFetch.js.

Getting Started

1. Ensure all dependencies are installed by running npm install in the project directory.
2. Start the development server with npm run serve.
3. Navigate to the provided local URL to view the application.

Development Notes

• The project uses Vue 3 with the Composition API.
• Quasar framework is used for UI components.
• Custom icons are used and should be properly imported in each component.
• API base URL is dynamically determined based on the current URL.