real-dev-squad / website-dashboard

Dashboard site for RDS

website-dashboard

https://dashboard.realdevsquad.com/

What does the dashboard do?

Dashboard helps to create and assigns task to the members and can be accessed only by authorized members. You can also track currently assigned tasks per member.

How to Contribute?

• Check out CONTRIBUTING.md

Running the project

• First follow the contribution link on how to contribute given above.

• You need to install Live Server extension in you VSCode and start server from src/index.html or you can simply go into the file where you have cloned and run index.html in your browser.

• Live Server method is much preferred as it makes work easy and auto-reload.

• During most frontend development, when you run a local dev server, it will run on http://localhost:, e.g http://localhost:3000. Using this localhost server, you will NOT be able to use backend APIs directly from the browser. You can head over to website-backend set it up or If we want to make calls to our APIs beloging to *.realdevsquad.com, check out dev-url-cors Readme.md

website-dashboard's Issues

Update tree structure at contributing.md file

Add option 'unassigned' in dropdown

Bug: footer not at the bottom on mainpage

On https://dashboard.realdevsquad.com/, you'll see:

The line The contents of this website are deployed from this open sourced repo is supposed to be a footer and it should be at the bottom of the page. Have a look here, how it should be: https://dashboard.realdevsquad.com/task/create.html

We could have a simple text like Welcome to the dashboard site! in the center of the screen as a heading maybe?

[Recruiter Form] Show Recruiters Data

We have a feature implemented on Members which allows the Hiring Managers to get the introduction of our members.
Currently, we are only storing that data in the backend DB and not doing anything apart from that.

We need to show that data on the dashboard site so that way we can check it out and get a warm intro to the hiring manager or the recruiter

Endpoint which we call to submit hiring managers introduction request

New task workflow form

Details :- Real-Dev-Squad/website-backend#460

Tasks :-

• Remove startedOn input field from the form, and endsOn input field will be hidden by default
• Default status field should be AVAILABLE(or UNASSIGNED decision pending)
• When the status field is selected as ASSIGNED show assignee field and make it compulsory and show endsOn date and default endsOn date is 14 days
• When a new task is created startedOn will be computed if the task is assigned else ignored

Bug: We are sending `participants` in `ownerId`

ownerId is supposed to be the app owner
The field which we are looking for is participants array, we should be appending userId (not username) to the participants array which is not happening right now

Move current index page to /task/create

Current index page shows the form to make a new task, let's move that to /task/create

Given a link on the index page to go to task create page

User suggestion in assignee field

• Make Assigned To label as Assignee
• For the Assignee input box there should be an autocompleting feature where members usernames should be suggested while providing input

References 👇
https://github.com/Real-Dev-Squad/website-api-contracts/tree/main/members

Ends on should be 7 days by default

Currently, it shows 7 days but not getting updated to 7 days until the user manually updates it to any date(After setting the title and date user will be able to submit the form)

Tasks :-

• Make ends on default value to 7 days

Set end date to 7 days later by default

Set up pre-commit hook for checking formatting

Refer #Real-Dev-Squad/website-www#102 for more info

Please comment down to get this issue assigned to you 🙂

Bug fixes for task creation form

We have a few bugs to be fixed 👇

• Purpose field should be optional
• Feature URL can be empty
• Links can be empty
• Participants can be empty
• Assignee field can be empty
• User should not be able to set a value less than 0 for these fields Percent Completed, Completion Award Dinero, Neelam, Neelam
• Clear all the user entered data after successful creation of a task

References 👇

dashboard-site-2021-11-13_00.35.04.mp4

API-Contracts: https://github.com/Real-Dev-Squad/website-api-contracts/tree/main/tasks

Take forward PR #34

The author of the PR #34 seems to be unavailable from a long time.
Need someone to pick the PR from here and take it ahead

You can take a pull from his branch after adding his fork in your remote references, now the code is in your local machine. Now you can start working on it 🙂

Difference in placeholder fonts on task creation form

https://dashboard.realdevsquad.com/task/create.html

Show footer with info on repo for the site

Similar to current www page https://www.realdevsquad.com/ :

Code formatting checks on push and pull request

Once issue #47 is solved, we should use the check command on GitHub CI for every push so that we're aware that the commit is following formatting rules

Testing setup for dashboard

Testing environment setup and write test cases for dashboard site

Cookies are not being sent with the request POST `/task` request when submit button is clicked

Design changes in submit button to it more responsive

while opening dashboard.realdevsquad.com/tasks/create the submit button should look responsive and after filling the form there should be changes in submit button color or design.

use staging API for development

Make purpose field into a text area instead of input box

Move Edit Below Field's Name

The task is to move the edit below the field's name.
For every field which has an edit

It should look like this

Notice the reduced opacity of "Edit". Upon hovering, it should be darker.
For reference check this PR: #108

Title should have focus by default when page loads

Ends on date not getting updated

bug:-
When the user selects a date that comes before Started date then ends on date should be Started date plus one date

