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

compact

Browse Source
This commit is contained in:
string 2025-10-29 17:55:05 +05:30
parent e8c1f46430
commit bd315f42a3
3 changed files with 105 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
View File

@ -79,7 +79,12 @@
<!-- Multi-Select Filter -->
<div class="filter-control" *ngIf="filterType === 'multiselect'">
<div class="compact-multiselect-checkboxes" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px;">
<div class="compact-multiselect-display" (click)="toggleMultiselectDropdown()" style="padding: 5px; border: 1px solid #ddd; cursor: pointer; background-color: #f8f8f8;">
<span *ngIf="filterValue && filterValue.length > 0">{{ filterValue.length }} selected</span>
<span *ngIf="!filterValue || filterValue.length === 0">{{ filterLabel || filterKey || 'Select options' }}</span>
<clr-icon shape="caret down" style="float: right; margin-top: 3px;"></clr-icon>
</div>
<div class="compact-multiselect-dropdown" *ngIf="showMultiselectDropdown" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-top: none; padding: 10px; background-color: white; position: absolute; z-index: 1000; width: calc(100% - 2px); box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div *ngFor="let option of filterOptions" class="clr-checkbox-wrapper" style="margin-bottom: 5px;">
<input type="checkbox"
[id]="'multiselect-' + option"

