Skip to content

Commit

Permalink
fix css and lint
Browse files Browse the repository at this point in the history
  • Loading branch information
auumgn committed Apr 25, 2024
1 parent fc00067 commit 758e327
Show file tree
Hide file tree
Showing 14 changed files with 140 additions and 83 deletions.
4 changes: 1 addition & 3 deletions ui/src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,4 @@ import { HttpClient } from '@angular/common/http'
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor() {}
}
export class AppComponent {}
6 changes: 5 additions & 1 deletion ui/src/app/home/home.component.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
@import '~quill/dist/quill.snow.css';
:host {
max-width: 1250px;
display: block;
margin: auto;
height: 100%;
}

.home-container {
border: 2px solid #eeeeee;
border-radius: 5px 0px 0px 5px;
}
2 changes: 1 addition & 1 deletion ui/src/app/home/home.route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const routes: Routes = [
authorities: ['ROLE_USER'],
pageTitle: 'home.title.string',
},
canActivate: [AuthGuard, ManageMemberGuard],
canActivate: [ManageMemberGuard],
},
{
path: 'manage/:id/edit',
Expand Down
101 changes: 46 additions & 55 deletions ui/src/app/home/member-info/member-info-edit.component.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div *ngIf="memberData" class="h-100">
<div *ngIf="memberData" class="home-container">
<div class="p-3 mb-3">
<div class="font-size-14 line-height-150">
Back to
Expand Down Expand Up @@ -84,23 +84,23 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Organization name</h3>

<!-- Billing address -->

<h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
<h3 class="mb-20 font-size-16">Billing address</h3>
<div class="form-group mb-20">
<label
class="wide-text font-size-12 font-weight-bold"
class="w-75"
[ngClass]="{ 'text-danger': editForm.get('street')?.invalid && editForm.get('street')?.touched }"
><span>Street</span
><input
type="text"
class="form-control wide-text-25 w-75"
class="form-control wide-text-25"
name="street"
formControlName="street"
(input)="editForm.get('street')?.markAsUntouched()"
[ngClass]="{
'text-danger': editForm.get('street')?.invalid && editForm.get('street')?.touched,
'input-field-default-border': !editForm.get('street')?.dirty || !editForm.get('street')?.touched
}"
/>Street</label
>
/></label>

<div *ngIf="editForm.get('street')?.invalid && editForm.get('street')?.touched">
<small
Expand All @@ -113,20 +113,20 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
</div>
<div class="form-group mb-20">
<label
class="wide-text font-size-12 font-weight-bold"
class="w-75"
[ngClass]="{ 'text-danger': editForm.get('city')?.invalid && editForm.get('city')?.touched }"
><span>City</span
><input
type="text"
class="form-control wide-text-25 w-75"
class="form-control wide-text-25"
name="city"
formControlName="city"
(input)="editForm.get('city')?.markAsUntouched()"
[ngClass]="{
'text-danger': editForm.get('city')?.invalid && editForm.get('city')?.touched,
'input-field-default-border': !editForm.get('city')?.dirty || !editForm.get('city')?.touched
}"
/>City</label
>
/></label>

<div *ngIf="editForm.get('city')?.invalid && editForm.get('city')?.touched">
<small
Expand All @@ -139,12 +139,13 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
</div>
<div class="form-group mb-20" *ngIf="states">
<label
class="wide-text font-size-12 font-weight-bold"
class="w-75"
[ngClass]="{
'text-danger': editForm.get('state')?.invalid && editForm.get('state')?.touched
}"
><span>State/Province</span
><select
class="form-control font-size-14 wide-text-25 w-75"
class="form-control font-size-14 wide-text-25"
name="state"
formControlName="state"
[ngClass]="{
Expand All @@ -155,26 +156,21 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
<option selected [value]="null">-- No state or province --</option>
<option *ngFor="let state of states" [value]="state.name" class="form-field-text-color-default">
{{ state.name }}
</option></select
>State/Province</label
</option>
</select></label
>
</div>
<div class="form-group mb-20">
<label
class="wide-text font-size-12 font-weight-bold"
class="w-75"
[ngClass]="{ 'text-danger': editForm.get('country')?.invalid && editForm.get('country')?.dirty }"
><input
readonly
class="form-control font-size-14 wide-text-25 w-75"
name="country"
formControlName="country"
/>Country</label
>
><span>Country</span
><input readonly class="form-control font-size-14 wide-text-25" name="country" formControlName="country"
/></label>
</div>
<div class="form-group mb-30">
<label
class="wide-text font-size-12 font-weight-bold"
[ngClass]="{ 'text-danger': editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched }"
<label [ngClass]="{ 'text-danger': editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched }"
><span>ZIP/Postcode</span
><input
type="text"
class="form-control wide-text-25 postcode-input-field"
Expand All @@ -185,8 +181,7 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
'text-danger': editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched,
'input-field-default-border': !editForm.get('postcode')?.dirty || !editForm.get('postcode')?.touched
}"
/>ZIP/Postcode</label
>
/></label>

