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

Commit 2b6ad4c

Browse files
author
JWittmeyer
committed
With icon option
1 parent a2f284a commit 2b6ad4c

File tree

5 files changed

+192
-35
lines changed

5 files changed

+192
-35
lines changed

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,26 @@ import { FormArray } from "@angular/forms";
22

33
/**
44
* Optionset for kern dropdown
5-
* @buttonCaption {string} - used as caption for the button
65
* @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
6+
* @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
88
* @stopClickPropagation {boolean, optional} - stops the event propagation of the click event
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)
12-
* @hasCheckboxes {boolean, optional} - used for checkbox like dropdowns (e.g. data browser)
12+
* @optionIcons {string[], optional} - displays a predfined icon if set for the index (needs to be the exact same length as the optionArray)
13+
* @hasCheckboxes {boolean, optional} - helper for checkbox like dropdowns (e.g. data browser)
1314
*/
1415
export type DropdownOptions = {
15-
buttonCaption: string;
1616
optionArray: string[] | FormArray[] | any[];
17+
buttonCaption?: string;
1718
valuePropertyPath?: string;
1819
stopClickPropagation?: boolean;
1920
buttonTooltip?: string;
2021
isDisabled?: boolean;
21-
isOptionDisabled?: boolean[];//to be implmemented
22+
isOptionDisabled?: boolean[];
23+
optionIcons?: string[];
2224
hasCheckboxes?: boolean; //to be implmemented
2325
};
24-
//TODO: add more optoins & ensure size of dropdown items is at least size of button
26+
//TODO: add more optoins like the icon array
2527

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

