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

Commit 2df4c4f

Browse files
lumburovskalinalumburovskalina
committed
Add checkboxes option to kern dropdown
1 parent 4e8d7f3 commit 2df4c4f

File tree

4 files changed

+111
-23
lines changed

4 files changed

+111
-23
lines changed

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

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<button type="button" [attr.data-tip]="buttonTooltip"
2-
class="inline-flex justify-center w-auto 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"
2+
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"
33
id="menu-button" aria-expanded="true" aria-haspopup="true"
44
[disabled]="disabledCondition"
5-
[ngClass]="disabledCondition ? 'opacity-50 cursor-not-allowed' : 'opacity-100 cursor-pointer tooltip tooltip-right'"
5+
[ngClass]="[disabledCondition ? 'opacity-50 cursor-not-allowed' : 'opacity-100 cursor-pointer', buttonTooltip ? 'tooltip tooltip-right': '', hasCheckboxes ? 'w-80' : 'w-auto']"
66
(isMenuOpen)="toggleVisible($event, dropdownOptions)" appDropdown>
77
{{ condition !=null ? valueIfConditionTrue : valueIfConditionFalse }}
8-
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
8+
<ng-template [ngIf]="hasCheckboxes">
9+
<label class="truncate">{{getDropdownDisplayText(arrayOptions,"EMPTY")}}
10+
<span style="color:#2563eb">{{getDropdownDisplayText(arrayOptions,"NOT_NEGATED")}}</span>
11+
<span style="color:#ef4444">{{getDropdownDisplayText(arrayOptions,"NEGATED")}}</span>
12+
</label>
13+
</ng-template>
14+
<svg class="-mr-1 ml-auto h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
915
fill="currentColor" aria-hidden="true">
1016
<path fill-rule="evenodd"
1117
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
@@ -14,13 +20,33 @@
1420
</button>
1521
<div #dropdownOptions
1622
class="origin-top-right absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden"
23+
[ngClass]="hasCheckboxes ? 'w-80' :'w-auto'"
1724
role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
1825
<div class="py-1 cursor-pointer" role="none">
19-
<option *ngFor="let task of arrayOptions" [ngValue]="property !=undefined ? task[property] : task"
20-
(click)="performActionOnOption(property !=undefined ? task[property] : task)"
21-
class="text-gray-700 block px-4 py-1.5 text-xs hover:bg-gray-700 hover:text-white"
22-
role="menuitem" tabindex="-1" id="menu-item-0">
23-
{{ labelingTasks != undefined ? labelingTasks.get(task.key).name : (optionProperty!=undefined ? task[optionProperty] : task + "%") }}
24-
</option>
26+
<ng-template [ngIf]="!hasCheckboxes" [ngIfElse]="optionCheckboxes">
27+
<option *ngFor="let task of arrayOptions" [ngValue]="property !=undefined ? task[property] : task"
28+
(click)="performActionOnOption(property !=undefined ? task[property] : task)"
29+
class="text-gray-700 block px-4 py-1.5 text-xs hover:bg-gray-700 hover:text-white"
30+
role="menuitem" tabindex="-1" id="menu-item-0">
31+
{{ labelingTasks != undefined ? labelingTasks.get(task.key).name : (optionProperty!=undefined ? task[optionProperty] : task + "%") }}
32+
</option>
33+
</ng-template>
34+
<ng-template #optionCheckboxes>
35+
<div *ngFor="let task of arrayOptions">
36+
<div class="form-control pl-2">
37+
<label
38+
formArrayName="manualLabels"
39+
class="label cursor-pointer"
40+
(click)="performActionOnOption(task,$event)">
41+
<div class="h-4 w-4 border-gray-300 border rounded hover:bg-gray-200"
42+
[ngStyle]="{'background-color':getActiveNegateGroupColor(task), 'border-color':getActiveNegateGroupColor(task)}">
43+
</div>
44+
<span
45+
class="text-gray-700 block px-2 py-1.5 text-xs truncate w-full"
46+
[ngClass]="task.get('id').value == 'NO_LABEL'?'italic':null">{{task.get("name").value}}</span>
47+
</label>
48+
</div>
49+
</div>
50+
</ng-template>
2551
</div>
2652
</div>

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

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
2+
import { AbstractControl, FormGroup } from '@angular/forms';
23

