مؤلفه های زاویه ای: فرم های ترکیب محور بر وراثت

// src/app/shared/component/base.component.ts

@Component({
  selector: '',
  template: '',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BaseComponent {

  private errorMsg: WritableSignal<string> = signal('');
  private statusMsg: WritableSignal<string> = signal('');
  private ready: WritableSignal<boolean> = signal(false);

  protected componentReady(): void {
    this.ready.set(true);
  }

  protected resetErrorMessage(): void {
    this.errorMsg.set('');
  }

  protected resetStatusMessage(): void {
    this.statusMsg.set('');
  }

  protected updateStatusMessage(message: string = ''): void {
    this.statusMsg.set(message);
  }

  protected updateErrorMessage(message: string = ''): void {
    this.errorMsg.set(message);
  }

  public get isComponentReady(): boolean {
    return this.ready();
  }

  public get errorMessage(): string {
    return this.errorMsg();
  }

  public get statusMessage(): string {
    return this.statusMsg();
  }
}

// src/app/model/domain/chat-room.ts

export class ChatRoom {
  public readonly id: number | string;
  public readonly title: string;
  public readonly description: string;
  public readonly tags: string;
  public readonly guidelinesOrRules: string;
  public readonly visibility: ChatRoomVisibility;

  public constructor(data: ChatRoom) {
    this.id = data.id ?? 0;
    this.title = data.title ?? '';
    this.description = data.description ?? '';
    this.tags = data.tags ?? '';
    this.guidelinesOrRules = data.guidelinesOrRules ?? '';
    this.visibility = data.visibility ?? '';
  }

  public static of(data: ChatRoom): ChatRoom {
    return new ChatRoom(data);
  }

  public static empty(): ChatRoom {
    return new ChatRoom({} as ChatRoom);
  }
}

// src/app/model/form/base.form.ts

export abstract class BaseForm<T> {

  protected formGroup!: FormGroup;

  private submitting: WritableSignal<boolean> = signal(false);
  private formReady: WritableSignal<boolean> = signal(false);
  private formCompleted: WritableSignal<boolean> = signal(false);

  protected constructor() {}

  protected initForm(): void {}

  protected control(name: string): AbstractControl | null | undefined {
    return this.form?.get(name);
  }

  public enableFormComplete(): void {
    this.formCompleted.set(true);
  }

  public disableFormCompleted(): void {
    this.formCompleted.set(false);
  }

  public openForm(): void {
    this.formReady.set(true);
  }

  public startSubmitting(): void {
    this.submitting.set(true);
  }

  public stopSubmitting(): void {
    this.submitting.set(false);
  }

  public get form(): FormGroup {
    return this.formGroup;
  }

  public get value(): T {
    return this.form.value as T;
  }

  public get isFormValid(): boolean {
    return this.formGroup.valid;
  }

  public get isFormCompleted(): boolean {
    return this.formCompleted();
  }

  public get isFormReady(): boolean {
    return this.formReady();
  }

  public get isSubmitting(): boolean {
    return this.submitting();
  }

  public get isNotSubmitting(): boolean {
    return !(this.isSubmitting);
  }

}

  public get title(): AbstractControl | null | undefined {
    return this.control('title');
  }

  public get description(): AbstractControl | null | undefined {
    return this.control('description');
  }

  public get title(): AbstractControl | null | undefined {
    return this.formGroup?.get('title');
  }

  public get description(): AbstractControl | null | undefined {
    return this.formGroup?.get('description');
  }

// src/app/model/form/chat-room.form.ts

export class ChatRoomForm extends BaseForm<CreateChatRoomPayload> {

  private constructor(
      private formBuilder: FormBuilder,
      private chatRoom: ChatRoom) {
    super();
  }

  public get title(): AbstractControl | null | undefined {
    return this.control('title');
  }

  public get description(): AbstractControl | null | undefined {
    return this.control('description');
  }

  public get guidelines(): AbstractControl | null | undefined {
    return this.control('guidelinesOrRules');
  }

  public get tags(): AbstractControl | null | undefined {
    return this.control('tags');
  }

  public get visibility(): AbstractControl | null | undefined {
    return this.control('visibility');
  }

  public get visibilities(): string[] {
    return Object.values(ChatRoomVisibility);
  }

  protected override initForm(): void {
    this.formGroup = this.formBuilder.group({
      title: [this.chatRoom.title, [
        required,
        minLength(10),
        maxLength(500),
      ]],

      description: [this.chatRoom.description, [
        required,
        maxLength(1000),
      ]],

      tags: [this.chatRoom.tags, [
        required,
        minLength(10),
        maxLength(500),
      ]],

      guidelinesOrRules: [this.chatRoom.guidelinesOrRules, [
        required,
        maxLength(1500),
      ]],

      visibility: [this.chatRoom.visibility, [
        required,
        oneOf(ChatRoomVisibility)
      ]],

    });
  }

  public static of(formBuilder: FormBuilder, chatRoom: ChatRoom): ChatRoomForm {
    const chatRoomForm: ChatRoomForm = new ChatRoomForm(formBuilder, chatRoom);
    chatRoomForm.initForm();

    return chatRoomForm;
  }

  public static empty(formBuilder: FormBuilder): ChatRoomForm {
    return new ChatRoomForm(formBuilder, ChatRoom.empty());
  }
}

// src/app/shared/validators/index.ts

export const required = Validators.required;
export const minLength = Validators.minLength;
export const maxLength = Validators.maxLength;

// src/app/model/interface/form/has-form.interface.ts

export interface HasForm {

  formReady(): void;

  initForm(data?: any): void;

  startSubmitting(): void;

  stopSubmitting(): void;

  completeForm(): void;

  get formModel(): BaseForm<any>;

  get payload(): any;

  get isFormReady(): boolean;

  get isFormCompleted(): boolean;

  get isFormValid(): boolean

  get isNotSubmitting(): boolean;

  get isSubmitting(): boolean;
}

@Component({
  selector: 'app-create-chat-room',
  imports: [
    ValidationErrorComponent,
    ReactiveFormsModule,
    FaIconComponent,
  ],
  providers: [
    ChatRoomService,
  ],
  templateUrl: './create-chat-room.html',
  styleUrl: './create-chat-room.css'
})
export class CreateChatRoom extends BaseComponent implements OnInit, HasForm {

  protected readonly chatRoomService: ChatRoomService = inject(ChatRoomService);
  protected readonly formBuilder: FormBuilder = inject(FormBuilder);

  protected readonly chatRoomForm: WritableSignal<ChatRoomForm> = signal(ChatRoomForm.empty(this.formBuilder));

  public ngOnInit(): void {
    this.initForm();
  }

  public formReady(): void {
    this.formModel.openForm();
    this.componentReady();
  }

  public completeForm(): void {
    this.formModel.completeForm();
  }

  public initForm(): void {
    const createChatRoomForm: ChatRoomForm = ChatRoomForm.of(this.formBuilder, ChatRoom.empty());
    this.chatRoomForm.set(createChatRoomForm);

    this.formReady();
  }

  public createChatRoom(): void {
    if (this.isFormValid && this.isNotSubmitting) {
      this.startSubmitting();

      const payload: CreateChatRoomPayload = this.payload;
      this.chatRoomService.create(payload)
        .subscribe({
          next: (response: CreateChatRoomResponse): void => { this.createChatRoomSuccess(response); },
          error: (error: ErrorResponse): void => { this.createChatRoomFailure(error); },
          complete: (): void => { this.createChatRoomComplete(); }
      });
    }
  }

  protected createChatRoomSuccess(result: CreateChatRoomResponse): void {
    this.updateStatusMessage(result.message);
  }

  protected createChatRoomFailure(error: ErrorResponse): void {
    this.updateErrorMessage(error.message);
    this.createChatRoomComplete();
  }

  protected createChatRoomComplete(): void {
    this.stopSubmitting();
    this.completeForm();
  }

  public startSubmitting(): void {
    this.formModel.startSubmitting();
  }

  public stopSubmitting(): void {
    this.formModel.stopSubmitting();
  }

  public get createChatRoomForm(): FormGroup {
    return this.formModel.form;
  }

  public get payload(): CreateChatRoomPayload {
    return this.formModel.value;
  }

  public get formModel(): ChatRoomForm {
    return this.chatRoomForm();
  }

  public get isFormReady(): boolean {
    return this.formModel.isFormReady;
  }

  public get isFormValid(): boolean {
    return this.formModel.isFormValid;
  }

  public get isFormCompleted(): boolean {
    return this.formModel.isFormCompleted;
  }

  public get isSubmitting(): boolean {
    return this.formModel.isSubmitting;
  }

  public get isNotSubmitting(): boolean {
    return this.formModel.isNotSubmitting;
  }

  protected readonly faCheck = faCheck;
  protected readonly faSpinner = faSpinner;
  protected readonly faPlus = faPlus;
}

@if (isFormReady) {
  
}

export type CreateChatRoomPayload = {
  title: string;
  description: string;
  guidelinesOrRules: string;
  tags: string;
  visibility: ChatRoomVisibility | string;
}

public get payload(): CreateLiveStreamPayload {
  const data: CreateLiveStreamPayload = this.formModel.value;
  return {
    ...data,
    startDateTime: addSecondsToDate(this.formModel.startDateTimeValue),
    endDateTime: addSecondsToDate(this.formModel.endDateTimeValue),
  };
}

@if (isComponentReady && isFormReady) {
  
}

  protected formCompleted: WritableSignal<boolean> = signal(false);

  public completeForm(delayToReset: number = 5000): void {
    // Ensure delay is non-negative
    const safeDelay: number = Math.max(0, delayToReset);

    // Mark the form as completed
    this.enableFormComplete();

    // Set a timer to reset form completion status
    timer(safeDelay).pipe(
      // Reset form completion status
      tap(() => this.disableFormCompleted()),
    ).subscribe();
  }

@if (isFormCompleted) {<fa-icon [icon]="faCheck"/>}