63
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
import { FilterService, Filter } from './filter.service';
import { AlertsService } from 'src/app/services/fnd/alerts.service';
@ -7,7 +7,7 @@ import { AlertsService } from 'src/app/services/fnd/alerts.service';
templateUrl: './compact-filter.component.html',
styleUrls: ['./compact-filter.component.scss']
})
export class CompactFilterComponent implements OnInit, OnChanges {
export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
@Input() filterKey: string = '';
@Input() filterType: string = 'text';
@Input() filterOptions: string[] = [];
@ -23,6 +23,9 @@ export class CompactFilterComponent implements OnInit, OnChanges {
availableKeys: string[] = [];
availableValues: string[] = [];
// Multiselect dropdown state
showMultiselectDropdown: boolean = false;
// Configuration properties
isConfigMode: boolean = false;
configFilterKey: string = '';
@ -73,6 +76,24 @@ export class CompactFilterComponent implements OnInit, OnChanges {
}
ngOnChanges(changes: SimpleChanges): void {
// If filterKey changes, clear the previous filter value and remove old filter from service
if (changes.filterKey) {
// Clear the previous filter value
this.filterValue = '';
// Clear filter options
this.filterOptions = [];
// Clear available values
this.availableValues = [];
// If we had a previous selected filter, clear its value in the service
if (this.selectedFilter && changes.filterKey.previousValue) {
const oldFilterId = changes.filterKey.previousValue;
this.filterService.updateFilterValue(oldFilterId, '');
}
}
// If filterKey or filterType changes, re-register the filter
if (changes.filterKey || changes.filterType) {
// Load available values for the current filter key if it's a dropdown or multiselect
@ -201,6 +222,10 @@ export class CompactFilterComponent implements OnInit, OnChanges {
this.onFilterValueChange(dateRange);
}
ngOnDestroy(): void {
// Component cleanup - nothing specific needed for now
}
// Load available keys from API
loadAvailableKeys(): void {
if (this.apiUrl) {
@ -278,6 +303,9 @@ export class CompactFilterComponent implements OnInit, OnChanges {
this.apiUrl = config.apiUrl;
this.connectionId = config.connectionId;
// Clear filter value when changing configuration
this.filterValue = '';
// Load available keys if API URL is provided
if (this.apiUrl) {
this.loadAvailableKeys();
@ -304,11 +332,23 @@ export class CompactFilterComponent implements OnInit, OnChanges {
// Handle filter key change in configuration
onFilterKeyChange(key: string): void {
// Clear the previous filter value when changing keys
this.filterValue = '';
// Clear filter options until new values are loaded
this.filterOptions = [];
this.configFilterKey = key;
// Load available values for the selected key if it's a dropdown or multiselect
if ((this.configFilterType === 'dropdown' || this.configFilterType === 'multiselect') && key) {
this.loadAvailableValues(key);
}
// Clear the filter service value for the previous filter key
if (this.selectedFilter) {
this.filterService.updateFilterValue(this.selectedFilter.id, '');
}
}
// Handle API URL change in configuration
@ -375,4 +415,23 @@ export class CompactFilterComponent implements OnInit, OnChanges {
// Emit the change event
this.onFilterValueChange(this.filterValue);
}
// Add method to toggle multiselect dropdown visibility
toggleMultiselectDropdown(): void {
this.showMultiselectDropdown = !this.showMultiselectDropdown;
// Add document click handler to close dropdown when clicking outside
if (this.showMultiselectDropdown) {
setTimeout(() => {
const handleClick = (event: MouseEvent) => {
const target = event.target as HTMLElement;
if (!target.closest('.compact-multiselect-display') && !target.closest('.compact-multiselect-dropdown')) {
this.showMultiselectDropdown = false;
document.removeEventListener('click', handleClick);
}
};
document.addEventListener('click', handleClick);
}, 0);
}
}
}

63
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerall/dashrunnerall.component.ts
View File

@ -12,23 +12,23 @@ import { ModulesetupService } from 'src/app/services/builder/modulesetup.service
styleUrls: ['./dashrunnerall.component.scss']
})
export class DashrunnerallComponent implements OnInit {
addModall:boolean = false;
selected:any[] = [];
addModall: boolean = false;
selected: any[] = [];
loading = false;
data:any;
id:any;
moduleId:any;
data: any;
id: any;
moduleId: any;
modalDelete = false;
rowSelected :any= {};
rowSelected: any = {};
rows: any[];
projectname;
projectId;
error;
constructor(
private router : Router,
private route: ActivatedRoute,private dashboardService : Dashboard3Service,
private router: Router,
private route: ActivatedRoute, private dashboardService: Dashboard3Service,
// private wireframeservice : WireframeService,
private excel: ExcelService,private mainService: ModulesetupService,
private excel: ExcelService, private mainService: ModulesetupService,
private toastr: ToastrService,) { }
ngOnInit(): void {
@ -42,50 +42,46 @@ export class DashrunnerallComponent implements OnInit {
// this.getprojectName(this.projectId);
}
getprojectName(id){
getprojectName(id) {
this.mainService.getProjectModules(id).subscribe((data) => {
console.log(data);
this.projectname=data.items[0]['projectName'];
this.projectname = data.items[0]['projectName'];
console.log(this.projectname);
});
}
getdashboard()
{
this.dashboardService.getAllDash().subscribe((data) =>{
getdashboard() {
this.dashboardService.getAllDash().subscribe((data) => {
this.data = data;
this.rows = this.data;
console.log(data);
this.error="No data Available";
this.error = "No data Available";
console.log(this.error);
});
}
openModal()
{
openModal() {
this.addModall = true;
}
gotoadd()
{
this.router.navigate(['../../dashboardbuilder'],{relativeTo:this.route});
gotoadd() {
this.router.navigate(['../../dashboardbuilder'], { relativeTo: this.route });
}
// for runner line navigation
// for runner line navigation
// goToEditData(id: number){
// this.router.navigate(['../editdata/'+id],{relativeTo:this.route});
// }
goToEdit(id:number)
{
goToEdit(id: number) {
// Navigate to editnewdash component instead of dashrunnerline
// Pass a query parameter to indicate this is from dashboard runner
this.router.navigate(['../../dashboardbuilder/editdashn/'+id], {
this.router.navigate(['../../dashboardbuilder/editdashn/' + id], {
relativeTo: this.route,
queryParams: { fromRunner: true }
});
}
goToEditData(id: number){
this.router.navigate(['../editdata/'+id],{relativeTo:this.route});
goToEditData(id: number) {
this.router.navigate(['../editdata/' + id], { relativeTo: this.route });
}
onExport() {
@ -93,23 +89,22 @@ export class DashrunnerallComponent implements OnInit {
moment().format('YYYYMMDD_HHmmss'))
}
gotoAction(){
this.router.navigate(["../../actions"], { relativeTo: this.route, queryParams: { m_id: this.moduleId,pname:this.projectname } });
gotoAction() {
this.router.navigate(["../../actions"], { relativeTo: this.route, queryParams: { m_id: this.moduleId, pname: this.projectname } });
}
gotoRepo(){
gotoRepo() {
this.router.navigate(["../../modulecard"], { relativeTo: this.route, queryParams: { p_id: this.projectId } });
}
onDelete(row){
onDelete(row) {
this.rowSelected = row;
console.log(this.rowSelected);
this.modalDelete = true;
}
delete(id)
{
delete(id) {
this.modalDelete = false;
console.log("in delete "+id);
this.dashboardService.deleteField(id).subscribe((data)=>{
console.log("in delete " + id);
this.dashboardService.deleteField(id).subscribe((data) => {
console.log(data);
this.ngOnInit();
});