feat(personnalOffer): Add-multi-checkbox

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>

src/app/shared/components/training-type-picker/training-type-picker.component.scss

@@ -47,6 +47,10 @@ button {
     @include lato-bold-14;
     margin-bottom: 12px;
   }
+  .checkbox {
+    width: 2.25rem;
+    margin-top: 0.2rem;
+  }
 
   button {
     background: none;

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';
+    }
+  }
 }

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;
         }

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;
@@ -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 {