gctools-outilsgc / gccollab-frontend Goto Github PK

• Save session to local storage
• Post login redirect to the previous page instead of the home page.
• Figure out how we will refresh sessions (token or silent renew?)

Developing the design System for GCC new UI.

Description

Our app needs a generic button component that can be re-used. We will need to create a component that wraps an Angular Material button, GCDC Components button, or the default button. Since this component will be replacing <button/> it will need to have all relevant attributes exposed as well as a callback function that executes on click.

There should also be an option for an "icon-only" mode where the button will display an icon instead of text. The button should be styled to match what's provided in the design document (the icon buttons in the news feed cards).

See the docs for a list of the attributes we need to consider.

Requirements

• Generic button component with the name button.component.ts
• A test file that follows the same naming pattern.
• All relevant attributes on the button are exposed.
• An output field named btnClick to store a callback function.
• An "icon-only" mode.
• Fully translated and accessible.

Acceptance Criteria

• Can specify a type
• Has an "icon-only" mode
• Can specify text
• Can display an icon with text
• Can specify a name
• Can specify a value
• Can be styled
• Can be enabled/disabled
• Can autofocus
• Can execute a callback function
• Can submit a form
• Can specify which form method to use
• Can specify how the form-data should be encoded
• Can specify a form action
• Can specify a form id
• Is fully accessible and translated
• Has a test file with the name button.component.spec.ts in the folder, with a minimum of 1 unit test in a passing state.

Using dependency-cruiser and Graphviz.

Building the events and event registration pages.

Description

Start looking into reactive forms with Angular. Official documentation can be found here, but there are 3rd party solutions we might want to consider.

Requirements

N/A

Acceptance Criteria

Create a proof of concept that shows...

• 2-way data bound model
• validation
• default inputs
• required fields
• error messages
• hint text
• control grouping
• nesting groups
• reset/clean
• dynamic forms

We will need to be able to transition the header/footer theme depending on scroll position or for certain routes. We should follow up with @Chaza-A to discuss this feature in more detail.

Add a method for pulling persisted data from all the mock services (people, events etc.)

We need a profile card component that matches the design doc. See below the events.

Tests for subcomponents:

1. Home Button
2. Network Button
3. Groups Button
4. Jobs Button
5. Support Button
6. Search Feature
7. Messages Feature
8. Notifications Feature
9. Profile Feature
10. Language Feature

e2e testing for the new GCcollab frontend

Tests for subcomponents:

1. About GCcollab Feature
2. GCtools
3. Statistics
4. Privacy Policy
5. Terms and Conditions of Use
6. FAQs
7. Help/Contact Us

Description

We need a generic input component that can be used as a replacement for the default <input/>. This component can use either Angular Material, GCDS, or the default element. Since this is a wrapper we will need to expose all relevant attributes.

For this iteration we only need text, number, search, and password.

For reference see the design.

Requirements

• A component that renders an input element.
• Has support for the following types
  • text
  • number
  • search
  • password
• Has supporting labels, placeholders, error text/styling, and icons.

Acceptance Criteria

• Input component renders.
• Supports the following types
  • text
  • number
  • search
  • password
• Exposes the following attributes
  • autofocus
  • disabled
  • max
  • maxlength
  • min
  • minlength
  • name
  • pattern
  • placeholder
  • readonly
  • required
  • type
  • value
• It has a label associated with it.
• It has an icon showing it's required.
• It has an icon button allowing it to toggle between password and text (for password type only).
• Has an icon button that shows help text.
• Fully accessible and translated.
• There is at least 1 unit test in a passing state
• It matches the design document.

We need to try to match the design document for the rich text editor. Look into the features currently available in our rich text editor (app-editor) and see if we have all the required features shown in the design document. Also look to see if the design doc might be missing some features that we currently have. Follow up with @Chaza-A to discuss your findings and then implement the changes in the component.

We should see if we can use TypeScript for our translations instead of JSON. Currently we use strings for all our translations. This is very error prone due to the potential for typos and the fact that keys might not match between language files.

Description

Our header needs to be updated to the new design

Requirements

• See the design document.

Acceptance Criteria

• It matches the design document.

Description

We need to create an Event Card Component that matches the design doc found here. The event card component should use mat-card for its base with an image that fills 100% of the width and 50% of the top of the card. The bottom half will have centered text that displays the name of the group as well as the group state (closed/open). If the card becomes focused/moused-over the group name should become underlined, and it would be nice if the group picture zoomed in slightly without changing the image size. If a user clicks on the group (at the mat-card level so any part of the card is clickable) we will want to send them to the groups page. Since we haven't setup any subrouting yet we can just send them to the /groups route for now. Make sure to use RouterLink so we don't do a hard refresh. See the header/footer for reference.

Styling will be similar to the news card component (box shadow, border etc.) so feel free to re-use any of the styles found in src > app > features > news-fed > components > news-card > news-card.component.scss

Project Setup

A component called group-card.component should be added to the groups feature module found under src > app > features > groups > components. Make sure to add the newly created group-card component to the declarations and exports array of the groups.module.ts file so it can be imported into other modules in our project. Once the component is available for export you will want to add the GroupsModule to the imports array of the home.module.ts file found in src > app > features > home. You should then be able to use the groups-card component on the home page.

