#19: implement manage publisher page

src/app/core/services/private-catalogs.service.ts

@@ -4,6 +4,7 @@ import { Observable, catchError, map, tap } from 'rxjs';
 import { HttpSharedService } from '../http-shared/http-shared.service';
 import { HttpClient, HttpEvent, HttpRequest } from '@angular/common/http';
 import {
+  AuthorPublisherModel,
   CommentModel,
   PublicSolution,
   ThreadModel,
@@ -377,4 +378,78 @@ export class PrivateCatalogsService {
       }),
     );
   }
+
+  getAuthors(
+    solutionId: string,
+    revisionId: string,
+  ): Observable<AuthorPublisherModel[]> {
+    const url = `${apiConfig.apiBackendURL}/api/solution/${solutionId}/revision/${revisionId}/authors`;
+    return this._httpSharedService.get(url, undefined).pipe(
+      map((res) => res.response_body),
+      catchError((error) => {
+        throw error;
+      }),
+    );
+  }
+
+  addAuthor(
+    solutionId: string,
+    revisionId: string,
+    author: AuthorPublisherModel,
+  ): Observable<AuthorPublisherModel[]> {
+    const url = `${apiConfig.apiBackendURL}/api/solution/${solutionId}/revision/${revisionId}/authors`;
+    const obj = {
+      request_body: author,
+    };
+
+    return this._httpSharedService.put(url, undefined, obj).pipe(
+      map((res) => res.response_body),
+      catchError((error) => {
+        throw error;
+      }),
+    );
+  }
+
+  removeAuthor(
+    solutionId: string,
+    revisionId: string,
+    author: AuthorPublisherModel,
+  ): Observable<AuthorPublisherModel[]> {
+    const url = `${apiConfig.apiBackendURL}/api/solution/${solutionId}/revision/${revisionId}/removeAuthor`;
+    const obj = {
+      request_body: author,
+    };
+
+    return this._httpSharedService.put(url, undefined, obj).pipe(
+      map((res) => res.response_body),
+      catchError((error) => {
+        throw error;
+      }),
+    );
+  }
+
+  getPublisher(solutionId: string, revisionId: string): Observable<string> {
+    const url = `${apiConfig.apiBackendURL}/api/solution/${solutionId}/revision/${revisionId}/publisher`;
+    return this._httpSharedService.get(url, undefined).pipe(
+      map((res) => res.response_body),
+      catchError((error) => {
+        throw error;
+      }),
+    );
+  }
+
+  updatePublisher(
+    solutionId: string,
+    revisionId: string,
+    publisherName: string,
+  ) {
+    const url = `${apiConfig.apiBackendURL}/api/solution/${solutionId}/revision/${revisionId}/publisher`;
+    const obj = publisherName;
+
+    return this._httpSharedService.put(url, undefined, obj).pipe(
+      catchError((error) => {
+        throw error;
+      }),
+    );
+  }
 }

src/app/shared/components/manage-publisher-authors-page/manage-publisher-authors-page.component.html

 <div class="workflow-right-header workflow-header">Manage Authors</div>
