Description

The API services and Vuex actions for Reviewer functionality need to be implemented.

Description

Since email addresses are subject to change outside of the app (e.g. HubSpot), handling for the login form and related vuex actions, API service, etc, need to be changed to pass the username & password to the login route instead of email & password.

Dependencies

The following dependencies must be resolved before work on this issue can begin:

• Issue on spawa-server must be resolved first: (landeaux/spawa-server#31)

Tasks

• 1. Update Login.vue template to capture user's username in the form and pass the username to the LOGIN vuex action called in the onSubmit method.
• 2. Test that login using a username works

Description

The appropriate API services and Vuex actions need to be added for Admin functionality (e.g. create/suspend/delete users, etc.).

Description

Items in the Admin Dashboard User list need to have a link to the user's profile. The easiest way to do this be to turn the username into a link which goes to that user's profile.

Tasks

• 1. Update AdminDashboardUserListItem so that username is a link to the user's profile

Description

The PitchDeck Vuex module needs to be updated to handle passing admin comments to the PitchDeck API service for /rework, /reject, /accept routes.

Tasks

• 1. Update the PitchDeck Vuex module

Description

The remaining Founder Dashboard functionality needs to be implemented.

Tasks

• 1. Update statusBadgeVariant to change dynamically with user's pitchdeck status
• 2. Update statusBadgeText to change dynamically with user's pitchdeck status
• 3. Update instructText to change dynamically with user's pitchdeck status
• 4. Update reviewCount to change dynamically based on the number of reviews on their pitchdeck
• 5. Update showResubmitPitchDeckButton to change dynamically based on user pitch deck lock date (HAS DEPENDENCIES)
• 6. Implement onFeedbackButtonClick
• 7. Implement onResubmitPitchDeckButtonClick

1. Update statusBadgeVariant to change dynamically with on user's pitchdeck status

'UNDER_REVIEW' => info
'ACCEPTED' => success
'REJECTED' => danger

2. Update statusBadgeText to change dynamically with on user's pitchdeck status

'UNDER_REVIEW' => 'UNDER REVIEW'
'ACCEPTED' => 'ACCEPTED'
'REJECTED' => 'NOT ACCEPTED'

3. Update instructText to change dynamically with user's pitchdeck status

'UNDER_REVIEW': use the text that's there now
'ACCEPTED': add some message indicating they've been accepted and they can now book a pitch date
'REJECTED': add some message politely indicating their pitch deck was not accepted. Will need feedback from stakeholders on exact verbage, for which we'll update later.

4. Update reviewCount to change dynamically based on the number of reviews on their pitchdeck

You'll need to fetch the pitch deck by the id denoted by currentUser.pitchDeck. Then store the response in the component data. Once you have the pitch deck, you can get the count from pitchDeck.reviews.length

5. Update showResubmitPitchDeckButton to change dynamically based on user pitch deck lock date (HAS DEPENDENCIES)

This is dependent on some back-end work, so skip for now

6. Implement onFeedbackButtonClick

When the feedback button is clicked it should trigger the modal window containing the list of reviews for that pitch deck. Should only trigger if the button is not disabled.

7. Implement onResubmitPitchDeckButtonClick

When the resubmit pitch deck button is clicked, a modal should pop up with the pitch deck upload form.

Description

The Home.vue component needs to be updated to conditionally render the appropriate user dashboard based on the user's role. If the user is not logged in, then the user needs to be routed to the login component.

Dependencies

The following issues must be completed before work on this issue can begin:

• #4 (closed)

Description

The initial Founder dashboard layout needs to be implemented. Once Founders submit a pitch deck, they will be routed to their user dashboard and provided with data regarding their pitch deck, including the date submitted, the current status of the pitch deck ('Under Review", "Accepted", "Rejected"), number of reviews, links to their aggregated feedback, and a button to re-submit their pitch deck.

The main focus on this issue is just to set up the layout and design of the dashboard. Since the API endpoints haven't been implemented yet, just use hard-coded dummy data for now. We will revisit the Founder dashboard when the API endpoints have been implemented on the server side of the app and make the store connections and API services at that time.

Create the following components in the /components directory

• FounderDashboard.vue
• ReviewerDashboard.vue
• EvaluatorDashboard.vue
• AdminDashboard.vue

For now, these components will only take one prop: user, which will be a required prop of type of Object. At this time, the template shall only display a title for the dashboard (e.g. "Founder Dashboard") in an <h1> element, and a greeting in a <p> element which will use the username prop from the user object in it (e.g. "Welcome back, Chris!").

Description

Instructions on how to open a pitch deck needs to be added to the Pitch Deck Review form, probably up top near where the Download button is located.

Tasks

• 1. Add instructions to pitch deck review form

Description

The Modify User modal in src/components/AdminDashboardUserListItem.vue needs to be updated to be a form for editing user values.

Dependencies

The following dependencies must be resolved before work on this issue can begin:

• #44

Requirements

• When an Admin clicks on the "Modify User" option from the Actions drop down, instead of a modal window asking them if they are sure they want to modify, they should be presented with a modal window containing a form for editing the user values
• The form should contain the same fields from the Create User form
• The form fields should be pre-filled with the user's current values
• The Admin should be able to edit the user fields
• The submit button should be disabled if the form has not been modified
• Clicking the submit button should update the user account with the new fields
• The reset button should reset the form to the original values prior to opening the Modify User modal
• Upon submit success, a success message should be displayed simply stating the user was modified successfully
• Upon submit failure, a failure message should be displayed with the error message returned from the API
• In either case, should provide a Close button for closing the modal

Tasks

• Implement all of the above requirements
• Test the happy/unhappy path scenarios for modifying a user and make sure there are no bugs in your implementation

Description

In the Modify User modal, when text is entered in the password field, the Submit button activates, as expected. However, if the user clears the password field, the Submit button is still active, when it should be disabled again.

Requirements

• The submit button should be disabled when the password field is cleared after text was entered.

Tasks

• 1. Update user modal according to above requirements

Description

For some reason, the Calendly widget is not loading properly when using Firefox. Several console errors pop up when the /book-pitch-date view is hit. This needs to be investigated and resolved as we want the widget to work in all major browsers (Chrome, Firefox, Safari, and Edge).

Description

Help text needs to be added to the form fields on the Pitch Deck Review form. See this google form for the help text to add: https://docs.google.com/forms/d/e/1FAIpQLSdCzwzEC3hnqmcAeMYiBEvnyFXyYBzV2xzy5mzg_HAzXxv7aw/viewform

Tasks

• 1. Add help text to review form

Description

Add the ability to accept, deny, or defer pitch deck status.

Description

A generic list controls component needs to be created which can be re-used for any list in the app (pitch deck list, user list, etc). The component will act as a header above the list and contain three input fields: a text input for search, and two select (drop down) inputs for sort and filter. When a user makes a selection from either sort or filter input, or enters input in the search, the component will emit the appropriate event with the value to the parent component. Any parent component using this component would listen for these events and perform the necessary action on the list below it

Specs

BaseListControls

• The component shall span 100% of the width of its container
• The component shall include a text input for search
• The component shall include a select input for sort
• The component shall include a select input for filter
• The component shall emit a search-input event with the value of the search input field as a user enters text
• The component shall emit a sort-select event with the value of the sort option selected
• The component shall emit a filter-select event with the value of the filter option selected
• The component shall take as input an array of sort options via a sortOptions prop
• The component shall take as input an array of filter options via a filterOptions prop

Props

sortOptions

• defaults to an empty array
• required
• validates array has at least 1 item

filterOptions

• defaults to an empty array
• required
• validates array has at least 1 item

Tasks

• 1. Implement the BaseListControls component according to the above spec

Description

For some reason, iframes are intermittently not loading on initial view render. An example would be with HubSpot form views, such as SubmitEapp.vue. I suspect the issue is related to the vuex store and the currentUser getter, which the form views use to conditionally render the iframe for the HubSpot form.

Description

The Admin Dashboard User List needs to be updating to include a role column so admins can quickly see what role each user is in. The AdminDashboardUserList and AdminDashboardUserListItem will need to be updated to achieve this.

Requirements

For each item in the user list, the role prop needs to be rendered between the username and the created date.

Tasks

• 1. Update AdminDashboardUserList and AdminDashboardUserListItem according to above requirements/description

Description

The Admin Dashboard User List needs to include controls above it for filter, search and sort inputs to allow admins to control the display of the user list.

Sorting/Filtering Options

Below are the different options for filtering/sorting:

Filter:

• Founder Role
• Reviewer Role
• Admin Role
• Active
• Suspended

Sort:

• Alphabetical: Role
• Alphabetical: Username
• Newest
• Oldest

Requirements

• AdminDashboardUserList shall use the BaseListControls component (See #56 ) to provide the user list controls
• The options listed above must be passed to the BaseListControls component's filterOptions and sortOptions props
• AdminDashboardUserList shall listen for the search-input, sort-select, and filter-select events and dynamically filter/sort the list appropriately
• The search input shall use the username field as the search key, filtering the list by users whose username contains the search string
• The default order of list items shall be 1) Founders, 2) Reviewers, and 3) Admins