Mocking data

You should create a new folder called models under the groups folder found at src > app > features > groups. Similar to the news-feed feature, this will be used to mock a data model that will be used in the group-card.component as well as other instances in our app where group is used. The model should be called Group and the file named group.model, consisting of the following properties:

• id
• name
• displayPicture
• groupStatus

groupStatus should be an enum with at least 2 options: Open and Closed. Add a new file called group-type.ts to the same folder (models). See button-type/input-type etc. for reference src > app > shared > models.

Since this is mock data and our model isn't set in stone feel free to add any other properties you see fit beside the 4 outlined above.

Once you've setup your models you'll want to instantiate a group.model class inside the home.component.ts file and fill it with whatever data you want. You can then pass the model to your group-card.component as an Input in the home.component.html template and it should populate with the expected data. For reference on Input and the model pattern I've outlined feel free to check out news-feed-card.component.ts

Acceptance Criteria

• Requirements outlined above are met
• Full translated/accessible with tooltips if needed.
• Fills 100% of the width/height assigned at the the top level of the component. Maintains proportions and avoids clipping, ellipses text etc.

Reference Images

Description

We need a modal component for the project that matches the design doc here. We will be using the Angular Material dialog as our base. A component with the naming convention modal.component.ts should be added to the shared folder of the project. We will also want to have a way to pass in data to be displayed in the modal and a function to execute on submit.

Requirements

• A component that wraps an Angular Material dialog component.
• Can pass in data to display in the modal.
• Can pass in a function to execute on submit.

Acceptance Criteria

• Modal component renders.
• Matches the design document.
• Has at least 1 passing unit test.

Since upgrading to Angular 16 material themes have changed. The theme will need to be updated so we stop getting warnings.

Description

We need to finalize what we're going to do about state management for the app. Some more research will need to be done on NGrX, as well as getting a better understanding of RXJS. Look into any alternatives as well.

Requirements

• Research RXJS and NGrX.
• Look at any potential alternatives.
• State management implemented.

Acceptance Criteria

The project has some sort of global state store, with at least one component/service the uses it.

We need to do some investigation into how the login flow for our app will work. Currently we are using this package to authenticate, which redirects the user to GCAccount to handle registration/login.

Look into that package and see if there is support for a login/register flow where we stay inside our Angular app and send the requests to GCAccount without redirecting.

Description

We will need a component that displays a user profile image. You can see an example of the profile picture in the design in the news card and header.

Requirements

• A component that renders a profile picture.
• Can be clicked to navigate to the user profile.
• Can be clicked to expand the picture.

Acceptance Criteria

• Profile picture component renders.
• It has the option of being clicked to do one of two things:
  • Go to the user profile (placeholder for now)
  • Open a modal with the picture expanded
• Fully accessible and translated.
• There is at least 1 unit test in a passing state
• It matches the design document.

Description

We need a rich text editor for our project. We might also want to consider having support for markdown. One potential option is ngx-editor.

For reference see the design.

Requirements

• Research and add a rich text editor to the project.

Acceptance Criteria

• A rich text editor package has been added to the project.

Description

In order to start implementing the mock-ups we will need to add some global styles, fonts, theme etc. For reference the design file can be found here.

Requirements

• Updated theme.
• Updated font.
• Grid layout to spec.
• Media breakpoints (BreakpointObserver)

Acceptance Criteria

• The theme has been updated to match the design.
• The font has been updated to use "Inter".
• The grid and spacing is in-line with the design.
• There are media breakpoints for...
  - mobile: 320px - 480px
  - tablet: 481px - 768px
  - small: 769px - 1024px
  - medium: 1025px - 1200px
  - large: > 1201px

Look into web components and if/how we can use them in our Angular application.

https://indepth.dev/posts/1116/angular-web-components-a-complete-guide

Starting with a simple one to run angular tests. later to be expanded to creating / updating a dev instance and running e2e / acceptance style tests as well.

Once Angular 16 is released (May 2023) we should look into updating our app from v14 to v16. The main reason for the upgrade is to make use of Signals.

Angular Update Guide

Description

The footer needs to be updated to match the new design outlined here. The component already exists in the project so some tweaks to the template and styles is all that's required.

Requirements

• Update the footer to match what's shown in the design.

Acceptance Criteria

• Footer component renders.
• It sticks to the bottom of the page.
• The hyperlinks work and make use of RouterLink
• It matches the design document.
• Fully accessible and translated.
• Has at least 1 passing unit test.

We need a component for a profile button that wraps the existing profile-picture component. The component should have a flag that tells it that it's the profile button for the current user. If it is, it should show a "Login" button if the user is not authenticated, or the profile picture if they are already logged in. See design doc for more details.

We need to be able to show/hide the banner, and have the image change depending on the route.

Create a component for the calendar icon that's currently being used in the event-card component. This should be stored in the shared module since it will be used in multiple places throughout the app. Once completed, use in place of the old event calendar in the event-card component and on the event page.