From 1eae361dea4cb528466f7a9b951ff7316d5f0cbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20Simondant?= <msimondant@grandlyon.com>
Date: Thu, 5 Dec 2024 15:56:58 +0100
Subject: [PATCH] wip : adapt html structure, classes & buttons to fit new
mockup
---
.../structure-edition-summary.component.html | 352 ++++++++++--------
1 file changed, 206 insertions(+), 146 deletions(-)
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
index b6847ad61..171a6b80e 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
@@ -20,7 +20,7 @@
<section class="nameAndAddress">
<div class="sectionHeader">
- <h3 class="uppercase">Nom et adresse</h3>
+ <h3>Nom et adresse</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -56,7 +56,7 @@
<section class="structureType" [ngClass]="{ warningBorder: !isFieldValid('structureType') }">
<div class="sectionHeader">
<div>
- <h3 class="uppercase">Type de structure</h3>
+ <h3>Type de structure</h3>
<app-missing-information *ngIf="!isFieldValid('structureType')" />
</div>
<app-button
@@ -86,7 +86,7 @@
<section class="description">
<div class="sectionHeader">
- <h3 class="uppercase">Description</h3>
+ <h3>Description</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -110,7 +110,7 @@
<section class="phoneAndMail" [ngClass]="{ warningBorder: requiredPhoneOrMailError() }">
<div class="sectionHeader">
<div>
- <h3 class="uppercase">Téléphone et email</h3>
+ <h3>Téléphone et email</h3>
<app-missing-information *ngIf="requiredPhoneOrMailError()" />
</div>
<app-button
@@ -149,7 +149,7 @@
<section class="webAndSocialNetworks">
<div class="sectionHeader">
- <h3 class="uppercase">Présence sur internet</h3>
+ <h3>Présence sur internet</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -233,7 +233,7 @@
<section class="hours">
<div class="sectionHeader">
- <h3 class="uppercase">Horaires</h3>
+ <h3>Horaires</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -262,142 +262,202 @@
<section class="proceduresAccompaniment">
<div class="sectionHeader">
- <h3 class="uppercase">Offre de service</h3>
+ <h3>Offres de service</h3>
</div>
- </section>
-
- <div *ngFor="let offerHolder of offerHolders">
- <section class="proceduresAccompaniment">
- <div class="sectionHeader">
- <h3 *ngIf="offerHolder.structure" class="uppercase">Offre de la structure</h3>
- <h3 *ngIf="offerHolder.user" class="uppercase">
- Offre de {{ offerHolder.user.name }} {{ offerHolder.user.surname }}
- {{ offerHolder.isMyself ? ' (moi)' : '' }}
- </h3>
- </div>
- </section>
-
- <section class="proceduresAccompaniment">
- <div class="sectionHeader">
- <h3 class="uppercase">Aides aux démarches en ligne</h3>
- <app-button
- *ngIf="offerHolder.structure || offerHolder.isMyself"
- class="hide-on-mobile"
- [variant]="'secondary'"
- [label]="'Modifier'"
- [iconName]="'edit'"
- [size]="'small'"
- (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompaniment, offerHolder)"
- />
- <app-icon-button
- *ngIf="offerHolder.structure || offerHolder.isMyself"
- ariaLabel="Modifier les aides aux démarches en ligne"
- class="hide-on-desktop"
- [variant]="'secondary'"
- [iconName]="'edit'"
- (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompaniment, offerHolder)"
- />
- </div>
- <app-tag-item
- *ngIf="containsDigitalHelp(offerHolder.offers)"
- size="small"
- color="blue"
- [label]="FreeWorkShopLabels.free"
- [clickable]="false"
- />
- <app-no-information *ngIf="!containsDigitalHelp(offerHolder.offers)" />
- <div *ngIf="containsDigitalHelp(offerHolder.offers)" class="inline-list">
- <app-tag-item
- *ngFor="let digitalHelp of offerHolder.offers.categoriesDisplay.onlineProcedures"
- [label]="digitalHelp.name"
- [color]="'red'"
- [size]="'small'"
- />
- </div>
- </section>
- <section *ngIf="offerHolder.structure" class="proceduresAccompaniment">
- <div class="sectionHeader">
- <h3 class="uppercase">Autres démarches en ligne</h3>
- <app-button
- class="hide-on-mobile"
- [variant]="'secondary'"
- [label]="'Modifier'"
- [iconName]="'edit'"
- [size]="'small'"
- (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompanimentOther, offerHolder)"
- />
- <app-icon-button
- ariaLabel="Modifier les autres démarches en ligne"
- class="hide-on-desktop"
- [variant]="'secondary'"
- [iconName]="'edit'"
- (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompanimentOther, offerHolder)"
- />
- </div>
-
- <app-no-information *ngIf="!structure.otherDescription" />
- <ng-container *ngIf="structure.otherDescription">
- <p>{{ structure.otherDescription }}</p>
- </ng-container>
- </section>
-
- <section class="learning" id="learning">
- <div class="sectionHeader">
- <h3 class="uppercase">Accompagnements aux usages numériques</h3>
- <app-button
- *ngIf="offerHolder.structure || offerHolder.isMyself"
- class="hide-on-mobile"
- [variant]="'secondary'"
- [label]="'Modifier'"
- [iconName]="'edit'"
- [size]="'small'"
- (action)="goToEdit(structureFormStep.structureTrainingType, offerHolder)"
- />
- <app-icon-button
- *ngIf="offerHolder.structure || offerHolder.isMyself"
- ariaLabel="Modifier les accompagnements aux usages numériques"
- class="hide-on-desktop"
- [variant]="'secondary'"
- [iconName]="'edit'"
- (action)="goToEdit(structureFormStep.structureTrainingType, offerHolder)"
- />
- </div>
-
- <app-no-information *ngIf="!containsDigitalLearning(offerHolder.offers)" />
- <div *ngIf="containsDigitalLearning(offerHolder.offers)" class="formationDetails">
- <app-collapse *ngIf="isBaseSkills(offerHolder.offers)">
+ <div *ngFor="let offerHolder of offerHolders">
+ <section class="innerSection">
+ <app-collapse>
<app-collapse-header>
- <div class="titleCollapse">{{ trainingCategories?.get('baseSkills').name }}</div>
+ <section class="generalHeader">
+ <div class="sectionHeader">
+ <div class="offerHeader">
+ <img
+ alt=""
+ height="48px"
+ width="48px"
+ [src]="'../../../../../assets/ico/' + getStructureTypeIcon() + '.svg'"
+ />
+ <div class="offerTitle">
+ <h3 *ngIf="offerHolder.structure">Offre de la structure</h3>
+ <h3 *ngIf="offerHolder.user">
+ Offre de {{ offerHolder.user.name }} {{ offerHolder.user.surname }}
+ {{ offerHolder.isMyself ? ' (moi)' : '' }}
+ </h3>
+ <!-- TODO : mettre le bon tag -->
+ <app-tag-item
+ *ngIf="structure.structureType?.name"
+ [label]="structure.structureType?.name"
+ [size]="'small'"
+ [color]="'grey'"
+ />
+ </div>
+ <app-tag-item
+ *ngIf="offerHolder.user && offerHolder.user.withAppointment"
+ label="Rendez-vous"
+ [size]="'small'"
+ [color]="'blue'"
+ iconName="calendar"
+ />
+ </div>
+ </div>
+ </section>
</app-collapse-header>
<app-collapse-content>
- <hr />
- <ul>
- <li *ngFor="let skill of offerHolder.offers.categoriesDisplay.baseSkills">
- {{ skill.name }}
- </li>
- </ul>
+ <section class="proceduresAccompaniment">
+ <div class="sectionHeader">
+ <h4>Aides aux démarches en ligne</h4>
+ <app-button
+ *ngIf="(offerHolder.structure || offerHolder.isMyself) && containsDigitalHelp(offerHolder.offers)"
+ class="hide-on-mobile"
+ [variant]="'secondary'"
+ [label]="'Modifier'"
+ [iconName]="'edit'"
+ [size]="'small'"
+ (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompaniment, offerHolder)"
+ />
+ <app-button
+ *ngIf="(offerHolder.structure || offerHolder.isMyself) && !containsDigitalHelp(offerHolder.offers)"
+ class="hide-on-mobile"
+ [variant]="'secondary'"
+ [label]="'Ajouter'"
+ [iconName]="'plus'"
+ [size]="'small'"
+ (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompaniment, offerHolder)"
+ />
+ <app-icon-button
+ *ngIf="(offerHolder.structure || offerHolder.isMyself) && containsDigitalHelp(offerHolder.offers)"
+ ariaLabel="Modifier les aides aux démarches en ligne"
+ class="hide-on-desktop"
+ [variant]="'secondary'"
+ [iconName]="'edit'"
+ (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompaniment, offerHolder)"
+ />
+ <app-icon-button
+ *ngIf="(offerHolder.structure || offerHolder.isMyself) && !containsDigitalHelp(offerHolder.offers)"
+ ariaLabel="Ajouter des aides aux démarches en ligne"
+ class="hide-on-desktop"
+ [variant]="'secondary'"
+ [iconName]="'plus'"
+ (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompaniment, offerHolder)"
+ />
+ </div>
+ <app-no-information *ngIf="!containsDigitalHelp(offerHolder.offers)" />
+ <div *ngIf="containsDigitalHelp(offerHolder.offers)" class="inline-list">
+ <div class="wrapper">
+ <ng-container *ngFor="let accompagnement of structure.categoriesDisplay.onlineProcedures.sort()">
+ <app-logo-card *ngIf="accompagnement.name !== 'Autres'" [module]="accompagnement" />
+ </ng-container>
+ </div>
+ </div>
+
+ <div class="sectionHeader">
+ <strong>Autres démarches : </strong>
+ <app-button
+ *ngIf="structure.otherDescription"
+ class="hide-on-mobile"
+ [variant]="'secondary'"
+ [label]="'Modifier'"
+ [iconName]="'edit'"
+ [size]="'small'"
+ (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompanimentOther, offerHolder)"
+ />
+ <app-button
+ *ngIf="!structure.otherDescription"
+ class="hide-on-mobile"
+ [variant]="'secondary'"
+ [label]="'Ajouter'"
+ [iconName]="'plus'"
+ [size]="'small'"
+ (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompanimentOther, offerHolder)"
+ />
+ <app-icon-button
+ *ngIf="structure.otherDescription"
+ ariaLabel="Modifier les autres démarches en ligne"
+ class="hide-on-desktop"
+ [variant]="'secondary'"
+ [iconName]="'edit'"
+ (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompanimentOther, offerHolder)"
+ />
+ <app-icon-button
+ *ngIf="structure.otherDescription"
+ ariaLabel="Ajouter les autres démarches en ligne"
+ class="hide-on-desktop"
+ [variant]="'secondary'"
+ [iconName]="'plus'"
+ (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompanimentOther, offerHolder)"
+ />
+ </div>
+ <app-no-information *ngIf="!structure.otherDescription" />
+ <p *ngIf="structure.otherDescription">{{ structure.otherDescription }}</p>
+ </section>
+
+ <section class="learning" id="learning">
+ <div class="sectionHeader">
+ <h4>Accompagnements numériques</h4>
+ <app-button
+ *ngIf="containsDigitalLearning(offerHolder.offers)"
+ class="hide-on-mobile"
+ [variant]="'secondary'"
+ [label]="'Modifier'"
+ [iconName]="'edit'"
+ [size]="'small'"
+ (action)="goToEdit(structureFormStep.structureTrainingType, offerHolder)"
+ />
+ <app-button
+ *ngIf="!containsDigitalLearning(offerHolder.offers)"
+ class="hide-on-mobile"
+ [variant]="'secondary'"
+ [label]="'Ajouter'"
+ [iconName]="'plus'"
+ [size]="'small'"
+ (action)="goToEdit(structureFormStep.structureTrainingType, offerHolder)"
+ />
+ <app-icon-button
+ *ngIf="containsDigitalLearning(offerHolder.offers)"
+ ariaLabel="Modifier les accompagnements aux usages numériques"
+ class="hide-on-desktop"
+ [variant]="'secondary'"
+ [iconName]="'edit'"
+ (action)="goToEdit(structureFormStep.structureTrainingType, offerHolder)"
+ />
+ <app-icon-button
+ *ngIf="!containsDigitalLearning(offerHolder.offers)"
+ ariaLabel="Ajouter les accompagnements aux usages numériques"
+ class="hide-on-desktop"
+ [variant]="'secondary'"
+ [iconName]="'plus'"
+ (action)="goToEdit(structureFormStep.structureTrainingType, offerHolder)"
+ />
+ </div>
+
+ <app-no-information *ngIf="!containsDigitalLearning(offerHolder.offers)" />
+ <div *ngIf="containsDigitalLearning(offerHolder.offers)" class="formationDetails subSection">
+ <div *ngIf="isBaseSkills(offerHolder.offers)">
+ <div class="title">{{ trainingCategories?.get('baseSkills').name }}</div>
+ <ul>
+ <li *ngFor="let skill of offerHolder.offers.categoriesDisplay.baseSkills">
+ {{ skill.name }}
+ </li>
+ </ul>
+ </div>
+ <div *ngIf="isAdvancedSkills(offerHolder.offers)">
+ <div class="title">
+ {{ trainingCategories?.get('advancedSkills').name }}
+ </div>
+ <ul>
+ <li *ngFor="let skill of offerHolder.offers.categoriesDisplay.advancedSkills">
+ {{ skill.name }}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </section>
</app-collapse-content>
</app-collapse>
-
- <app-collapse *ngIf="isAdvancedSkills(offerHolder.offers)">
- <app-collapse-header>
- <div class="titleCollapse">
- {{ trainingCategories?.get('advancedSkills').name }}
- </div>
- </app-collapse-header>
- <app-collapse-content>
- <hr />
- <ul>
- <li *ngFor="let skill of offerHolder.offers.categoriesDisplay.advancedSkills">
- {{ skill.name }}
- </li>
- </ul>
- </app-collapse-content>
- </app-collapse>
- </div>
- </section>
- </div>
+ </section>
+ </div>
+ </section>
<section
*ngIf="containsDigitalLearning(structure)"
@@ -406,7 +466,7 @@
>
<div class="sectionHeader">
<div>
- <h3 class="uppercase">Gratuité des accompagnements aux usages numériques</h3>
+ <h3>Gratuité des accompagnements aux usages numériques</h3>
<app-missing-information *ngIf="!freeWorkShop" />
</div>
<app-button
@@ -435,7 +495,7 @@
<section class="wifi">
<div class="sectionHeader">
- <h3 class="uppercase">Wifi</h3>
+ <h3>Wifi</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -459,7 +519,7 @@
<section class="equipements">
<div class="sectionHeader">
- <h3 class="uppercase">Matériel en accès libre</h3>
+ <h3>Matériel en accès libre</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -500,7 +560,7 @@
<section class="solidarityMaterial">
<div class="sectionHeader">
- <h3 class="uppercase">Achat de matériel à tarif solidaire</h3>
+ <h3>Achat de matériel à tarif solidaire</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -531,7 +591,7 @@
<section class="accessModality" [ngClass]="{ warningBorder: !isFieldValid('accessModality', 'categories') }">
<div class="sectionHeader">
<div>
- <h3 class="uppercase">Modalité d’accès</h3>
+ <h3>Modalité d’accès</h3>
<app-missing-information *ngIf="!isFieldValid('accessModality', 'categories')" />
</div>
<app-button
@@ -566,7 +626,7 @@
>
<div class="sectionHeader">
<div>
- <h3 class="uppercase">Publics accueillis</h3>
+ <h3>Publics accueillis</h3>
<app-missing-information *ngIf="!isFieldValid('age', 'categories')" />
</div>
<app-button
@@ -600,7 +660,7 @@
<section class="publics">
<div class="sectionHeader">
- <h3 class="uppercase">Public spécifique admis</h3>
+ <h3>Public spécifique admis</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -658,7 +718,7 @@
<section class="PMR" [ngClass]="{ warningBorder: structure.pmrAccess === null }">
<div class="sectionHeader">
<div>
- <h3 class="uppercase">Accessibilité pour les personnes à mobilité réduite</h3>
+ <h3>Accessibilité pour les personnes à mobilité réduite</h3>
<app-missing-information *ngIf="structure.pmrAccess === null" />
</div>
<app-button
@@ -685,7 +745,7 @@
<section *ngIf="this.members?.length !== 0" class="members">
<div class="sectionHeader">
- <h3 class="uppercase">Membres</h3>
+ <h3>Membres</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -714,7 +774,7 @@
<section class="labels">
<div class="sectionHeader">
- <h3 class="uppercase">Labellisations</h3>
+ <h3>Labellisations</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
@@ -739,7 +799,7 @@
<section class="dataShare">
<div class="sectionHeader">
- <h3 class="uppercase">Partage de données sur data.grandlyon.com</h3>
+ <h3>Partage de données sur data.grandlyon.com</h3>
<app-button
class="hide-on-mobile"
[variant]="'secondary'"
--
GitLab