compact filter
This commit is contained in:
parent
afc2c1f8a1
commit
2995328ec1
@ -1,80 +1,73 @@
|
||||
<!-- Debug: Show all input values -->
|
||||
|
||||
|
||||
<!-- Display Mode - No configuration UI in runner -->
|
||||
<div class="compact-filter">
|
||||
<div class="filter-header">
|
||||
<div class="filter-header" (click)="toggleFilter()">
|
||||
<span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
|
||||
<span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
|
||||
<span class="filter-type">({{ filterType }})</span>
|
||||
<clr-icon shape="caret down" class="expand-icon" *ngIf="!isExpanded"></clr-icon>
|
||||
<clr-icon shape="caret up" class="expand-icon" *ngIf="isExpanded"></clr-icon>
|
||||
</div>
|
||||
|
||||
<!-- Debug: Show which filter type is active -->
|
||||
<div style="background-color: yellow; padding: 5px; margin: 5px;">
|
||||
Current filter type: {{ filterType }}
|
||||
<div *ngIf="filterType === 'text'">Showing TEXT filter</div>
|
||||
<div *ngIf="filterType === 'dropdown'">Showing DROPDOWN filter</div>
|
||||
<div *ngIf="filterType === 'multiselect'">Showing MULTISELECT filter</div>
|
||||
<div *ngIf="filterType === 'date-range'">Showing DATE-RANGE filter</div>
|
||||
<div *ngIf="filterType === 'toggle'">Showing TOGGLE filter</div>
|
||||
</div>
|
||||
<div class="filter-content" *ngIf="isExpanded">
|
||||
<!-- Text Filter -->
|
||||
<div class="filter-control" *ngIf="filterType === 'text'">
|
||||
<input type="text"
|
||||
[(ngModel)]="filterValue"
|
||||
(ngModelChange)="onFilterValueChange($event)"
|
||||
[placeholder]="filterLabel || filterKey"
|
||||
class="clr-input compact-input">
|
||||
</div>
|
||||
|
||||
<!-- Text Filter -->
|
||||
<div class="filter-control" *ngIf="filterType === 'text'">
|
||||
<input type="text"
|
||||
[(ngModel)]="filterValue"
|
||||
(ngModelChange)="onFilterValueChange($event)"
|
||||
[placeholder]="filterLabel || filterKey"
|
||||
class="clr-input compact-input">
|
||||
</div>
|
||||
<!-- Dropdown Filter -->
|
||||
<div class="filter-control" *ngIf="filterType === 'dropdown'">
|
||||
<select [(ngModel)]="filterValue"
|
||||
(ngModelChange)="onFilterValueChange($event)"
|
||||
class="clr-select compact-select">
|
||||
<option value="">{{ filterLabel || filterKey }}</option>
|
||||
<option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Filter -->
|
||||
<div class="filter-control" *ngIf="filterType === 'dropdown'">
|
||||
<select [(ngModel)]="filterValue"
|
||||
(ngModelChange)="onFilterValueChange($event)"
|
||||
class="clr-select compact-select">
|
||||
<option value="">{{ filterLabel || filterKey }}</option>
|
||||
<option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Multi-Select Filter -->
|
||||
<div class="filter-control" *ngIf="filterType === 'multiselect'">
|
||||
<div class="multiselect-container">
|
||||
<div class="checkbox-group">
|
||||
<div *ngFor="let option of filterOptions; let i = index" class="checkbox-item">
|
||||
<input type="checkbox"
|
||||
[checked]="isOptionSelected(option)"
|
||||
(change)="onMultiSelectChange(option, $event)"
|
||||
[id]="'checkbox-' + filterKey + '-' + i"
|
||||
class="clr-checkbox">
|
||||
<label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
|
||||
<!-- Multi-Select Filter -->
|
||||
<div class="filter-control" *ngIf="filterType === 'multiselect'">
|
||||
<div class="multiselect-container">
|
||||
<div class="checkbox-group">
|
||||
<div *ngFor="let option of filterOptions; let i = index" class="checkbox-item">
|
||||
<input type="checkbox"
|
||||
[checked]="isOptionSelected(option)"
|
||||
(change)="onMultiSelectChange(option, $event)"
|
||||
[id]="'checkbox-' + filterKey + '-' + i"
|
||||
class="clr-checkbox">
|
||||
<label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Range Filter -->
|
||||
<div class="filter-control date-range" *ngIf="filterType === 'date-range'">
|
||||
<input type="date"
|
||||
[(ngModel)]="filterValue.start"
|
||||
(ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
|
||||
placeholder="Start Date"
|
||||
class="clr-input compact-date">
|
||||
<input type="date"
|
||||
[(ngModel)]="filterValue.end"
|
||||
(ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
|
||||
placeholder="End Date"
|
||||
class="clr-input compact-date">
|
||||
</div>
|
||||
<!-- Date Range Filter -->
|
||||
<div class="filter-control date-range" *ngIf="filterType === 'date-range'">
|
||||
<div class="date-input-group">
|
||||
<input type="date"
|
||||
[(ngModel)]="filterValue.start"
|
||||
(ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
|
||||
placeholder="Start Date"
|
||||
class="clr-input compact-date">
|
||||
<span class="date-separator">to</span>
|
||||
<input type="date"
|
||||
[(ngModel)]="filterValue.end"
|
||||
(ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
|
||||
placeholder="End Date"
|
||||
class="clr-input compact-date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Filter -->
|
||||
<div class="filter-control toggle" *ngIf="filterType === 'toggle'">
|
||||
<input type="checkbox"
|
||||
[(ngModel)]="filterValue"
|
||||
(ngModelChange)="onToggleChange($event)"
|
||||
clrToggle
|
||||
class="clr-toggle">
|
||||
<label class="toggle-label">{{ filterLabel || filterKey }}</label>
|
||||
<!-- Toggle Filter -->
|
||||
<div class="filter-control toggle" *ngIf="filterType === 'toggle'">
|
||||
<input type="checkbox"
|
||||
[(ngModel)]="filterValue"
|
||||
(ngModelChange)="onToggleChange($event)"
|
||||
clrToggle
|
||||
class="clr-toggle">
|
||||
<label class="toggle-label">{{ filterLabel || filterKey }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,148 +1,149 @@
|
||||
// Make sure the component is visible with very obvious styling
|
||||
.compact-filter {
|
||||
display: block !important;
|
||||
min-width: 200px !important;
|
||||
max-width: 300px !important;
|
||||
margin: 10px !important;
|
||||
padding: 15px !important;
|
||||
background: #e3f2fd !important; // Light blue background
|
||||
border: 3px solid #1976d2 !important; // Dark blue border
|
||||
border-radius: 8px !important;
|
||||
font-size: 14px !important;
|
||||
display: block;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
margin: 8px;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d7d7d7;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.filter-header {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
margin-bottom: 10px !important;
|
||||
padding: 5px !important;
|
||||
background: #bbdefb !important; // Lighter blue header
|
||||
border-radius: 4px !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
cursor: pointer;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.filter-label, .filter-key {
|
||||
font-weight: bold !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
flex-grow: 1 !important;
|
||||
color: #0d47a1 !important; // Dark blue text
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.filter-type {
|
||||
font-size: 12px !important;
|
||||
color: #424242 !important;
|
||||
margin-left: 8px !important;
|
||||
background: #fff !important;
|
||||
padding: 2px 6px !important;
|
||||
border-radius: 10px !important;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
margin: 0 8px;
|
||||
background: #eaeaea;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
display: block !important;
|
||||
margin: 8px 0 !important;
|
||||
padding: 8px !important;
|
||||
background: #f5f5f5 !important;
|
||||
border-radius: 4px !important;
|
||||
.filter-content {
|
||||
padding: 15px;
|
||||
|
||||
&.date-range {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 5px !important;
|
||||
}
|
||||
|
||||
&.toggle {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 8px !important;
|
||||
.filter-control {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.date-range {
|
||||
.date-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.date-separator {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compact-input,
|
||||
.compact-select,
|
||||
.compact-multiselect,
|
||||
.compact-date {
|
||||
width: 100% !important;
|
||||
padding: 8px 12px !important;
|
||||
font-size: 14px !important;
|
||||
border-radius: 4px !important;
|
||||
min-height: 36px !important;
|
||||
border: 2px solid #4caf50 !important; // Green border
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.compact-select {
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
.multiselect-container {
|
||||
max-height: 200px !important;
|
||||
overflow-y: auto !important;
|
||||
border: 2px solid #ff9800 !important; // Orange border
|
||||
border-radius: 4px !important;
|
||||
padding: 10px !important;
|
||||
background: #fff8e1 !important; // Light yellow background
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 8px !important;
|
||||
padding: 5px !important;
|
||||
border-radius: 4px !important;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #d7d7d7;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0 !important;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #0072ce;
|
||||
box-shadow: 0 0 0 1px #0072ce;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 14px !important;
|
||||
margin: 0 !important;
|
||||
cursor: pointer !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
color: #333 !important;
|
||||
.compact-select {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.clr-checkbox {
|
||||
margin: 0 !important;
|
||||
cursor: pointer !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
.multiselect-container {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #d7d7d7;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.clr-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
max-width: 200px !important;
|
||||
color: #333 !important;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.clr-toggle {
|
||||
margin: 0 8px 0 0 !important;
|
||||
width: 40px !important;
|
||||
height: 20px !important;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Add a very obvious background to make sure the component is visible
|
||||
// Host styling
|
||||
:host {
|
||||
display: block !important;
|
||||
background-color: #fffde7 !important; // Very light yellow
|
||||
padding: 15px !important;
|
||||
margin: 15px !important;
|
||||
border: 4px solid #f57f17 !important; // Orange border
|
||||
border-radius: 10px !important;
|
||||
display: block;
|
||||
}
|
||||
@ -20,6 +20,7 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
||||
availableFilters: Filter[] = [];
|
||||
availableKeys: string[] = [];
|
||||
availableValues: string[] = [];
|
||||
isExpanded: boolean = false; // Add expansion state
|
||||
|
||||
constructor(
|
||||
private filterService: FilterService
|
||||
@ -70,6 +71,11 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
||||
console.log('==========================================');
|
||||
}
|
||||
|
||||
// Toggle filter expansion
|
||||
toggleFilter(): void {
|
||||
this.isExpanded = !this.isExpanded;
|
||||
}
|
||||
|
||||
// Register this filter with the filter service
|
||||
registerFilter(): void {
|
||||
console.log('Registering filter with key:', this.filterKey, 'type:', this.filterType);
|
||||
@ -198,14 +204,8 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
||||
this.onFilterValueChange(dateRange);
|
||||
}
|
||||
|
||||
|
||||
// Handle multi-select changes
|
||||
onMultiSelectChange(option: string, event: any): void {
|
||||
console.log('=== MULTISELECT CHANGE DEBUG ===');
|
||||
console.log('Option:', option);
|
||||
console.log('Event:', event);
|
||||
console.log('Checked:', event.target.checked);
|
||||
|
||||
const checked = event.target.checked;
|
||||
|
||||
// Initialize filterValue as array if it's not already
|
||||
@ -217,38 +217,29 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
|
||||
// Add option to array if not already present
|
||||
if (!this.filterValue.includes(option)) {
|
||||
this.filterValue.push(option);
|
||||
console.log('Added option to filter value:', option);
|
||||
}
|
||||
} else {
|
||||
// Remove option from array
|
||||
this.filterValue = this.filterValue.filter((item: string) => item !== option);
|
||||
console.log('Removed option from filter value:', option);
|
||||
}
|
||||
|
||||
console.log('Updated filter value:', this.filterValue);
|
||||
|
||||
// Emit the change
|
||||
this.onFilterValueChange(this.filterValue);
|
||||
console.log('==============================');
|
||||
}
|
||||
|
||||
// Add method to check if an option is selected for checkboxes (needed for proper UI rendering)
|
||||
isOptionSelected(option: string): boolean {
|
||||
console.log('Checking if option is selected:', option, 'Current filter value:', this.filterValue);
|
||||
if (!this.filterValue) {
|
||||
console.log('No filter value, returning false');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Ensure filterValue is an array for multiselect
|
||||
if (!Array.isArray(this.filterValue)) {
|
||||
console.log('Filter value is not an array, converting to array');
|
||||
this.filterValue = [];
|
||||
return false;
|
||||
}
|
||||
|
||||
const result = this.filterValue.includes(option);
|
||||
console.log('Option', option, 'is selected:', result);
|
||||
return result;
|
||||
return this.filterValue.includes(option);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user