ever-co / ever-teams Goto Github PK

Implement the invite user feature and make sure it works as expected

This issue is related to the invite user feature from the main table as shown below

User is able to join from any device with their own email

If the user lost access to the original device or got a new one and so on. Where he/she logged in the first time, but manage / member already have accounts.

Manager | Member

Page 1 (the Main page)

The user select 'Joining existed team'

Page 2 (Email and Code)

Enter

• email
• press 'send' code

The user provides

• a code (from email)

1. Email (input)
2. Code (input)
3. Label 'Resend code' make 'Re' in grey color - the rest leave as it is.
4. Join team (button)

We need actually to improve the Create New Team Screen's design with the new design.

How it looks now :

It should look like :

Screen 1 :

Screen 2 :

Flow of Assign / Unassign task

Team screen:

• Clink on user card and redirect to Task/Profile screen
• ( … ) menu -> Assign task and redirect to Task page with Tab ‘Unassigned’ and opened ‘Input’
• ( … ) menu -> Unassign task. User is unassigned from current task

Main feed line page

Task screen:

User can create tasks for own usage and user can assign task for someone

• Click on ‘Assign Task’ OR 'Create Task' button opens the popup ‘Input’ so that user can create task.
  Note: user can click button when looks at ‘Worked’ / ‘Assigned’ / ‘Unassigned’ Tab
• ( … ) menu does not contain ‘Assign task’ option when user looks on ‘Worked’ or ‘Assigned’ Tabs instead has only ‘Unassign task’
• ( … ) menu contains ‘Assign task’ option when user looks on ‘Unassign’ Tab and at Team screen

Note: The same task can be assigned to more than one team member

Task screen

Task screen and popup 'Assign Task' OR 'Create Task'

Note: Technically here Assign & Create Task popups are the same function is to create Task!

Invite new member
The 'Invite' button is always at the bottom of the member cards feed on the main screen.

By clicking 'Invite' manager can see a new screen, which should provide:

• user's email
• user's name
• button 'send invite'

Main member's feed

Note: appears new invited member's card is blank / grey until the member joined the team

Invite

Create New Team
Manager and Member
(When the user already has at least one team or the user is part of a team)

Button 'Create new Team' is located in the 'Dropdown menu' list of Team (Top part of the screen) at the very bottom of the team list.

By clicking 'Create new Team' the user can see pop up

• Team Name (input)
• button 'Create new Team'
• '<-' arrow (I think we will have instead of 'cancel' button the same as in the WEB version )

Note: The system already knows User's Email and Name.

Warning! The design of the Popup can be different - use just a general idea of it

The design should give a possibility to a manager to edit and remove member from the existed team and estimate new task as shown below

Actually we need to improve the invite user design as shown below.

Statuses

The way how other users can understand if their colleagues working / worked / or have not worked by seeing status

Green - User is working now
Orange - User worked today
Red - User has not worked today yet
Grey - User has not joined the team yet

Status for all users updates every 24 hours so that team members can see actual information on a daily mode.

Also, there are a few conditions for tasks

• Estimated (has a green round progress bar and estimated time)
• No estimation (has a grey round progress bar and 0:00 estimation) - user can click on it and see next
• Input for hours / minutes

Create new Team

• A team can be created only by Manager's role

• Each team may have more than one manager

Once the user installed the Gauzy Teams app (iOS, Android)

By default, the user can see the page 'Create new Team' and label 'Joining existed Team'

Screen 1

• Logo: 'Gauzy Teams'
• Title: 'Create new Team'
• Subtitle: 'Visibility for your Team'
• input 'Please enter your team name'
• button 'Continue'
• label 'Joining existed Team'

Screen 2

• Logo: 'Gauzy Teams'
• Title: 'Create new Team'
• Subtitle: 'Visibility for your Team'
• input 'Your Name'
• input 'Your Email'
• button 'Create Team'
• label '<-'

No - Recaptcha

Warning Step 3 is under discussion

Screen 3

