diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 975b2494a833ef969576f2aab92d2674a21bff5c..0b0fe87f001907b01dc44a488678e1714ce3c174 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,20 +9,18 @@ import { OrientationFormComponent } from './form/orientation-form/orientation-fo import { AdminGuard } from './guards/admin.guard'; import { AuthGuard } from './guards/auth.guard'; import { LoginGuard } from './guards/login.guard'; -import { DeactivateGuard } from './guards/deactivate.guard'; import { LegalNoticeComponent } from './legal-notice/legal-notice.component'; import { LoginComponent } from './login/login.component'; import { NewsletterSubscriptionComponent } from './newsletter-subscription/newsletter-subscription.component'; import { PageComponent } from './page/page.component'; -import { EditComponent } from './profile/edit/edit.component'; import { ResetEmailComponent } from './reset-email/reset-email.component'; import { ResetPasswordComponent } from './reset-password/reset-password.component'; import { StructureResolver } from './resolvers/structure.resolver'; import { PasswordFormComponent } from './shared/components'; -import { StructureJoinComponent } from './structure/structure-join/structure-join.component'; import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component'; import { StructureListComponent } from './structure-list/structure-list.component'; import { StructureExcludeComponent } from './structure/structure-exclude/structure-exclude.component'; +import { StructureJoinComponent } from './structure/structure-join/structure-join.component'; const footerOutletRoute: Route = { path: '', @@ -143,12 +141,6 @@ const routes: Routes = [ canActivate: [AuthGuard], loadChildren: () => import('./profile/profile.module').then((m) => m.ProfileModule), }, - { - path: 'edit', - canActivate: [AuthGuard], - component: EditComponent, - }, - footerOutletRoute, { path: '', outlet: 'left-pane', diff --git a/src/app/profile/profile-routing.module.ts b/src/app/profile/profile-routing.module.ts index 688a99bc9c395c5cddf04e09b4d4d6fb22f2ddd3..0143e14e2c58be6d1d7ccedcb92774800ff74659 100644 --- a/src/app/profile/profile-routing.module.ts +++ b/src/app/profile/profile-routing.module.ts @@ -1,13 +1,28 @@ import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; +import { Routes, RouterModule, Route } from '@angular/router'; import { RoleGuard } from '../guards/role.guard'; import { StructureResolver } from '../resolvers/structure.resolver'; import { RouteRole } from '../shared/enum/routeRole.enum'; import { StructureMembersManagementComponent } from './structure-members-management/structure-members-management.component'; import { ProfileComponent } from './profile.component'; import { StructureEditionSummaryComponent } from './structure-edition-summary/structure-edition-summary.component'; +import { AuthGuard } from '../guards/auth.guard'; +import { EditComponent } from './edit/edit.component'; +import { FooterComponent } from '../footer/footer.component'; + +const footerOutletRoute: Route = { + path: '', + outlet: 'footer', + component: FooterComponent, +}; const routes: Routes = [ + { + path: 'edit', + canActivate: [AuthGuard], + component: EditComponent, + }, + footerOutletRoute, { path: '', children: [ diff --git a/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.html b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.html new file mode 100644 index 0000000000000000000000000000000000000000..af05c37846ed506dc5297c93bd01ed9365ba8567 --- /dev/null +++ b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.html @@ -0,0 +1,18 @@ +<div class="structureMember"> + <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFill> + <app-svg-icon + class="avatar hide-on-mobile" + [type]="'avatar'" + [icon]="'defaultAvatar'" + [iconClass]="'icon-40'" + ></app-svg-icon> + <div class="nameJobSection" fxLayout="column" fxLayoutAlign="start start"> + <a routerLink="/profile/{{ member._id }}" class="name">{{ member.name }} {{ member.surname }}</a> + <p class="jobEmployer">{{ getJobEmployer() }}</p> + </div> + <div fxLayout="column" fxLayoutAlign="space-between start" fxLayoutGap="4px"> + <p>{{ member.phone }}</p> + <a class="email" href="mailto:{{ member.email }}">{{ member.email }}</a> + </div> + </div> +</div> diff --git a/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..f559d1d63a761a23491bfa63b764658bcb44dc7a --- /dev/null +++ b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss @@ -0,0 +1,38 @@ +@import '../../../../assets/scss/color'; +@import '../../../../assets/scss/typography'; +@import '../../../../assets/scss/breakpoint'; +@import '../../../../assets/scss/shapes'; + +.structureMember { + @include lato-regular-14; + + .avatar { + display: flex; + align-items: center; + background-color: $grey-8; + border-radius: 4px; + } + + p { + margin: 0; + &.jobEmployer { + display: flex; + height: 34px; + align-items: center; + } + } + a { + &.name { + @include lato-bold-14; + color: $black; + } + &.email { + text-decoration: underline; + color: $grey-1; + } + } + + .nameJobSection { + width: 50%; + } +} diff --git a/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.ts b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..7e49f99ef1f59ebb8eab6238d4b9bdb241eeb3e6 --- /dev/null +++ b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.ts @@ -0,0 +1,26 @@ +import { Component, Input } from '@angular/core'; +import { User } from '../../../models/user.model'; + +@Component({ + selector: 'app-profile-structure-member', + templateUrl: './profile-structure-member.component.html', + styleUrls: ['./profile-structure-member.component.scss'] +}) +export class ProfileStructureMemberComponent { + @Input() public member: User; + + constructor() {} + + getJobEmployer(): string { + if (this.member.job?.name && this.member.employer?.name) { + return this.member.job.name + ', ' + this.member.employer.name; + } + if (this.member.job?.name && !this.member.employer?.name) { + return this.member.job.name; + } + if (!this.member.job?.name && this.member.employer?.name) { + return this.member.employer.name; + } + return ''; + } +} diff --git a/src/app/profile/profile-structure/profile-structure.component.html b/src/app/profile/profile-structure/profile-structure.component.html new file mode 100644 index 0000000000000000000000000000000000000000..5d6c08ddcb9acd126f5864e93cb248614c9cb7be --- /dev/null +++ b/src/app/profile/profile-structure/profile-structure.component.html @@ -0,0 +1,140 @@ +<div class="structureCard" fxLayout="column" fxLayoutAlign="center" [ngClass]="{ fold: !showDetails }"> + <div + class="collapseHeader" + fxLayout="row" + fxLayoutAlign="space-between center" + fxLayoutGap="20px" + (click)="toggleDetails()" + > + <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px"> + <app-svg-icon [type]="'ico'" [icon]="'structureAvatar'" [iconClass]="'icon-52'"></app-svg-icon> + <div fxLayout="column" fxLayoutAlign="space-between start"> + <p class="structureName">{{ structureWithOwners.structure.structureName }}</p> + <p class="structureType">{{ getStructureTypeLabel() }}</p> + </div> + </div> + <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px"> + <div *ngIf="!isPublic && !isValid()" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="7px"> + <app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'"></app-svg-icon> + <p class="invalidText hide-on-mobile"> + Informations + <br /> + manquantes + </p> + </div> + <app-svg-icon *ngIf="!showDetails" [type]="'ico'" [icon]="'unfold'" [iconClass]="'icon-26'"></app-svg-icon> + <app-svg-icon *ngIf="showDetails" [type]="'ico'" [icon]="'fold'" [iconClass]="'icon-26'"></app-svg-icon> + </div> + </div> + <div [@collapse]="showDetails"> + <div class="collapseContent" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px"> + <div fxLayout="column"> + <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px"> + <p class="section-title">informations</p> + <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="12px"> + <app-button + *ngIf="!isPublic" + class="hide-on-mobile" + [type]="'button'" + [iconBtn]="'eyePassword'" + [iconType]="'form'" + [text]="'Voir la structure'" + [style]="buttonTypeEnum.SecondaryWide" + routerLink="./" + [queryParams]="{ id: structureWithOwners.structure._id }" + [routerLinkActive]="'active'" + ></app-button> + <app-button + *ngIf="!isPublic" + class="hide-on-desktop" + [type]="'button'" + [iconBtn]="'eyePassword'" + [iconType]="'form'" + [style]="buttonTypeEnum.SecondaryOnlyIcon" + routerLink="./" + [queryParams]="{ id: structureWithOwners.structure._id }" + [routerLinkActive]="'active'" + ></app-button> + <app-button + *ngIf="!isPublic" + class="hide-on-mobile" + [type]="'button'" + [iconBtn]="'edit'" + [text]="'Modifier la structure'" + [style]="buttonTypeEnum.SecondaryWide" + routerLink="./edit-structure/{{ structureWithOwners.structure._id }}" + [routerLinkActive]="'active'" + [ngClass]="{ warning: !isValid() }" + ></app-button> + <app-button + *ngIf="!isPublic" + class="hide-on-desktop" + [type]="'button'" + [iconBtn]="'edit'" + [style]="buttonTypeEnum.SecondaryOnlyIcon" + routerLink="./edit-structure/{{ structureWithOwners.structure._id }}" + [routerLinkActive]="'active'" + [ngClass]="{ warning: !isValid() }" + ></app-button> + </div> + </div> + <div class="infoSection" fxLayout="column" fxLayoutAlign="space-between start" fxLayoutGap="4px"> + <div> + <p>{{ getAddress() }}</p> + </div> + <div> + <p>{{ structureWithOwners.structure.contactPhone }}</p> + </div> + <div> + <a class="email" href="mailto:{{ structureWithOwners.structure.contactMail }}"> + {{ structureWithOwners.structure.contactMail }} + </a> + </div> + </div> + </div> + <div *ngIf="members.length > 0" fxLayout="column" fxLayoutGap="9px"> + <div fxLayout="row" fxLayoutAlign="space-between center"> + <p class="section-title">membres</p> + <app-button + *ngIf="!isPublic" + class="hide-on-mobile" + [type]="'button'" + [iconBtn]="'edit'" + [text]="'Gérer les membres'" + [style]="buttonTypeEnum.SecondaryWide" + routerLink="./structure-members-management/{{ structureWithOwners.structure._id }}" + [routerLinkActive]="'active'" + ></app-button> + <app-button + *ngIf="!isPublic" + class="hide-on-desktop" + [type]="'button'" + [iconBtn]="'edit'" + [style]="buttonTypeEnum.SecondaryOnlyIcon" + routerLink="./structure-members-management/{{ structureWithOwners.structure._id }}" + [routerLinkActive]="'active'" + ></app-button> + </div> + <div *ngFor="let member of members; let i = index"> + <app-profile-structure-member [member]="member"></app-profile-structure-member> + </div> + </div> + <div class="call-to-action" *ngIf="!isPublic && members.length === 0" fxLayout="row" fxLayoutAlign="center"> + <app-button + [type]="'button'" + [iconBtn]="'add'" + [text]="'Ajouter un membre'" + [style]="buttonTypeEnum.SecondaryUltraWide" + [routerLinkActive]="'active'" + (click)="addMemberModalOpenned = true" + ></app-button> + </div> + </div> + </div> +</div> +<app-structure-add-member-modal + *ngIf="addMemberModalOpenned" + [openned]="addMemberModalOpenned" + [structure]="structureWithOwners" + (closed)="closeAddMemberModal($event)" +></app-structure-add-member-modal> diff --git a/src/app/profile/profile-structure/profile-structure.component.scss b/src/app/profile/profile-structure/profile-structure.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..f949c3e86ce5a0f3e2464601eb3830667f8c5bd2 --- /dev/null +++ b/src/app/profile/profile-structure/profile-structure.component.scss @@ -0,0 +1,77 @@ +@import '../../../assets/scss/color'; +@import '../../../assets/scss/typography'; +@import '../../../assets/scss/breakpoint'; +@import '../../../assets/scss/shapes'; + +.structureCard { + padding: 5px 6px; + border: 1px solid $grey-5; + border-radius: 4px; + overflow: hidden; + + &.fold { + background-color: $grey-8; + border: 1px solid $grey-8; + } + + .collapseHeader { + cursor: pointer; + p { + margin: 0 !important; + &.structureName { + @include lato-bold-16; + } + &.structureType { + @include lato-regular-14; + font-style: italic; + color: $grey-3; + } + &.invalidText { + @include lato-regular-13; + margin: 0 0.5rem; + color: $orange-warning; + } + } + } + + .collapseContent { + padding: 0 10px; + .infoSection { + @include lato-regular-14; + + .email { + text-decoration: underline; + color: $grey-1; + } + } + .section-title { + text-transform: uppercase; + @include lato-bold-14; + color: $grey-3; + } + p { + margin: 0 !important; + } + } + app-button { + &.warning { + position: relative; + &:after { + content: ''; + background-image: url('../../../assets/form/notValidateWithBorder.svg'); + background-size: cover; + width: 24px; + height: 24px; + position: absolute; + top: -6px; + right: -6px; + } + } + } + .call-to-action { + margin-top: 18px; + } +} +::ng-deep app-button.warning button .text { + border: 1px solid $orange-warning !important; +} diff --git a/src/app/profile/profile-structure/profile-structure.component.ts b/src/app/profile/profile-structure/profile-structure.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..f052821930c4db7387aeffcb96d289d96605a32b --- /dev/null +++ b/src/app/profile/profile-structure/profile-structure.component.ts @@ -0,0 +1,84 @@ +import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations'; +import { Component, Input, OnInit } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { Router } from '@angular/router'; +import { structureFormStep } from '../../form/form-view/structure-form/structureFormStep.enum'; +import { Structure } from '../../models/structure.model'; +import { StructureWithOwners } from '../../models/structureWithOwners.model'; +import { NotificationService } from '../../services/notification.service'; +import { ButtonType } from '../../shared/components/button/buttonType.enum'; +import { formUtils } from '../../utils/formUtils'; +import { User } from './../../models/user.model'; +import { UserService } from './../../services/user.service'; + +@Component({ + selector: 'app-profile-structure', + templateUrl: './profile-structure.component.html', + styleUrls: ['./profile-structure.component.scss'], + animations: [ + trigger('collapse', [ + state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE, margin: '8px 0' })), + state('false', style({ height: '0px', visibility: 'hidden', margin: '0' })), + transition('true => false', animate('300ms ease-out')), + transition('false => true', animate('300ms ease-out')), + ]), + ], +}) +export class ProfileStructureComponent implements OnInit { + @Input() public structureWithOwners: StructureWithOwners; + @Input() public userProfile: User; + @Input() public isPublic: boolean; + public members: User[] = []; + public structureForm: FormGroup; + public buttonTypeEnum = ButtonType; + public showDetails: boolean = false; + public addMemberModalOpenned: boolean = false; + + constructor( + private router: Router, + private userService: UserService, + private notificationService: NotificationService + ) {} + + ngOnInit(): void { + this.structureForm = new formUtils().createStructureForm(this.structureWithOwners.structure, true); + this.structureWithOwners.owners + .filter((owner) => { + return owner._id !== this.userProfile._id; + }) + .forEach((owner) => { + this.userService.getUser(owner._id).subscribe((res) => { + this.members.push(res); + }); + }); + } + + public goBack(): void { + history.back(); + } + public goToEdit(step: structureFormStep): void { + this.router.navigate(['/form/structure', this.structureWithOwners.structure._id, structureFormStep[step]]); + } + public isValid(): boolean { + return this.structureForm.valid; + } + public getStructureTypeLabel(): string { + return new Structure(this.structureWithOwners.structure).getLabelTypeStructure(); + } + public toggleDetails(): void { + this.showDetails = !this.showDetails; + } + + public getAddress(): string { + const address = this.structureWithOwners.structure.address; + return address.numero + ' ' + address.street + ' - ' + address.commune; + } + + public closeAddMemberModal(memberAddRequested: boolean): void { + this.addMemberModalOpenned = false; + if (memberAddRequested) { + this.ngOnInit(); + this.notificationService.showSuccess(`La demande d'ajout a bien été effectuée`, ''); + } + } +} diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html index 72e3e2140ca25f1ea27a1869590355d046d26e94..a5a2cfcc48e16fd06e0681610e07d46459776c1f 100644 --- a/src/app/profile/profile.component.html +++ b/src/app/profile/profile.component.html @@ -67,47 +67,38 @@ </section> <section> - <div fxLayout="row" fxLayoutAlign="start center" fxFill> - <h1>Structures</h1> - <app-button - *ngIf="!isPublic" - class="hide-on-mobile" - [type]="'button'" - [iconBtn]="'edit'" - [text]="'Gérer mes structures'" - [style]="buttonTypeEnum.SecondaryWide" - routerLink="/profile/edit" - [routerLinkActive]="'active'" - ></app-button> - <app-button - class="hide-on-desktop" - [type]="'button'" - [iconBtn]="'edit'" - [style]="buttonTypeEnum.SecondaryOnlyIcon" - routerLink="/profile/edit" - [routerLinkActive]="'active'" - ></app-button> - </div> - <div fxLayout="column"> - <div class="section-container" fxLayoutGap="18px" fxLayout="column"> + <div fxLayoutGap="12px" fxLayout="column" fxFill> + <div fxLayout="row" fxLayoutAlign="start center" fxFill> + <h1>Structures</h1> + <app-button + *ngIf="!isPublic" + class="hide-on-mobile" + [type]="'button'" + [iconBtn]="'edit'" + [text]="'Gérer mes structures'" + [style]="buttonTypeEnum.SecondaryWide" + routerLink="./" + [routerLinkActive]="'active'" + [disabled]="true" + ></app-button> + <app-button + class="hide-on-desktop" + [type]="'button'" + [iconBtn]="'edit'" + [style]="buttonTypeEnum.SecondaryOnlyIcon" + routerLink="/" + [routerLinkActive]="'active'" + [disabled]="true" + ></app-button> + </div> + <div fxLayoutGap="16px" fxLayout="column" fxFill> <ng-container *ngIf="userProfile.structuresLink.length > 0 && structures"> - <div class="structureCard" *ngFor="let s of structures; let i = index"> - <div class="structureInfo" fxLayout="column" fxLayoutGap="14px"> - <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="20px"> - <a class="structureName" [routerLink]="['./']" [queryParams]="{ id: s.structure._id }">{{ - s.structure.structureName - }}</a> - <app-structure-options-modal - *ngIf="!isPublic" - [structure]="s" - (closed)="ngOnInit()" - (closedWithRefresh)="ngOnInit()" - ></app-structure-options-modal> - </div> - <div fxLayout="column" fxLayoutGap="14px" class="ownersBlock"> - <p class="ownerName" *ngFor="let owner of s.owners">{{ owner.email }}</p> - </div> - </div> + <div *ngFor="let structure of structures; let i = index"> + <app-profile-structure + [structureWithOwners]="structure" + [userProfile]="this.userProfile" + [isPublic]="this.isPublic" + ></app-profile-structure> </div> </ng-container> </div> diff --git a/src/app/profile/profile.module.ts b/src/app/profile/profile.module.ts index 1060d16a09bfb46dee8b104b7462b378cd5c54e7..632d3356d5c3fc28c1f16ce796ad4ae05c643dcd 100644 --- a/src/app/profile/profile.module.ts +++ b/src/app/profile/profile.module.ts @@ -1,8 +1,10 @@ import { NgModule } from '@angular/core'; -import { ProfileComponent } from './profile.component'; import { SharedModule } from '../shared/shared.module'; import { CommonModule } from '@angular/common'; import { ProfileRoutingModule } from './profile-routing.module'; +import { ProfileStructureMemberComponent } from './profile-structure/profile-structure-member/profile-structure-member.component'; +import { ProfileStructureComponent } from './profile-structure/profile-structure.component'; +import { ProfileComponent } from './profile.component'; import { StructureEditionSummaryComponent } from './structure-edition-summary/structure-edition-summary.component'; import { EditComponent } from './edit/edit.component'; import { StructureMembersManagementComponent } from './structure-members-management/structure-members-management.component'; @@ -12,13 +14,15 @@ import { NoInformationComponent } from './structure-edition-summary/no-informati @NgModule({ declarations: [ - ProfileComponent, - StructureEditionSummaryComponent, EditComponent, - StructureMembersManagementComponent, - StructureAddMemberModalComponent, MissingInformationComponent, NoInformationComponent, + ProfileComponent, + ProfileStructureComponent, + ProfileStructureMemberComponent, + StructureAddMemberModalComponent, + StructureEditionSummaryComponent, + StructureMembersManagementComponent, ], imports: [CommonModule, ProfileRoutingModule, SharedModule], }) diff --git a/src/app/shared/components/create-account-form/create-account-form.component.html b/src/app/shared/components/create-account-form/create-account-form.component.html index f515c14801f787c77451982ffeb4115d20d684ee..101ae9f8c47d359447d64cbcaad5808b0327bbd5 100644 --- a/src/app/shared/components/create-account-form/create-account-form.component.html +++ b/src/app/shared/components/create-account-form/create-account-form.component.html @@ -3,21 +3,21 @@ <label for="email">Courriel du compte</label> <div fxLayout="row" fxLayoutGap="13px"> <input type="text" autocomplete="on" formControlName="email" class="form-input" /> - <img *ngIf="f.email.invalid && f.email.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" /> + <img *ngIf="f.email.invalid && f.email.value" src="../../assets/form/notValidate.svg" alt="logo invalid" /> </div> </div> <div class="form-group" fxLayout="column"> <label for="surname">Nom</label> <div fxLayout="row" fxLayoutGap="13px"> <input type="text" autocomplete="on" formControlName="surname" class="form-input" /> - <img *ngIf="f.surname.invalid && f.surname.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" /> + <img *ngIf="f.surname.invalid && f.surname.value" src="../../assets/form/notValidate.svg" alt="logo invalid" /> </div> </div> <div class="form-group" fxLayout="column"> <label for="name">Prénom</label> <div fxLayout="row" fxLayoutGap="13px"> <input type="text" autocomplete="on" formControlName="name" class="form-input" /> - <img *ngIf="f.name.invalid && f.name.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" /> + <img *ngIf="f.name.invalid && f.name.value" src="../../assets/form/notValidate.svg" alt="logo invalid" /> </div> </div> <div class="form-group" fxLayout="column"> @@ -30,7 +30,7 @@ formControlName="phone" class="form-input" /> - <img *ngIf="f.phone.invalid && f.phone.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" /> + <img *ngIf="f.phone.invalid && f.phone.value" src="../../assets/form/notValidate.svg" alt="logo invalid" /> </div> </div> <div class="form-group password" fxLayout="column"> @@ -52,7 +52,7 @@ src="../../assets/form/eyePassword.svg" alt="logo eyePassword" /> - <img *ngIf="f.password.invalid && f.password.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" /> + <img *ngIf="f.password.invalid && f.password.value" src="../../assets/form/notValidate.svg" alt="logo invalid" /> </div> </div> <div class="form-group password" fxLayout="column"> @@ -72,7 +72,7 @@ /> <img *ngIf="f.confirmPassword.invalid && f.confirmPassword.value" - src="../../assets/form/notvalidate.svg" + src="../../assets/form/notValidate.svg" alt="logo invalid" /> </div> diff --git a/src/assets/form/notvalidate.svg b/src/assets/form/notValidate.svg similarity index 100% rename from src/assets/form/notvalidate.svg rename to src/assets/form/notValidate.svg diff --git a/src/assets/form/notValidateWithBorder.svg b/src/assets/form/notValidateWithBorder.svg new file mode 100644 index 0000000000000000000000000000000000000000..5b57de44d6c560745b5134fe4988235ea475c6dc --- /dev/null +++ b/src/assets/form/notValidateWithBorder.svg @@ -0,0 +1,4 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<circle cx="12" cy="12" r="11.5" fill="#DA6C2E" stroke="white"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0835 7.00067C11.0835 6.49441 11.4939 6.084 12.0001 6.08398C12.5064 6.08397 12.9168 6.49437 12.9168 7.00063L12.917 14.0006C12.917 14.5069 12.5066 14.9173 12.0003 14.9173C11.4941 14.9173 11.0837 14.5069 11.0836 14.0007L11.0835 7.00067ZM11.0837 17.6896C11.0837 17.1833 11.4941 16.7729 12.0004 16.7729C12.5066 16.7729 12.917 17.1833 12.917 17.6896L12.917 18.0318C12.917 18.5381 12.5066 18.9485 12.0004 18.9485C11.4941 18.9485 11.0837 18.5381 11.0837 18.0318L11.0837 17.6896Z" fill="white"/> +</svg> diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg index 50a7010156af38e594296d79759f255fc920d61a..602d921f896ea40ba7c61a22f11496348668320c 100644 --- a/src/assets/form/sprite.svg +++ b/src/assets/form/sprite.svg @@ -646,6 +646,12 @@ <path d="M13.25 20.6066L13.25 20" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> </symbol> + <symbol id="notValidateWithBorder" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <circle cx="12" cy="12" r="11.5" fill="#DA6C2E" stroke="white"/> + <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0835 7.00067C11.0835 6.49441 11.4939 6.084 12.0001 6.08398C12.5064 6.08397 12.9168 6.49437 12.9168 7.00063L12.917 14.0006C12.917 14.5069 12.5066 14.9173 12.0003 14.9173C11.4941 14.9173 11.0837 14.5069 11.0836 14.0007L11.0835 7.00067ZM11.0837 17.6896C11.0837 17.1833 11.4941 16.7729 12.0004 16.7729C12.5066 16.7729 12.917 17.1833 12.917 17.6896L12.917 18.0318C12.917 18.5381 12.5066 18.9485 12.0004 18.9485C11.4941 18.9485 11.0837 18.5381 11.0837 18.0318L11.0837 17.6896Z" fill="white"/> +</symbol> + + <symbol id="validate" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="13" cy="13" r="13" fill="#47C562" /> <path d="M8 13.8182L11.8889 17L18 10" stroke="white" stroke-width="3" stroke-linecap="round" diff --git a/src/assets/ico/fold.svg b/src/assets/ico/fold.svg new file mode 100644 index 0000000000000000000000000000000000000000..21c86e227726be1cc9945ce8b528ce37a409d1d9 --- /dev/null +++ b/src/assets/ico/fold.svg @@ -0,0 +1,3 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M6 16L12.5 9L19 16" stroke="black" stroke-linecap="round" stroke-linejoin="round" /> +</svg> diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg index f28bb7a503f599a29e9036a95fab3fe0a24d584e..ec13392a5520dee733305d21afe3ee19e964c909 100644 --- a/src/assets/ico/sprite.svg +++ b/src/assets/ico/sprite.svg @@ -129,9 +129,11 @@ </defs> </symbol> - <symbol id="edit" viewBox="0 0 22 22" + <symbol id="edit" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path fill-rule="evenodd" clip-rule="evenodd" d="M17.3745 2.62547C17.72 2.28003 18.3461 2.34613 18.7731 2.7731L20.3193 4.3193C20.7463 4.74627 20.8124 5.37243 20.4669 5.71787L18.6115 7.57331L15.5191 4.48091L17.3745 2.62547ZM17.993 8.1918L14.9006 5.0994L5.62344 14.3766L8.71584 17.469L17.993 8.1918ZM8.09736 18.0874L5.00496 14.995L4.74469 15.2553C4.60266 15.3973 4.52461 15.5949 4.52337 15.8155L3.77535 18.7134C3.7736 19.0246 4.0678 19.3188 4.37904 19.3171L7.27695 18.569C7.49751 18.5678 7.69506 18.4897 7.83709 18.3477L8.09736 18.0874Z" stroke="none"/> + <path d="M4.28317 15.287L3.65575 18.6944C3.65575 18.9504 3.85693 19.1516 4.11297 19.1516L7.52029 18.5242C7.63917 18.5242 7.75804 18.4784 7.84034 18.387L17.4626 8.77388L14.0335 5.34473L4.42034 14.9578C4.32889 15.0493 4.28317 15.159 4.28317 15.287Z" stroke="#333333" stroke-width="1.5" /> + <path d="M19.1358 7.09997C19.4924 6.74334 19.4924 6.16724 19.1358 5.81061L16.996 3.67082C16.8252 3.49959 16.5932 3.40336 16.3513 3.40336C16.1094 3.40336 15.8775 3.49959 15.7067 3.67082L14.0332 5.34424L17.4624 8.7734L19.1358 7.09997Z" stroke="#333333" stroke-width="1.5" /> + <path d="M4.78906 14.6543L8.15154 18.0168" stroke="#333333" stroke-width="1.5" /> </symbol> <symbol id="liste" viewBox="0 0 32 32" @@ -585,20 +587,6 @@ <path d="M15.875 15.625C18.1877 15.625 20.0625 13.7502 20.0625 11.4375C20.0625 9.1248 18.1877 7.25 15.875 7.25C13.5623 7.25 11.6875 9.1248 11.6875 11.4375C11.6875 13.7502 13.5623 15.625 15.875 15.625Z" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </symbol> - <symbol id="edit" viewBox="0 0 23 23" fill="none" - xmlns="http://www.w3.org/2000/svg"> - <g clip-path="url(#clip0_7929_46214)"> - <path d="M4.28317 15.287L3.65575 18.6944C3.65575 18.9504 3.85693 19.1516 4.11297 19.1516L7.52029 18.5242C7.63917 18.5242 7.75804 18.4784 7.84034 18.387L17.4626 8.77388L14.0335 5.34473L4.42034 14.9578C4.32889 15.0493 4.28317 15.159 4.28317 15.287Z" stroke="#333333" stroke-width="1.5"/> - <path d="M19.1358 7.09997C19.4924 6.74334 19.4924 6.16724 19.1358 5.81061L16.996 3.67082C16.8252 3.49959 16.5932 3.40336 16.3513 3.40336C16.1094 3.40336 15.8775 3.49959 15.7067 3.67082L14.0332 5.34424L17.4624 8.7734L19.1358 7.09997Z" stroke="#333333" stroke-width="1.5"/> - <path d="M4.78906 14.6543L8.15154 18.0168" stroke="#333333" stroke-width="1.5"/> - </g> - <defs> - <clipPath id="clip0_7929_46214"> - <rect width="22" height="22" fill="white" transform="translate(0.5 0.5)"/> - </clipPath> - </defs> - </symbol> - <symbol id="toastError" width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M26.8169 11.4821C27.3593 10.9397 28.2738 10.9749 28.8596 11.5607C29.4454 12.1464 29.4806 13.061 28.9382 13.6034L13.2247 29.3169C12.6823 29.8593 11.7677 29.8241 11.1819 29.2383C10.5962 28.6525 10.561 27.738 11.1034 27.1956L26.8169 11.4821Z" fill="#FF0000"/> @@ -872,9 +860,16 @@ <path d="M180.306 79.7301C181.856 79.5776 182.939 82.5877 181.198 82.8686C181.123 82.8847 181.156 83.0211 181.239 82.9971C183.139 82.7001 182.014 79.4491 180.331 79.6016C180.206 79.6177 180.206 79.7461 180.306 79.7301Z" fill="white" stroke="#706F6F" stroke-miterlimit="10" stroke-linejoin="round"/> </symbol> - <symbol id="check" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M18.9977 6.2526C19.4105 6.61952 19.4477 7.25159 19.0808 7.66437L10.9326 16.831C10.5785 17.2294 9.97428 17.28 9.55883 16.9462L4.37364 12.7795C3.94313 12.4336 3.87458 11.8041 4.22053 11.3736C4.56647 10.9431 5.19592 10.8746 5.62643 11.2205L10.0699 14.7912L17.586 6.33565C17.9529 5.92286 18.585 5.88568 18.9977 6.2526Z" fill="#696969" /> </symbol> +<symbol id="unfold" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M6 10L12.5 17L19 10" stroke="black" stroke-linecap="round" stroke-linejoin="round" /> +</symbol> + +<symbol id="fold" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M6 16L12.5 9L19 16" stroke="black" stroke-linecap="round" stroke-linejoin="round" /> +</symbol> + </svg> diff --git a/src/assets/ico/unfold.svg b/src/assets/ico/unfold.svg new file mode 100644 index 0000000000000000000000000000000000000000..110722d2fe57cada9321962a6c76295f36f5f73e --- /dev/null +++ b/src/assets/ico/unfold.svg @@ -0,0 +1,3 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M6 10L12.5 17L19 10" stroke="black" stroke-linecap="round" stroke-linejoin="round" /> +</svg> diff --git a/src/styles.scss b/src/styles.scss index 3eeb77a45c84d4f5468c31c38f8158f56f62bdd3..0155bc7df282fcb061e295e32f98dc1311c611a1 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -346,33 +346,6 @@ button { } } -.structureCard { - border: 1px solid $grey-4; - border-radius: 6px; - .structureInfo { - border-radius: 6px; - background: $white; - min-height: 100px; - padding: 33px 55px; - @media #{$large-phone} { - padding: 33px 25px; - } - a { - margin: 0; - &.structureName { - @include lato-bold-26; - color: $primary-color; - text-decoration: underline; - } - } - .ownerName { - @include lato-regular-18; - color: $grey-2; - } - } - @include background-hash($grey-2); -} - .loader { width: 100%; text-align: center;