risadmin_prod/authsec_angular_clarity_modern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

compact filter

Browse Source
This commit is contained in:
string 2025-10-27 20:36:22 +05:30
parent afc2c1f8a1
commit 2995328ec1
3 changed files with 179 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
View File

@ -1,24 +1,13 @@
<!-- Debug: Show all input values -->
<!-- Display Mode - No configuration UI in runner -->
<div class="compact-filter"> <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-label" *ngIf="filterLabel">{{ filterLabel }}</span>
<span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span> <span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
<span class="filter-type">({{ filterType }})</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> </div>
<!-- Debug: Show which filter type is active --> <div class="filter-content" *ngIf="isExpanded">
<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>
<!-- Text Filter --> <!-- Text Filter -->
<div class="filter-control" *ngIf="filterType === 'text'"> <div class="filter-control" *ngIf="filterType === 'text'">
<input type="text" <input type="text"
@ -56,17 +45,20 @@
<!-- Date Range Filter --> <!-- Date Range Filter -->
<div class="filter-control date-range" *ngIf="filterType === 'date-range'"> <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
<div class="date-input-group">
<input type="date" <input type="date"
[(ngModel)]="filterValue.start" [(ngModel)]="filterValue.start"
(ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })" (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
placeholder="Start Date" placeholder="Start Date"
class="clr-input compact-date"> class="clr-input compact-date">
<span class="date-separator">to</span>
<input type="date" <input type="date"
[(ngModel)]="filterValue.end" [(ngModel)]="filterValue.end"
(ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })" (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
placeholder="End Date" placeholder="End Date"
class="clr-input compact-date"> class="clr-input compact-date">
</div> </div>
</div>
<!-- Toggle Filter --> <!-- Toggle Filter -->
<div class="filter-control toggle" *ngIf="filterType === 'toggle'"> <div class="filter-control toggle" *ngIf="filterType === 'toggle'">
@ -78,3 +70,4 @@
<label class="toggle-label">{{ filterLabel || filterKey }}</label> <label class="toggle-label">{{ filterLabel || filterKey }}</label>
</div> </div>
</div> </div>
</div>

195
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
View File

@ -1,148 +1,149 @@
// Make sure the component is visible with very obvious styling
.compact-filter { .compact-filter {
display: block !important; display: block;
min-width: 200px !important; min-width: 200px;
max-width: 300px !important; max-width: 300px;
margin: 10px !important; margin: 8px;
padding: 15px !important; padding: 0;
background: #e3f2fd !important; // Light blue background background: #ffffff;
border: 3px solid #1976d2 !important; // Dark blue border border: 1px solid #d7d7d7;
border-radius: 8px !important; border-radius: 4px;
font-size: 14px !important; font-size: 14px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
.filter-header { .filter-header {
display: flex !important; display: flex;
justify-content: space-between !important; justify-content: space-between;
align-items: center !important; align-items: center;
margin-bottom: 10px !important; padding: 12px 15px;
padding: 5px !important; cursor: pointer;
background: #bbdefb !important; // Lighter blue header background: #f8f8f8;
border-radius: 4px !important; border-bottom: 1px solid #eaeaea;
border-radius: 4px 4px 0 0;
&:hover {
background: #f0f0f0;
}
.filter-label, .filter-key { .filter-label, .filter-key {
font-weight: bold !important; font-weight: 500;
white-space: nowrap !important; color: #333333;
overflow: hidden !important; flex-grow: 1;
text-overflow: ellipsis !important;
flex-grow: 1 !important;
color: #0d47a1 !important; // Dark blue text
} }
.filter-type { .filter-type {
font-size: 12px !important; font-size: 12px;
color: #424242 !important; color: #666666;
margin-left: 8px !important; margin: 0 8px;
background: #fff !important; background: #eaeaea;
padding: 2px 6px !important; padding: 2px 8px;
border-radius: 10px !important; border-radius: 12px;
}
.expand-icon {
width: 16px;
height: 16px;
color: #666666;
} }
} }
.filter-content {
padding: 15px;
.filter-control { .filter-control {
display: block !important; margin-bottom: 12px;
margin: 8px 0 !important;
padding: 8px !important; &:last-child {
background: #f5f5f5 !important; margin-bottom: 0;
border-radius: 4px !important; }
&.date-range { &.date-range {
display: flex !important; .date-input-group {
flex-direction: column !important; display: flex;
gap: 5px !important; align-items: center;
gap: 8px;
.date-separator {
font-size: 14px;
color: #666666;
}
}
} }
&.toggle { &.toggle {
display: flex !important; display: flex;
align-items: center !important; align-items: center;
justify-content: flex-start !important; gap: 8px;
gap: 8px !important; }
} }
} }
.compact-input, .compact-input,
.compact-select, .compact-select,
.compact-multiselect,
.compact-date { .compact-date {
width: 100% !important; width: 100%;
padding: 8px 12px !important; padding: 8px 12px;
font-size: 14px !important; font-size: 14px;
border-radius: 4px !important; border: 1px solid #d7d7d7;
min-height: 36px !important; border-radius: 4px;
border: 2px solid #4caf50 !important; // Green border background: #ffffff;
background: #fff !important;
&:focus {
outline: none;
border-color: #0072ce;
box-shadow: 0 0 0 1px #0072ce;
}
} }
.compact-select { .compact-select {
height: 36px !important; height: 36px;
} }
.multiselect-container { .multiselect-container {
max-height: 200px !important; max-height: 200px;
overflow-y: auto !important; overflow-y: auto;
border: 2px solid #ff9800 !important; // Orange border border: 1px solid #d7d7d7;
border-radius: 4px !important; border-radius: 4px;
padding: 10px !important; padding: 10px;
background: #fff8e1 !important; // Light yellow background background: #ffffff;
} }
.checkbox-group { .checkbox-group {
display: flex !important; display: flex;
flex-direction: column !important; flex-direction: column;
gap: 8px !important; gap: 8px;
} }
.checkbox-item { .checkbox-item {
display: flex !important; display: flex;
align-items: center !important; align-items: center;
gap: 8px !important; gap: 8px;
padding: 5px !important;
border-radius: 4px !important;
&:hover { .clr-checkbox {
background: #f0f0f0 !important; width: 16px;
} height: 16px;
cursor: pointer;
} }
.checkbox-label { .checkbox-label {
font-size: 14px !important; font-size: 14px;
margin: 0 !important; margin: 0;
cursor: pointer !important; cursor: pointer;
white-space: nowrap !important; color: #333333;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: #333 !important;
} }
.clr-checkbox {
margin: 0 !important;
cursor: pointer !important;
width: 18px !important;
height: 18px !important;
} }
.toggle-label { .toggle-label {
margin: 0 !important; margin: 0;
font-size: 14px !important; font-size: 14px;
white-space: nowrap !important; color: #333333;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 200px !important;
color: #333 !important;
} }
.clr-toggle { .clr-toggle {
margin: 0 8px 0 0 !important; margin: 0;
width: 40px !important;
height: 20px !important;
} }
} }
// Add a very obvious background to make sure the component is visible // Host styling
:host { :host {
display: block !important; display: block;
background-color: #fffde7 !important; // Very light yellow
padding: 15px !important;
margin: 15px !important;
border: 4px solid #f57f17 !important; // Orange border
border-radius: 10px !important;
} }