Dependencies

The following dependencies must be resolved before work on this issue can begin:

• #55
• #56

Tasks

• 1. Update AdminDashboardUserList according to the requirements above
• 2. Test that the list is updated correctly when selecting a filter/sort option or entering text in the search field

Description

Currently, when a user is modified, there is no indicator that a request has failed.

Requirements

The modify user modal needs to display an error when the server responds with an error. Additionally, while a request is being made, the loading animation needs to be displayed.

Tasks

• 1. Update the user modal so that a loading animation displays while the request is being processed
• 2. Update the user modal so that an error is displayed with the server responds with an error

Description

Users in the founder role need to have their User state prop updated at the appropriate moments, based on where they are at in the app. For example, if the user submits the Eapp, their user state needs to be updated to watch_pitch_video.

Additionally, the beforeRouteEnter hook needs to be updated to route the user to the appropriate view based on their user state, so that when users log into the site, they are sent back to the next step they need to be complete. Note that this only applies to user's in the founder role, so additional logic needs to be added to make sure we aren't routing non-founder users.

Tasks

• 1. Add logic to views to update user state at the appropriate moments

When a user clicks on their profile name, if they are not an admin they are not being shown their profile.

Description

The Additional Comments field needs to be provided for Founders to see. Currently this field is omitted for founders to see. NOTE: The backend will need to updated to actually provide that data, as currently it also omits the additional comments for Founders. For now, just add the field as if the data were coming back.