• Title: 'Create Team' instead of 'Join'
• Subtitle: 'Please enter invitation code we sent to your email'
• input 'Code'
• Subtitle: 'Didn't receive code?'
• label: 'Resend code'
• button 'Continue' instead of 'Join'
• label '<-'

We need to implement the header component for Mobile app following the new design.

How it looks now :

It should look like :

Round Progress Bar

Once the user estimated the task and started working on it, everyone can see the round green progress bar and inside the total estimated time.

If the user does not have an estimation can see __ / ___ two inputs (hours / minutes) instead of button 'Estimate'

if the user has not worked yet 'No estimation', because there's NO task created.

Warning! the issue is under discussion - before starting confirm. that you can work on it

The user settings screen should contain

Top bar

• Logo: Gauzy teams

• Burger menu

• Title: Profile

• Avatar

• Full Name

• Users email

Footer

• Team
• Timer
• Settings

NO buttons

• Quit
• Hand ownership

• Let's add another item to the "..." menu of selected team members called "Make a Team Manager" (above "Release" item, which renamed to "Remove" per another ticket)

• It should only be visible to Team Managers (not regular team members) and it should only be available for those team members who are NOT managers yet.
• Click on such item, which should convert the current team member to Team Manager and give her/him the ability to manage the team together with other existing managers

Alignment is wrong on Create new team page as shown below. It needs to be improved

Notice : Next button and joining existed team should be on same line

( ... ) menu ->> Edit

