@ieeesa-npm/groups 0.15.6 → 0.15.8

package/lib/assets/roster-import-mocks.d.ts

@@ -0,0 +1,27 @@
+import { RosterImportMockScenario, RosterUploadError, RosterUploadResponse } from '../models/roster-import.model';
+/**
+ * Mock responses for the roster import flow, used to build and exercise the UI
+ * before the real backend API is available. Each scenario maps to one of the
+ * Figma result screens.
+ *
+ * Once the API is wired up, `RosterImportComponent` will call the real service
+ * method instead of `RosterImportMocks.getMockResponse(...)`.
+ */
+export declare class RosterImportMocks {
+    /** Row errors mirroring the Figma "All Rows are skipped" screen. */
+    static readonly mockRowErrors: RosterUploadError[];
+    /** All 30 rows added successfully (Figma: 30 / 0). */
+    static readonly allSuccess: RosterUploadResponse;
+    /** Partial import: some added, some skipped. */
+    static readonly partial: RosterUploadResponse;
+    /** Every row skipped (Figma: 0 / 30, "All Rows are skipped"). */
+    static readonly allSkipped: RosterUploadResponse;
+    /** Headers only, zero data rows (Figma: "No roster data found"). */
+    static readonly empty: RosterUploadResponse;
+    /**
+     * Returns the mock upload response for a given scenario.
+     * @param {RosterImportMockScenario} scenario - The scenario to simulate.
+     * @return {RosterUploadResponse}
+     */
+    static getMockResponse(scenario: RosterImportMockScenario): RosterUploadResponse;
+}

package/lib/components/add-user-roster/add-user-roster.component.d.ts