+<div style="display: flex; width: 100%; height: 60%; padding: 20px">
+  <div
+    style="
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+      width: 100%;
+      gap: 20px;
+    "
+  >
+    <span>PUBLISHER</span>
+    <mat-divider></mat-divider>
+    <form
+      style="display: flex; flex-direction: column; height: 100%"
+      [formGroup]="publisherForm"
+    >
+      <div
+        style="display: flex; flex-direction: column; flex-grow: 1; gap: 20px"
+      >
+        <mat-label>Publisher Name </mat-label>
+        <div style="display: flex; flex-direction: column">
+          <mat-form-field>
+            <input class="example-full-width" matInput formControlName="name" />
+            @if (publisherForm.value.name) {
+              <button
+                matSuffix
+                mat-icon-button
+                aria-label="Clear"
+                (click)="publisherForm.setValue({ name: '' })"
+              >
+                <mat-icon>close</mat-icon>
+              </button>
+            }
+            @if (
+              publisherForm.controls["name"].hasError("required") &&
+              publisherForm.controls["name"].touched
+            ) {
+              <mat-error class="modal-error"
+                >Publisher name is required</mat-error
+              >
+            }
+
+            @if (
+              publisherForm.controls["name"].errors?.["minlength"] &&
+              publisherForm.controls["name"].touched
+            ) {
+              <mat-error class="modal-error"
+                >Publisher name should contain at least 2 characters.</mat-error
+              >
+            }
+            @if (
+              publisherForm.controls["name"].errors?.["pattern"] &&
+              publisherForm.controls["name"].touched
+            ) {
+              <mat-error class="modal-error"
+                >Publisher name must contain only alphanumeric
+                letters.</mat-error
+              >
+            }
+            @if (publisherForm.get("name")?.hasError("sameAsPublisher")) {
+              <mat-error class="modal-error"
+                >Please type in a new publisher name to save changes.</mat-error
+              >
+            }
+          </mat-form-field>
+        </div>
+      </div>
+
+      <div style="display: flex; justify-content: space-between">
+        <button
+          style="margin-right: 20px; width: 135px"
+          mat-raised-button
+          (click)="onCancelClick()"
+        >
+          Discard changes
+        </button>
+        <button
+          style="margin-right: 20px; width: 100px"
+          color="primary"
+          mat-raised-button
+          (click)="OnEditPublisherClick()"
+          [disabled]="!publisherForm.controls['name'].value"
+        >
+          Save
+        </button>
+      </div>
+    </form>
+  </div>
+  <mat-divider vertical style="height: auto"></mat-divider>
+  <div
+    style="
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+      width: 100%;
+      height: 100%;
+    "
+  >
+    <div style="display: flex; flex-direction: column; gap: 20px; height: 100%">
+      <span>AUTHORS</span>
+      <mat-divider></mat-divider>
+      <mat-chip-set #chipGrid>
+        @for (author of authorsList; track author) {
+          <mat-chip-row (removed)="onRemoveAuthorClick(author)">
+            {{ author.name }}
+            <button matChipRemove [attr.aria-label]="'remove ' + author.name">
+              <mat-icon>cancel</mat-icon>
+            </button>
+          </mat-chip-row>
+        } @empty {
+          <span>No authors listed.</span>
+        }
+      </mat-chip-set>
+      Please add additional names of one or more author of this model.
+      <form
+        style="
+          display: flex;
+          flex-direction: column;
+
+          height: 100%;
+        "
+        [formGroup]="authorForm"
+        #formDirective="ngForm"
+      >
+        <div style="display: flex; flex-direction: column; flex-grow: 1">
+          <div style="display: flex; flex-direction: column">
+            <mat-label class="asterisk--after">Name </mat-label>
+            <mat-form-field>
+              <input
+                class="example-full-width"
+                matInput
+                formControlName="name"
+              />
+              @if (authorForm.value.name) {
+                <button
+                  matSuffix
+                  mat-icon-button
+                  aria-label="Clear"
+                  (click)="authorForm.controls['name'].setValue('')"
+                >
+                  <mat-icon>close</mat-icon>
+                </button>
+              }
+              @if (authorForm.controls["contact"].hasError("required")) {
+                <mat-error class="modal-error">Name is required</mat-error>
+              }
+            </mat-form-field>
+          </div>
+          <div style="display: flex; flex-direction: column">
+            <mat-label class="asterisk--after"> Contact Info</mat-label>
+            <div style="display: flex; flex-direction: column">
+              <mat-form-field>
+                <input
+                  class="example-full-width"
+                  matInput
+                  formControlName="contact"
+                />
+                @if (authorForm.value.contact) {
+                  <button
+                    matSuffix
+                    mat-icon-button
+                    aria-label="Clear"
+                    (click)="authorForm.controls['contact'].setValue('')"
+                  >
+                    <mat-icon>close</mat-icon>
+                  </button>
+                }
+                <mat-hint align="start" class="modal-note example-full-width"
+                  >You can mention Email Address,URL and Phone Number
+                </mat-hint>
+              </mat-form-field>
+              @if (
+                authorForm.controls["contact"].hasError("required") &&
+                authorForm.controls["contact"].touched
+              ) {
+                <mat-error class="modal-error"
+                  >Contact info is required</mat-error
+                >
+              }
+            </div>
+          </div>
+        </div>
+        <button
+          color="primary"
+          style="align-self: end; margin-right: 20px; width: 100px"
+          mat-raised-button
+          (click)="onAddAuthorClick(formDirective)"
+          [disabled]="!authorForm.valid"
+        >
+          Add author
+        </button>
+      </form>
+    </div>
+  </div>
+</div>