Here ends on date should have been 2021-12-26 which gets selected automatically but does not update on UI

Hide content untill script loads

Change IsNoteWorthy to boolean

isNoteWorthy field is being sent as a string change is to be sent as boolean

Create tasks button

For now, let's create a button that takes us to the form to create tasks

Add <createdBy> and <assignedTo> fields in the task creation form

While creating a task, we should be sending participants array which contains the users to which the task is to be assigned.
As of now, the array will contain only one user, which needs to be read from an input box.

Currently we have an "ownerId" field in the response, we want to remove that and instead be sending:

• createdBy
• assignedTo

These will contain the respective userIds of the user who has created the task and the user who the task has been assigned to
You can refer this contract https://github.com/Real-Dev-Squad/website-api-contracts/blob/main/tasks/README.md

Purpose input box width going out of the main container

While playing with the dimensions of the input box for purpose, it goes beyond main container which is a problem

https://dashboard.realdevsquad.com/task/create.html

Refactor task form

To Do

• Mark required fields with *
• Change Gold, Silver, Bronze to Dinero & Neelam
• Prefill default values
  • Dinero - 100
  • Neelam - 0
  • Percent completed - 0
  • Started - today's date
  • Status - pending
  • Preselect Dev in radio buttons Dev / Group
• Keep submit button disabled till all the required fields are filled without any errors

Migration plan for netlify with new folder structure

Goals :-

Make sure the new folder structure still works without making any changes on Netlify

With the old folder structure, Netlify looks for an index.html file at the root directory but with a new folder structure we have placed everything in src

Tasks :-

• place a temporary index.html file at the root directory so that nothing breaks on Netlify
• deploy and test everything works well

Do not clear up filled in information if task creation fails

Right now if task creation fails then it clears all the information filled in by the user

• filled in data must not clear if task creation failed
• If task creation is successful then clear the information filled

<Identity Service Health Check> Display health status

Create a user interface to display the health status of the identity service of every member to superuser only.

To obtain health logs:

• Request on /logs?[filter] to receive the health status data.

For now, mock the data as API is not ready.
Mock Data should be like:

logs: [
  {
    type: "identityHealth",
    timestamp: <timestamp>,
    payload: {
      username: <username>,
      serviceRunning: true/false
    }
  },
]

Display received health logs as specified.

Parent issue : here

Make 5px Clickable Region Around Edit

We should have some buffer space around the control so that the user doesn't have to pinpoint click the text to get the action done. Helps in using the button.

5px region of the edit button

Fix missing edit button on Assigned To field

• Change Assigned To as Assginee
• Add edit button on Assignee

Reference: #108

Dashboard form enhancement

• Let all the Textboxes have a useful placeholder such as an example or description

• Change Label name for Ended as Ends on

• Expect Title all other input boxes(Including started on and ends on) should be hidden and should have an EDIT button/text that will act as a trigger to display the input box and once input has been provided with data, input box needs to be hidden and entered input must be displayed on the side of the edit button (Reach out design team for suggestions)

• Move noteworthy task below Title

• Change default value for following Completion Award: Dinero:1000,Loss Rate:Dinero:100 and if its a noteworthy task the dafult value for Completion Award: Dinero: should be 2500

• Let date have a default value of 7 days and display the date such as 7 days remaining

• Default value for Status should be active

Show spinner on submit button and disable it during use

Task creation form corners not round

Going to https://dashboard.realdevsquad.com/task/create.html, you'll see that the corners of the form are not round, they're looking a bit weird

Make Create Task button responsive

Design the Task Form & Add make status field dropdown

Improve the design of the task creation form, currently, it has no CSS

Next, we need to make the status field a dropdown, with option values
active, pending

Link to the site - https://dashboard.realdevsquad.com/

Move footer on the bottom of the screen

This should appear as the last thing on the page.
If there is not enough content on the screen, it should stick to the bottom of the viewport

setup staging environment for website-dashboard

Objectives :-

• Better folder structure for our project
  
• Helps to deploy our project on Heroku
  https://test-website-dashboard.herokuapp.com

Text should not be selectable

Migrate API to prod endpoint

Change staging-api to api.realdevsquad.com please

[FeatureFlag] Design Feature Flags dashboard page

Create a page that GETS and POSTS the feature flag being turned on and off for the particular user

Design: Figma Link

Show Assignees only when status is assigned

Enhance Ends on section in create task form

• Default ends on date should be 7 days
• Move number of days remaining on Ends on line for eg: Ends on:* 2021-11-26 7 days remaining
• Once date has been set date picker, input box must be hidden if date is valid
• Remove all commented lines in setEndDate function
  

Set up prettier CLI for consistent code formatting

More info: Real-Dev-Squad/website-www#98

UI Improvement

We can do following improvement for better UI experience

• Make status drop down similar to other input.
• Add space between Completion Award: and Gold as well in Loss Rate: and Gold.
• Inline is noteworthy and checkbox.

Add repo link in footer

We should have the footer show the repo link like for other sites of ours: