fix(moderation): added API for settings

src/app/features/moderation/components/preprint-moderation-settings/preprint-moderation-settings.component.html

@@ -1,170 +1,48 @@
-<div>
-  <p-message styleClass="w-full" icon="fas fa-warning" severity="warn">
-    <span class="flex flex-wrap">
-      {{ 'moderation.preprintSettings.warning' | translate }}
-      <a class="mx-1 font-bold" href="mailto:support@osf.io">support&#64;osf.io</a>
-      {{ 'moderation.preprintSettings.warningForAssistance' | translate }}
-    </span>
-  </p-message>
-
-  <form [formGroup]="settingsForm" class="flex flex-column gap-4 mt-4">
-    @for (section of sections; track $index) {
-      <p-card>
-        <h2>{{ section.title | translate }}</h2>
-
-        @if (section.description) {
-          <p class="mt-4">{{ section.description | translate }}</p>
-        }
-
-        <div class="flex flex-column gap-3 mt-4">
-          @for (option of section.options; track $index) {
-            <div class="flex align-items-start gap-2">
-              <p-radioButton
-                [name]="section.control"
-                [value]="option.value"
-                [formControlName]="section.control"
-                [inputId]="section.control + '-' + option.value"
-              />
-              <div>
-                <label [for]="section.control + '-' + option.value" class="font-bold">
-                  {{ option.label | translate }}
-                </label>
-                <p>
-                  {{ option.description | translate }}
-                </p>
-              </div>
-            </div>
+@if (isLoading()) {
+  <div class="flex flex-column align-items-center">
+    <osf-loading-spinner />
+  </div>
+} @else {
+  <div>
+    <p-message styleClass="w-full" icon="fas fa-warning" severity="warn">
+      <span class="flex flex-wrap">
+        {{ 'moderation.preprintSettings.warning' | translate }}
+        <p class="mx-1 font-bold">{{ settings()?.supportEmail ?? supportEmail }}</p>
+        {{ 'moderation.preprintSettings.warningForAssistance' | translate }}
+      </span>
+    </p-message>
+
+    <form [formGroup]="settingsForm" class="flex flex-column gap-4 mt-4">
+      @for (section of sections; track $index) {
+        <p-card>
+          <h2>{{ section.title | translate }}</h2>
+
+          @if (section.description) {
+            <p class="mt-4">{{ section.description | translate }}</p>
           }
-        </div>
-      </p-card>
-    }
-  </form>
-
-  <!-- <form [formGroup]="settingsForm" class="flex flex-column gap-4 mt-4">
-    <p-card>
-      <h2>{{ 'moderation.preprintSettings.moderationType.title' | translate }}</h2>
-
-      <div class="flex flex-column gap-3 mt-4">
-        <div class="flex align-items-start gap-2">
-          <p-radioButton name="moderationType" value="pre" formControlName="moderationType" inputId="pre-moderation" />
-
-          <div>
-            <label for="pre-moderation">
-              {{ 'moderation.preprintSettings.moderationType.pre' | translate }}
-            </label>
-
-            <div>
-              {{ 'moderation.preprintSettings.moderationType.preDescription' | translate }}
-            </div>
-          </div>
-        </div>
-
-        <div class="flex align-items-start gap-2">
-          <p-radioButton
-            name="moderationType"
-            value="post"
-            formControlName="moderationType"
-            inputId="post-moderation"
-          />
-          <div>
-            <label for="post-moderation">
-              {{ 'moderation.preprintSettings.moderationType.post' | translate }}
-            </label>
-
-            <div>
-              {{ 'moderation.preprintSettings.moderationType.postDescription' | translate }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </p-card>
-
-    <p-card>
-      <h2>{{ 'moderation.preprintSettings.commentVisibility.title' | translate }}</h2>
-
-      <p class="my-4">{{ 'moderation.preprintSettings.commentVisibility.description' | translate }}</p>
 
-      <div class="flex flex-column gap-3">
-        <div class="flex align-items-start gap-2">
-          <p-radioButton
-            name="commentVisibility"
-            value="moderators"
-            formControlName="commentVisibility"
-            inputId="comment-moderators"
-          />
-          <div>
-            <label for="comment-moderators">
-              {{ 'moderation.preprintSettings.commentVisibility.moderators' | translate }}
-            </label>
-
-            <p>
-              {{ 'moderation.preprintSettings.commentVisibility.moderatorsDescription' | translate }}
-            </p>
-          </div>
-        </div>
-
-        <div class="flex align-items-start gap-2">
-          <p-radioButton
-            name="commentVisibility"
-            value="moderatorsAndContributors"
-            formControlName="commentVisibility"
-            inputId="comment-moderators-contributors"
-          />
-          <div>
-            <label for="comment-moderators-contributors">
-              {{ 'moderation.preprintSettings.commentVisibility.moderatorsAndContributors' | translate }}
-            </label>
-
-            <p>
-              {{ 'moderation.preprintSettings.commentVisibility.moderatorsAndContributorsDescription' | translate }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </p-card>
-
-    <p-card>
-      <h2>{{ 'moderation.preprintSettings.moderatorComments.title' | translate }}</h2>
-
-      <p class="my-4">{{ 'moderation.preprintSettings.moderatorComments.description' | translate }}</p>
-
-      <div class="flex flex-column gap-3">
-        <div class="flex align-items-start gap-2">
-          <p-radioButton
-            name="moderatorComments"
-            value="anonymized"
-            formControlName="moderatorComments"
-            inputId="anonymized-comments"
-          />
-          <div>
-            <label for="anonymized-comments">
-              {{ 'moderation.preprintSettings.moderatorComments.anonymized' | translate }}
-            </label>
-
-            <p>
-              {{ 'moderation.preprintSettings.moderatorComments.anonymizedDescription' | translate }}
-            </p>
-          </div>
-        </div>
-
-        <div class="flex align-items-start gap-2">
-          <p-radioButton
-            name="moderatorComments"
-            value="named"
-            formControlName="moderatorComments"
-            inputId="named-comments"
-          />
-          <div>
-            <label for="named-comments">
-              {{ 'moderation.preprintSettings.moderatorComments.named' | translate }}
-            </label>
-
-            <p>
-              {{ 'moderation.preprintSettings.moderatorComments.namedDescription' | translate }}
-            </p>
+          <div class="flex flex-column gap-3 mt-4">
+            @for (option of section.options; track $index) {
+              <div class="flex align-items-start gap-2">
+                <p-radioButton
+                  [name]="section.control"
+                  [value]="option.value"
+                  [formControlName]="section.control"
+                  [inputId]="section.control + '-' + option.value"
+                />
+                <div>
+                  <label [for]="section.control + '-' + option.value" class="font-bold">
+                    {{ option.label | translate }}
+                  </label>
+                  <p>
+                    {{ option.description | translate }}
+                  </p>
+                </div>
+              </div>
+            }
           </div>
-        </div>
-      </div>
-    </p-card>
-  </form> -->
-</div>
+        </p-card>
+      }
+    </form>
+  </div>
+}

src/app/features/moderation/components/preprint-moderation-settings/preprint-moderation-settings.component.ts

@@ -1,38 +1,79 @@
+import { createDispatchMap, select, Store } from '@ngxs/store';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Card } from 'primeng/card';
 import { Message } from 'primeng/message';
 import { RadioButton } from 'primeng/radiobutton';
 
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { map, of } from 'rxjs';
+
+import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import { LoadingSpinnerComponent } from '@osf/shared/components';
+import { DEFAULT_SUPPORT_EMAIL } from '@osf/shared/constants';
 
 import { PREPRINT_SETTINGS_SECTIONS } from '../../constants';
-import { CommentVisibilityType, ModerationType, ModeratorsCommentsType, SettingsSectionControl } from '../../enums';
+import { SettingsSectionControl } from '../../enums';
+import { GetPreprintProvider, PreprintModerationSelectors } from '../../store/preprint-moderation';
 
 @Component({
   selector: 'osf-preprint-moderation-settings',
-  imports: [TranslatePipe, ReactiveFormsModule, Card, RadioButton, Message],
+  imports: [TranslatePipe, ReactiveFormsModule, Card, RadioButton, Message, LoadingSpinnerComponent],
   templateUrl: './preprint-moderation-settings.component.html',
   styleUrl: './preprint-moderation-settings.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PreprintModerationSettingsComponent implements OnInit {
-  private fb = inject(FormBuilder);
+  private readonly route = inject(ActivatedRoute);
+  private readonly store = inject(Store);
+  private readonly fb = inject(FormBuilder);
+
+  private readonly actions = createDispatchMap({ getPreprintProvider: GetPreprintProvider });
+  readonly providerId = toSignal(this.route.parent?.params.pipe(map((params) => params['id'])) ?? of(undefined));
+
   settingsForm!: FormGroup;
   sections = PREPRINT_SETTINGS_SECTIONS;
 
+  supportEmail = DEFAULT_SUPPORT_EMAIL;
+
+  isLoading = select(PreprintModerationSelectors.arePreprintProviderLoading);
+
+  settings = computed(() =>
+    this.store.selectSignal(PreprintModerationSelectors.getPreprintProvider)()(this.providerId())
+  );
+
+  constructor() {
+    effect(() => {
+      if (this.settings()) {
+        this.updateForm();
+      }
+    });
+  }
+
   ngOnInit(): void {
+    this.actions.getPreprintProvider(this.providerId());
     this.initForm();
   }
 
   private initForm(): void {
     this.settingsForm = this.fb.group({
-      [SettingsSectionControl.ModerationType]: [ModerationType.Pre],
-      [SettingsSectionControl.CommentVisibility]: [CommentVisibilityType.Moderators],
-      [SettingsSectionControl.ModeratorComments]: [ModeratorsCommentsType.Anonymized],
+      [SettingsSectionControl.ModerationType]: this.settings()?.reviewsWorkflow,
+      [SettingsSectionControl.CommentVisibility]: this.settings()?.reviewsCommentsPrivate,
+      [SettingsSectionControl.ModeratorComments]: this.settings()?.reviewsCommentsAnonymous,
     });
 
     this.settingsForm.disable();
   }
+
+  private updateForm() {
+    this.settingsForm.patchValue({
+      [SettingsSectionControl.ModerationType]: this.settings()?.reviewsWorkflow,
+      [SettingsSectionControl.CommentVisibility]: this.settings()?.reviewsCommentsPrivate,
+      [SettingsSectionControl.ModeratorComments]: this.settings()?.reviewsCommentsAnonymous,
+    });
+  }
 }

src/app/features/moderation/constants/preprint-settings-sections.const.ts

@@ -1,4 +1,4 @@
-import { CommentVisibilityType, ModerationType, ModeratorsCommentsType, SettingsSectionControl } from '../enums';
+import { ModerationType, SettingsSectionControl } from '../enums';
 
 export const PREPRINT_SETTINGS_SECTIONS = [
   {
@@ -23,12 +23,12 @@ export const PREPRINT_SETTINGS_SECTIONS = [
     description: 'moderation.preprintSettings.commentVisibility.description',
     options: [
       {
-        value: CommentVisibilityType.Moderators,
+        value: true,
         label: 'moderation.preprintSettings.commentVisibility.moderators',
         description: 'moderation.preprintSettings.commentVisibility.moderatorsDescription',
       },
       {
-        value: CommentVisibilityType.ModeratorsAndContributors,
+        value: false,
         label: 'moderation.preprintSettings.commentVisibility.moderatorsAndContributors',
         description: 'moderation.preprintSettings.commentVisibility.moderatorsAndContributorsDescription',
       },
@@ -40,12 +40,12 @@ export const PREPRINT_SETTINGS_SECTIONS = [
     description: 'moderation.preprintSettings.moderatorComments.description',
     options: [
       {
-        value: ModeratorsCommentsType.Anonymized,
+        value: true,
         label: 'moderation.preprintSettings.moderatorComments.anonymized',
         description: 'moderation.preprintSettings.moderatorComments.anonymizedDescription',
       },
       {
-        value: ModeratorsCommentsType.Named,
+        value: false,
         label: 'moderation.preprintSettings.moderatorComments.named',
         description: 'moderation.preprintSettings.moderatorComments.namedDescription',
       },

src/app/features/moderation/enums/index.ts

@@ -1,9 +1,7 @@
 export * from './add-moderator-type.enum';
 export * from './collection-moderation-tab.enum';
-export * from './comment-visibility-type.enum';
 export * from './moderation-type.enum';
 export * from './moderator-permission.enum';
-export * from './moderators-comments-type.enum';
 export * from './preprint-moderation-tab.enum';
 export * from './registry-moderation-tab.enum';
 export * from './settings-section-control.enum';

src/app/features/moderation/enums/moderation-type.enum.ts

@@ -1,4 +1,4 @@
 export enum ModerationType {
-  Pre = 'pre',
-  Post = 'post',
+  Pre = 'pre-moderation',
+  Post = 'post-moderation',
 }

src/app/features/moderation/mappers/index.ts

@@ -1,2 +1,2 @@
 export * from './moderation.mapper';
-export * from './preprint-review-action.mapper';
+export * from './preprint-moderation.mapper';