src/app/shared/components/manage-publisher-authors-page/manage-publisher-authors-page.component.scss

+.example-full-width {
+  width: 100%;
+}
+.purple {
+  color: #671c9d;
+}
+
+.mat-divider.mat-divider-vertical {
+  border-right-style: solid;
+  border-right-color: rgb(246, 243, 250);
+  border-right-width: 2px;
+}
+
+.modal-note {
+  color: #888;
+  font-size: 12px;
+  font-family: "Open Sans", sans-serif !important;
+}
+
+::ng-deep.mat-mdc-form-field-hint-wrapper,
+::ng-deep.mat-mdc-form-field-error-wrapper {
+  padding: 0px !important;
+}
+
+.asterisk--after:after {
+  content: "*";
+  color: red;
+}
+
+.modal-error {
+  color: red;
+  font-size: 12px;
+  font-family: "Open Sans", sans-serif !important;
+}
+
+.btn-comments-edit {
+  background: #f1f1f1 url("../../../../assets/images/Comment_edit.png")
+    no-repeat 3px center;
+  width: 60px;
+  margin-left: 4px;
+  cursor: pointer;
+}

src/app/shared/components/manage-publisher-authors-page/manage-publisher-authors-page.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import {
+  AbstractControl,
+  AsyncValidatorFn,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  FormGroupDirective,
+  FormsModule,
+  ReactiveFormsModule,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SharedDataService } from 'src/app/core/services/shared-data/shared-data.service';
+import { PublicSolutionsService } from 'src/app/core/services/public-solutions.service';
+import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
+import { Alert, AlertType, AuthorPublisherModel } from '../../models';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { DeleteUserDialogConfirmationActionComponent } from '../delete-user-dialog-confirmation-action/delete-user-dialog-confirmation-action.component';
+import { Observable, map, of } from 'rxjs';
+import { AlertService } from 'src/app/core/services/alert.service';
 
 @Component({
   selector: 'gp-manage-publisher-authors-page',
   standalone: true,
-  imports: [CommonModule],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDividerModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    MatChipsModule,
+    MatIconModule,
+  ],
   templateUrl: './manage-publisher-authors-page.component.html',
-  styleUrl: './manage-publisher-authors-page.component.scss'
+  styleUrl: './manage-publisher-authors-page.component.scss',
 })
