andreimasato / tasktime-frontend

Frontend for TaskTime application

TASKTIME - FRONTEND

TaskTime is an application for you to register your execution times for your projects tasks.

This repository must be used with its backend counterpart, TASKTIME - BACKEND.

Application Local Execution

Installing Node dependencies

Install node dependencies by running the following command

npm install

Running a Local Server

To run a local server, run the following command

npm start

About the Frontend (WIP)

This fronted is built based on Create React App. The UI base components were used from Material UI. For data fetching and state management it was used axios and React Redux (with addition of some Redux-React plugins).

tasktime-frontend's Issues

Centralize ThemeProvider in App.js

Centralize ThemeProvider in App.js. This way it will be easier to customize a global style later

Adjust general responsiveness

Sort date list in descending order

Sorting cycles list in descending order, starting with the most recent dt_end

Feedback toasters

notistack

Implements breadcrumbs

• Create breadcrumb component
• Refactors pathnames

Sets up charts

Sets up charts with react-apexcharts
The dashboards will feature the following charts and information

• Top 5 projects with higher duration and top 5 tasks with higher duration (2 tabs)
• Open tasks (tasks that contain any cycle with dt_start == null) -> carrousel -> will redirect to task detail page
• Latest (updated) activities (Name, project, current duration) -> fetches by cycle modified_on field
• Histogram by period

React material UI carousel

Create projects listing page

Creates the project list page. It must contains the following elements

• Projects listing -> List by "cards" like components (Project name, total parsed execution time)
• Disposition -> Grid with 3 in each row
• Input for filtering by name
• Pagination -> max: 9 per page
• Clicking on a project will redirect to its detailed page
• Button to add a new project
• Modal will be triggered containing a form to fill in the necessary data
• Form for registration. Fields: name (required - varchar), description (optional - text). Must have a checking to detect if it is a new registration or if it is an entry edit
• Implements deleting call function
• delete button -> alert dialog -> on confirmation -> delete entry

Base tasks

• Create base page file
• Create reducer

Data fetching refactor

Refactor data fetching in a way that the reducers callback for the tasks and cycles work properly. Currently there is no way to use addOne, upsertOne, removeOne because the listing is being done over the objects related to the projects objects array

For this, on the backend side, the responses must bring the related object public_id
For example:

• For the tasks, each task must return the project public id
• For the cycles, each cycle must return the task public id

Layout HOC

Creates a base Layout High Order Component that can be used as wrapper for new pages

It should features a top navbar that it will contains the application title, a link to the dashboards page and a link to the projects list.

It should also features a footer that will only have the copyright

Custom scrollbar

Highlight cycles without dt_end

Highlight cycle items that do not contain a dt_end value

Use "warning" background color

Create project details page

Create the project detail page.
It must feature the following elements

• Form for editing project related information (name, description) -> detects if is an editing case
• Tasks list (simple list, containing name and total parsed execution time)
• Button to add a new task
• Modal that will be opened containing the form for registration
• Button to delete a task (prompts a confirmation alert)
• Pagination for task list (max: 10 per page)
• Readapts url schema -> must contain project public id ("/project/:projectId/tasks/", "/project/:projectId/task/:taskId", etc)

Base tasks

• Create base page component
• Sets up URL with a parameter (public_id)

Create a favicon

Create task detail page

Create task detail page

It will contain the following element

• Cycle list
• Button to add a cycle
• When clicking on add button, set selected cycle to null
• A form will appear upon clicking
• Way to pass a null datetime
• Form to edit task basic information -> detect if it is an editing case
• List with overflow hidden and a specific max height
• Improve datetimepicker styling
• Improve list styling
• Improve total duration styling
• Send as UTC to backend (all data must be saved in UTC tz)

Base tasks

• Create base page component
• Set up URL with parameters (projectId, taskId)
• Create reducer for cycles