23
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts
View File

@ -20,6 +20,7 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
availableFilters: Filter[] = []; availableFilters: Filter[] = [];
availableKeys: string[] = []; availableKeys: string[] = [];
availableValues: string[] = []; availableValues: string[] = [];
isExpanded: boolean = false; // Add expansion state
constructor( constructor(
private filterService: FilterService private filterService: FilterService
@ -70,6 +71,11 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
console.log('=========================================='); console.log('==========================================');
} }
// Toggle filter expansion
toggleFilter(): void {
this.isExpanded = !this.isExpanded;
}
// Register this filter with the filter service // Register this filter with the filter service
registerFilter(): void { registerFilter(): void {
console.log('Registering filter with key:', this.filterKey, 'type:', this.filterType); console.log('Registering filter with key:', this.filterKey, 'type:', this.filterType);
@ -198,14 +204,8 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
this.onFilterValueChange(dateRange); this.onFilterValueChange(dateRange);
} }
// Handle multi-select changes // Handle multi-select changes
onMultiSelectChange(option: string, event: any): void { 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; const checked = event.target.checked;
// Initialize filterValue as array if it's not already // 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 // Add option to array if not already present
if (!this.filterValue.includes(option)) { if (!this.filterValue.includes(option)) {
this.filterValue.push(option); this.filterValue.push(option);
console.log('Added option to filter value:', option);
} }
} else { } else {
// Remove option from array // Remove option from array
this.filterValue = this.filterValue.filter((item: string) => item !== option); 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 // Emit the change
this.onFilterValueChange(this.filterValue); this.onFilterValueChange(this.filterValue);
console.log('==============================');
} }
// Add method to check if an option is selected for checkboxes (needed for proper UI rendering) // Add method to check if an option is selected for checkboxes (needed for proper UI rendering)
isOptionSelected(option: string): boolean { isOptionSelected(option: string): boolean {
console.log('Checking if option is selected:', option, 'Current filter value:', this.filterValue); console.log('Checking if option is selected:', option, 'Current filter value:', this.filterValue);
if (!this.filterValue) { if (!this.filterValue) {
console.log('No filter value, returning false');
return false; return false;
} }
// Ensure filterValue is an array for multiselect // Ensure filterValue is an array for multiselect
if (!Array.isArray(this.filterValue)) { if (!Array.isArray(this.filterValue)) {
console.log('Filter value is not an array, converting to array');
this.filterValue = []; this.filterValue = [];
return false; return false;
} }
const result = this.filterValue.includes(option); return this.filterValue.includes(option);
console.log('Option', option, 'is selected:', result);
return result;
} }
} }