Skip to content
This repository was archived by the owner on Mar 8, 2024. It is now read-only.

Commit 361714f

Browse files
author
JWittmeyer
committed
Adds checkbox logic
1 parent 2b6ad4c commit 361714f

File tree

4 files changed

+77
-105
lines changed

4 files changed

+77
-105
lines changed

‎src/app/base/components/dropdown-it/dropdown-it-helper.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { FormArray } from "@angular/forms";
55
* @optionArray {string[] | FormArray[] | any[]} - Can be any array. string array is just used, FormArray or any object array tries to use "name" property then "text" last first string property
66
* @buttonCaption {string, optional} - used as caption for the button, if not given the first / current value is used
77
* @valuePropertyPath {string, optional} - if undefined option text is returned, else (e.g. name.tmp.xyz) the path is split and used to access the object property
8-
* @stopClickPropagation {boolean, optional} - stops the event propagation of the click event
8+
* @keepDropdownOpen {boolean, optional} - stops the event propagation of the click event and therfore keeps the menu open
99
* @buttonTooltip {string, optional} - adds a tooltip if defined
1010
* @isDisabled {boolean, optional} - disables the dropdown
1111
* @isOptionDisabled {boolean[], optional} - disables the dropdown option (needs to be the exact same length as the optionArray)
@@ -16,12 +16,11 @@ export type DropdownOptions = {
1616
optionArray: string[] | FormArray[] | any[];
1717
buttonCaption?: string;
1818
valuePropertyPath?: string;
19-
stopClickPropagation?: boolean;
19+
keepDropdownOpen?: boolean;
2020
buttonTooltip?: string;
2121
isDisabled?: boolean;
2222
isOptionDisabled?: boolean[];
2323
optionIcons?: string[];
24-
hasCheckboxes?: boolean; //to be implmemented
24+
hasCheckboxes?: boolean;
2525
};
26-
//TODO: add more optoins like the icon array
2726

