feat(registries): code refactoring

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;
-}