Lines changed: 114 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="relative">
2-
<button type="button" [attr.data-tip]="dropdownOptions.buttonTooltip"
2+
<button #dropdownOpenButton type="button" [attr.data-tip]="dropdownOptions.buttonTooltip"
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>
@@ -20,14 +20,19 @@
2020
<div #dropdownOptionsDiv
2121
class="origin-top-right absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden"
2222
[ngClass]="dropdownClassList" role="menu" aria-orientation="vertical" aria-labelledby="menu-button"
23-
tabindex="-1">
23+
[style.min-width.px]="dropdownOpenButton.offsetWidth" tabindex="-1">
2424
<div class="py-1 cursor-pointer" role="none">
25-
<option *ngFor="let caption of dropdownOptionCaptions;let i = index"
26-
(click)="performActionOnOption($event,i)"
27-
class="text-gray-700 block px-4 py-1.5 text-xs hover:bg-gray-700 hover:text-white" role="menuitem"
28-
tabindex="-1" id="menu-item-0">
25+
<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"
28+
role="menuitem" tabindex="-1" id="menu-item-0">
29+
<ng-template [ngIf]="dropdownOptions.optionIcons?.length">
30+
<ng-container [ngTemplateOutlet]="icons"
31+
[ngTemplateOutletContext]="{iconName:dropdownOptions.optionIcons[i]}">
32+
</ng-container>
33+
</ng-template>
2934
{{ caption }}
30-
</option>
35+
</div>
3136
<!-- <ng-template #optionCheckboxes>
3237
<div *ngFor="let task of arrayOptions">
3338
<div class="form-control pl-2">
@@ -48,4 +53,105 @@
4853
</div> -->
4954
</div>
5055
</div>
51-
</div>
56+
</div>
57+
58+
59+
<ng-template #icons let-iconName="iconName">
60+
<ng-container [ngSwitch]="iconName">
61+
<ng-template ngSwitchDefault>X
62+
</ng-template>
63+
<ng-template ngSwitchCase="clickbait">
64+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-fish-hook" width="20"
65+
height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
66+
stroke-linecap="round" stroke-linejoin="round">
67+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
68+
<path d="M16 9v6a5 5 0 0 1 -10 0v-4l3 3"></path>
69+
<circle cx="16" cy="7" r="2"></circle>
70+
<path d="M16 5v-2"></path>
71+
</svg>
72+
</ng-template>
73+
<ng-template ngSwitchCase="conversational-ai">
74+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle" width="20"
75+
height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
76+
stroke-linecap="round" stroke-linejoin="round">
77+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
78+
<path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>
79+
<line x1="12" y1="12" x2="12" y2="12.01"></line>
80+
<line x1="8" y1="12" x2="8" y2="12.01"></line>
81+
<line x1="16" y1="12" x2="16" y2="12.01"></line>
82+
</svg>
83+
</ng-template>
84+
<ng-template ngSwitchCase="ag-news">
85+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-news" width="20" height="20"
86+
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
87+
stroke-linejoin="round">
88+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
89+
<path
90+
d="M16 6h3a1 1 0 0 1 1 1v11a2 2 0 0 1 -4 0v-13a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1v12a3 3 0 0 0 3 3h11">
91+
</path>
92+
<line x1="8" y1="8" x2="12" y2="8"></line>
93+
<line x1="8" y1="12" x2="12" y2="12"></line>
94+
<line x1="8" y1="16" x2="12" y2="16"></line>
95+
</svg>
96+
</ng-template>
97+
<ng-template ngSwitchCase="select-all">
98+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-check inline-block"
99+
width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
100+
stroke-linecap="round" stroke-linejoin="round">
101+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
102+
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
103+
<path d="M9 12l2 2l4 -4"></path>
104+
</svg>
105+
</ng-template>
106+
<ng-template ngSwitchCase="deselect-all">
107+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square inline-block" width="20"
108+
height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
109+
stroke-linecap="round" stroke-linejoin="round">
110+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
111+
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
112+
</svg>
113+
</ng-template>
114+
<ng-template ngSwitchCase="run">
115+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
116+
fill="currentColor">
117+
<path fill-rule="evenodd"
118+
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
119+
clip-rule="evenodd" />
120+
</svg>
121+
</ng-template>
122+
<ng-template ngSwitchCase="edit-term">
123+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
124+
fill="currentColor">
125+
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
126+
<path fill-rule="evenodd"
127+
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
128+
clip-rule="evenodd" />
129+
</svg>
130+
</ng-template>
131+
<ng-template ngSwitchCase="remove-term">
132+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
133+
fill="currentColor">
134+
<path fill-rule="evenodd"
135+
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
136+
clip-rule="evenodd" />
137+
</svg>
138+
</ng-template>
139+
<ng-template ngSwitchCase="whitelist-term">
140+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
141+
fill="currentColor">
142+
<path fill-rule="evenodd"
143+
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
144+
clip-rule="evenodd" />
145+
</svg>
146+
</ng-template>
147+
<ng-template ngSwitchCase="blacklist-term">
148+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
149+
fill="currentColor">
150+
<path fill-rule="evenodd"
151+
d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z"
152+
clip-rule="evenodd" />
153+
</svg>
154+
</ng-template>
155+
</ng-container>
156+
157+
</ng-template>

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export class DropdownItComponent implements OnChanges {
2929
buttonClassList: string;
3030
dropdownClassList: string;
3131
dropdownOptionCaptions: string[];
32+
useValueAsCaption: boolean = false;
3233

3334
constructor() { }
3435
ngOnChanges(changes: SimpleChanges): void {
@@ -70,8 +71,17 @@ export class DropdownItComponent implements OnChanges {
7071
this.hasInputErrors = "";
7172
if (!this.dropdownOptions) this.hasInputErrors = "no dropdown options provided\n";
7273
if (!this.dropdownOptions.optionArray || this.dropdownOptions.optionArray.length == 0) this.hasInputErrors = "no text provided\n";
73-
if (!this.dropdownOptions.buttonCaption) this.hasInputErrors = "no button caption provided\n";
74+
if (!this.dropdownOptions.buttonCaption && this.dropdownOptionCaptions.length > 0) {
75+
this.dropdownOptions.buttonCaption = this.dropdownOptionCaptions[0];
76+
this.useValueAsCaption = true;
77+
}
7478
if (this.dropdownOptions.isOptionDisabled && this.dropdownOptions.isOptionDisabled.length != this.dropdownOptions.optionArray.length) this.hasInputErrors = "array options != isOptionDisabled length\n";
79+
if (this.dropdownOptions.optionIcons && this.dropdownOptions.optionIcons.length != this.dropdownOptions.optionIcons.length) this.hasInputErrors = "array options != optionIcons length\n";
80+
81+
82+
if (this.dropdownOptions.hasCheckboxes) {
83+
84+
}
7585

7686
if (this.hasInputErrors) console.log(this.hasInputErrors);
7787

@@ -98,6 +108,7 @@ export class DropdownItComponent implements OnChanges {
98108
}
99109

100110
if (!this.dropdownOptions.valuePropertyPath) {
111+
if (this.useValueAsCaption) this.dropdownOptions.buttonCaption = this.dropdownOptionCaptions[clickIndex];
101112
this.optionClicked.emit(this.dropdownOptionCaptions[clickIndex]);
102113
return;
103114
}
@@ -112,6 +123,7 @@ export class DropdownItComponent implements OnChanges {
112123
console.log("something is wrong in the click action of the dropdown component - property path");
113124
return;
114125
}
126+
if (this.useValueAsCaption) this.dropdownOptions.buttonCaption = tmp;
115127
this.optionClicked.emit(tmp);
116128

117129
}

0 commit comments

Comments
 (0)