‎src/app/base/components/dropdown-it/dropdown-it.component.html

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
class="inline-flex rounded-md border border-gray-300 shadow-sm px-4 py-1.5 items-center bg-white text-xs font-semibold text-gray-700 cursor-pointer focus:ring-offset-2 focus:ring-offset-gray-400"
44
id="menu-button" aria-expanded="true" aria-haspopup="true" [disabled]="dropdownOptions.isDisabled"
55
[ngClass]="buttonClassList" (isMenuOpen)="toggleVisible($event, dropdownOptionsDiv)" appDropdown>
6-
{{ dropdownOptions.buttonCaption }}
6+
{{ dropdownOptions.hasCheckboxes?'':dropdownOptions.buttonCaption }}
77
<ng-template [ngIf]="dropdownOptions.hasCheckboxes">
8-
<label class="truncate">{{getDropdownDisplayText(arrayOptions,"EMPTY")}}
9-
<span style="color:#2563eb">{{getDropdownDisplayText(arrayOptions,"NOT_NEGATED")}}</span>
10-
<span style="color:#ef4444">{{getDropdownDisplayText(arrayOptions,"NEGATED")}}</span>
8+
<label class="truncate cursor-pointer">{{getDropdownDisplayText(dropdownOptions.optionArray,"EMPTY")}}
9+
<span style="color:#2563eb">{{getDropdownDisplayText(dropdownOptions.optionArray,"NOT_NEGATED")}}</span>
10+
<span style="color:#ef4444">{{getDropdownDisplayText(dropdownOptions.optionArray,"NEGATED")}}</span>
1111
</label>
1212
</ng-template>
1313
<svg class="-mr-1 ml-auto h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
@@ -23,34 +23,21 @@
2323
[style.min-width.px]="dropdownOpenButton.offsetWidth" tabindex="-1">
2424
<div class="py-1 cursor-pointer" role="none">
2525
<div *ngFor="let caption of dropdownOptionCaptions;let i = index" (click)="performActionOnOption($event,i)"
26-
[ngClass]="dropdownOptions.isOptionDisabled?.length && dropdownOptions.isOptionDisabled[i]?'opacity-50 cursor-not-allowed pointer-events-none':''"
27-
class="text-gray-700 block px-2 py-1.5 text-xs hover:bg-gray-700 hover:text-white flex flex-row flex-nowrap items-center gap-x-2"
26+
[ngClass]="[dropdownOptions.isOptionDisabled?.length && dropdownOptions.isOptionDisabled[i]?'opacity-50 cursor-not-allowed':'',!dropdownOptions.hasCheckboxes ? 'hover:bg-gray-700 hover:text-white':'']"
27+
class="text-gray-700 block px-2 py-1.5 text-xs flex flex-row flex-nowrap items-center gap-x-2"
2828
role="menuitem" tabindex="-1" id="menu-item-0">
29+
<ng-template [ngIf]="dropdownOptions.hasCheckboxes">
30+
<div class="h-4 w-4 border-gray-300 border rounded hover:bg-gray-200"
31+
[ngStyle]="{'background-color':getActiveNegateGroupColor(dropdownOptions.optionArray[i]), 'border-color':getActiveNegateGroupColor(dropdownOptions.optionArray[i])}">
32+
</div>
33+
</ng-template>
2934
<ng-template [ngIf]="dropdownOptions.optionIcons?.length">
3035
<ng-container [ngTemplateOutlet]="icons"
3136
[ngTemplateOutletContext]="{iconName:dropdownOptions.optionIcons[i]}">
3237
</ng-container>
3338
</ng-template>
3439
{{ caption }}
3540
</div>
36-
<!-- <ng-template #optionCheckboxes>
37-
<div *ngFor="let task of arrayOptions">
38-
<div class="form-control pl-2">
39-
<label
40-
[formArrayName]="formArrayName"
41-
class="label cursor-pointer"
42-
(click)="performActionOnOption(task,$event)">
43-
<div class="h-4 w-4 border-gray-300 border rounded hover:bg-gray-200"
44-
[ngStyle]="{'background-color':getActiveNegateGroupColor(task), 'border-color':getActiveNegateGroupColor(task)}">
45-
</div>
46-
<span
47-
class="text-gray-700 block px-2 py-1.5 text-xs truncate w-full"
48-
[ngClass]="task.get('id').value == 'NO_LABEL'?'italic':null">{{task.get("name").value}}</span>
49-
</label>
50-
</div>
51-
</div>
52-
</ng-template>
53-
</div> -->
5441
</div>
5542
</div>
5643
</div>

‎src/app/base/components/dropdown-it/dropdown-it.component.ts

