enerport-web-app/src/app/pages/projects/projects.ts

import { Component, OnInit } from '@angular/core';
import { IconField } from 'primeng/iconfield';
import { InputIcon } from 'primeng/inputicon';
import { InputText } from 'primeng/inputtext';
import { SelectButton } from 'primeng/selectbutton';
import { FormsModule } from '@angular/forms';
import { MessageService, PrimeTemplate } from 'primeng/api';
import { MatIcon } from '@angular/material/icon';
import { Select } from 'primeng/select';
import { Panel } from 'primeng/panel';
import { Button } from 'primeng/button';
import { Chip } from 'primeng/chip';
import { Router } from '@angular/router';
import { Dialog } from 'primeng/dialog';
import { DatePicker } from 'primeng/datepicker';
import { InputGroup } from 'primeng/inputgroup';
import { InputGroupAddon } from 'primeng/inputgroupaddon';
import { Editor } from 'primeng/editor';
import { InputNumber } from 'primeng/inputnumber';
import { PropertyService } from '@/pages/service/property.service';
import { Project, ProjectService} from '@/pages/service/project.service';
import { CurrencyPipe, DatePipe } from '@angular/common';
import { SafeHtmlPipe } from '@/pipes/safe-html-pipe';
import { ProjectType, ProjectTypeService } from '@/pages/service/project-type.service';
import { ProjectStatus, ProjectStatusService } from '@/pages/service/project-status.service';

@Component({
    selector: 'app-projects',
    imports: [
        IconField,
        InputIcon,
        InputText,
        SelectButton,
        FormsModule,
        PrimeTemplate,
        MatIcon,
        Select,
        Panel,
        Button,
        Chip,
        Dialog,
        DatePicker,
        InputGroup,
        InputGroupAddon,
        Editor,
        InputNumber,
        DatePipe,
        SafeHtmlPipe,
        CurrencyPipe
    ],
    templateUrl: './projects.html',
    styleUrl: './projects.scss',
    providers: [MessageService]
})
export class Projects implements OnInit {
    protected viewMode = 'grid';
    stateOptions: any[] = [
        { label: 'Kachel', value: 'grid', icon: 'view_comfy_alt' },
        { label: 'Kanban', value: 'kanban', icon: 'view_kanban' }
    ];

    projects: Project[] = [];
    projectTypes: ProjectType[]= [];
    projectStatuses: ProjectStatus[]= [];

    statuses: any;
    measures: any;
    selectedStatus: any;
    selectedMeasures: any;
    addNewProjectDialogVisible: boolean = false;

    // for stats
    projectsStatsCountTotal: number = 0;
    projectsStatsCountActive: number = 0;
    projectsStatsCountCompleted: number = 0;
    projectsStatsAmountRequestedInTotal: number = 0;

    // for new project dialog
    projectTypeOptionsForNewProject: any = [];
    projectStatusOptionsForNewProject: any = [];
    propertyOptionsForNewProject: any = [];
    newProjectName: string | undefined;
    newProjectEventNumber: string | undefined;
    newProjectDescription: string | undefined;
    newProjectProjectType: string | undefined;
    newProjectStatus: string | undefined;
    newProjectPropertyId: string | undefined;
    newProjectStartDate: Date | undefined;
    newProjectEndDate: Date | undefined;
    newProjectAmountRequested: number | undefined;

    constructor(
        private router: Router,
        private propertyService: PropertyService,
        private projectService: ProjectService,
        private projectTypeService: ProjectTypeService,
        private projectStatusService: ProjectStatusService,
        private messageService: MessageService
    ) {}

    ngOnInit(): void {
        this.statuses = [{ label: 'Alle', value: 'all' }, ...this.projectStatuses];

        this.measures = [{ label: 'Alle', value: 'all' }, ...this.projectTypes];

        this.projectService.getProjects().subscribe((projects) => {
            console.debug('Projects', projects);
            this.projects = projects;
        });

        this.projectTypeService.getProjectTypes().subscribe((projectTypes) => {
            console.debug('ProjectTypes', projectTypes);
            this.projectTypes = projectTypes;
        });

        this.projectStatusService.getProjectStatuses().subscribe((projectStatuses) => {
            console.debug('ProjectStatuses', projectStatuses);
            this.projectStatuses = projectStatuses;
        });

        this.projectService.getStats().subscribe((stats) => {
            this.projectsStatsCountTotal = stats.projectsCountTotal ?? 0;
            this.projectsStatsCountActive = stats.projectsCountActive ?? 0;
            this.projectsStatsCountCompleted = stats.projectsCountCompleted ?? 0;
            this.projectsStatsAmountRequestedInTotal = stats.amountRequestedInTotal ?? 0;
        });
    }

