Timesheets Design Update

ivan1px commented 1 year ago

Design

Logo

[x] Update the logo based on the design: Apple Android
[x] Update the splash screen

Look/Feel

[x] Update design based on the Figma file
[x] Drop-up menus should have glass effect
[x] After drop-up menu is displayed the rest of the screen should be a bit more dark

Interactions

[x] add interaction on scroll same as in turnaround app see here

Ideas of what can be added if not too complicated:

Card Flip for Details: When a user taps on a timer card to see more details, the card could flip over in a 3D animation to reveal additional information.
Drag-and-Drop Sorting: Allow users to sort timers by dragging and dropping them, with the other cards making way in a fluid, animated manner. (Then we will need to add a "default" option for sorting)
Project Expansion: When a user taps on a project, it could expand in a fluid animation to reveal the tasks within, perhaps even with a spring or bounce effect at the end.
Color Transition: When switching between projects, the background color could smoothly transition to match the color theme of the selected project.
Theme Transition: When switching between light and dark modes, instead of an instant change, have a gradual transition where each UI element changes theme in a staggered manner.
Feel free to propouse something new

Login

Design

[x] add an icon to display/hide password

Timesheets

Design screens

[x] When the tab is not empty screen display Sorting button
[x] Clicking on the Sorting button should open the drop down with two options: Recent/Oldest
[x] Recent should be selected by default
[x] Selecting on of this options should sort the timers by their last time of execution
[ ] #55
[x] Clicking on Plus button should open the Create timer screen
[x] Star icon indicates if the task if favorited, you can click on it in order to favorite
[x] Favorite logic should be applied to the timesheet, noty the task (it will make all timesheets inside favorite as well)
[x] Do not display the deadline in case it's not set

Timer creation

[x] Clicking on the plus button should navigate to the Timer creation
[x] User should be able to click on the Project field and start typing, dropdown list should be filtered based on the input
[x] If there is no match or this is the first project user should see "Create this Project" button
[x] Project title field should act as a search field (e.g. like we had with tags in the AH) we should not have two different fields as we had in the previous version
[x] User should be able to click on the Task field and start typing, dropdown list should be filtered based on the input
[x] If there is no match or this is the first task user should see "Create this Task" button
[x] Task title field should act as a search field (e.g. like we had with tags in the AH) we should not have two different fields as we had in the previous version
[x] Display Description field
[x] Display "Make Favorite" check box
[x] Information if timer is Favorited stored localy
[x] When selecting a project we need to display in the list if it local or odoo via icon

Opened the Timer

Design link

[x] There are should be two tabs: Timesheets and Details
[x] On the Timesheets display Current running/last timer information (day of the week, date, Start time, Time, description)
[ ] User should be able to click on the pencil button to edit the description
[x] Below there will be a list of completed records, by default they are collapsed and displaying like this:
[x] Clicling on the record will expand it and display Description with edit button
[x] In case there is more than 2 lines of text we need to cut it with "Read more" and ... after the last symbol
[x] Clicking Read more should display all text
[x] On the Details tab display task details (Project, Deadline (if exist), Assigned to, Task descruption)
[x] Clicking on the three dots button should display a drop-up menu with two options for local task: delete/favorite and one option for synced task: favorite

Favorites

[x] Add a new tab "Favorites"
[x] Empty screen
[x] Cliclicking on the Get started should open Create timer screen with "Make favorite" checkbox on

Odoo

[x] Rename Synced to Odoo
[x] Empty screen
[x] Clicking Get started should open Odoo log-in screen

Local

[x] Empty screen
[x] Clicking Get started should open Create timer screen

Projects

[x] Clicking on the "Get started" on Empty odoo projects screen will open odoo log-in screen
[x] Clicking on the "Get started" on Empty local projects screen will open create project screen
[x] Clicking on the "Get started" on Empty fav projects screen will open create project screen with favorited checkbox on
[x] User should be able to click on the plus button to create a new project

Create project

[x] User should input name/color (the same as we have in odoo)
[x] If it favorite

Inside the project

[x] User should be able to click on the three donts inside the project and see a drop-up menu with two options for local task: delete/favorite and one option for synced task: favorite
[ ] Display timer near the task inside the project
[x] In case there is no tasks in local project display an empty screen, clicking on get started should opne the timer creation page
[x] In case there is no tasks in odoo project display an empty screen, clicking on button should re-sync the tasks data

Settings

Design screens

[x] By default there is should be a light theme on
[x] User can switch to the dark theme
[x] Under the Synchronizations display only odoo
[x] Clicking on the account should display the drop-up with two options: unlink the account and Re-sync

Edge cases and other

[ ] When syncing with odoo https:// should not be editable as without it the url will be incorrect
[x] Improve dropdown visuals, it should not display so much empty space
[x] I belive that Timer should start if you click on the area with time on the card, not only start/pause
[x] Update package name to com.apexive.timesheet
[x] When syncing an already sycned timesheet from odoo, the odoo task can be deleted, in this case we need to show user a pop up to choose if they want to delete the local timesheet entry as well, or want to keep it
[x] If an online Task or Project was deleted then the user will need to sync Task from odoo to select a Odoo project and Odoo Task. This will also update the onlineIds for local Task and Project
[ ] If a timesheets online project id and task id was change from odoo then we will need to create a new Task or Project or both on local db and update the onlineIds there and update the local timesheet to refer to the new projectId and TaskId. Basically transfer the timesheet to the new Task.
[ ] when user logs out then then local db should be saved, after he log-in back it should sync with online db and not create duplicates
[x] If task is deleted in the odoo we need to display a question oppon the sync if we should delete it as well or keep locally
[ ] If there is a issue with task id we need to display a question what we need to do with it (merge, create new, ignore)

Bugs fixes

[ ] Inside the task I can see list of around 20 timers (not timesheets)
[ ] new created task, timer started, cannot stop
[ ] Cannot sync after timer stop

ivan1px commented 10 months ago

@turabiapex

ajil-apx commented 10 months ago

Display timer near the task inside the project: At the current state of the app, it is possible to create multiple active timers for the same task. Is this expected behaviour? If that is the case, then how do we decide which timer to show inside the task card in the project page? @turabiapex

Figma link

turabiapex commented 10 months ago

@ajil-apx as we have a sort button on the figma at the bottom right corner of the page, I think we should stick to the default sorting behavior unless the user doesn't change that. plus, we will enable drag & drop very soon on this ticket here https://github.com/djangoflow/flutter-odoo-timesheets/issues/56

@ivan1px please feel free to comment on this argument. I would love to get your input.

djangoflow / flutter-odoo-timesheets