Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

8934 registration add an affiliation with typeahead #2135

Merged
Prev Previous commit
Next Next commit
8934-registration-add-an-affiliation-with-typeahead
  • Loading branch information
Leonardo Mendoza Fernadez authored and Leonardo Mendoza Fernadez committed Jan 13, 2024
commit ea532a2ab2c0fb2592d4833ced094a046d7686ad
7 changes: 6 additions & 1 deletion src/app/core/register2/register2.form-adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -122,18 +122,23 @@ export function Register2FormAdapterMixin<T extends Constructor<any>>(base: T) {
const value = formGroup.controls['organization'].value
const departmentName = formGroup.controls['departmentName'].value
const roleTitle = formGroup.controls['roleTitle'].value
const startDateGroup = formGroup.controls['startDateGroup'].value

if (typeof value === 'string') {
return { affiliationName: { value } }
DanielPalafox marked this conversation as resolved.
Show resolved Hide resolved
} else {
return {
affiliationName: { value: value.value },
disambiguatedAffiliationSourceId: {
orgDisambiguatedId: {
value: value.disambiguatedAffiliationIdentifier,
},
departmentName: { value: departmentName },
roleTitle: { value: roleTitle },
affiliationType: { value: 'employment' },
startDate: {
month: startDateGroup.startDateMonth,
year: startDateGroup.startDateYear,
},
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,18 +67,18 @@ label {
padding: 0 !important;
}

.input-box {
flex-grow: 1;
max-width: 402px;
input {
width: 100%;
height: 40px;
margin: 4px 0;
border-width: 1px;
border-style: solid;
padding: 0 12px;
}
}
// .input-box {
// flex-grow: 1;
// max-width: 402px;
// input {
// width: 100%;
// height: 40px;
// margin: 4px 0;
// border-width: 1px;
// border-style: solid;
// padding: 0 12px;
// }
// }

.visibility {
margin-top: 60px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ <h3 i18n="@@register.currentEmployment" class="orc-font-body margin-top-12">
Current employment
</h3>

<div class="announce">
<div class="announce" *ngIf="affiliationFound">
<div>
<img src="/assets/vectors/personal-email-icon.svg" aria-hidden="true" />
</div>
Expand Down Expand Up @@ -39,40 +39,20 @@ <h3 class="orc-font-body" i18n="@@register.thisLooksLikeAPersonalEmail">
'orc-font-body': !platform.columns12,
'orc-font-body-large': platform.columns12
}"
>
<div class="row">
<h2
[ngClass]="{
'orc-font-body': !platform.columns12,
'orc-font-body-large': platform.columns12
}"
>
<strong i18n="@@shared.organization"> Organization </strong>
<span *ngIf="!platform.columns12" class="required">*</span>
</h2>
<p *ngIf="platform.columns12" class="required-information mat-caption">
<span class="required">*</span>
<ng-container i18n="@@shared.requiredInformation"
>Required information
</ng-container>
</p>
</div>
</div>
<hr />
></div>

<div class="row">
<label
for="organization-input"
id="organization-label"
class="mat-caption"
[ngClass]="{
error: organizationIsInvalidAndTouched
error: organizationIsInvalidAndTouched,
}"
>
<strong i18n="@@shared.organization" id="organizationLabel"
>Organization</strong
>
<span class="required">*</span>
</label>
</div>

Expand All @@ -82,11 +62,13 @@ <h3 class="orc-font-body" i18n="@@register.thisLooksLikeAPersonalEmail">
class="mat-form-field-min"
id="cy-org-dd-mat-form"
[ngClass]="{
'two-line-hint': selectedOrganizationFromDatabase?.value.length > 50
'two-line-hint': selectedOrganizationFromDatabase?.value.length > 50,
'selected-org': organizationIsValidAndTouched
}"
>
<input
aria-labelledby="organizationLabel"
[readonly]="organizationIsValidAndTouched"
id="organization-input"
matInput
formControlName="organization"
Expand Down Expand Up @@ -114,22 +96,6 @@ <h3 class="orc-font-body" i18n="@@register.thisLooksLikeAPersonalEmail">
</mat-option>
</ng-container>
</mat-autocomplete>
<mat-hint
*ngIf="selectedOrganizationFromDatabase && displayOrganizationHint"
>
<ng-container i18n="@@record.identifyAS">Identify as:</ng-container>
{{ selectedOrganizationFromDatabase.value }}
</mat-hint>
<mat-hint
*ngIf="
!selectedOrganizationFromDatabase &&
form.get('organization').value &&
displayOrganizationHint
"
i18n="@@record.unidentifiedOrganization"
>
Unidentified organization
</mat-hint>

<button
class="clear"
Expand All @@ -141,22 +107,43 @@ <h3 class="orc-font-body" i18n="@@register.thisLooksLikeAPersonalEmail">
>
<mat-icon>close</mat-icon>
</button>
<mat-error
role="alert"
aria-describedby="organization-label"
class="mat-caption"
*ngIf="organizationFormTouched"
i18n="@@shared.pleaseEnterAnOrganization"
>
Please enter an organization
</mat-error>
<mat-error
*ngIf="form.get('organization').errors?.maxlength"
i18n="@@shared.maxLength.less_than_one_thousand"
>
Must be less than 1000 characters
</mat-error>
</mat-form-field>
<div
class="selected-org orc-font-small-print"
*ngIf="selectedOrganizationFromDatabase && displayOrganizationHint"
>
{{ selectedOrganizationFromDatabase.value }},
{{ selectedOrganizationFromDatabase.city }}
<ng-container *ngIf="selectedOrganizationFromDatabase.city"
>,</ng-container
>
{{ selectedOrganizationFromDatabase.country }}
</div>
<div
class="selected-org orc-font-small-print error"
*ngIf="
!selectedOrganizationFromDatabase &&
form.get('organization').value &&
organizationIsInvalidAndTouched &&
displayOrganizationHint
"
i18n="@@record.unidentifiedOrganization"
>
We can’t identify this organization. Please try entering the
organization name again.
</div>
<div
class="selected-org orc-font-small-print error"
*ngIf="
!selectedOrganizationFromDatabase &&
!form.get('organization').value &&
organizationIsInvalidAndTouched &&
!displayOrganizationHint
"
i18n="@@record.unidentifiedOrganization"
>
Please enter an organization name
</div>
</div>
</section>

Expand All @@ -177,6 +164,7 @@ <h3 class="orc-font-body" i18n="@@register.thisLooksLikeAPersonalEmail">
/>
</mat-form-field>
</div>

<div class="input-container">
<mat-label class="orc-font-small-print"
><ng-container i18n="@@register.xxxxx">Role/Job title</ng-container>
Expand All @@ -194,4 +182,74 @@ <h3 class="orc-font-body" i18n="@@register.thisLooksLikeAPersonalEmail">
/>
</mat-form-field>
</div>

<!-- Start date -->

<div class="input-container" formGroupName="startDateGroup">
<div class="row">
<mat-label
class="orc-font-small-print"
[ngClass]="{
error: form.hasError('date', 'startDateGroup')
}"
>
<strong i18n="@@shared.startDate">Start date</strong>
<label id="family-names-input-label" i18n="@@register.optional"
>(Optional)</label
>
</mat-label>
</div>
<!--Start date year -->
<div class="row date-group mat-form-field-wrapper">
<div class="row date-inputs-container">
<div class="date-input">
<mat-form-field
id="start-date-year-input"
appearance="outline"
class="mat-form-field-min no-hint"
>
<mat-select
aria-label="{{ ariaLabelStartDate + ' ' + ngOrcidYear }}"
placeholder="{{ ngOrcidYear }}"
formControlName="startDateYear"
>
<mat-option i18n="@@shared.year" [value]="">Year</mat-option>
<mat-option *ngFor="let year of years" [value]="year">
{{ year }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Start date month -->
<div class="date-divider">/</div>
<div class="date-input">
<mat-form-field
id="start-date-month-input"
appearance="outline"
class="mat-form-field-min no-hint"
>
<mat-select
aria-label="{{ ariaLabelStartDate + ' ' + ngOrcidMonth }}"
placeholder="{{ ngOrcidMonth }}"
formControlName="startDateMonth"
>
<mat-option i18n="@@shared.month" [value]="">Month</mat-option>
<mat-option *ngFor="let month of months" [value]="month">
{{ month | trailingZeros }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row">
<mat-error
class="mat-caption error-out-input-context"
i18n="@@shared.invalidDate"
*ngIf="form.get('startDateGroup').errors?.date"
>
Invalid date
</mat-error>
</div>
</div>
</div>
</ng-container>
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,50 @@
display: flex;
flex-direction: column;
}
.mat-option {
min-height: 64px;
line-height: 32px;
height: auto;
margin-bottom: 8px;
white-space: normal;
line-height: 1.4;

.title {
display: flex;
width: 100%;
font-weight: 500;
}
}
.title {
p {
margin: 6px 0;
}
}

.selected-org {
margin-top: 8px;
line-height: 18px;
}

.date-inputs-container {
text-align: center;

gap: 8px;
.date-divider {
line-height: 42px;
font-size: 16px;
}
.date-input {
width: 100px;
}
}

::ng-deep {
mat-select {
.mat-select-trigger {
.mat-select-arrow-wrapper {
height: 0;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@use '@angular/material' as mat;
@import 'src/assets/scss/material.orcid-theme.scss';

@mixin theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, accent);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);

::ng-deep {
mat-form-field.selected-org {
.mat-form-field-flex {
background-color: mat.get-color-from-palette(
$background,
ui-background-lightest
);
}
}
}
}

@include theme($orcid-app-theme);
Loading