User Management Library

A comprehensive Angular library for user creation and management functionality.

Features

• 🎯 Easy Integration: Simple service-based API for opening user creation modals
• 🎨 Material Design: Built with Angular Material for consistent UI
• 🛡️ Type Safety: Full TypeScript support with comprehensive interfaces
• 🔧 Customizable: Configurable roles, validation, and modal options
• 📱 Responsive: Mobile-friendly design that works on all screen sizes
• ⚡ No inject() Issues: Uses traditional constructor injection to avoid injection context errors

Installation

Install the library via npm:

npm install @your-username/user-management-lib

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install @angular/common @angular/core @angular/cdk @angular/material @angular/forms rxjs

Import Required Modules

In your app module or standalone component, make sure to import:

import { MatDialogModule } from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// In your app.config.ts or app.module.ts
providers: [
  provideAnimations(), // or BrowserAnimationsModule in imports
  // ... other providers
]

Quick Start

1. Import the Service

import { UserManagementLibService, UserCreationResult } from 'user-management-lib';

constructor(private userManagementService: UserManagementLibService) {}

2. Open User Creation Modal

openCreateUserModal() {
  this.userManagementService.openCreateUserModal({
    width: '600px',
    maxWidth: '90vw',
    disableClose: false,
    roles: [
      { value: 'admin', label: 'Administrator' },
      { value: 'user', label: 'Regular User' },
      { value: 'moderator', label: 'Moderator' }
    ]
  }).subscribe((result: UserCreationResult) => {
    if (result && result.success) {
      console.log('User created:', result.user);
      alert(\`User \${result.user?.name} created successfully!\`);
    }
  });
}

API Reference

UserManagementLibService

Methods

openCreateUserModal(options?: UserManagementOptions): Observable<UserCreationResult>

Opens a modal dialog for creating a new user.

Parameters:

• options (optional): Configuration options for the modal

Returns:

• Observable<UserCreationResult>: Emits the result when modal is closed

Interfaces

UserManagementOptions

interface UserManagementOptions {
  roles?: Array<{ value: string; label: string }>;
  width?: string;
  maxWidth?: string;
  disableClose?: boolean;
}

UserCreationResult

interface UserCreationResult {
  success: boolean;
  user?: IUser;
  message?: string;
}

IUser

interface IUser {
  id?: number;
  name: string;
  email: string;
  role: string;
  department?: string;
  phone?: string;
  isActive?: boolean;
  createdAt?: string;
  updatedAt?: string;
}

Components

UserCreateModalComponent

A complete modal dialog for user creation with form validation and error handling.

UserCreateFormComponent

A standalone form component that can be used independently for user creation.

Services

UserApiService

Handles HTTP requests for user operations:

• createUser(userData: CreateUserRequest): Observable<IUser>
• getUsers(): Observable<IUser[]>
• getUserById(id: number): Observable<IUser>
• updateUser(id: number, userData: Partial<IUser>): Observable<IUser>
• deleteUser(id: number): Observable<void>

Examples

Basic Usage

// Simple modal with default roles
this.userManagementService.openCreateUserModal().subscribe((result) => {
  if (result?.success) {
    console.log("New user:", result.user);
  }
});

Custom Roles

// Modal with custom role options
this.userManagementService
  .openCreateUserModal({
    roles: [
      { value: "admin", label: "System Administrator" },
      { value: "manager", label: "Project Manager" },
      { value: "developer", label: "Software Developer" },
      { value: "tester", label: "Quality Assurance" },
    ],
  })
  .subscribe((result) => {
    // Handle result
  });

Custom Modal Size

// Larger modal for more content
this.userManagementService
  .openCreateUserModal({
    width: "800px",
    maxWidth: "95vw",
  })
  .subscribe((result) => {
    // Handle result
  });

Error Handling

The library includes comprehensive error handling:

• 409 Conflict: User with email already exists
• 400 Bad Request: Invalid user data
• 403 Forbidden: Insufficient permissions
• Generic Errors: Network or server issues

Styling

The library uses Angular Material components and can be styled using Material themes. Add custom styles by targeting the .user-management-modal class:

.user-management-modal {
  /* Custom modal styles */
}

Dependencies

• Angular 17+
• Angular Material
• Angular CDK
• RxJS

Contributing

This library is part of the patch tracker application. To modify:

1. Make changes in projects/user-management-lib/
2. Build the library: ng build user-management-lib
3. Test integration in the main app

License

Private - Part of Patch Tracker Application