{ "version": 3, "sources": ["src/app/features/dashboard/dashboard.component.ts", "src/app/features/dashboard/dashboard.component.html"], "sourcesContent": ["import { CommonModule } from '@angular/common';\nimport { HttpParams } from '@angular/common/http';\nimport { Component, HostListener, OnDestroy, OnInit } from '@angular/core';\nimport {\n FormControl,\n FormGroup,\n FormsModule,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { MenuItem } from 'primeng/api';\nimport { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';\nimport { SelectButtonModule } from 'primeng/selectbutton';\nimport { Subscription } from 'rxjs';\nimport { API_END_POINTS } from '../../constants/constant';\nimport { PlantData } from '../../interfaces/plant.interface';\nimport { SelectButton } from '../../interfaces/select-button.interface';\nimport { HttpService } from '../../services/http.service';\nimport { ButtonComponent } from '../../shared/button/button.component';\nimport { MapComponent } from '../../shared/map/map.component';\nimport { PlantLocationCardComponent } from '../../shared/plant-location-card/plant-location-card.component';\nimport { SearchInputComponent } from '../../shared/search-input/search-input.component';\nimport { SortByComponent } from '../../shared/sort-by/sort-by.component';\nimport { TableComponent } from '../../shared/table/table.component';\nimport { AddPlantModalComponent } from '../modals/add-plant-modal/add-plant-modal.component';\nimport { ConfirmationModalComponent } from '../modals/confirmation-modal/confirmation-modal.component';\nimport { SuccessModalComponent } from '../modals/success-modal/success-modal.component';\nimport { USER_ROLE_ID } from '@constants/meta-data';\n\n@Component({\n selector: 'app-dashboard',\n standalone: true,\n imports: [\n SortByComponent,\n SelectButtonModule,\n FormsModule,\n SearchInputComponent,\n ButtonComponent,\n ReactiveFormsModule,\n TableComponent,\n MapComponent,\n CommonModule,\n PlantLocationCardComponent,\n TranslateModule,\n ],\n templateUrl: './dashboard.component.html',\n styleUrl: './dashboard.component.scss',\n})\nexport class DashboardComponent implements OnInit, OnDestroy {\n plantData!: PlantData[];\n plantTableData!: PlantData[];\n formGroup!: FormGroup;\n ref!: DynamicDialogRef;\n currentPage: number = 0;\n pageSize: number = 0;\n totalRecords: number = 0;\n searchValue: string = '';\n modalContentTxt: string = '';\n currentView: string = 'mapView';\n isMobileView: boolean = false;\n isToggleSearch: boolean = false;\n confirmSubscription?: Subscription;\n selectorBtnSubscription?: Subscription;\n readonly tabletBreakpoint: number = 600;\n roleId: any = null;\n userRoleId = USER_ROLE_ID;\n\n stateOptions: SelectButton[] = [\n {\n label: this.translateService.instant('MAP_VIEW'),\n value: 'mapView',\n icon: '/assets/images/map-view-img.svg',\n activeIcon: '/assets/images/active-map-view-img.svg',\n },\n {\n label: this.translateService.instant('LIST_VIEW'),\n value: 'listView',\n icon: '/assets/images/list-view-img.svg',\n activeIcon: '/assets/images/active-list-view-img.svg',\n },\n ];\n\n headerData = [\n { title: 'Name of Plants', key: 'plantName' },\n { title: 'Plant Address', key: 'address' },\n { title: 'State', key: 'stateName' },\n { title: 'Status', key: 'isActive' },\n ];\n\n plantTableMenuItems(plantData: PlantData): MenuItem[] {\n if (plantData.isActive === true) {\n return [\n {\n label: 'Edit',\n command: () => this.onEditPlant(plantData),\n },\n {\n label: 'Archive',\n command: () => this.onArchivePlant(plantData),\n },\n ];\n } else {\n return [\n {\n label: 'Restore',\n command: () => this.onRestorePlant(plantData),\n },\n ];\n }\n }\n\n constructor(\n private dialogService: DialogService,\n private translateService: TranslateService,\n private httpService: HttpService\n ) {\n this.checkScreenSize();\n }\n\n ngOnInit() {\n this.roleId = localStorage.getItem('userRoleId');\n this.formGroup = new FormGroup({\n selectBtnValue: new FormControl(this.currentView),\n });\n\n this.selectorBtnSubscription = this.formGroup\n .get('selectBtnValue')\n ?.valueChanges.subscribe((newValue) => {\n this.currentView = newValue;\n this.searchValue = '';\n if (this.currentView === 'mapView') {\n this.pageSize = 0;\n this.currentPage = 0;\n this.plantTableData = [];\n } else {\n this.pageSize = 5;\n this.currentPage = 1;\n }\n this.getPlantData();\n }) as Subscription;\n this.getPlantData();\n }\n\n onSearch(searchValue: string): void {\n if (this.isToggleSearch === true) {\n this.pageSize = 0;\n this.currentPage = 0;\n }\n this.searchValue = searchValue;\n this.pageSize = 5;\n this.currentPage = 1;\n this.getPlantData();\n }\n\n getPlantData() {\n const url = API_END_POINTS.GET_PLANT;\n let params = new HttpParams();\n if (this.searchValue) {\n params = params.set('Search', this.searchValue);\n }\n params = params.set('PageNumber', this.currentPage);\n params = params.set('PageSize', this.pageSize);\n this.httpService\n .getRequest(url, null, { params })\n .then((response) => {\n if (response) {\n if (this.currentView === 'mapView' || this.isToggleSearch === true) {\n this.plantData = response.data;\n } else {\n this.plantTableData = response.data;\n this.plantTableData.forEach((plantData) => {\n plantData['plantName'] = plantData['name'];\n });\n this.totalRecords = response.totalRecords;\n }\n } else {\n console.error('No data received');\n }\n })\n .catch((error) => {\n console.error('There was an error:', error);\n });\n }\n\n onPageChange(event: number) {\n this.currentPage = event;\n this.getPlantData();\n }\n\n restorePlantData(plantData: PlantData, modalSuccessContent: string) {\n const url = `${API_END_POINTS.RESTORE_PLANT}${plantData.id}/restore`;\n this.httpService\n .patchRequest(url, null)\n .then((response) => {\n if (response && modalSuccessContent) {\n this.getPlantData();\n this.ref = this.dialogService.open(SuccessModalComponent, {\n data: {\n headingContent: modalSuccessContent,\n contentName: plantData.name,\n },\n width: '384px',\n dismissableMask: true,\n styleClass: this.isMobileView\n ? 'custom-modal-border-radius mobile-modal'\n : 'custom-modal-border-radius',\n });\n } else {\n console.error('No data received');\n }\n })\n .catch((error) => {\n console.error('There was an error:', error);\n });\n }\n\n archivePlantData(plantData: PlantData, modalSuccessContent: string) {\n const url = `${API_END_POINTS.ARCHIVE_PLANT}${plantData.id}/archive`;\n this.httpService\n .patchRequest(url, null)\n .then((response) => {\n if (response && modalSuccessContent) {\n this.ref = this.dialogService.open(SuccessModalComponent, {\n data: {\n headingContent: modalSuccessContent,\n contentName: plantData.name,\n },\n width: '384px',\n dismissableMask: true,\n styleClass: this.isMobileView\n ? 'custom-modal-border-radius mobile-modal'\n : 'custom-modal-border-radius',\n });\n this.getPlantData();\n } else {\n console.error('No data received');\n }\n })\n .catch((error) => {\n console.error('There was an error:', error);\n });\n }\n\n onAddPlant() {\n this.ref = this.dialogService.open(AddPlantModalComponent, {\n data: { action: 'add' },\n width: '480px',\n styleClass: this.isMobileView\n ? 'custom-modal-border-radius mobile-modal'\n : 'custom-modal-border-radius',\n });\n this.ref.onClose.subscribe((result) => {\n if (result && result.action === 'add') {\n this.currentPage = 1;\n this.getPlantData();\n }\n });\n }\n\n onEditPlant(plantData: PlantData) {\n this.ref = this.dialogService.open(AddPlantModalComponent, {\n data: { plantData, action: 'edit' },\n width: '480px',\n styleClass: this.isMobileView\n ? 'custom-modal-border-radius mobile-modal'\n : 'custom-modal-border-radius',\n });\n this.ref.onClose.subscribe((result) => {\n if (result && result.action === 'edit') {\n this.getPlantData();\n }\n });\n }\n\n onArchivePlant(plantData: PlantData) {\n this.modalContentTxt = this.translateService.instant(\n 'ARCHIVE_CONFIRMATION'\n );\n const ModalImageUrl = '/assets/images/archive-plant-img.svg';\n this.openModal(ModalImageUrl, plantData);\n }\n\n onRestorePlant(plantData: PlantData) {\n this.modalContentTxt = this.translateService.instant(\n 'RESTORE_CONFIRMATION'\n );\n const ModalImageUrl = '/assets/images/restore-plant-img.svg';\n this.openModal(ModalImageUrl, plantData);\n }\n\n openModal(ModalImageUrl: string, plantData: PlantData): void {\n this.ref = this.dialogService.open(ConfirmationModalComponent, {\n data: {\n headingContent: this.modalContentTxt,\n imageUrl: ModalImageUrl,\n codeContent: plantData.name,\n },\n width: '384px',\n dismissableMask: true,\n styleClass: this.isMobileView\n ? 'custom-modal-border-radius mobile-modal'\n : 'custom-modal-border-radius',\n });\n this.confirmSubscription = this.ref.onClose.subscribe((result) => {\n if (result === 'confirmed') {\n this.onConfirmation(plantData);\n }\n });\n }\n\n onConfirmation(plantData: PlantData) {\n let modalSuccessContent = '';\n if (this.modalContentTxt === 'Are you sure you want to Archive') {\n modalSuccessContent = this.translateService.instant('ARCHIVE_SUCCESS');\n this.archivePlantData(plantData, modalSuccessContent);\n } else if ('Are you sure you want to Restore') {\n modalSuccessContent = this.translateService.instant('RESTORE_SUCCESS');\n this.restorePlantData(plantData, modalSuccessContent);\n }\n }\n\n getIconSource(option: SelectButton): string {\n return this.formGroup.value.selectBtnValue === option.value\n ? option.activeIcon\n : option.icon;\n }\n\n toggleSearch(): void {\n this.isToggleSearch = true;\n }\n\n searchIconClickedEmit() {\n if (this.isToggleSearch && this.isMobileView) {\n this.isToggleSearch = false;\n }\n }\n\n checkScreenSize() {\n this.isMobileView = window.innerWidth < 768;\n if (this.isMobileView) {\n this.isToggleSearch = false;\n }\n }\n\n @HostListener('window:resize')\n onResize() {\n this.checkScreenSize();\n }\n\n ngOnDestroy(): void {\n if (this.confirmSubscription) {\n this.confirmSubscription?.unsubscribe();\n }\n if (this.selectorBtnSubscription)\n this.selectorBtnSubscription?.unsubscribe();\n }\n}\n", "