    navigateToDetails(id: string | undefined) {
        this.router.navigate(['/projects', id]);
    }

    deleteMe_getStatusOptionsForNewProject() {
        return [
            { label: 'Vorbereitung', value: 'preparation' },
            { label: 'Aktiv', value: 'active' },
            { label: 'Abgeschlossen', value: 'completed' },
            { label: 'Problem', value: 'problem' }
        ];
    }

    deleteMe_getProjectTypeOptionsForNewProject() {
        return [
            { label: 'Energieberatung WG (iSFP)', value: 'energy_consulting_wg' },
            { label: 'Energieberatung NWG (Modul2)', value: 'energy_consulting_nwg' },
            { label: 'Einzelmaßnahmen', value: 'individual_measures' },
            { label: 'Effizienzhaus Sanierung', value: 'efficiency_house_renovation' },
            { label: 'Effizienzhaus Neubau', value: 'efficiency_house_new_construction' },
            { label: 'Energieausweis', value: 'energy_performance_certificate' },
            { label: 'Fachplanung Bauphysik', value: 'specialist_planning_for_building_physics' },
            { label: 'Fachplanung Heizung', value: 'specialist_planning_for_heating' },
            { label: 'Zertifizierung', value: 'certification' }
        ];
    }

    showDialog() {
        this.propertyService.getProperties().subscribe((properties) => {
            this.propertyOptionsForNewProject = [];
            properties.forEach((property) => {
                this.propertyOptionsForNewProject.push({
                    value: property.id,
                    label: property.name
                });
            });


            this.projectTypeOptionsForNewProject = [];
            this.projectTypes.forEach((projectType) => {
                this.projectTypeOptionsForNewProject.push({
                    value: projectType.id,
                    label: projectType.name
                });
            });

            this.projectStatusOptionsForNewProject = [];
            this.projectStatuses.forEach((projectStatus) => {
                this.projectStatusOptionsForNewProject.push({
                    value: projectStatus.id,
                    label: projectStatus.name
                });
            });
        });

        this.projectStatusOptionsForNewProject = this.projectStatuses;
        this.projectTypeOptionsForNewProject = this.projectTypes;
        this.addNewProjectDialogVisible = true;
    }

    createNewProject() {
        let newProject = this.projectService.getProjectInstance(
            this.newProjectName,
            this.newProjectEventNumber,
            this.newProjectDescription,
            this.newProjectProjectType,
            this.newProjectStatus,
            this.newProjectPropertyId,
            this.newProjectStartDate,
            this.newProjectEndDate,
            this.newProjectAmountRequested
        );

        this.projectService.create(newProject).subscribe({
            next: (arg) => {
                this.messageService.add({
                    severity: 'success',
                    summary: 'Erfolgreich',
                    detail: 'Projekt erfolgreich angelegt',
                    life: 3000
                });

                this.projects.push(newProject);
                this.projectsStatsCountTotal++;
                this.projectsStatsCountCompleted += this.newProjectStatus == 'completed' ? 1 : 0;
                this.projectsStatsAmountRequestedInTotal += this.newProjectAmountRequested ?? 0;
                this.projectsStatsCountActive += this.newProjectStatus == 'active' ? 1 : 0;

                this.addNewProjectDialogVisible = false;
            },
            error: (err) => {
                this.messageService.add({
                    severity: 'danger',
                    summary: 'Fehler',
                    detail: 'Beim Anlegen des Projekts ist ein Fehler aufgetreten.',
                    life: 3000
                });
                console.log('Error while creating project -- Error: ' + err + ' -- Project: ', newProject);
            }
        });
    }
}