-export class ManagePublisherAuthorsPageComponent {
+export class ManagePublisherAuthorsPageComponent implements OnInit {
+  solutionId!: string;
+  revisionId!: string;
+  authorsList!: AuthorPublisherModel[];
+  publisherName!: string;
+  authorForm!: FormGroup;
+  publisherForm!: FormGroup;
+  editPublisher: boolean = false;
 
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private formBuilder: FormBuilder,
+    private privateCatalogsService: PrivateCatalogsService,
+    public dialog: MatDialog,
+    private alertService: AlertService,
+  ) {
+    this.authorForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      contact: ['', Validators.required],
+    });
+
+    this.publisherForm = this.formBuilder.group({
+      name: [
+        '',
+        [
+          Validators.required,
+          Validators.minLength(2),
+          Validators.pattern('^[A-Z|a-z|0-9 ]*$'),
+          // this.notSameAsPublisher(this.publisherName),
+        ],
+        // [],
+      ],
+    });
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.parent?.params.subscribe((params) => {
+      this.solutionId = params['solutionId'];
+      this.revisionId = params['revisionId'];
+      this.loadAuthorList(this.solutionId, this.revisionId);
+      this.loadPublisher(this.solutionId, this.revisionId);
+    });
+  }
+
+  loadAuthorList(solutionId: string, revisionId: string) {
+    this.privateCatalogsService.getAuthors(solutionId, revisionId).subscribe({
+      next: (res) => {
+        this.authorsList = res;
+      },
+      error: (error) => {
+        console.error('Error fetching users:', error);
+      },
+    });
+  }
+
+  loadPublisher(solutionId: string, revisionId: string) {
+    this.privateCatalogsService.getPublisher(solutionId, revisionId).subscribe({
+      next: (res) => {
+        if (res) {
+          this.publisherName = res;
+          this.publisherNameControlValue = res;
+          this.updateValidators();
+        }
+      },
+      error: (error) => {
+        console.error('Error fetching users:', error);
+      },
+    });
+  }
+
+  updatePublisherData(solutionId: string, revisionId: string) {
+    this.privateCatalogsService.getPublisher(solutionId, revisionId).subscribe({
+      next: (res) => {
+        this.publisherName = res;
+        this.publisherNameControlValue = res;
+      },
+      error: (error) => {
+        console.error('Error fetching users:', error);
+      },
+    });
+  }
+
+  onAddAuthorClick(formDirective: FormGroupDirective) {
+    const author = this.authorForm.value;
+
+    this.privateCatalogsService
+      .addAuthor(this.solutionId, this.revisionId, author)
+      .subscribe({
+        next: (res) => {
+          this.authorsList = res;
+          const alert: Alert = {
+            message: '',
+            type: AlertType.Success,
+          };
+
+          alert.message = 'Author added successfully. ';
+          this.alertService.notify(alert, 3000);
+          this.authorForm.reset();
+          formDirective.resetForm();
+        },
+        error: (error) => {
+          const alert: Alert = {
+            message: '',
+            type: AlertType.Error,
+          };
+
+          alert.message =
+            'Error while adding Author :  ' + error.error.response_detail;
+          this.alertService.notify(alert, 3000);
+        },
+      });
+  }
+
+  onRemoveAuthorClick(author: AuthorPublisherModel) {
+    const dialogRef: MatDialogRef<DeleteUserDialogConfirmationActionComponent> =
+      this.dialog.open(DeleteUserDialogConfirmationActionComponent, {
+        data: {
+          dataKey: {
+            title: 'Delete Author',
+            content: `Would you like to delete author  '${author.name}' `,
+            alertMessage: 'Author deleted successfully. ',
+
+            action: () => this.removeAuthor(author),
+          },
+        },
+        autoFocus: false,
+      });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      this.loadAuthorList(this.solutionId, this.revisionId);
+    });
+  }
+
+  OnEditPublisherClick() {
+    if (this.publisherNameControl)
+      this.changeAsyncValidationRules(
+        [this.notSameAsPublisher()],
+        this.publisherNameControl,
+      );
+    if (this.publisherForm.valid)
+      this.privateCatalogsService
+        .updatePublisher(
+          this.solutionId,
+          this.revisionId,
+          this.publisherForm.value.name,
+        )
+        .subscribe({
+          next: (res) => {
+            const alert: Alert = {
+              message: '',
+              type: AlertType.Success,
+            };
+
+            alert.message = 'Publisher updated successfully. ';
+            this.alertService.notify(alert, 3000);
+
+            this.updatePublisherData(this.solutionId, this.revisionId);
+            if (this.publisherNameControl) {
+              this.clearPublisherNameValidation(this.publisherNameControl);
+              this.changeSyncValidationRules(
+                [
+                  Validators.required,
+                  Validators.minLength(2),
+                  Validators.pattern('^[A-Za-z0-9 ]+$'),
+                ],
+                this.publisherNameControl,
+              );
+            }
+            // this.updatePublisherNameControlValidators();
+            /* this.publisherForm.reset();
+            formDirective.resetForm(); */
+          },
+          error: (error) => {
+            console.log({ error });
+          },
+        });
+  }
+
+  removeAuthor(author: AuthorPublisherModel): Observable<any> {
+    return this.privateCatalogsService.removeAuthor(
+      this.solutionId,
+      this.revisionId,
+      author ?? null,
+    );
+  }
+
+  onClickEditPublisher() {
+    this.editPublisher = true;
+  }
+
+  onCancelClick() {
+    this.editPublisher = false;
+    this.publisherForm.setValue({ name: this.publisherName });
+  }
+
+  /* notSameAsPublisher(publisherName: string): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: any } | null => {
+      console.log('publisher name validation', this.publisherName);
+      console.log('control.value validation', control.value);
+
+      const isSame =
+        control.value.trim().toLowerCase() ===
+        publisherName.trim().toLowerCase();
+      console.log({ isSame });
+      return isSame ? { sameAsPublisher: true } : null;
+    };
+  }
+ */
+  /*   notSameAsPublisher(publisherName: string): AsyncValidatorFn {
+    return (
+      control: AbstractControl,
+    ): Observable<{ [key: string]: any } | null> => {
+      if (!control.value) {
+        console.log('inside if');
+        return of(null); // If no value, return null immediately
+      }
+
+      const isSame =
+        control.value.trim().toLowerCase() ===
+        publisherName.trim().toLowerCase();
+      console.log({ isSame });
+
+      return of(isSame ? { sameAsPublisher: true } : null);
+    };
+  }
+ */
+  notSameAsPublisher(): AsyncValidatorFn {
+    return (
+      control: AbstractControl,
+    ): Observable<{ [key: string]: any } | null> => {
+      return of(control.value).pipe(
+        map((value) => {
+          const isSame =
+            value.trim().toLowerCase() ===
+            this.publisherName.trim().toLowerCase();
+          return isSame ? { sameAsPublisher: true } : null;
+        }),
+      );
+    };
+  }
+
+  get publisherNameControl() {
+    return this.publisherForm.get('name');
+  }
+
+  get publisherNameControlValue() {
+    return this.publisherNameControl?.value;
+  }
+
+  set publisherNameControlValue(value) {
+    this.publisherNameControl?.setValue(value, { emitEvent: false });
+  }
+
+  updateValidators(): void {
+    const nameControl = this.publisherNameControl;
+    if (nameControl) {
+      nameControl.setValidators([
+        Validators.required,
+        Validators.minLength(2),
+        Validators.pattern('^[A-Za-z0-9 ]+$'),
+      ]);
+      nameControl.setAsyncValidators(this.notSameAsPublisher());
+      nameControl.updateValueAndValidity({ emitEvent: false });
+    }
+  }
+
+  changeSyncValidationRules(
+    validators: ValidatorFn | ValidatorFn[] | null,
+    control: AbstractControl<any, any>,
+  ): void {
+    control.setValidators(validators);
+  }
+
+  changeAsyncValidationRules(
+    validators: AsyncValidatorFn | AsyncValidatorFn[] | null,
+    control: AbstractControl<any, any>,
+  ): void {
+    control.setAsyncValidators(validators);
+    //  control.addAsyncValidators(validators);
+    control.updateValueAndValidity();
+  }
+
+  clearPublisherNameValidation(control: AbstractControl<any, any>) {
+    control.clearAsyncValidators();
+  }
 }

src/app/shared/components/rate-model-details/rate-model-details.component.scss

@@ -396,7 +396,6 @@
 .mdl-button.btn-primary,
 .mdl-button.btn-secondary {
   box-shadow: none;
-  webkit-box-shadow: none;
   line-height: 27px;
   text-transform: capitalize;
 }