34
@Component({
45
selector: 'kern-dropdown-iterative',
@@ -16,6 +17,7 @@ export class DropdownIterativeComponent implements OnInit {
1617
@Input() property: string;
1718
@Input() optionProperty: string;
1819
@Input() disabledCondition: boolean;
20+
@Input() hasCheckboxes: boolean;
1921

2022
@Output() optionClicked = new EventEmitter<string>();
2123

@@ -24,20 +26,67 @@ export class DropdownIterativeComponent implements OnInit {
2426
ngOnInit(): void {
2527
}
2628

27-
toggleVisible(isVisible: boolean, menuButton: HTMLDivElement): void {
29+
toggleVisible(isVisible: boolean, dropdownOptions: HTMLDivElement): void {
2830
if (isVisible) {
29-
menuButton.classList.remove('hidden');
30-
menuButton.classList.add('block');
31-
menuButton.classList.add('z-10');
31+
dropdownOptions.classList.remove('hidden');
32+
dropdownOptions.classList.add('block');
33+
dropdownOptions.classList.add('z-10');
3234
} else {
33-
menuButton.classList.remove('z-10');
34-
menuButton.classList.remove('block');
35-
menuButton.classList.add('hidden');
35+
dropdownOptions.classList.remove('z-10');
36+
dropdownOptions.classList.remove('block');
37+
dropdownOptions.classList.add('hidden');
3638
}
3739
}
3840

39-
performActionOnOption(property: string) {
41+
performActionOnOption(property: string, event?: Event) {
42+
if(this.hasCheckboxes) event.stopPropagation();
4043
this.optionClicked.emit(property);
4144
}
4245

46+
getActiveNegateGroupColor(group: FormGroup) {
47+
if (!group.get('active').value) return null;
48+
if (group.contains('negate'))
49+
return group.get('negate').value ? '#ef4444' : '#2563eb';
50+
return '#2563eb';
51+
}
52+
53+
54+
getDropdownDisplayText(
55+
formControls: AbstractControl[],
56+
labelFor: string
57+
): string {
58+
let text = '';
59+
let atLeastOneNegated: boolean = false;
60+
for (let c of formControls) {
61+
const hasNegate = Boolean(c.get('negate'));
62+
if (labelFor == 'EMPTY' && c.get('active').value) return '';
63+
else if (
64+
labelFor == 'NOT_NEGATED' &&
65+
c.get('active').value &&
66+
(!hasNegate || (hasNegate && !c.get('negate').value))
67+
) {
68+
text += (text == '' ? '' : ', ') + c.get('name').value;
69+
} else if (
70+
labelFor == 'NEGATED' &&
71+
c.get('active').value &&
72+
hasNegate &&
73+
c.get('negate').value
74+
) {
75+
text += (text == '' ? '' : ', ') + c.get('name').value;
76+
}
77+
if (
78+
!atLeastOneNegated &&
79+
c.get('active').value &&
80+
hasNegate &&
81+
c.get('negate').value
82+
)
83+
atLeastOneNegated = true;
84+
}
85+
if (labelFor == 'EMPTY') return 'None Selected';
86+
87+
if (labelFor == 'NOT_NEGATED' && atLeastOneNegated && text != '')
88+
return text + ', ';
89+
90+
return text;
91+
}
4392
}

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,14 @@
343343
</button>
344344
</ng-template>
345345
<ng-template #dropDownML>
346-
<div tabindex="0"
346+
<kern-dropdown-iterative
347+
[arrayOptions]="groupItem.get('manualLabels').controls"
348+
[hasCheckboxes]="true"
349+
(optionClicked)="setActiveNegateGroup($event)"
350+
></kern-dropdown-iterative>
351+
352+
353+
<!-- <div tabindex="0"
347354
class="flex flex-row flex-nowrap select select-sm select-bordered search_reduced_item_width ">
348355
<div class="truncate min-w-0 mr-4">
349356
@@ -353,8 +360,8 @@
353360
<label
354361
style="color:#ef4444">{{getDropdownDisplayText(groupItem.get('manualLabels').controls,"NEGATED")}}</label>
355362
</div>
356-
</div>
357-
<ul tabindex="0"
363+
</div> -->
364+
<!-- <ul tabindex="0"
358365
class="p-2 w-full menu dropdown-content bg-base-100 shadow max-h-80 overflow-y-auto">
359366
<li
360367
*ngFor="let label of groupItem.get('manualLabels').controls; let k = index">
@@ -372,7 +379,7 @@
372379
</label>
373380
</div>
374381
</li>
375-
</ul>
382+
</ul> -->
376383
</ng-template>
377384
</div>
378385
</div>
@@ -392,7 +399,12 @@
392399
</button>
393400
</ng-template>
394401
<ng-template #dropDownWS>
395-
<div tabindex="1"
402+
<kern-dropdown-iterative
403+
[arrayOptions]="groupItem.get('weakSupervisionLabels').controls"
404+
[hasCheckboxes]="true"
405+
(optionClicked)="setActiveNegateGroup($event)"
406+
></kern-dropdown-iterative>
407+
<!-- <div tabindex="1"
396408
class="flex flex-row flex-nowrap select select-sm select-bordered search_reduced_item_width ">
397409
<div class="truncate min-w-0 mr-4">
398410
@@ -422,7 +434,7 @@
422434
</label>
423435
</div>
424436
</li>
425-
</ul>
437+
</ul> -->
426438
</ng-template>
427439
</div>
428440
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1346,6 +1346,7 @@ export class DataBrowserComponent implements OnInit, OnDestroy {
13461346
return '#2563eb';
13471347
}
13481348

1349+
// TO BE REMOVED FROM DATA BROWSER
13491350
getDropdownDisplayText(
13501351
formControls: AbstractControl[],
13511352
labelFor: string

0 commit comments

Comments
 (0)