SS-873: Setup UI for showing list of team members and search team members #30
SS-873: Setup UI for showing list of team members and search team members #30HemanthKona wants to merge 22 commits intomainfrom
Conversation
- setup app tool bar with router links - add Bc gov logo in header - fix main content positioning
- feat: setup mock service worker on dev env - feat: setup Appbar component with navigation - feat: add entities and entitiesMap to usersStore
- Redesign UserProfile with two-panel layout and CSS grid - Switch from store-based to direct API fetching across components - Set immediate: true in fetchAPI for automatic query execution - Disable MSW handlers to use real API - Add loading/error states to User and UserProfile components - Add "Add Member" button to user list page
- rename user to myteam - setup user card component - setup route for UserProfile and UserIdentification - User Profile to have child routes rendered on teh right side panel - Fix My Profile page search param change - build reactive url for fetch api to get the latest query params - update orval transformer to make query params MaybeRef type
- use happy-dom instead of jsdom
- use generated mock data factory functions to create test entity data
HemanthKona
changed the title
HemanthKona
changed the title
| @@ -0,0 +1,3 @@ | |||
| { | |||
There was a problem hiding this comment.
Copied public folder from Existing Sheriff Scheduling Application for showing logo in header.
| @@ -0,0 +1,335 @@ | |||
| /* tslint:disable */ | |||
There was a problem hiding this comment.
This file is created by the [msw](https://mswjs.io/) tool and need to be at the root of the site for MSW to intercept all requests following that path. If this file is nested inside any other folder msw cannot intercept api requests.
|
I don't know why prettier build is failing on mockserviecworker.js file. I tried formatting it locally, its fine. We may have to bypass this issue now. |
|
Are we going to fix the build failures? |
Yes please. |
Yes figuring out why prettier is failing. Tried running it locally, and everything seems ok. |
| <template> | ||
| <v-app-bar style="background-color: #eaeaea; padding: 0.5rem 2rem" density="compact"> |
There was a problem hiding this comment.
There's a lot of inline styling happening here. It would be ideal to move this to
Moreover, I think we should create navigation config array and loop over it rather than hardcoding. This will be hard to maintain and grow once we have more links.
const navItems = [
{ name: "Schedule", path: "/schedule", module: modules.scheduling },
{ name: "My Team", path: "/myteam", module: modules.users },
{ name: "Dashboard", path: "/dashboard" }
];
Updating Template like this:
<RouterLink
v-for="item in navItems"
:key="item.path"
v-if="!item.module || accessControl.canAccessModule(item.module)"
class="router-link"
:class="{ 'router-link--border': item.module }"
:to="item.path"
active-class="active"
{{ item.name }}
3 participants
Pull Request for JIRA Ticket: ----SS-873----
Issue ticket number and link
Description
UserProfileandUserIdentificationuseFetchApito get the latest query params when recalling the same endpointuseFetchApiFixes # (issue)
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
happy-dominstead ofjsdomapi-access/generated/*.mswmock data factory functions to create test entity dataSetup tests in
web/src/__tests/modules/myteamto test below componentsTest Configuration:
If applicable
Checklist:
Documentation References