Tasks

• 1. Add additional comments field into Founder dash See Reviews modal.

Description

The API services and Vuex actions for PitchDeck functionality need to be implemented.

Tasks

• 1. Implement PitchDeck API services and Vuex actions

Description

The initial Admin dashboard needs to be implemented according to the design mock-up (see slack).

Tasks

• 1. Implement initial Admin dashboard layout and design

Description

In order for admins to create users, the src/components/AdminDashboardCreateUser.vue file needs to be updated with the appropriate Vuex connections.

Tasks

• 1. Update src/components/AdminDashboardCreateUser.vue
• 2. Test the changes

1. Update src/components/AdminDashboardCreateUser.vue

• The form submit handler in the src/components/AdminDashboardCreateUser.vue file needs to be updated to dispatch the CREATE_USER Vuex action with the user object generated from the form as the payload.
• If the action was successful, the API will return a response echoing back the user information. If the action failed, the API will return an error. In either case, the admin user performing the action needs to be notified of the success/failure via a modal window. If the action was successful, this modal should provide a success message along with a link to the user's profile. If the action was unsuccessful, this modal should indicate an error occurred and display the error messages returned from the API.

2. Test the changes

• Using the Admin Dashboard Create User form, try to create a new user, and make sure the attempt is successful with the appropriate success message displayed in a modal window.
• Try to create another user with the same username and/or email and make sure that the attempt is unsuccessful with the appropriate error message displayed in a modal window.

Description

The Eapp form needs to be encapsulated in a View component. Upon form submission, the values need to be sent to the create contact route of the HubSpot Contacts API, using the HUBSPOT_API_KEY node environment variable for the api key parameter in the api endpoint url.

Tasks

• 1. Create a test account on HubSpot (this is different from a regular account)
• 2. Find the API key for that test account and add a variable named HUBSPOT_API_KEY to the .env file and set it equal to your API key.
• 3. Create a component in the /views directory named Eapp.vue and add the minimal boilerplate to make it work.
• 4. Add an entry to the router (/router/index.js) for the route to the Eapp view. Test that it works by going to the route you added.
• 5. Add a form to the Eapp.vue component with the appropriate Eapp fields stated in the spec.
• 6. On form submission, send a request the the HubSpot Contacts API create contact route, passing the form field values as the request body.
• 7. Verify that the request was fullfilled by checking your Contacts in your HubSpot test account for the new entry. Also, the API will send back a response to the web app, which can be inspected through a console.log statement. The response should match the format shown on the HubSpot Contacts API doc page for the create contact route. A route has also been added to Postman, which you can use to verify your response from the API is correct.
• Once form submission is working, add a button in FounderDashboard.vue that goes to the Eapp route and verify it routes the user there when clicked.

