Develop the frontend interface for SafeBase using Angular. The interface should allow users to view the state of databases, perform backup and restore operations, and display relevant notifications for each action.
Context
The frontend interface is essential for providing users with an intuitive way to interact with SafeBase. It will enable users to visualize database states, manage backups, and initiate restoration processes through a user-friendly dashboard.
Objectives
Initialize an Angular project and configure the structure.
Create a dashboard to display the state of databases and backups.
Develop components for backup and restore functionalities.
Integrate the frontend with the backend API for full functionality.
Implement navigation and error-handling to ensure a smooth user experience.
Acceptance Criteria
A dashboard is available to show the state of databases and backups.
Users can perform backup and restore operations from the UI.
The frontend interacts seamlessly with the backend API for database management.
Notifications and error-handling mechanisms are in place for user feedback.
The application uses Angular Material for a clean and responsive design.
Tasks
[x] Create and initialize a new working branch
Branch name format: feature/3-develop-frontend-interface
[x] Initial Setup of Angular Project
Initialize a new Angular project (ng new safebase-frontend).
Install Angular Material for UI components.
[ ] Create the Dashboard Component
Display the state of databases and backups using mock data initially.
Integrate API calls to fetch real-time data.
[ ] Develop Components for Backup and Restore
Create a BackupRestoreComponent for performing backup and restore operations.
Add buttons for creating a backup and a dropdown to select files for restoration.
Implement API calls (POST /backup, POST /restore) via DatabaseService.
[ ] Implement Navigation
Use Angular Material for the navigation bar to link the dashboard, backup, and restore pages.
Set up routes (/dashboard, /backup, /restore) in Angular.
[ ] Handle Notifications and Errors
Use Angular Material Snackbar for success and error messages.
Implement error-handling in DatabaseService for failed API calls.
[ ] Improve UI/UX
Add loading indicators (spinners) during API calls.
Use Angular Material components (MatCard, MatTable, MatButton) for a clean UI.
[ ] Testing and Validation
Test the components and interactions with the backend.
Verify that all API calls work correctly and handle errors as expected.
[ ] Write the commit message
Ensure the commit message follows the naming conventions as specified in the Commit_Naming_Template.md.
Summary
Develop the frontend interface for SafeBase using Angular. The interface should allow users to view the state of databases, perform backup and restore operations, and display relevant notifications for each action.
Context
The frontend interface is essential for providing users with an intuitive way to interact with SafeBase. It will enable users to visualize database states, manage backups, and initiate restoration processes through a user-friendly dashboard.
Objectives
Acceptance Criteria
Tasks
feature/3-develop-frontend-interfaceng new safebase-frontend).BackupRestoreComponentfor performing backup and restore operations.POST /backup,POST /restore) viaDatabaseService./dashboard,/backup,/restore) in Angular.DatabaseServicefor failed API calls.MatCard,MatTable,MatButton) for a clean UI.Resources
UML Diagrams References
Branch Name
feature/develop-frontend-interface