TransectInspectionTable.ts

import {Component, Prop, Vue} from "vue-property-decorator";
import i18n from "@/plugins/i18n";
import FileUpload from "@/components/FileUpload.vue";
import {FileUploadMode} from "@/types";
import { TranslateResult } from "vue-i18n";
import store from "@/store";
import {Observation, ObservationTableRow} from "@/types/transect";
import InspectionTableCellEditDialog from "@/components/InspectionTableCellEditDialog";

@Component({
    components: {
        FileUpload,
        InspectionTableCellEditDialog,
    },
})
export default class TransectInspectionTable extends Vue {
    @Prop({
        default: () => {
            return "";
        },
    }) private sectionEventId!: string;
    private currentSortCol = "art";
    private currentSortDir = "asc";
    private pageNumber = 0;
    private isAddTableRowLoading = false;
    private fileUploadMode: FileUploadMode = {
        single: false,
    };
    private fileUploadFileType = "image/jpeg, .png";
    private testUploadType = "file";
    private uploadToRestrictedBucket = true;
    private dialogDelete = false;
    private dialogAttributes = false;
    private deleteItemIndex = -1;
    private attributes = {
        art: true,
        imago: true,
        female: true,
        male: true,
        cocoon: false,
        caterpillar: false,
        egg: false,
    };
    private tableHeaders = [
        { text: i18n.t("transektbegehung.mainData.art"), align: "start", sortable: true, value: "art", tooltip: i18n.t("transektbegehung.mainData.art") },
        { text: i18n.t("transektbegehung.mainData.imago"), sortable: true, value: "imago", tooltip: i18n.t("transektbegehung.alerts.imago") },
        { text: i18n.t("transektbegehung.mainData.female"), sortable: true, value: "female", tooltip: i18n.t("transektbegehung.mainData.female") },
        { text: i18n.t("transektbegehung.mainData.male"), sortable: true, value: "male", tooltip: i18n.t("transektbegehung.mainData.male") },
        { text: i18n.t("transektbegehung.mainData.delete"), value: "delete", sortable: false, tooltip: i18n.t("transektbegehung.mainData.delete") },
    ];
    private tableItems: Array<ObservationTableRow> = [];
    private selectedSpecies = null;
    private addObservationTableRowToTable() {
        if (!this.selectedSpecies) {
            return;
        }

        // I guess developmentalStageId = null could be default
        const artObservation: Observation = {
            id: "",
            sectionEventId: this.sectionEventId,
            developmentalStageId: "/developmental_stages/1",
            abundance: null,
            outOfMethod: false,
            comment: "",
            sex: "",
            isAlive: true,
            selectedSpeciesItem: this.selectedSpecies,
            imageRefs: [],
        };
        const imagoObservation: Observation = {
            id: "",
            sectionEventId: this.sectionEventId,
            developmentalStageId: "/developmental_stages/1",
            abundance: null,
            outOfMethod: false,
            comment: "",
            sex: "",
            isAlive: true,
            selectedSpeciesItem: this.selectedSpecies,
            imageRefs: [],
        };
        const femaleObservation: Observation = {
            id: "",
            sectionEventId: this.sectionEventId,
            developmentalStageId: "/developmental_stages/1",
            abundance: null,
            outOfMethod: false,
            comment: "",
            sex: "female",
            isAlive: true,
            selectedSpeciesItem: this.selectedSpecies,
            imageRefs: [],
        };
        const maleObservation: Observation = {
            id: "",
            sectionEventId: this.sectionEventId,
            developmentalStageId: "/developmental_stages/1",
            abundance: null,
            outOfMethod: false,
            comment: "",
            sex: "male",
            isAlive: true,
            selectedSpeciesItem: this.selectedSpecies,
            imageRefs: [],
        };
        const cocoonObservation: Observation = {
            id: "",
            sectionEventId: this.sectionEventId,
            developmentalStageId: "/developmental_stages/2",
            abundance: null,
            outOfMethod: false,
            comment: "",
            sex: "",
            isAlive: true,
            selectedSpeciesItem: this.selectedSpecies,
            imageRefs: [],
        };
        const caterpillarObservation: Observation = {
            id: "",
            sectionEventId: this.sectionEventId,
            developmentalStageId: "/developmental_stages/3",
            abundance: null,
            outOfMethod: false,
            comment: "",
            sex: "",
            isAlive: true,
            selectedSpeciesItem: this.selectedSpecies,
            imageRefs: [],
        };
        const eggsObservation: Observation = {
            id: "",
            sectionEventId: this.sectionEventId,
            developmentalStageId: "/developmental_stages/4",
            abundance: null,
            outOfMethod: false,
            comment: "",
            sex: "",
            isAlive: true,
            selectedSpeciesItem: this.selectedSpecies,
            imageRefs: [],
        };

        const observationTableRow: ObservationTableRow = {
            art: artObservation,
            imago: imagoObservation,
            female: femaleObservation,
            male: maleObservation,
            cocoon: cocoonObservation,
            caterpillar: caterpillarObservation,
            egg: eggsObservation,
        };

        this.tableItems.push(observationTableRow);
        this.$emit("input", this.tableItems);
        this.selectedSpecies = null;
    }