@@ -186,7 +186,19 @@ export declare class AddUserRosterComponent implements OnInit, OnDestroy {
      */
     isAllOtherControlsValid(): boolean;
     /**
-     * Enables or disables submit button.
+     * Single source of truth for the Save button enabled/disabled state.
+     *
+     * Combines both inputs that gate the form so every callback (form change,
+     * role selection, org selection) computes the same result — mirroring the
+     * edit-user-roles flow:
+     * 1. Base validity via GroupsService.isSubmitButtonDisabled, which accounts
+     *    for the reactive form status AND (for SYSTEM_USER) the selected roles,
+     *    since roles live in `selectedUserRoles`, not the form.
+     * 2. For INDIVIDUAL only: the `representingOrg` control stays INVALID because
+     *    its value is held in `selectedOrganizations` (a multiselect autocomplete),
+     *    not the control. So also enable when every other control is valid and at
+     *    least one organization is selected, even though the form status is
+     *    INVALID.
      * @memberof AddUserRosterComponent
      */
     updateSubmitButtonStatus(): void;

package/lib/components/roster-import/roster-import.component.d.ts

@@ -0,0 +1,179 @@
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { RosterUploadError, RosterUploadResponse } from '../../models/roster-import.model';
+import * as i0 from "@angular/core";
+/** States of the roster import flow. */
+type RosterImportState = 'upload' | 'processing' | 'result';
+/**
+ * Roster Import dialog (MOCK data phase).
+ *
+ * Lets an admin upload a CSV/XLS/XLSX roster file, shows a processing progress
+ * bar, then a result summary (added / skipped) with per-row errors and an
+ * error-log download. Mirrors the events-and-meetings bulk-import-participants
+ * flow. The real backend is not wired yet — {@link onImport} resolves a mock
+ * response after a short delay so every Figma state can be exercised.
+ *
+ * @export
+ * @class RosterImportComponent
+ */
+export declare class RosterImportComponent implements OnDestroy {
+    /** Carries the { groupId, groupName } payload from the opening dialog. */
+    componentData: any;
+    /** Emitted after an import that added at least one row (parent refreshes). */
+    submitFormResponse: EventEmitter<any>;
+    /** Emitted when the user cancels/closes without a successful add. */
+    formCancel: EventEmitter<void>;
+    destroy$: Subject<boolean>;
+    constants: any;
+    screenTexts: any;
+    /** Current state of the import flow. */
+    importState: RosterImportState;
+    /** The selected file. */
+    selectedFile: File | null;
+    /** File drag-over state. */
+    isDragOver: boolean;
+    /** Processing progress percentage (0–100) shown next to the progress bar. */
+    progressValue: number;
+    /** Terminal upload result (mock). */
+    uploadResult: RosterUploadResponse | null;
+    /** Row-level errors for the completed job. */
+    jobErrors: RosterUploadError[];
+    /** Inline validation / API error message. */
+    errorMessage: string | null;
+    /**
+     * Info banner shown when the file has headers but no data rows
+     * (Figma: "No roster data found...").
+     */
+    noDataMessage: string | null;
+    /** Maximum file size in bytes (5 MB). */
+    readonly MAX_FILE_SIZE = 5242880;
+    /** Accepted file extensions. */
+    readonly ACCEPTED_EXTENSIONS: string[];
+    /**
+     * MOCK ONLY: which scenario the next import simulates. Cycles through the
+     * scenarios so QA can see every result state by importing repeatedly. Remove
+     * when the real API is wired in.
+     */
+    private mockScenarios;
+    private mockScenarioIndex;
+    /** Required column headers for display. */
+    get requiredColumns(): string[];
+    /** Comma-separated accepted file types for the input element. */
+    get acceptedFileTypes(): string;
+    /**
+     * Cleans up subscriptions when the component is destroyed.
+     * @memberof RosterImportComponent
+     */
+    ngOnDestroy(): void;
+    /**
+     * Handles a file selected via the browse dialog.
+     * @param {Event} event - The change event from the hidden file input.
+     * @memberof RosterImportComponent
+     */
+    onFileSelected(event: Event): void;
+    /**
+     * Handles a file dropped onto the dropzone.
+     * @param {DragEvent} event - The drop event.
+     * @memberof RosterImportComponent
+     */
+    onFileDrop(event: DragEvent): void;
+    /**
+     * Handles drag-over on the dropzone.
+     * @param {DragEvent} event - The dragover event.
+     * @memberof RosterImportComponent
+     */
+    onDragOver(event: DragEvent): void;
+    /**
+     * Handles drag-leave on the dropzone.
+     * @param {DragEvent} event - The dragleave event.
+     * @memberof RosterImportComponent
+     */
+    onDragLeave(event: DragEvent): void;
+    /**
+     * Validates the file type and size, then either sets it or shows an error.
+     * @param {File} file - The candidate file.
+     * @memberof RosterImportComponent
+     */
+    processFile(file: File): void;
+    /**
+     * Shows the single-file-only validation message.
+     * @memberof RosterImportComponent
+     */
+    showSingleFileOnlyError(): void;
+    /**
+     * Removes the currently selected file and resets to the upload state.
+     * @memberof RosterImportComponent
+     */
+    onRemoveFile(): void;
+    /**
+     * MOCK: "uploads" the file by simulating a short processing delay, then
+     * resolves the next mock scenario. Replace the timer + mock lookup with the
+     * real service call once the API is available.
+     * @memberof RosterImportComponent
+     */
+    onImport(): void;
+    /**
+     * Stores the terminal result and moves to the result state. When the file
+     * had no data rows, shows the "no roster data" info banner instead of the
+     * summary cards.
+     * @param {RosterUploadResponse} body - The terminal (mock) result.
+     * @memberof RosterImportComponent
+     */
+    finalizeResult(body: RosterUploadResponse): void;
+    /**
+     * Whether the result state should show the summary cards (added / skipped).
+     * Hidden for the "no data records" case.
+     * @return {boolean}
+     * @memberof RosterImportComponent
+     */
+    get showSummaryCards(): boolean;
+    /**
+     * Whether every processed row was skipped (drives the "All Rows are skipped"
+     * header on the errors card).
+     * @return {boolean}
+     * @memberof RosterImportComponent
+     */
+    get allRowsSkipped(): boolean;
+    /**
+     * Builds a client-side CSV sample file from the required columns and triggers
+     * a browser download. (Client-side generation until the template API exists.)
+     * @memberof RosterImportComponent
+     */
+    downloadSampleFile(): void;
+    /**
+     * Builds a CSV from the row-level errors and triggers a browser download so
+     * the user can correct and re-upload.
+     * @memberof RosterImportComponent
+     */
+    downloadErrorLog(): void;
+    /**
+     * Escapes a value for safe inclusion in a CSV cell.
+     * @param {(string | number | undefined | null)} value - The raw cell value.
+     * @return {string} - the CSV-safe cell string.
+     * @memberof RosterImportComponent
+     */
+    toCsvCell(value: string | number | undefined | null): string;
+    /**
+     * Closes the dialog. Emits submitFormResponse when at least one row was added
+     * so the parent refreshes; otherwise emits formCancel.
+     * @memberof RosterImportComponent
+     */
+    onCancel(): void;
+    /**
+     * Triggers a browser download for a generated blob.
+     * @param {Blob} blob - The file content.
+     * @param {string} fileName - The suggested filename.
+     * @memberof RosterImportComponent
+     */
+    private triggerDownload;
+    /**
+     * MOCK ONLY: returns the next scenario in the cycle so repeated imports show
+     * every result state.
+     * @return {RosterImportMockScenario}
+     * @memberof RosterImportComponent
+     */
+    private nextMockScenario;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RosterImportComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RosterImportComponent, "ieeesa-roster-import", never, { "componentData": { "alias": "componentData"; "required": false; }; }, { "submitFormResponse": "submitFormResponse"; "formCancel": "formCancel"; }, never, never, true, never>;
+}
+export {};

package/lib/components/view-roster/view-roster.component.d.ts

@@ -1,6 +1,7 @@
-import { AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Sort } from '@angular/material/sort';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { MatDialog } from '@angular/material/dialog';
 import { TableColumnSchema, TableActions, AlignType, ChipOption, CheckboxOption, FiltersAndOptions, ExportFormat } from '@ieeesa-npm/presentation';
 import { AlertsService, GlobalErrorHandlerService } from '@ieeesa-npm/utility';
@@ -26,6 +27,10 @@ export declare class ViewRosterComponent implements AfterViewInit, OnDestroy, On
     private globalErrorHandlerService;
     rosterExportService: RosterExportService;
     destroy$: Subject<boolean>;
+    /** Trigger for the "Add" menu (Add Manually / Bulk Import). */
+    addMenuTrigger?: MatMenuTrigger;
+    /** Invisible anchor element the "Add" menu attaches to. */
+    addMenuAnchor?: ElementRef<HTMLElement>;
     constants: any;
     viewRosterConstants: any;
     dialogRef: any;
@@ -149,10 +154,40 @@ export declare class ViewRosterComponent implements AfterViewInit, OnDestroy, On
      */
     onEditUserRoles(selectedUserInfo: GroupUserInfo[]): void;
     /**
-     * Emits openModalNotifier event with GroupFunctionType value as ADD_USER_TO_ROSTER
+     * Handles a click on the data-table's add-user icon. The add icon lives inside
+     * the shared DataTableComponent and only emits (addRow), so we can't attach a
+     * menu trigger to it directly. Instead we position an invisible, fixed-position
+     * anchor at the add icon's on-screen location, then open the menu from that
+     * anchor — so the menu appears directly beneath the add icon (matching the
+     * Figma) rather than at the far-right export area.
      * @memberof ViewRosterComponent
      */
-    onAddNewUser(): void;
+    onAddIconClick(): void;
+    /**
+     * Closes the "Add" menu on window resize/scroll. The menu is anchored to a
+     * point measured at open time, so a layout change (resize/scroll) would leave
+     * it detached from the add icon; closing it avoids showing it in a stale spot.
+     * The user can simply click the add icon again.
+     * @memberof ViewRosterComponent
+     */
+    closeAddMenuOnViewportChange(): void;
+    /**
+     * Places the add-menu anchor at the add-user icon's bottom edge. Locates the
+     * icon by finding the add-user sprite (icon-add-user) within the roster's
+     * data-table action row.
+     * @memberof ViewRosterComponent
+     */
+    private positionAddMenuAnchorAtAddIcon;
+    /**
+     * "Add Manually" menu option — opens the existing add-user-to-roster flow.
+     * @memberof ViewRosterComponent
+     */
+    onAddManually(): void;
+    /**
+     * "Bulk Import" menu option — opens the bulk roster import dialog.
+     * @memberof ViewRosterComponent
+     */
+    onImportRoster(): void;
     /**
      * Handles alerts for success, error, warning.
      * @param {(string | string[])} message -error or warning message

package/lib/groups.component.d.ts

@@ -109,6 +109,14 @@ export declare class GroupsComponent implements OnInit, OnDestroy {
      * @memberof GroupsComponent
      */
     openAddUserRosterModal(selectedGroupInfo: GroupInfo): void;
+    /**
+     * Sets the dialog options for the bulk roster import modal and opens it.
+     * Passes the selected group's id/name to the dynamically-instantiated
+     * RosterImportComponent via the ModalComponent dynamic-input pattern.
+     * @param {GroupInfo} selectedGroupInfo
+     * @memberof GroupsComponent
+     */
+    openRosterImportModal(selectedGroupInfo: GroupInfo): void;
     /**
      * Sets the dialog options for users modal and calls openModal method.
      * @param {GroupInfo} group

package/lib/models/group-function-type.model.d.ts

@@ -7,5 +7,6 @@ export declare enum GroupFunctionType {
     SEARCH = "SEARCH",
     REASSIGN_PARENT_GROUP = "REASSIGN_PARENT_GROUP",
     EDIT_ROSTER_USER_ROLE = "EDIT_ROSTER_USER_ROLE",
-    ADD_USER_TO_ROSTER = "ADD_USER_TO_ROSTER"
+    ADD_USER_TO_ROSTER = "ADD_USER_TO_ROSTER",
+    IMPORT_ROSTER = "IMPORT_ROSTER"
 }

package/lib/models/roster-import.model.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Terminal status of a roster bulk-upload job.
+ */
+export declare enum RosterUploadStatus {
+    PROCESSING = "PROCESSING",
+    COMPLETED = "COMPLETED",
+    FAILED = "FAILED"
+}
+/**
+ * A single row-level error from the roster import validation.
+ */
+export interface RosterUploadError {
+    /** 1-based row number in the uploaded file. */
+    rowNumber: number;
+    /** The field/column the error relates to (e.g. "Name", "Email"). */
+    field?: string;
+    /** The offending value, when relevant (e.g. an unrecognized role). */
+    value?: string;
+    /** Human-readable error message shown in the row-errors list. */
+    errorMessage: string;
+}
+/**
+ * Terminal result of a roster bulk-upload job.
+ *
+ * NOTE: This is a MOCK-friendly shape used to build the UI before the real API
+ * is available. It will be reconciled with the backend contract once shared.
+ */
+export interface RosterUploadResponse {
+    /** Job identifier (unused by the mock flow, kept for parity with the API). */
+    uploadJobId?: string;
+    /** Terminal job status. */
+    status: RosterUploadStatus;
+    /** Total data rows detected in the file (excludes the header row). */
+    totalRecords: number;
+    /** Rows successfully added/updated. */
+    successCount: number;
+    /** Rows skipped due to validation errors. */
+    failureCount: number;
+    /** Row-level errors (present when failureCount > 0). */
+    rowErrors: RosterUploadError[];
+}
+/**
+ * The kind of mock scenario to simulate, so the UI can be exercised against
+ * each Figma state without a backend.
+ */
+export declare enum RosterImportMockScenario {
+    /** All rows imported successfully (Figma: 30 added / 0 skipped). */
+    ALL_SUCCESS = "ALL_SUCCESS",
+    /** Some rows imported, some skipped with errors (partial). */
+    PARTIAL = "PARTIAL",
+    /** Every row skipped with errors (Figma: 0 added / 30 skipped). */
+    ALL_SKIPPED = "ALL_SKIPPED",
+    /** File contained headers but zero data rows (Figma: "No roster data found"). */
+    EMPTY = "EMPTY"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/groups",
-  "version": "0.15.6",
+  "version": "0.15.8",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0"

package/public-api.d.ts

@@ -3,6 +3,7 @@ export * from './lib/components/tree-view/tree-view.component';
 export * from './lib/components/edit-user-roles/edit-user-roles.component';
 export * from './lib/components/reciprocal-credit-section/reciprocal-credit-section.component';
 export * from './lib/components/add-working-groups/add-working-groups.component';
+export * from './lib/components/roster-import/roster-import.component';
 export * from './lib/groups.component';
 export * from './lib/models/create-group.model';
 export * from './lib/models/group-action.model';
@@ -25,5 +26,6 @@ export * from './lib/models/parent-groups-info.model';
 export * from './lib/models/reciprocal-credit.model';
 export * from './lib/services/groups.service';
 export * from './lib/services/roster-export.service';
+export * from './lib/models/roster-import.model';
 export * from './lib/assets/form-validations';
 export * from './lib/groups.module';