Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • web-et-numerique/factory/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client
1 result
Show changes
Commits on Source (8)
Hide whitespace changes
Inline Side-by-side
Showing
with 422 additions and 449 deletions
.vscode/extensions.json
View file @ 0242e834
......@@ -3,6 +3,7 @@
"streetsidesoftware.code-spell-checker",
"streetsidesoftware.code-spell-checker-french",
"angular.ng-template",
"devescalus.svg-sprites-viewer"
"devescalus.svg-sprites-viewer",
"esbenp.prettier-vscode"
]
}
src/app/footer/footer.component.scss
View file @ 0242e834
......@@ -27,6 +27,7 @@
}
a {
color: $white;
text-decoration: none;
}
img {
height: 37px;
......
src/app/header/header.component.scss
View file @ 0242e834
......@@ -19,6 +19,9 @@ header {
border-radius: 0px 0px 5px 5px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
padding: 0 3rem;
a {
text-decoration: none;
}
@media #{$tablet} {
padding: 0 1rem;
}
......
src/app/profile/edit/edit.component.html
View file @ 0242e834
<div *ngIf="userProfile" fxLayout="column" class="content-container full-screen">
<div *ngIf="userProfile" class="content-container full-screen">
<div class="edit-profile">
<app-v3-button
[label]="'Retour'"
[variant]="buttonTypeEnumV3.Tertiary"
[iconFolder]="'ico'"
[iconName]="'arrowBackSmall'"
[size]="'large'"
(action)="goBack()"
/>
<div class="header">
<div class="title">
<a routerLink="/profile">
<svg aria-hidden="true">
<use [attr.xlink:href]="'assets/ico/sprite.svg#arrowBack'" />
</svg>
</a>
<h1>Modifier mon profil</h1>
</div>
<app-button
......@@ -27,74 +31,74 @@
</div>
<!-- Navigation -->
<div class="navigation" role="menu">
<span
<div
class="tab"
tabindex="0"
role="menuitem"
[ngClass]="{ selected: currentTab === tabsEnum.details }"
(click)="navigateTo(tabsEnum.details)"
(keyup.enter)="navigateTo(tabsEnum.details)"
>Coordonnées</span
>
<span
Coordonnées
</div>
<div
class="tab"
tabindex="0"
role="menuitem"
[ngClass]="{ selected: currentTab === tabsEnum.credentials }"
(click)="navigateTo(tabsEnum.credentials)"
(keyup.enter)="navigateTo(tabsEnum.credentials)"
>Email et mot de passe</span
>
<span
Email et mot de passe
</div>
<div
class="tab"
tabindex="0"
role="menuitem"
[ngClass]="{ selected: currentTab === tabsEnum.employer }"
(click)="navigateTo(tabsEnum.employer)"
(keyup.enter)="navigateTo(tabsEnum.employer)"
>Employeur et fonction</span
>
<span
Employeur et fonction
</div>
<div
class="tab"
tabindex="0"
role="menuitem"
[ngClass]="{ selected: currentTab === tabsEnum.description }"
(click)="navigateTo(tabsEnum.description)"
(keyup.enter)="navigateTo(tabsEnum.description)"
>Description</span
>
<!-- <span class="tab" [ngClass]="{ selected: currentTab === tabsEnum.avatar }" (click)="navigateTo(tabsEnum.avatar)"
>Avatar</span
Description
</div>
<!-- <div class="tab" [ngClass]="{ selected: currentTab === tabsEnum.avatar }" (click)="navigateTo(tabsEnum.avatar)"
>Avatar</div
> -->
</div>
<!-- Content of tabs -->
<div class="content">
<!-- TODO: refacto this with account-info.component -->
<div *ngIf="currentTab === tabsEnum.details">
<div class="form-group" fxLayout="column">
<label for="name">Prénom</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" class="form-input" [(ngModel)]="userProfile.name" />
<app-svg-icon *ngIf="nameValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'validate'" />
<app-svg-icon *ngIf="!nameValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" />
</div>
</div>
<div class="form-group" fxLayout="column">
<label for="surname">Nom</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" class="form-input" [(ngModel)]="userProfile.surname" />
<app-svg-icon *ngIf="surnameValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'validate'" />
<app-svg-icon *ngIf="!surnameValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" />
</div>
</div>
<div class="form-group" fxLayout="column">
<label for="phone">Téléphone</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" class="form-input phone" [(ngModel)]="userProfile.phone" />
<app-svg-icon *ngIf="phoneValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'validate'" />
<app-svg-icon *ngIf="!phoneValid()" [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" />
</div>
</div>
<div *ngIf="currentTab === tabsEnum.details" class="detailsTab">
<app-input
[id]="'name'"
[label]="'Prénom'"
[size]="'large'"
[status]="getStatus(nameValid())"
[(ngModelValue)]="userProfile.name"
/>
<app-input
[id]="'surname'"
[label]="'Nom'"
[size]="'large'"
[status]="getStatus(surnameValid())"
[(ngModelValue)]="userProfile.surname"
/>
<app-input
[id]="'phone'"
[label]="'Téléphone'"
[size]="'large'"
[status]="getStatus(phoneValid())"
[(ngModelValue)]="userProfile.phone"
/>
</div>
<div *ngIf="currentTab === tabsEnum.credentials" class="credentialsTab">
......
src/app/profile/edit/edit.component.scss
View file @ 0242e834
......@@ -4,23 +4,23 @@
@import 'shapes';
@import 'breakpoint';
.content-container {
display: flex;
flex-direction: column;
padding-top: 2rem;
}
.edit-profile {
display: flex;
flex-direction: column;
flex: 1;
max-width: 980px;
width: 100%;
margin: 0 auto 16px auto;
padding: 40px;
padding-bottom: 0px;
background: $white;
border: 1px solid $grey-6;
border-radius: 8px;
margin: 0 auto;
gap: 2rem;
@media #{$tablet} {
margin: 0px 4px 4px 4px;
padding: 16px;
padding-bottom: 0px;
margin: 0px 0.5rem;
width: auto;
}
......@@ -32,7 +32,6 @@
.header {
justify-content: space-between;
padding-bottom: 18px;
align-items: center;
.title {
......@@ -81,9 +80,11 @@
}
.tab {
color: $grey-3;
margin-right: 40px;
padding-bottom: 8px;
color: $grey-1;
padding-bottom: 1rem;
justify-content: center;
display: flex;
flex: 1;
&:hover {
cursor: pointer;
}
......@@ -95,7 +96,6 @@
}
.content {
padding: 24px 0;
flex: 1;
max-width: 600px;
p.subTitle {
......@@ -105,12 +105,19 @@
margin-bottom: 4px;
}
.detailsTab {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.credentialsTab {
.buttons {
margin-top: 25px;
display: flex;
flex-wrap: wrap;
gap: 18px;
// V3REMOVE
::ng-deep {
svg {
height: 22px;
......@@ -150,17 +157,14 @@
}
.footer {
padding: 16px;
padding: 32px 0 40px 0;
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
border-top: 1px solid $grey-5;
//To fit border to parent div
margin: 0 -40px;
@media #{$tablet} {
margin: 0 -16px;
}
// V3REMOVE
::ng-deep div svg {
height: 22px;
}
......
src/app/profile/edit/edit.component.ts
View file @ 0242e834
......@@ -10,6 +10,7 @@ import { User } from '../../models/user.model';
import { AuthService } from '../../services/auth.service';
import { NotificationService } from '../../services/notification.service';
import { ButtonType } from '../../shared/components/button/buttonType.enum';
import { ButtonTypeV3 } from '../../shared/components/v3/button/button.type';
import { CustomRegExp } from '../../utils/CustomRegExp';
import { ProfileService } from '../services/profile.service';
......@@ -33,7 +34,8 @@ enum showPasswordEnum {
})
export class EditComponent implements OnInit {
public tabsEnum = tabsEnum;
public buttonTypeEnum = ButtonType;
public buttonTypeEnum = ButtonType; // V3REMOVE
public buttonTypeEnumV3 = ButtonTypeV3;
public currentTab: tabsEnum = tabsEnum.details;
@Input() userProfile: User;
......@@ -106,6 +108,10 @@ export class EditComponent implements OnInit {
});
}
public goBack(): void {
history.back();
}
public phoneValid(): boolean {
return !!this.userProfile.phone.match(CustomRegExp.PHONE);
}
......@@ -130,6 +136,10 @@ export class EditComponent implements OnInit {
);
}
getStatus(success: boolean): 'error' | 'success' {
return success ? 'success' : 'error';
}
public navigateTo(tab: tabsEnum): void {
this.currentTab = tab;
if (tab === tabsEnum.employer) {
......
src/app/profile/personal-offer-edition/personal-offer-edition.component.html
View file @ 0242e834
<div fxLayout="column" class="content-container full-screen">
<div class="content-container full-screen">
<div class="edit-personal-offer">
<app-v3-button
[label]="'Retour'"
[variant]="buttonTypeEnumV3.Tertiary"
[iconFolder]="'ico'"
[iconName]="'arrowBackSmall'"
[size]="'large'"
(action)="goBack()"
/>
<div class="header">
<div class="title">
<a routerLink="/profile">
<svg aria-hidden="true">
<use [attr.xlink:href]="'assets/ico/sprite.svg#arrowBack'" />
</svg>
</a>
<div>
<p *ngIf="structureName" class="overtitle">{{ structureName }}</p>
<h1>Gérer mon offre de service</h1>
<h2 *ngIf="structureName" class="overtitle">{{ structureName }}</h2>
</div>
</div>
<app-button
......
src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
View file @ 0242e834
......@@ -4,19 +4,20 @@
@import 'shapes';
@import 'breakpoint';
.content-container {
display: flex;
flex-direction: column;
padding-top: 2rem;
}
.edit-personal-offer {
display: flex;
flex-direction: column;
flex: 1;
max-width: 980px;
width: 100%;
margin: 0 auto 1rem auto;
box-sizing: border-box;
padding: 40px;
padding-bottom: 0px;
background: $white;
border: 1px solid $grey-6;
border-radius: 8px;
margin: 0 auto;
gap: 2rem;
@media #{$large-phone} {
margin: 0px 4px 4px 4px;
......@@ -43,12 +44,13 @@
@media #{$tablet} {
@include font-regular-20;
}
padding-bottom: 1.25em;
padding-bottom: 0.5em;
}
h2 {
@include font-regular-24;
color: $red;
}
// h1 {
// color: $grey-1;
// font-weight: lighter;
// }
svg {
stroke: $black;
height: 40px;
......@@ -86,9 +88,11 @@
}
.tab {
color: $grey-3;
margin-right: 40px;
padding-bottom: 8px;
color: $grey-1;
padding-bottom: 1rem;
justify-content: center;
display: flex;
flex: 1;
&:hover {
cursor: pointer;
}
......@@ -100,23 +104,19 @@
}
.content {
padding-top: 24px;
flex: 1;
max-width: 600px;
}
.footer {
padding: 16px;
padding: 32px 0 40px 0;
display: flex;
gap: 24px;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
border-top: 1px solid $grey-5;
//To fit border to parent div
margin: 0 -40px;
@media #{$tablet} {
margin: 0 -16px;
}
// V3REMOVE
::ng-deep div svg {
height: 22px;
}
......
src/app/profile/personal-offer-edition/personal-offer-edition.component.ts
View file @ 0242e834
......@@ -4,6 +4,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
import { CategoriesToggle } from '../../models/categoriesToggle.model';
import { NotificationService } from '../../services/notification.service';
import { ButtonType } from '../../shared/components/button/buttonType.enum';
import { ButtonTypeV3 } from '../../shared/components/v3/button/button.type';
import { CategoryEnum } from '../../shared/enum/category.enum';
import { Category } from '../../structure-list/models/category.model';
import { SearchService } from '../../structure-list/services/search.service';
......@@ -21,7 +22,8 @@ enum tabsEnum {
styleUrls: ['./personal-offer-edition.component.scss'],
})
export class PersonalOfferEditionComponent implements OnInit {
public buttonTypeEnum = ButtonType;
public buttonTypeEnum = ButtonType; // V3REMOVE
public buttonTypeEnumV3 = ButtonTypeV3;
public tabsEnum = tabsEnum;
public currentTab: tabsEnum = tabsEnum.onlineProcedures;
......@@ -136,4 +138,8 @@ export class PersonalOfferEditionComponent implements OnInit {
);
this.router.navigate(['/profile']);
}
public goBack(): void {
history.back();
}
}
src/app/profile/profile-newsletter/profile-newsletter.component.html
View file @ 0242e834
<div *ngIf="isSubscribed">
<p>Vous êtes abonné·e à la newsletter Rés'in.</p>
<p style="margin-bottom: 1rem">Vous êtes abonné·e à la newsletter Rés'in.</p>
<app-button
[text]="'Me désabonner de la newsletter'"
[style]="buttonTypeEnum.Secondary"
......@@ -8,7 +8,7 @@
/>
</div>
<div *ngIf="!isSubscribed">
<p>Vous n’êtes pas encore abonné·e à la newsletter Rés'in.</p>
<p style="margin-bottom: 1rem">Vous n’êtes pas encore abonné·e à la newsletter Rés'in.</p>
<app-button
[text]="'M\'abonner à la newsletter'"
[style]="buttonTypeEnum.Primary"
......
src/app/profile/profile-structure/personal-offer/personal-offer.component.html
View file @ 0242e834
<div *ngIf="this.personalOffer.categoriesDisplay" class="container">
<div class="header">
<p>mon offre de service</p>
<h2>mon offre de service</h2>
<app-button
*ngIf="!isPublic"
class="hide-on-mobile"
......@@ -21,63 +21,47 @@
/>
</div>
<div class="content">
<div *ngIf="this.personalOffer.categoriesDisplay.onlineProcedures.length" class="dropDown">
<div
class="collapseHeader"
tabindex="0"
(click)="toggleOnlineProcedures()"
(keyup.enter)="toggleOnlineProcedures()"
>
<p>Démarches en ligne</p>
<app-svg-icon
class="showDetails"
[ngClass]="!showOnlineProcedures ? 'visible' : 'hidden'"
[type]="'ico'"
[icon]="'fold'"
[iconClass]="'icon-26'"
/>
</div>
<div class="collapseContent" [@collapse]="showOnlineProcedures">
<app-collapse *ngIf="this.personalOffer.categoriesDisplay.onlineProcedures.length">
<app-collapse-header>
<div class="collapseHeader">
<h3>Démarches en ligne</h3>
</div>
</app-collapse-header>
<app-collapse-content>
<ul>
<li *ngFor="let onlineProcedure of this.personalOffer.categoriesDisplay.onlineProcedures">
{{ onlineProcedure }}
</li>
</ul>
</div>
</div>
<div *ngIf="this.personalOffer.categoriesDisplay.baseSkills.length" class="dropDown">
<div class="collapseHeader" tabindex="0" (click)="toggleBaseSkills()" (keyup.enter)="toggleBaseSkills()">
<p>Compétences numériques de base</p>
<app-svg-icon
class="showDetails"
[ngClass]="!showBaseSkills ? 'visible' : 'hidden'"
[type]="'ico'"
[icon]="'fold'"
[iconClass]="'icon-26'"
/>
</div>
<div class="collapseContent" [@collapse]="showBaseSkills">
</app-collapse-content>
</app-collapse>
<app-collapse *ngIf="this.personalOffer.categoriesDisplay.baseSkills.length">
<app-collapse-header>
<div class="collapseHeader">
<h3>Compétences numériques de base</h3>
</div>
</app-collapse-header>
<app-collapse-content>
<ul>
<li *ngFor="let baseSkill of this.personalOffer.categoriesDisplay.baseSkills">{{ baseSkill }}</li>
</ul>
</div>
</div>
<div *ngIf="this.personalOffer.categoriesDisplay.advancedSkills.length" class="dropDown">
<div class="collapseHeader" tabindex="0" (click)="toggleAdvancedSkills()" (keyup.enter)="toggleAdvancedSkills()">
<p>Compétences numériques avancées</p>
<app-svg-icon
class="showDetails"
[ngClass]="!showAdvancedSkills ? 'visible' : 'hidden'"
[type]="'ico'"
[icon]="'fold'"
[iconClass]="'icon-26'"
/>
</div>
<div class="collapseContent" [@collapse]="showAdvancedSkills">
</app-collapse-content>
</app-collapse>
<app-collapse *ngIf="this.personalOffer.categoriesDisplay.advancedSkills.length">
<app-collapse-header>
<div class="collapseHeader">
<h3>Compétences numériques avancées</h3>
</div>
</app-collapse-header>
<app-collapse-content>
<ul>
<li *ngFor="let advancedSkill of this.personalOffer.categoriesDisplay.advancedSkills">{{ advancedSkill }}</li>
<li *ngFor="let advancedSkill of this.personalOffer.categoriesDisplay.advancedSkills">
{{ advancedSkill }}
</li>
</ul>
</div>
</div>
</app-collapse-content>
</app-collapse>
</div>
</div>
src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
View file @ 0242e834
......@@ -4,9 +4,12 @@
.container {
display: flex;
flex-direction: column;
gap: 8px;
p {
gap: 12px;
h2 {
margin: 0;
@include font-bold-18;
text-transform: uppercase;
}
.header {
display: flex;
......@@ -19,38 +22,34 @@
}
}
.content {
.dropDown {
overflow: hidden;
.collapseHeader {
display: flex;
align-items: center;
justify-content: space-between;
height: 2.5rem;
cursor: pointer;
color: $grey-2;
display: flex;
flex-direction: column;
gap: 1rem;
.showDetails {
transition: all 0.3s;
&.visible {
transform: rotate(-180deg);
}
}
}
.collapseContent {
background-color: $grey-8;
border-radius: 8px;
ul {
margin: 0;
padding: 0.5rem 1.5rem;
list-style-position: inside;
li {
line-height: 2rem;
@include font-regular-15;
}
}
.collapseHeader {
@include font-bold-16;
display: flex;
align-items: center;
justify-content: space-between;
color: $grey-2;
padding: 0.75rem;
user-select: none;
h3 {
margin: 0 !important;
@include font-bold-16;
}
&:not(:last-child) {
border-bottom: 1px solid $grey-9;
}
ul {
margin: 0;
padding: 0.5rem 1.5rem;
list-style-position: inside;
border-top: 1px solid $grey-4;
li {
line-height: 2rem;
@include font-regular-15;
}
}
}
......
src/app/profile/profile-structure/personal-offer/personal-offer.component.ts
View file @ 0242e834
import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';
import { Component, Input } from '@angular/core';
import { ButtonType } from '../../../shared/components/button/buttonType.enum';
import { PersonalOffer } from './../../../models/personalOffer.model';
......@@ -7,33 +6,10 @@ import { PersonalOffer } from './../../../models/personalOffer.model';
selector: 'app-personal-offer',
templateUrl: './personal-offer.component.html',
styleUrls: ['./personal-offer.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 PersonalOfferComponent {
@Input() public personalOffer: PersonalOffer;
@Input() public isPublic: boolean;
@Input() public structureName?: string;
public buttonTypeEnum = ButtonType;
public showOnlineProcedures = false;
public showBaseSkills = false;
public showAdvancedSkills = false;
public toggleOnlineProcedures(): void {
this.showOnlineProcedures = !this.showOnlineProcedures;
}
public toggleBaseSkills(): void {
this.showBaseSkills = !this.showBaseSkills;
}
public toggleAdvancedSkills(): void {
this.showAdvancedSkills = !this.showAdvancedSkills;
}
}
src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.html
View file @ 0242e834
<div class="structureMember">
<app-svg-icon class="avatar hide-on-mobile" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'" />
<div class="nameJobSection">
<a class="name" routerLink="/profile/{{ member._id }}"
>{{ member.name | userName }} {{ member.surname | uppercase }}</a
>
<p class="jobEmployer">{{ getJobEmployer() }}</p>
</div>
<div class="contact">
<p>{{ member.phone }}</p>
<a class="email" href="mailto:{{ member.email }}">{{ member.email }}</a>
<div class="structureMember" tabindex="0" (click)="goToProfile()" (keyup.enter)="goToProfile()">
<div class="left">
<app-svg-icon class="avatar hide-on-mobile" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'" />
<div class="nameJobSection">
<p class="name">{{ member.name | userName }} {{ member.surname | uppercase }}</p>
<p class="jobEmployer">{{ getJobEmployer() }}</p>
</div>
<div *ngIf="getPhone()">
<p>{{ getPhone() }}</p>
<p class="mail">{{ member.email }}</p>
</div>
</div>
<app-svg-icon tabindex="0" [iconClass]="'icon-32'" [type]="'ico'" [icon]="'chevronRight'" />
</div>
src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss
View file @ 0242e834
......@@ -7,7 +7,17 @@
@include font-regular-14;
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
.left {
display: flex;
gap: 24px;
}
padding: 1rem;
border: 1px solid $grey-7;
border-radius: 4px;
color: $grey-3;
cursor: pointer;
.avatar {
display: flex;
......@@ -19,22 +29,19 @@
p {
margin: 0;
}
a {
&.name {
@include font-bold-14;
color: $black;
}
&.email {
text-decoration: underline;
color: $grey-1;
}
.name {
@include font-bold-16;
color: $grey-1;
}
.nameJobSection {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 4px;
width: 50%;
gap: 8px;
}
.mail {
text-decoration: underline;
}
}
src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.ts
View file @ 0242e834
import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';
import { get } from 'lodash';
import { Owner } from '../../../models/owner.model';
import { User } from '../../../models/user.model';
@Component({
......@@ -7,7 +10,9 @@ import { User } from '../../../models/user.model';
styleUrls: ['./profile-structure-member.component.scss'],
})
export class ProfileStructureMemberComponent {
@Input() public member: User;
@Input() public member: User | Owner;
constructor(private router: Router) {}
getJobEmployer(): string {
if (this.member.job?.name && this.member.employer?.name) {
......@@ -21,4 +26,13 @@ export class ProfileStructureMemberComponent {
}
return '';
}
/** Depending on User or Owner return the phone number of false */
getPhone(): string | false {
return get(this.member, 'phone') ?? false;
}
goToProfile(): void {
this.router.navigateByUrl(`/profile/${this.member._id}`);
}
}
src/app/profile/profile-structure/profile-structure.component.html
View file @ 0242e834
<div class="structureCard" [ngClass]="{ fold: !showDetails, pending: isPending }">
<div
class="collapseHeader"
tabindex="0"
(click)="toggleDetails(); $event.stopPropagation()"
(keyup.enter)="toggleDetails(); $event.stopPropagation()"
>
<div class="left">
<app-svg-icon [type]="'ico'" [icon]="getStructureTypeIcon()" [iconClass]="'icon-52'" />
<div class="structureInfos">
<p class="structureName">{{ structure.structureName }}</p>
<p class="structureType">{{ structure.structureType?.name }}</p>
</div>
</div>
<div class="right">
<div *ngIf="!isPublic && !isValid() && !isPending" class="missingData">
<app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" />
<p class="invalidText hide-on-mobile">
Informations
<br />
manquantes
</p>
<app-collapse [variant]="collapseVariant" [size]="'medium'" [boxShadow]="true">
<app-collapse-header>
<div class="collapseHeader">
<div class="left">
<app-svg-icon [type]="'ico'" [icon]="getStructureTypeIcon()" [iconClass]="'icon-52'" />
<div class="structureInfos">
<p class="structureName">{{ structure.structureName }}</p>
<app-v3-tag-item
[clickable]="false"
[label]="structure.structureType?.category"
[size]="'small'"
[color]="'red'"
/>
<div *ngIf="!isPublic && !isValid() && !isPending" class="missingData">
<app-missing-information [plural]="true" />
</div>
<div *ngIf="isPending" class="missingData">
<p>En attente d'acceptation - Demande faite le {{ getFormattedDate() }}</p>
</div>
</div>
</div>
<div *ngIf="isPending" class="missingData">
<p class="invalidText hide-on-mobile">
En attente d'acceptation <br />
Demande faite le {{ getFormattedDate() }}
</p>
<div class="right">
<app-button
*ngIf="isPending && !isPublic"
class="hide-on-mobile"
[iconType]="'form'"
[text]="'Annuler la demande'"
[style]="buttonTypeEnum.Secondary"
(click)="handleCancelJoin(structure._id); $event.stopPropagation()"
/>
</div>
<app-button
*ngIf="isPending && !isPublic"
class="hide-on-mobile"
[iconType]="'form'"
[text]="'Annuler la demande'"
[style]="buttonTypeEnum.Secondary"
(click)="handleCancelJoin(structure._id); $event.stopPropagation()"
/>
<app-svg-icon
class="showDetails"
[ngClass]="!showDetails ? 'visible' : 'hidden'"
[type]="'ico'"
[icon]="'fold'"
[iconClass]="'icon-26'"
/>
</div>
</div>
<div class="collapseContent" [@collapse]="showDetails">
</app-collapse-header>
<app-collapse-content>
<div class="section">
<div class="sectionHeader">
<p class="sectionTitle">informations</p>
......@@ -94,20 +81,29 @@
</div>
</div>
<div class="sectionContent infoSection">
<p>{{ getAddress() }}</p>
<p>{{ structure.contactPhone }}</p>
<a *ngIf="structure.contactMail" class="email" href="mailto:{{ structure.contactMail }}">
{{ structure.contactMail }}
</a>
<div class="row">
<app-svg-icon [iconClass]="'icon-20'" [type]="'ico'" [icon]="'address'" />
<p>{{ getAddress() }}</p>
</div>
<div *ngIf="structure.contactPhone" class="row">
<app-svg-icon [iconClass]="'icon-20'" [type]="'ico'" [icon]="'phone'" />
<p>{{ structure.contactPhone | phone }}</p>
</div>
<div *ngIf="structure.contactMail" class="row">
<app-svg-icon [iconClass]="'icon-20'" [type]="'ico'" [icon]="'mail'" />
<a class="email" href="mailto:{{ structure.contactMail }}">
{{ structure.contactMail }}
</a>
</div>
</div>
</div>
<app-personal-offer
*ngIf="this.personalOffer && !isPending"
class="section"
[personalOffer]="personalOffer"
[structureName]="structure.structureName"
[isPublic]="isPublic"
/>
<div *ngIf="this.personalOffer && !isPending" class="section">
<app-personal-offer
[personalOffer]="personalOffer"
[structureName]="structure.structureName"
[isPublic]="isPublic"
/>
</div>
<div *ngIf="membersWithJobWithPO.length > 0" class="section">
<div class="sectionHeader">
<p class="sectionTitle">Accompagnant·es numériques</p>
......@@ -130,7 +126,7 @@
/>
</div>
<div class="sectionContent members">
<app-profile-structure-member *ngFor="let member of membersWithJobWithPO; let i = index" [member]="member" />
<app-profile-structure-member *ngFor="let member of membersWithJobWithPO" [member]="member" />
</div>
</div>
<div
......@@ -145,5 +141,5 @@
(click)="goToOffer()"
/>
</div>
</div>
</div>
</app-collapse-content>
</app-collapse>
src/app/profile/profile-structure/profile-structure.component.scss
View file @ 0242e834
......@@ -3,153 +3,111 @@
@import 'breakpoint';
@import 'shapes';
.structureCard {
padding: 8px 0;
border: 1px solid $grey-5;
border-radius: 4px;
overflow: hidden;
transition: all 0.3s;
&.fold {
background-color: $grey-9;
border: 1px solid $grey-9;
}
&.pending {
border: 1px solid $orange-warning;
}
.collapseHeader {
width: 100%;
padding: 12px 1.5rem;
display: flex;
justify-content: space-between;
user-select: none;
.collapseHeader {
padding: 0 0.5rem;
.left {
display: flex;
justify-content: space-between;
cursor: pointer;
.left {
gap: 1.5rem;
.structureInfos {
display: flex;
gap: 1rem;
.structureInfos {
display: flex;
flex-direction: column;
justify-content: center;
}
flex-direction: column;
justify-content: center;
gap: 8px;
}
}
.right {
display: flex;
align-items: center;
::ng-deep button {
margin-right: 0.7rem;
margin-top: 0.25rem;
}
.showDetails {
transition: all 0.3s;
&.visible {
transform: rotate(-180deg);
}
}
.right {
display: flex;
align-items: center;
::ng-deep button {
margin-right: 0.7rem;
margin-top: 0.25rem;
}
p {
margin: 0 !important;
&.structureName {
@include font-bold-16;
}
&.structureType {
@include font-regular-14;
font-style: italic;
color: $grey-3;
}
&.invalidText {
@include font-regular-13;
margin: 0 0.5rem;
color: $orange-warning;
}
}
p {
margin: 0 !important;
&.structureName {
@include font-bold-16;
}
.missingData {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: 1rem;
&.structureType {
@include font-regular-14;
font-style: italic;
color: $grey-3;
}
}
.collapseContent {
.missingData {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0 1rem;
margin-bottom: 0.5rem;
.section {
.sectionHeader {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 2.25em;
align-items: center;
gap: 0.5rem;
.sectionTitle {
text-transform: uppercase;
@include font-bold-14;
color: $grey-3;
}
p {
text-transform: uppercase;
@include font-bold-14;
color: $grey-3;
}
.sectionButtons {
display: flex;
gap: 12px;
}
}
.sectionContent {
&.infoSection {
@include font-regular-14;
display: flex;
flex-direction: column;
gap: 4px;
.email {
text-decoration: underline;
color: $grey-1;
}
}
&.members {
display: flex;
flex-direction: column;
gap: 6px;
}
}
}
@include font-bold-14;
color: $info-warning;
}
}
p {
margin: 0 !important;
.section {
border-top: 1px solid $grey-7;
padding-block: 1rem;
padding-inline: 48px;
display: flex;
flex-direction: column;
gap: 12px;
.sectionHeader {
display: flex;
justify-content: space-between;
align-items: center;
.sectionTitle {
@include font-bold-18;
text-transform: uppercase;
color: $grey-1;
}
.call-to-action {
margin-top: 18px;
.sectionButtons {
display: flex;
justify-content: center;
gap: 12px;
}
}
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;
.sectionContent {
&.infoSection {
@include font-regular-14;
display: flex;
flex-direction: column;
gap: 8px;
.email {
text-decoration: underline;
color: $grey-1;
}
}
&.members {
display: flex;
flex-direction: column;
gap: 12px;
}
}
}
.call-to-action {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
// V3REMOVE
::ng-deep app-button.warning button {
color: $orange-warning;
.text {
border: 1px solid $orange-warning !important;
}
}
.row {
display: flex;
gap: 8px;
align-items: center;
}
src/app/profile/profile-structure/profile-structure.component.ts
View file @ 0242e834
import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
......@@ -7,6 +6,7 @@ import { structureFormStep } from '../../form/form-view/structure-form/structure
import { Structure } from '../../models/structure.model';
import { StructureWithOwners } from '../../models/structureWithOwners.model';
import { ButtonType } from '../../shared/components/button/buttonType.enum';
import { CollapseType } from '../../shared/components/v3/collapse/collapse.type';
import { SearchService } from '../../structure-list/services/search.service';
import { formUtils } from '../../utils/formUtils';
import { Utils } from '../../utils/utils';
......@@ -18,15 +18,6 @@ import { UserService } from './../../services/user.service';
selector: 'app-profile-structure',
templateUrl: './profile-structure.component.html',
styleUrls: ['./profile-structure.component.scss'],
animations: [
trigger('collapse', [
state('*', style({ height: '0px', visibility: 'hidden', margin: '0' })),
state('false', style({ height: '0px', visibility: 'hidden', margin: '0' })),
state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE, marginTop: '10px' })),
transition('true => *', animate('300ms ease-in')),
transition('* => true', animate('300ms ease-out')),
]),
],
})
export class ProfileStructureComponent implements OnInit {
@Input() public structureWithOwners: StructureWithOwners;
......@@ -39,7 +30,6 @@ export class ProfileStructureComponent implements OnInit {
public membersWithJobWithPO: User[] = [];
public structureForm: FormGroup;
public buttonTypeEnum = ButtonType;
public showDetails = false;
public addMemberModalOpened = false;
public structure: Structure;
public personalOffer: PersonalOffer;
......@@ -101,9 +91,6 @@ export class ProfileStructureComponent implements OnInit {
public getStructureTypeIcon(): string {
return this.structure?.getTypeStructureIcon();
}
public toggleDetails(): void {
this.showDetails = !this.showDetails;
}
public getAddress(): string {
const address = this.structure.address;
......@@ -121,4 +108,8 @@ export class ProfileStructureComponent implements OnInit {
public handleCancelJoin(idStructure: string): void {
this.cancelJoin.emit(idStructure);
}
get collapseVariant(): CollapseType {
return this.isPending ? CollapseType.Warning : CollapseType.Regular;
}
}
src/app/profile/profile.component.html
View file @ 0242e834
<div *ngIf="userProfile" class="content-container full-screen">
<div class="goBack">
<app-v3-button
[label]="'Retour'"
[variant]="buttonTypeEnumV3.Tertiary"
[iconFolder]="'ico'"
[iconName]="'arrowBackSmall'"
[size]="'large'"
(action)="goBack()"
/>
</div>
<section>
<div class="header">
<app-svg-icon
*ngIf="isPublic"
class="backArrow"
tabindex="0"
[iconClass]="'backArrow'"
[type]="'ico'"
[icon]="'arrowBack'"
(click)="goBack()"
(keyup.enter)="goBack()"
/>
<h1>Profil</h1>
<app-button
*ngIf="isPublic && userProfile.withAppointment"
......@@ -43,28 +44,42 @@
[routerLinkActive]="'active'"
/>
</div>
<div class="profile" fxLayout="row">
<div class="profile">
<app-svg-icon class="avatar" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-112'" />
<div class="information">
<div class="name">{{ userProfile.name | userName }} {{ userProfile.surname | uppercase }}</div>
<div *ngIf="utils.getJobEmployer(userProfile)" class="job">{{ utils.getJobEmployer(userProfile) }}</div>
<div class="phone">{{ userProfile.phone | phone }}</div>
<a class="email" href="mailto:{{ userProfile.email }}">{{ userProfile.email }}</a>
<div class="block">
<div class="name">{{ userProfile.name | userName }} {{ userProfile.surname | uppercase }}</div>
<div *ngIf="utils.getJobEmployer(userProfile)" class="job">{{ utils.getJobEmployer(userProfile) }}</div>
</div>
<div class="block contact">
<div class="row">
<app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'phone'" />
<div>{{ userProfile.phone | phone }}</div>
</div>
<div class="row">
<app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'mail'" />
<a href="mailto:{{ userProfile.email }}">{{ userProfile.email }}</a>
</div>
<div *ngIf="isPublic && userProfile.withAppointment" class="row">
<app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'tagRdv'" />
<div>Render-vous</div>
</div>
</div>
<div *ngIf="userProfile.description" class="description">{{ userProfile.description }}</div>
</div>
</div>
<div *ngIf="!userProfile.description" class="call-to-action" fxLayoutAlign="center center" fxFill>
<app-button
*ngIf="!isPublic"
routerLink="/profile/edit"
tabindex="none"
[iconBtn]="'edit'"
[text]="'Ajouter une description'"
[style]="buttonTypeEnum.SecondaryUltraWide"
[state]="{ data: 'description' }"
[routerLinkActive]="'active'"
/>
</div>
<app-button
*ngIf="!isPublic && !userProfile.description"
routerLink="/profile/edit"
tabindex="none"
class="addDescription"
[iconBtn]="'edit'"
[text]="'Ajouter une description'"
[style]="buttonTypeEnum.SecondaryUltraWide"
[state]="{ data: 'description' }"
[routerLinkActive]="'active'"
/>
</section>
<!-- Private profile with pending structures -->
<section *ngIf="!isPublic">
......