From 8c84b9b1f5a84d019535b7d27ae9ed646be4cec6 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Thu, 3 Nov 2022 16:17:02 +0100
Subject: [PATCH 1/3] feat(personnalOffer): Add-multi-checkbox
---
.../training-type-picker.component.html | 14 ++++++++++++-
.../training-type-picker.component.scss | 19 ++++++++++++++++-
.../training-type-picker.component.ts | 21 +++++++++++++++++++
3 files changed, 52 insertions(+), 2 deletions(-)
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.html b/src/app/shared/components/training-type-picker/training-type-picker.component.html
index c32862de6..1ca460408 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.html
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.html
@@ -6,8 +6,20 @@
class="collapseHeader"
fxLayoutAlign="flex-start center"
fxLayout="row"
- (click)="toggleCollapse(categorie.id)"
+ (click)="toggleCollapse(categorie.id); $event.stopPropagation()"
>
+ <label class="checkbox">
+ <input
+ type="checkbox"
+ [checked]="getCategoryCheckboxStatus(categorie) === 'checked'"
+ (change)="pickAllCategory(categorie, $event.target.checked); $event.stopPropagation()"
+ />
+ <span
+ class="customCheck customCheckPrimary"
+ [ngClass]="{ halfCheck: getCategoryCheckboxStatus(categorie) === 'halfChecked' }"
+ ></span>
+ </label>
+
<div class="titleCollapse">
{{ categorie.name }}
</div>
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.scss b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
index e394db9f9..bccadd4d2 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.scss
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
@@ -47,7 +47,24 @@ button {
@include lato-bold-14;
margin-bottom: 12px;
}
-
+ .checkbox {
+ width: 2.25rem;
+ margin-top: 0.2rem;
+ }
+ .halfCheck {
+ position: relative;
+ &:before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 10px;
+ left: 4px;
+ top: 8px;
+ transform: rotate(0deg);
+ border-bottom: solid 2px $grey-2;
+ border-radius: 0;
+ }
+ }
button {
background: none;
max-width: 114px;
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.ts b/src/app/shared/components/training-type-picker/training-type-picker.component.ts
index 751387b08..77f4c990e 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.ts
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.ts
@@ -74,4 +74,25 @@ export class TrainingTypePickerComponent implements OnInit {
}
this.selectedType.emit(this.selectedChoices);
}
+ public pickAllCategory(categorie: Category): void {
+ const index = this.selectedChoices.findIndex((_categorie) => _categorie.id === categorie.id);
+ if (this.getCategoryCheckboxStatus(categorie) === 'checked') {
+ this.selectedChoices[index].modules = [];
+ } else {
+ for (let module of categorie.modules) {
+ if (!this.isModulePicked(categorie, module)) this.selectedChoices[index].modules.push(module);
+ }
+ }
+ }
+
+ public getCategoryCheckboxStatus(c: Category): string {
+ const index = this.selectedChoices.findIndex((_categorie) => _categorie.id === c.id);
+ if (this.selectedChoices[index].modules.length === c.modules.length) {
+ return 'checked';
+ } else if (this.selectedChoices[index].modules.length === 0) {
+ return 'unchecked';
+ } else if (this.selectedChoices[index].modules.length && this.selectedChoices[index].modules.length > 0) {
+ return 'halfChecked';
+ }
+ }
}
--
GitLab
From 4e3b0f102ca95462fed2d90c5abb18d9677c6600 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Thu, 3 Nov 2022 16:31:42 +0100
Subject: [PATCH 2/3] fix global checkbox color
---
src/styles.scss | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/styles.scss b/src/styles.scss
index 0155bc7df..8a67316a8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -209,11 +209,11 @@ button {
opacity: 0;
display: none;
&:checked ~ .customCheck {
- background-color: $grey-1;
+ background-color: $grey-3;
border-color: transparent;
}
&:checked ~ .customCheckPrimary {
- background-color: $primary-color;
+ background-color: $grey-1;
border-color: transparent;
}
&:checked ~ .customCheck:after {
@@ -240,7 +240,7 @@ button {
min-width: 18px;
min-height: 18px;
background-color: $white;
- border: 1px solid $grey;
+ border: 1px solid $grey-3;
cursor: pointer;
position: relative;
border-radius: 4px;
--
GitLab
From a8ac542695b13dab2858584873bc4cdbc38a0299 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Fri, 4 Nov 2022 09:28:21 +0100
Subject: [PATCH 3/3] globalize style
---
.../training-type-picker.component.scss | 15 +--------------
.../modal-filter/modal-filter.component.scss | 14 --------------
src/styles.scss | 14 ++++++++++++++
3 files changed, 15 insertions(+), 28 deletions(-)
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.scss b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
index bccadd4d2..4cf4a1660 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.scss
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
@@ -51,20 +51,7 @@ button {
width: 2.25rem;
margin-top: 0.2rem;
}
- .halfCheck {
- position: relative;
- &:before {
- content: '';
- position: absolute;
- display: block;
- width: 10px;
- left: 4px;
- top: 8px;
- transform: rotate(0deg);
- border-bottom: solid 2px $grey-2;
- border-radius: 0;
- }
- }
+
button {
background: none;
max-width: 114px;
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index c443be97c..6f72e78f8 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
@@ -96,20 +96,6 @@
min-width: 0;
}
.categoryCheckBox {
- .halfCheck {
- position: relative;
- &:before {
- content: '';
- position: absolute;
- display: block;
- width: 10px;
- left: 4px;
- top: 8px;
- transform: rotate(0deg);
- border-bottom: solid 2px $grey-2;
- border-radius: 0;
- }
- }
ul {
display: none;
}
diff --git a/src/styles.scss b/src/styles.scss
index 8a67316a8..b3e3f2cba 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -268,6 +268,20 @@ button {
width: unset;
}
}
+.halfCheck {
+ position: relative;
+ &:before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 10px;
+ left: 4px;
+ top: 8px;
+ transform: rotate(0deg);
+ border-bottom: solid 2px $grey-2;
+ border-radius: 0;
+ }
+}
// Layout
.w-100 {
--
GitLab