Modal & Dialog System

Relevant source files

The following files were used as context for generating this wiki page:

• marketplace-frontend/src/app/components/common-modal/common-dialog.component.ts
• marketplace-frontend/src/app/models/common-dialog.model.ts
• marketplace-frontend/src/app/components/common-modal/common-dialog.module.ts
• marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.ts
• marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.component.ts
• marketplace-frontend/src/app/components/market-header/market-header.component.ts
• marketplace-frontend/src/app/components/common-modal/common-dialog.component.html

The Modal & Dialog System provides a standardized framework for displaying overlay content in the marketplace application. It utilizes Angular Material's Dialog module to manage user interactions for authentication, registration, and general information alerts.

The system centralizes dialog logic through specialized components and a shared data model, ensuring consistent styling and behavior across the frontend.

Sources: marketplace-frontend/src/app/components/common-modal/common-dialog.module.ts, marketplace-frontend/src/app/components/market-header/market-header.component.ts:74-84

System Architecture

The architecture relies on MatDialog to manage the overlay lifecycle. It consists of a base common dialog for generic messages and specialized dialogs for complex workflows like user authentication.

Component Relationships

The following diagram illustrates the relationship between the triggering components and the dialog implementations.

Data Models

Dialogs use a standardized data structure to receive configuration and content from the caller.

CommonDialog Type

The CommonDialog type defines the structure for passing content into the CommonDialogComponent.

Field	Type	Description
title	string	The text displayed in the dialog header.
bodyContent	string	The main content, supporting HTML via safeHtml pipe.
footerContent	string	(Optional) Content displayed in the dialog footer.

Sources: marketplace-frontend/src/app/models/common-dialog.model.ts:1-5, marketplace-frontend/src/app/components/common-modal/common-dialog.component.html:9

Core Components

Common Dialog

The CommonDialogComponent serves as a generic modal for displaying information. It injects MAT_DIALOG_DATA to render dynamic content.

• Logic: It initializes the data object to an empty state if no data is provided.
• Interaction: The _close() method invokes MatDialogRef.close() to dismiss the overlay.

Sources: marketplace-frontend/src/app/components/common-modal/common-dialog.component.ts:11-25

Sign-In Dialog

The SignInDialogComponent manages user authentication. It features a reactive form with userName and password validation.

• Workflow: When a user clicks "Create an account", the component closes itself and requests the DialogService to open the SignUpDialogComponent.
• Validation: It enforces required fields and patterns defined by USERNAME_VALIDATOR.

Sources: marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.ts:58-81, marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.ts:109-112

Sign-Up Dialog

The SignUpDialogComponent handles new user registration. It includes fields for userName, firstName, email, and password.

• Background: It uses a default background image located at /assets/images/back.jpeg.
• Spinner Integration: It uses the showSpinner operator during the registration request to provide visual feedback.

Sources: marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.component.ts:46, marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.component.ts:86-101

Dialog Invocation Flow

The following sequence diagram shows how a dialog is opened from the header and how it can transition between different dialog types.

Implementation Details

Module Configuration

The CommonDialogModule exports the generic component and imports necessary Angular CDK and Material modules.

@NgModule({
    imports: [
        CommonModule,
        MatCommonModule,
        MatDialogModule,
        OverlayModule,
        PortalModule,
        SafeHtmlModule,
        ScrollingModule,
        TranslateModule,
    ],
    declarations: [CommonDialogComponent],
    exports: [CommonDialogComponent],
})
export class CommonDialogModule {}

Sources: marketplace-frontend/src/app/components/common-modal/common-dialog.module.ts:12-32

Shared Styles

Dialog styles are organized within the shared-styles.less manifest, specifically importing styles for sign-in and sign-up dialogs under the shared-components/dialogs directory.

Sources: marketplace-frontend/src/app/styles/shared-styles.less:14-15