Lines changed: 61 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,16 @@ import { DropdownOptions } from './dropdown-it-helper';
1010
export class DropdownItComponent implements OnChanges {
1111

1212
@Input() dropdownOptions: DropdownOptions;
13-
// @Input() condition;
14-
// @Input() valueIfConditionTrue;
15-
// @Input() valueIfConditionFalse;
16-
// @Input() buttonTooltip: string;
17-
// @Input() labelingTasks;
18-
// @Input() property: string;
19-
// @Input() optionProperty: string;
20-
// @Input() disabledCondition: boolean;
21-
// @Input() hasCheckboxes: boolean;
22-
// @Input() formArrayName: string;
23-
24-
@Output() optionClicked = new EventEmitter<string>();
25-
26-
private hasInputErrors: string;
27-
13+
@Output() optionClicked = new EventEmitter<string | any>();
2814

15+
hasInputErrors: string;
2916
buttonClassList: string;
3017
dropdownClassList: string;
3118
dropdownOptionCaptions: string[];
3219
useValueAsCaption: boolean = false;
3320

3421
constructor() { }
3522
ngOnChanges(changes: SimpleChanges): void {
36-
console.log("changed something", changes, this.dropdownOptions);
3723
this.dropdownOptionCaptions = this.getTextArray(this.dropdownOptions.optionArray);
3824
this.runInputChecks();
3925
this.buildHelperValues();
@@ -42,28 +28,29 @@ export class DropdownItComponent implements OnChanges {
4228
private getTextArray(arr: string[] | any[]): string[] {
4329
if (!arr) return [];
4430
if (arr.length == 0) return [];
45-
console.log(typeof arr[0])
4631
if (typeof arr[0] == 'string') return arr as string[];
47-
if (arr[0].name) return arr.map(a => a.name);
48-
if (arr[0].text) return arr.map(a => a.text);
32+
let valueArray = arr;
33+
if (arr[0].value && typeof arr[0].value == 'object') valueArray = arr.map(x => x.getRawValue());
34+
if (valueArray[0].name) return valueArray.map(a => a.name);
35+
if (valueArray[0].text) return valueArray.map(a => a.text);
4936

5037
let firstStringKey = "";
5138

52-
for (const key of Object.keys(arr[0])) {
53-
if (typeof arr[0][key] == 'string') {
39+
for (const key of Object.keys(valueArray[0])) {
40+
if (typeof valueArray[0][key] == 'string') {
5441
firstStringKey = key;
5542
break;
5643
}
5744
}
5845
if (!firstStringKey) throw new Error("Cant find text in given array - dropdown");
59-
return arr.map(a => a[firstStringKey]);
46+
return valueArray.map(a => a[firstStringKey]);
6047
}
6148

6249
private buildHelperValues() {
6350
this.buttonClassList = "";
6451
this.buttonClassList += this.dropdownOptions.isDisabled ? 'opacity-50 cursor-not-allowed' : 'opacity-100 cursor-pointer';
65-
this.buttonClassList += this.dropdownOptions.buttonTooltip ? 'tooltip tooltip-right' : '';
66-
this.dropdownClassList = this.dropdownOptions.hasCheckboxes ? 'w-80' : 'w-auto';
52+
this.buttonClassList += this.dropdownOptions.buttonTooltip ? ' tooltip tooltip-right' : '';
53+
this.dropdownClassList = this.dropdownOptions.hasCheckboxes ? ' w-80' : ' w-auto';
6754
this.buttonClassList += this.dropdownClassList;
6855
}
6956

@@ -79,10 +66,6 @@ export class DropdownItComponent implements OnChanges {
7966
if (this.dropdownOptions.optionIcons && this.dropdownOptions.optionIcons.length != this.dropdownOptions.optionIcons.length) this.hasInputErrors = "array options != optionIcons length\n";
8067

8168

82-
if (this.dropdownOptions.hasCheckboxes) {
83-
84-
}
85-
8669
if (this.hasInputErrors) console.log(this.hasInputErrors);
8770

8871
}
@@ -100,7 +83,8 @@ export class DropdownItComponent implements OnChanges {
10083
}
10184

10285
performActionOnOption(event: MouseEvent, clickIndex: number) {
103-
if (this.dropdownOptions.stopClickPropagation) event.stopPropagation();
86+
if (this.dropdownOptions.isOptionDisabled?.length && this.dropdownOptions.isOptionDisabled[clickIndex]) return;
87+
if (this.dropdownOptions.keepDropdownOpen) event.stopPropagation();
10488

10589
if (clickIndex >= this.dropdownOptions.optionArray.length) {
10690
console.log("something is wrong in the click action of the dropdown component");
@@ -109,7 +93,8 @@ export class DropdownItComponent implements OnChanges {
10993

11094
if (!this.dropdownOptions.valuePropertyPath) {
11195
if (this.useValueAsCaption) this.dropdownOptions.buttonCaption = this.dropdownOptionCaptions[clickIndex];
112-
this.optionClicked.emit(this.dropdownOptionCaptions[clickIndex]);
96+
if (this.dropdownOptions.hasCheckboxes) this.optionClicked.emit(this.dropdownOptions.optionArray[clickIndex]);
97+
else this.optionClicked.emit(this.dropdownOptionCaptions[clickIndex]);
11398
return;
11499
}
115100

@@ -128,50 +113,50 @@ export class DropdownItComponent implements OnChanges {
128113

129114
}
130115

131-
// getActiveNegateGroupColor(group: FormGroup) {
132-
// if (!group.get('active').value) return null;
133-
// if (group.contains('negate'))
134-
// return group.get('negate').value ? '#ef4444' : '#2563eb';
135-
// return '#2563eb';
136-
// }
137-
138-
139-
// getDropdownDisplayText(
140-
// formControls: AbstractControl[],
141-
// labelFor: string
142-
// ): string {
143-
// let text = '';
144-
// let atLeastOneNegated: boolean = false;
145-
// for (let c of formControls) {
146-
// const hasNegate = Boolean(c.get('negate'));
147-
// if (labelFor == 'EMPTY' && c.get('active').value) return '';
148-
// else if (
149-
// labelFor == 'NOT_NEGATED' &&
150-
// c.get('active').value &&
151-
// (!hasNegate || (hasNegate && !c.get('negate').value))
152-
// ) {
153-
// text += (text == '' ? '' : ', ') + c.get('name').value;
154-
// } else if (
155-
// labelFor == 'NEGATED' &&
156-
// c.get('active').value &&
157-
// hasNegate &&
158-
// c.get('negate').value
159-
// ) {
160-
// text += (text == '' ? '' : ', ') + c.get('name').value;
161-
// }
162-
// if (
163-
// !atLeastOneNegated &&
164-
// c.get('active').value &&
165-
// hasNegate &&
166-
// c.get('negate').value
167-
// )
168-
// atLeastOneNegated = true;
169-
// }
170-
// if (labelFor == 'EMPTY') return 'None Selected';
171-
172-
// if (labelFor == 'NOT_NEGATED' && atLeastOneNegated && text != '')
173-
// return text + ', ';
174-
175-
// return text;
176-
// }
116+
getActiveNegateGroupColor(group: FormGroup) {
117+
if (!group.get('active').value) return null;
118+
if (group.contains('negate'))
119+
return group.get('negate').value ? '#ef4444' : '#2563eb';
120+
return '#2563eb';
121+
}
122+
123+
124+
getDropdownDisplayText(
125+
formControls: AbstractControl[],
126+
labelFor: string
127+
): string {
128+
let text = '';
129+
let atLeastOneNegated: boolean = false;
130+
for (let c of formControls) {
131+
const hasNegate = Boolean(c.get('negate'));
132+
if (labelFor == 'EMPTY' && c.get('active').value) return '';
133+
else if (
134+
labelFor == 'NOT_NEGATED' &&
135+
c.get('active').value &&
136+
(!hasNegate || (hasNegate && !c.get('negate').value))
137+
) {
138+
text += (text == '' ? '' : ', ') + c.get('name').value;
139+
} else if (
140+
labelFor == 'NEGATED' &&
141+
c.get('active').value &&
142+
hasNegate &&
143+
c.get('negate').value
144+
) {
145+
text += (text == '' ? '' : ', ') + c.get('name').value;
146+
}
147+
if (
148+
!atLeastOneNegated &&
149+
c.get('active').value &&
150+
hasNegate &&
151+
c.get('negate').value
152+
)
153+
atLeastOneNegated = true;
154+
}
155+
if (labelFor == 'EMPTY') return 'None Selected';
156+
157+
if (labelFor == 'NOT_NEGATED' && atLeastOneNegated && text != '')
158+
return text + ', ';
159+
160+
return text;
161+
}
177162
}

‎src/app/data/components/data-browser/data-browser.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,8 @@
345345

346346
<kern-dropdown-it [dropdownOptions]="{
347347
optionArray:groupItem.get('manualLabels').controls,
348-
hasCheckboxes:true
348+
hasCheckboxes:true,
349+
stopClickPropagation:true
349350
}"
350351
(optionClicked)="setActiveNegateGroup($event)">
351352
</kern-dropdown-it>

0 commit comments

Comments
 (0)