<div *ngIf="editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched">
<small
Expand Down Expand Up @@ -257,13 +252,13 @@ <h2 class="wide-text font-size-24">Public details</h2>
<div class="mb-5">
<div class="form-group w-75">
<label
class="wide-text font-size-12"
[ngClass]="{
'text-danger':
editForm.get('publicName')?.invalid &&
editForm.get('publicName')?.touched &&
editForm.get('publicName')?.dirty
}"
><span>Public display name</span
><input
type="text"
class="form-control"
Expand All @@ -278,8 +273,7 @@ <h2 class="wide-text font-size-24">Public details</h2>
'input-field-default-border':
!editForm.get('publicName')?.touched || !editForm.get('publicName')?.dirty
}"
/>Public display name</label
>
/></label>

<div *ngIf="editForm.get('publicName')?.invalid">
<small
Expand All @@ -300,19 +294,16 @@ <h2 class="wide-text font-size-24">Public details</h2>
</div>
<div class="form-group">
<!-- eslint-disable-next-line -->
<label class="wide-text font-size-12"
><quill-editor
class="d-block w-75 description"
formControlName="description"
format="html"
[styles]="quillStyles"
[modules]="quillConfig"
[placeholder]="'A brief description of the organization'"
>
</quill-editor
>Organization description</label
<label><span>Organization description</span> </label>
<quill-editor
class="d-block w-75 description"
formControlName="description"
format="html"
[styles]="quillStyles"
[modules]="quillConfig"
[placeholder]="'A brief description of the organization'"
>

</quill-editor>
<div *ngIf="editForm.get('description')?.invalid">
<small
class="wide-text font-size-12 form-text text-danger"
Expand All @@ -322,13 +313,14 @@ <h2 class="wide-text font-size-24">Public details</h2>
</small>
</div>
</div>
<div class="form-group w-75">
<div class="form-group">
<label
class="wide-text font-size-12"
class="w-75"
[ngClass]="{
'text-danger':
editForm.get('website')?.invalid && editForm.get('website')?.touched && editForm.get('website')?.dirty
}"
><span>Website</span
><input
type="text"
class="form-control"
Expand All @@ -342,8 +334,7 @@ <h2 class="wide-text font-size-24">Public details</h2>
editForm.get('website')?.dirty,
'input-field-default-border': !editForm.get('website')?.touched || !editForm.get('website')?.dirty
}"
/>Website</label
>
/></label>

<ng-template #validWebsite>
<small class="wide-text font-size-12 color-gray"
Expand All @@ -364,10 +355,11 @@ <h2 class="wide-text font-size-24">Public details</h2>
</div>
</div>
</div>
<div class="form-group mb-40 w-75">
<div class="form-group mb-40">
<label
[ngClass]="{ 'text-danger': editForm.get('email')?.invalid && editForm.get('email')?.touched }"
class="wide-text font-size-12"
class="w-75"
><span>Email</span
><input
type="text"
class="form-control"
Expand All @@ -378,8 +370,7 @@ <h2 class="wide-text font-size-24">Public details</h2>
'text-danger': editForm.get('email')?.invalid && editForm.get('email')?.touched,
'input-field-default-border': !editForm.get('email')?.touched
}"
/>Email</label
>
/></label>

<ng-template #validEmail>
<small class="wide-text font-size-12 color-gray"
Expand All @@ -397,7 +388,7 @@ <h2 class="wide-text font-size-24">Public details</h2>
</div>
</div>
</div>
<button type="submit" [disabled]="isSaving" class="btn btn-primary">Save changes</button>
<button type="submit" [disabled]="isSaving" class="btn btn-primary mr-1">Save changes</button>
<button type="button" class="btn btn-outline-primary" routerLink="">Cancel</button>
</div>
</form>
Expand All @@ -418,12 +409,12 @@ <h4 class="w-66 font-size-14">ID</h4>
<h4 class="w-33 font-size-14">Type</h4>
</div>
<hr class="green-hr mb-0" />
<ul class="ml-0 pl-0 mb-0" *ngFor="let orgId of orgIdsTransformed | keyvalue; let i = index">
<ul class="ml-0 pl-0 mb-0" *ngFor="let orgId of orgIdsTransformed; let i = index">
<li class="row ml-0 pt-16 pb-16 d-flex justify-content-between contact">
<div class="w-66 line-height-150">{{ orgId.value }}</div>
<div class="w-33 line-height-150">{{ orgId.key }}</div>
<div class="w-66 line-height-150">{{ orgId.id }}</div>
<div class="w-33 line-height-150">{{ orgId.name }}</div>
</li>
<hr *ngIf="!(i === objectKeys(memberData.orgIds).length - 1)" class="mb-0 mt-0" />
<hr *ngIf="!(i === objectKeys(orgIdsTransformed).length - 1)" class="mb-0 mt-0" />
</ul>
</div>
<div *ngIf="memberData.isConsortiumLead">
Expand Down
19 changes: 18 additions & 1 deletion ui/src/app/home/member-info/member-info-edit.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@ small {
line-height: 150%;
}

