Merge pull request #154 from CenterForOpenScience/feat/238-draft-registrations-steps

feat(registries): code refactoring

Author: nmykhalkevch-exoft

src/app/features/registries/components/metadata/registries-license/registries-license.component.html

@@ -1,47 +1,7 @@
-<p-card class="w-full">
-  <h2 class="mb-2">{{ 'shared.license.title' | translate }}</h2>
-  <p class="mb-1">
-    {{ 'shared.license.description' | translate }}
-  </p>
-  <p>
-    {{ 'shared.license.helpText' | translate }}
-    <a href="https://help.osf.io/article/148-licensing">{{ 'common.links.helpGuide' | translate }}</a
-    >.
-  </p>
-  <p-select
-    [options]="licenses()"
-    [(ngModel)]="selectedLicense"
-    optionLabel="name"
-    (onChange)="onSelectLicense($event.value)"
-    class="w-6 mt-4"
-  />
-  @if (selectedLicense) {
-    <p-divider styleClass="mt-3 mb-3" />
-    @if (selectedLicense.requiredFields.length) {
-      <form [formGroup]="licenseForm" class="flex gap-3 mb-3 w-full">
-        <div class="w-6">
-          <label for="licenseYear"> {{ 'common.labels.year' | translate }} </label>
-          <p-datepicker
-            id="licenseYear"
-            formControlName="year"
-            [maxDate]="currentYear"
-            dataType="string"
-            view="year"
-            dateFormat="yy"
-          />
-        </div>
-        <osf-text-input
-          class="w-6"
-          label="shared.license.copyrightHolders"
-          [control]="licenseForm.controls['copyrightHolders']"
-          [maxLength]="inputLimits.fullName.maxLength"
-        >
-        </osf-text-input>
-      </form>
-    }
-
-    <p class="highlight-block">
-      <osf-truncated-text [text]="selectedLicense.text | interpolate: licenseForm.value" />
-    </p>
-  }
-</p-card>
+<osf-license
+  [licenses]="licenses()"
+  [selectedLicenseId]="selectedLicense()?.id"
+  [selectedLicenseOptions]="selectedLicense()?.options"
+  (createLicense)="createLicense($event)"
+  (selectLicense)="selectLicense($event)"
+/>

src/app/features/registries/components/metadata/registries-license/registries-license.component.ts

@@ -1,37 +1,18 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslatePipe } from '@ngx-translate/core';
-
-import { Card } from 'primeng/card';
-import { DatePicker } from 'primeng/datepicker';
-import { Divider } from 'primeng/divider';
-import { Select } from 'primeng/select';
-
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
-import { License } from '@osf/features/registries/models';
-import { FetchLicenses, RegistriesSelectors } from '@osf/features/registries/store';
-import { TextInputComponent, TruncatedTextComponent } from '@osf/shared/components';
+import { FetchLicenses, RegistriesSelectors, SaveLicense } from '@osf/features/registries/store';
+import { LicenseComponent } from '@osf/shared/components';
 import { InputLimits } from '@osf/shared/constants';