Description

The initial Reviewer dashboard needs to be implemented according to the design mock-up (see slack).

Tasks

• 1. Implement initial Reviewer dashboard layout and design

Description

A comment box needs to be added to the Return For Rework, Accept, and Reject modals on the Admin's Pitch Deck List so that admins can provide comments to the Founder about the reason for the Pitch Deck being sent back. The comments should be added to the payload of the corresponding Vuex action, alongside the pitchDeckId.

Tasks

• 1. Add comment box to Return for Rework/Accept/Reject modals

Is your feature request related to a problem? Please describe.
Currently, access to the user's settings, profile, and the logout are all spread out in different places. For example, to access their profile, a user clicks on their profile name on the right-hand side of the navigation bar. To the left they have a Settings link they can click to go their settings. Finally, to log out they have to go to their settings and then click the logout button at the bottom. None of this is ideal.

Describe the solution you'd like
What we would like to do is consolidate these links into a user menu dropdown. When the user hovers over their username, a dropdown should appear with links to their profile, settings, and logout.

Describe alternatives you've considered
Another way to trigger the dropdown could be from a click instead of a hover event over the username. Also, instead of the username, we could use the user's profile image as an icon (see the Github user menu dropdown).

Additional context
None.

In order for Founders to be able to book a pitch date, they need access to the calendly widget. This needs to be a custom embedding (https://help.calendly.com/hc/en-us/articles/360020052833-Advanced-embed-options) so that the front-end can capture data such as the booked event, invitee, etc and link it to the user.

A solution could be using the vue-calendly npm package (https://github.com/officert/vue-calendly) or rolling our own custom component.

Description

Create a modal window used to submit a review for a user.

Description

In order for admins to see a list of all users, the src/components/AdminDashboardUserList.vue file needs to be updated with the appropriate Vuex connections.

Tasks

• 1. Update src/components/AdminDashboardUserList.vue
• 2. Test the changes

1. Update src/components/AdminDashboardUserList.vue

• The form submit handler in the src/components/AdminDashboardUserList.vue file needs to be updated to dispatch the FETCH_USERS Vuex action to get the list of all users and their data.
• While the fetch is being performed, the page needs to display the loading icon (see src/components/HubSpotFormWidget.vue, src/views/WatchPitchVideo.vue, src/views/BookPitchDate.vue, or src/views/Home.vue to see how it is used elsewhere).
• If the action was successful, the API will return a response containing a list of all users and their data. If the action failed, the API will return an error. In either case, the loading icon needs to disappear once the API response comes back. If the fetch is successful, then the data needs to be stored in the component's local data and passed into AdminDashboardUserListItem components to render the list. If the fetch was unsuccessful, the error message should be rendered on the page instead (not a modal window, directly on the page).

2. Test the changes

• From the main Admin Dashboard view, click on the user list and make sure that the loading icon shows up initially and the user list is rendered after a moment as expected.
• Mock a failed fetch attempt to make sure that the error message is appropriately displayed on failure.

Description

Replace pitch deck list components with b-table bootstrap vue component

Tasks

• 1. Replace pitch deck list components with b-table bootstrap vue component

All Post-related logic needs to be removed, as Posts are not going to be a feature in the actual app. All api services, routes, components, etc related to Posts needs to be removed.

Description

Comments given by Admins when a Pitch Deck is returned for rework, accepted, or rejected need to be displayed on the Founder Dashboard. The requested location is underneath the status bar but above the What Should I Do Now? section. The comments will be available via the adminComments prop.

Tasks

• 1. Add comments section to the founder dashboard

Description

The Profile view needs to be updated to display HubSpot contact info instead of irrelevant fields like bio and image. Also, the user Settings view needs to be updated with these old fields removed.

Tasks

• 1. Update Profile view
• 2. Update Settings view
• 3. Test implementation

Description

The layout and styling needs to be updated for all of the HubSpot form views, as well as the pitch video view according to the mock-up design (see Slack).

Components to update

• components/BaseHubSpotFormView.vue
• views/WatchPitchVideo.vue

Tasks

• Update layout and styling of BaseHubSpotFormView
• Update layout and styling of WatchPitchVideo