label {
display: block;
margin-bottom: 0;
letter-spacing: 0.5px;
font-size: 12px;
}

button {
font-size: 14px;
}
Expand Down Expand Up @@ -51,8 +58,9 @@ button {
}

.main-section {
label {
label > span {
font-weight: bold;
display: block;
margin-bottom: 4px;
}
flex: 1;
Expand Down Expand Up @@ -128,3 +136,12 @@ option {
:host ::ng-deep .ql-active .ql-stroke {
stroke: global.$info !important;
}

.description {
line-break: anywhere;
}

.home-container {
border: 2px solid #eeeeee;
border-radius: 5px 0px 0px 5px;
}
38 changes: 34 additions & 4 deletions ui/src/app/home/member-info/member-info-edit.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ import { switchMap, take, takeUntil } from 'rxjs/operators'
import { AccountService } from 'src/app/account'
import { IAccount } from 'src/app/account/model/account.model'
import { EMAIL_REGEXP, URL_REGEXP, ORCID_BASE_URL } from 'src/app/app.constants'
import { ISFAddress } from 'src/app/member/model/salesforce-address.model'
import { ISFAddress, SFAddress } from 'src/app/member/model/salesforce-address.model'
import { ISFCountry } from 'src/app/member/model/salesforce-country.model'
import { ISFState } from 'src/app/member/model/salesforce-country.model copy'
import { ISFMemberData } from 'src/app/member/model/salesforce-member-data.model'
import { SFMemberContact } from 'src/app/member/model/salesforce-member-contact.model'
import { ISFMemberData, SFConsortiumMemberData, SFMemberData } from 'src/app/member/model/salesforce-member-data.model'
import { ISFMemberUpdate, SFMemberUpdate } from 'src/app/member/model/salesforce-member-update.model'
import { MemberService } from 'src/app/member/service/member.service'

Expand All @@ -26,7 +27,8 @@ export class MemberInfoEditComponent implements OnInit, OnDestroy {
account: IAccount | undefined | null
memberData: ISFMemberData | undefined | null
objectKeys = Object.keys
orgIdsTransformed: KeyValue<string, string[]>[] = []
objectValues = Object.values
orgIdsTransformed: { id: string; name: string }[] = []
ORCID_BASE_URL = ORCID_BASE_URL

isSaving = false
Expand Down Expand Up @@ -88,7 +90,35 @@ export class MemberInfoEditComponent implements OnInit, OnDestroy {
)
.subscribe((data) => {
this.memberData = data
this.orgIdsTransformed = Object.entries(this.memberData?.orgIds || {}).map(([key, value]) => ({ key, value }))
this.memberData = new SFMemberData(
'123',
true,
'123',
true,
'rara',
'roro',
'hehe.com',
'Lithuania',
'ruru',
'riri',
'rere',
'[email protected]',
'2022',
'2050',
'',
[new SFConsortiumMemberData('he', 'ho'), new SFConsortiumMemberData('hee', 'hoo')],
[
new SFMemberContact('124', true, ['goob'], 'name', 'phone', 'email'),
new SFMemberContact('124', false, ['goob'], 'name', 'phone', 'email'),
],
{ ROR: ['123', '456'], GRID: ['1213', '1415'] },
new SFAddress('street', 'United Kingdom', 'state', 'Lithuania', 'code', 'postalCode', 'city')
)

this.orgIdsTransformed = Object.entries(this.memberData?.orgIds || {}).flatMap(([name, ids]) =>
ids.map((id: string) => ({ id, name }))
)

this.validateUrl()
if (data) {
this.updateForm(data)
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/member/contact-update.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ export class ContactUpdateComponent implements OnInit, OnDestroy {
account: IAccount | undefined | null
memberData: ISFMemberData | undefined | null
contact: ISFMemberContact | undefined
isSaving: boolean = false
invalidForm: boolean = false
isSaving = false
invalidForm = false
routeData: any
editForm: FormGroup | undefined
contactId: string | undefined
Expand Down
Loading

0 comments on commit 758e327

Please sign in to comment.