    private mounted() {
        this.isNullInspection();
    }

    private beforeUpdate() {
        this.isNullInspection();
    }

    private sort(col) {
        this.pageNumber = 0;

        if (this.currentSortCol === col) {
            this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc";
        } else {
            this.currentSortCol = col;
        }
        this.tableItems.sort(this.sortBy(col, this.currentSortDir));
    }

    private sortBy(property, order) {
        this.currentSortDir = order;
        return (a, b) => {
            const firstValue =
                typeof a[property] === "string"
                    ? a[property].toUpperCase()
                    : a[property];
            const secondValue =
                typeof b[property] === "string"
                    ? b[property].toUpperCase()
                    : b[property];
            let comparison = 0;
            if (property === "art") {
                if (firstValue.selectedSpeciesItem.species > secondValue.selectedSpeciesItem.species) {
                    comparison = 1;
                } else if (firstValue.selectedSpeciesItem.species < secondValue.selectedSpeciesItem.species) {
                    comparison = -1;
                }
            } else {
                const firstNumber = Number(firstValue.abundance);
                const secondNumber = Number(secondValue.abundance);
                if (firstNumber > secondNumber) {
                    comparison = 1;
                } else if (firstNumber < secondNumber) {
                    comparison = -1;
                }
            }
            return order === "desc" ? comparison * -1 : comparison;
        };
    }

    private isNullInspection() {
        this.$emit("isNullInspection", this.tableItems.length === 0);
    }

    private chooseAttributes() {
        this.dialogAttributes = true;
    }

    private confirmAttributes() {
        this.tableHeaders = [];
        this.checkAttribute(this.attributes.art, i18n.t("transektbegehung.mainData.art"), "art");
        this.checkAttribute(this.attributes.imago, i18n.t("transektbegehung.mainData.imago"), "imago");
        this.checkAttribute(this.attributes.female, i18n.t("transektbegehung.mainData.female"), "female");
        this.checkAttribute(this.attributes.male, i18n.t("transektbegehung.mainData.male"), "male");
        this.checkAttribute(this.attributes.cocoon, i18n.t("transektbegehung.mainData.cocoon"), "cocoon");
        this.checkAttribute(this.attributes.caterpillar, i18n.t("transektbegehung.mainData.caterpillar"), "caterpillar");
        this.checkAttribute(this.attributes.egg, i18n.t("transektbegehung.mainData.egg"), "egg");
        this.checkAttribute(true, i18n.t("transektbegehung.mainData.delete"), "delete");
        this.dialogAttributes = false;
    }

    private checkAttribute(attribute: boolean, attributeName: TranslateResult, attributeValue: string) {
        if (attribute) {
            attributeValue === "imago" ?
                this.tableHeaders.push({text: attributeName, sortable: true, value: attributeValue, tooltip: i18n.t("transektbegehung.alerts.imago")}) :
                this.tableHeaders.push({text: attributeName, sortable: true, value: attributeValue, tooltip: attributeName});
        }
    }

    private deleteCurrentItem(item: any) {
        this.deleteItemIndex = this.tableItems.indexOf(item);
        this.dialogDelete = true;
    }

    private cancelDelete() {
        this.dialogDelete = false;
    }

    private confirmDelete() {
        this.tableItems.splice(this.deleteItemIndex, 1);
        this.cancelDelete();
    }

    private getStoredSpeciesList() {
        return store.getters.getSpeciesList;
    }

    private showCommentIcon(comment: string) {
        return comment === "" ? false : true;
    }

    private updateSpeciesForOtherObs(item: any) {
        const selectedSpeciesForRow = item.art.selectedSpeciesItem;
        item.imago.selectedSpeciesItem = selectedSpeciesForRow;
        item.female.selectedSpeciesItem = selectedSpeciesForRow;
        item.male.selectedSpeciesItem = selectedSpeciesForRow;
        item.caterpillar.selectedSpeciesItem = selectedSpeciesForRow;
        item.cocoon.selectedSpeciesItem = selectedSpeciesForRow;
        item.egg.selectedSpeciesItem = selectedSpeciesForRow;
    }
}