-import { InterpolatePipe } from '@osf/shared/pipes';
+import { License, LicenseOptions } from '@osf/shared/models';
 import { CustomValidators } from '@osf/shared/utils';
 
 @Component({
   selector: 'osf-registries-license',
-  imports: [
-    Card,
-    TranslatePipe,
-    Select,
-    FormsModule,
-    Divider,
-    TruncatedTextComponent,
-    DatePicker,
-    TextInputComponent,
-    InterpolatePipe,
-    ReactiveFormsModule,
-  ],
+  imports: [FormsModule, ReactiveFormsModule, LicenseComponent],
   templateUrl: './registries-license.component.html',
   styleUrl: './registries-license.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -41,11 +22,11 @@ export class RegistriesLicenseComponent {
   private readonly draftId = this.route.snapshot.params['id'];
   private readonly fb = inject(FormBuilder);
 
-  protected actions = createDispatchMap({ fetchLicenses: FetchLicenses });
+  protected actions = createDispatchMap({ fetchLicenses: FetchLicenses, saveLicense: SaveLicense });
   protected licenses = select(RegistriesSelectors.getLicenses);
   protected inputLimits = InputLimits;
 
-  selectedLicense: License | null = null;
+  selectedLicense = select(RegistriesSelectors.getSelectedLicense);
   currentYear = new Date();
   licenseYear = this.currentYear;
   licenseForm = this.fb.group({
@@ -57,7 +38,11 @@ export class RegistriesLicenseComponent {
     this.actions.fetchLicenses();
   }
 
-  onSelectLicense(license: License): void {
-    console.log('Selected License:', license);
+  createLicense(licenseDetails: { id: string; licenseOptions: LicenseOptions }) {
+    this.actions.saveLicense(this.draftId, licenseDetails.id, licenseDetails.licenseOptions);
+  }
+
+  selectLicense(license: License) {
+    this.actions.saveLicense(this.draftId, license.id);
   }
 }

src/app/features/registries/mappers/licenses.mapper.ts

@@ -1,4 +1,4 @@
-import { License, LicensesResponseJsonApi } from '../models';
+import { License, LicensesResponseJsonApi } from '@osf/shared/models';
 
 export class LicensesMapper {
   static fromLicensesResponse(response: LicensesResponseJsonApi): License[] {

src/app/features/registries/mappers/registration.mapper.ts

@@ -8,6 +8,10 @@ export class RegistrationMapper {
       title: response.attributes.title,
       description: response.attributes.description,
       registrationSchemaId: response.relationships.registration_schema?.data?.id || '',
+      license: {
+        id: response.relationships.license?.data?.id || '',
+        options: response.attributes.node_license,
+      },
     };
   }
 }

src/app/features/registries/models/index.ts

@@ -1,4 +1,3 @@
-export * from './license.model';
 export * from './licenses-json-api.model';
 export * from './page-schema.model';
 export * from './project';

src/app/features/registries/models/license.model.ts

@@ -1,7 +0,0 @@
-export interface License {
-  id: string;
-  name: string;
-  requiredFields: string[];
-  url: string;
-  text: string;
-}

src/app/features/registries/models/licenses-json-api.model.ts

@@ -1,16 +1,21 @@
-import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+import { LicenseRecordJsonApi } from '@shared/models';
 
-export interface LicensesResponseJsonApi {
-  data: LicenseDataJsonApi[];
-  meta: MetaJsonApi;
-  links: PaginationLinksJsonApi;
+export interface LicenseRelationshipJsonApi {
+  license: {
+    data: {
+      id: string;
+      type: 'licenses';
+    };
+  };
 }
 
-export type LicenseDataJsonApi = ApiData<LicenseAttributesJsonApi, null, null, null>;
-
-interface LicenseAttributesJsonApi {
-  name: string;
-  required_fields: string[];
-  url: string;
-  text: string;
+export interface LicensePayloadJsonApi {
+  data: {
+    type: 'draft_registrations';
+    id: string;
+    relationships: LicenseRelationshipJsonApi;
+    attributes: {
+      node_license?: LicenseRecordJsonApi;
+    };
+  };
 }

src/app/features/registries/models/registration-json-api.model.ts

@@ -1,4 +1,5 @@
 import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+import { LicenseOptions } from '@osf/shared/models';
 
 export interface RegistrationResponseJsonApi {
   data: RegistrationDataJsonApi;
@@ -20,7 +21,7 @@ interface RegistrationAttributesJsonApi {
   datetime_updated: string;
   description: string;
   has_project: boolean;
-  node_license: string | null;
+  node_license: LicenseOptions;
   registration_metadata: Record<string, unknown>;
   registration_responses: Record<string, unknown>;
   tags: string[];
@@ -30,8 +31,14 @@ interface RegistrationAttributesJsonApi {
 interface RegistrationRelationshipsJsonApi {
   registration_schema: {
     data: {
-      id: '58fd62fcda3e2400012ca5c1';
+      id: string;
       type: 'registration-schemas';
     };
   };
+  license: {
+    data: {
+      id: string;
+      type: 'licenses';
+    };
+  };
 }

src/app/features/registries/models/registration.model.ts

@@ -1,6 +1,12 @@
+import { LicenseOptions } from '@osf/shared/models';
+
 export interface Registration {
   id: string;
   title: string;
   description: string;
   registrationSchemaId: string;
+  license: {
+    id: string;
+    options: LicenseOptions;
+  };
 }

src/app/features/registries/registries.routes.ts

@@ -10,14 +10,29 @@ import { SUBJECTS_SERVICE } from '@osf/shared/tokens/subjects.token';
 
 import { ModerationState } from '../moderation/store';
 
-import { RegistrationSubjectsService } from './services';
+import {
+  LicensesHandlers,
+  ProjectsHandlers,
+  ProvidersHandlers,
+  RegistrationContributorsHandlers,
+  SubjectsHandlers,
+} from './store/handlers';
+import { LicensesService, RegistrationContributorsService, RegistrationSubjectsService } from './services';
 
 export const registriesRoutes: Routes = [
   {
     path: '',
     component: RegistriesComponent,
     providers: [
       provideStates([RegistriesState, ContributorsState, SubjectsState]),
+      ProvidersHandlers,
+      ProjectsHandlers,
+      LicensesHandlers,
+      RegistrationContributorsHandlers,
+      SubjectsHandlers,
+      RegistrationSubjectsService,
+      RegistrationContributorsService,
+      LicensesService,
       {
         provide: SUBJECTS_SERVICE,
         useClass: RegistrationSubjectsService,