Manager (can edit information on all user's cards)

• Full Name
• Task title
• Other tasks (NOW we don't have expanded card - later more tasks)

Member (can edit information on own card)

• Full Name
• Task title

Users (manager and team member) have the option to create one more team.

Two types of users can see a button 'create new team' inside the dropdown menu

If a new team is created by the manager. The manager will be a manager in a new team.

If a new team is created by the team member. The team member will be a manager in a new team

We need to replace the ever-gauzy logo by gauzy-teams.

How it looks now :

Replace the logo by this one :

• In the "..." menu we have in design the "Release" item. Let's rename it to just "Remove"
• if the Team manager clicks on it, the corresponding team member should be removed from the team (but only removed from the team, not removed from Gauzy!)
• if a user is already a Manager and tries to remove himself/herself, we should display a popup confirmation with the following IF there are no other managers in the team assigned to it: "You are the only one Team Manager left in the team. Before you can remove yourself, please make sure to add another team member as a manager of the team".

We need actually to improve the own Timer screen with the new design .
How it looks now :

How it should look like :

Two use cases:

• when a new task creating (user enters the title of the task) per ticket #73
• when the timer already started for existed task

In both use cases above, it should be possible to change the estimate for such a task and it should of course update the progress bar!

Important - there are 2 places where tasks estimations can be changed:

1. below large input for the task's title

2. for currently logged-in users in the table "Estimate" column by using the button "Estimate Now"

Please change that button to the same "Estimate: ____ / ____" format so that the user can just enter 2 values and it updates the estimate for that task.

3. for currently logged-in users in the table "Estimate" column when it's displayed already as Estimated: 40h, it should be possible to CHANGE such estimate. Basically instead of having just a text for "40h", we should have again same format "Estimate: 40h / 00m" as described above, but with some values of estimate displayed and allow user to change them

Note: why do we have it in 2 places (above the grid and inside the grid) - it's because in v0.2.0 will be possible to update estimates for other users' tasks right inside the grid, while above the grid it's always for currently running or new task for LOGGED-IN user only!

We actually need to implement creating new team feature. Let's implement API and make sure everything works as expected.

This concerns the first page as shown below.

User is able to join from any device with their own email

If the user lost access to the original device or got a new one and so on. Where he/she logged in the first time, but manage / member already have accounts.

Manager | Member

Page 1 (the Main page)

The user select 'Joining existed team'

Page 2 (Email and Code)

Enter

• email
• press 'send' code

The user provides

• a code (from email)

1. Email (input)
2. Code (input)
3. Label 'Resend code'
4. Join team (button)

Description

Build the UI for the login screen:

• As a manager, I should be able to create a team and get the team link
• As a team member, I should be able to paste the team link / Invite code and email address in order to login into the app.

Basically, we have only two screens:

• The splash screen(with the logo and the description of the app)
• The Login screen has 2 steps:

1. User chooses if they are managers or not,
2. if he's a manager, we ask him the name of the team and his email address
3. If he's a team member(has an invite code), we ask him for the invite code and his email address

Create a Task

User has two ways how to create a task

1. Main input on the top of the page - Combobox

• user types the title of the task and sees previous tasks
• estimates the task (optional)

Presses 'Enter' to confirm the creation.

Note: Once the user presses 'Enter' the system adds data inside and erases from the 'Main input' so that the user can see empty the main input.

2. User's card with data

Flow 1 - if there is no title.
The user sets a cursor on the empty input on user's card and types the title.

Flow 2 - if there is a title.
The user hovers the title of the task on user's card - there appears small cross - user can delete title of the previous task and create a new one instead in the same input

Press 'Enter' to confirm the creation.

On the user's card estimate can be provided separately by clicking on 'estimate'.

Time Tracker is tracking the time of the current (selected) task the user is working on and displays it
Main Time Tracker should work synchronously with a small one (the small one is located on the user's card). They display the same time value.
Users can press 'start' and 'stop' on their own card and on the main Tracker card.

Note: 'Total worked today' will be renamed to 'Work time 24 hours'

Newly created tasks
Once the user starts working on newly created tasks, the timer starts from the 0:00 value in column 'current'
Important! Value in 'Total worked today' starts from 0:00 every 24 hours !!!

Previously created tasks
Once the user starts working on previously created tasks, the timer starts from the last tracked value for this specific task. (Even the user worked on the task one / two days before)

Total worked today OR Work time 24 hours
In column 'Total worked today' - the system is tracking only today's time the user worked. (When a user first-time presses 'start' it is tracking from 0:00 value one time a day - can only stop and continue again)

Example:

Day | Task | Current | Estimation | Total worked today ('Work time 24 hours')

Day 1 | Task 1 | 8 h 43 min | 45 h 30 min | 8 h 43 min
Day 2 | Task 1 | 12 h 45 min | 45 h 30 min | 4 h 02 min

We need actually to improve the Create New Team Screen's design with the new design.

How it looks now :

It should look like :

Screen 1 :

Screen 2 :

User's Profile / Tasks

In the feed line, the manager can press User's card and

The user screen should contain

Top bar

• Logo: Gauzy teams

• Burger menu

+++++++++++++++++++++

• Avatar
• Status (green, orange, red, grey)
• Full Name
• Email

The block of each 24h has:

• Total time worked (specific day)
• Period (day)
• Task Card

List of tasks (scroll if there are more items than screen size)

Each task card contains:

• Status (in progress, completed etc)
• Task title
• ( … ) menu
• Worked time
• Estimated time

+++++++++++++++++++++

Footer

• Team
• Timer
• Tasks / Profile

Related page: ##135

After the user registers and login, it should be possible to create a new task by just typing the title of the task inside the large input box with the "What you working on" placeholder.

Notes:

1. it should call Gauzy API to create a task after the user types all text and click the "Start" button for the timer.
2. Above mean that only if the timer is stopped it should be possible to create a new task. IF the timer runs, the task can't be changed anymore before the timer stop (only estimates can be changed at any moment, it will be addressed in another ticket)!

We need actually to improve the Dropdown menu component design (select team component) with the new design.

It should look likr this (design file from page 7-9) :

Warning! In the current example, we don't have (...) design with 'assign task' option

A Manager on selected member card - presses ( ... ) menu ->> Assign task and 'Unassign task'

The appears popup menu with a list of tasks available for assignment

Note: Same task can be assigned to more than one team member

• Deploy Gauzy Teams App to Expo for preview

We need actually to improve the join existing team page with the new design .

How it should look like :

The user should be able to close (delete) a task inside 'Combobox'

In the main input, the user can see a list of own and team tasks

each task item has button at the end of each item in order to close (delete) from the list

When a user is willing to ‘close’ an issue by clicking ‘x’, the system asks for confirmation 'Confirm' OR 'Cancel'

Related task
##150

Logic

Since we have two types of users the system should display the correct first page for each

Flow 1
If the user (manager) joins Gauzy Teams without the invitation.
The system should display a page with the suggestion 'Create new Team' like the Default page.

Flow 2
If the user (member) joins Gauzy Teams with the invitation.

WEB
The system should display a page with the suggestion to enter an email to join.

Important!
Use provides only EMAIL, and go to the team page and inside will get a message to 'Confirm' email, by clicking it has to enter 'Code' from email

Screen three Popup for Code only

Statuses

Way how other users can understand if their colleagues working / worked / or have not worked by seeing status

Green - User is working now
Orange - User worked today
Red - User has not worked today yet
Grey - User has not joined the team yet

Status for all users updates each day at 0:00 so that team members can see actual information on daily mode.

WEB

Actually we need to improve the main page design as we got some changes from the new design as shown below.

Note : The some changes that we don't need to consider :

• Let's keep the footer we have for now. It looks better.
• The theme switcher should be on the footer.
• The estimate (hours and minutes) should be input.
• The what are you working on input should be a combo box so user can type a new task but it should also be like a selector with icons .

We need actually to improve the jTeam management screen with the new design .

This is how it looks now :

How it should look like :

On the main page user can see the cards of all team members and see ( ... ) menu per each card

Manager

For other user's cards

• Edit (Task title)
• Estimate (keep in mind that we will have this feature)
• Assign new task
• Unassign task
• Make a manager (can make a manager only if a user is not a manager)
• Remove (can't remove other managers)

For own record

• Edit (Task title)
• Estimate
• Add new task
• Unassign task
• Remove (Can't remove if there are no other managers - should make someone a manager)

Member

For own record

• Edit (Task title)
• Estimate
• Add new task
• Unassign task
• Remove

Related to #76

We need to implement feature for inviting new users to the team

Description 📓

When a user successfully logs in, he's redirected to the main screen

• We need to implement the Team screen and prepare the Timer screen that can be accessed by a bottom tab navigation
• We need to implement the tab navigation as well

We need to add a recaptcha on create page in order to prevent spammers

( ... ) menu ->> Edit

Manager (can edit information on all user's cards)

• Full Name
• Task title
• Other tasks (NOW we user's screen with all tasks)

Member (can edit information on own card)

• Full Name
• Task title

Description 📓

This task is about preparing the logic behind the app

• We need a helper(Class or functions) to manage the API calls
• We need a helper to manage state and local storage
• We need a helper to manage the token

Task creation and estimation

Users can create and estimate

On the user's card

• create a task title by using (...) menu where we can add 'create new task' OR 'Edit' options.

• add estimation by clicking the button 'grey round progress bar with 0:00 inside' next see

• two inputs __ / ___ (hours / minutes)

Hamburger menu
Let's make normal three horizontal lines of the same size each, not like now on the picture.
As mentioned @evereq no matter if it is on the right or the left side of Top bar menu

When launching the mobile app via Expo, we're getting the error below:

ERROR fontFamily "Helvetica Neue" is not a system font and has not been loaded through Font.loadAsync.

Warning! The page is not designed yet

The user should see a list of own and team tasks under the main input (Combobox)

Each task item contains:

• Task title
• Assignee (icon) OR be unassigned
• 'X' cross button (at the end of the item)
• color (which helps to distinguish a different status if it is completed, in progress, assigned, or unassigned)

Actually we need to improve alignments on page join an existed team page as shown below

Switch between teams

If the user has few teams should be able to switch between teams by selecting one in the dropdown menu.

• user can see the selected team
• user can track time
• user can create / edit tasks

The user should be able to. switch team and see list of other team members