Ped Details

<template>
    <section class="pedigree-section full-screen-section has-logo dark">
        <div class="container">
            <div class="row">
                <div class="col-md-12" v-if="data">
                    <h2 class="title-style text-center">
                        Pedigree of {{ data.full_name }}
                    </h2>
                </div>
            </div>
            <div class="row" v-if="data">
                <DetComp :data="data"></DetComp>

                <div class="col-md-3"></div>
                <div class="col-md-9">
                    <div class="row mx-0 mt-4 mb-5 pedigrees-navigation-links">
                        <div class="col">
                            <a
                                @click="showPedStat = false"
                                href="javascript:;"
                                class="active"
                                >Pedigree</a
                            >
                        </div>
                        <div class="col">
                            <router-link
                                :to="{
                                    name: 'pedigree.offsprings',
                                    params: { id: data.id }
                                }"
                                >Offspring</router-link
                            >
                        </div>
                        <div class="col">
                            <router-link
                                :to="{
                                    name: 'pedigree.siblings',
                                    params: { id: data.id }
                                }"
                                >Siblings</router-link
                            >
                        </div>
                        <div class="col">
                            <a @click="showPedStat = true" href="javascript:;"
                                >Pedstats</a
                            >
                        </div>
                        <div class="col">
                            <select
                                v-model="pedigreeOption"
                                @change="handlePedigreeOption(data.id)"
                                id=""
                            >
                                <option value="">Options</option>
                                <option
                                    v-if="
                                        Number(user.id) == Number(data.user_id)
                                    "
                                    value="1"
                                    >Edit Pedigree</option
                                >
                                <option
                                    v-if="
                                        Number(user.id) == Number(data.user_id)
                                    "
                                    value="2"
                                    >Delete Pedigree</option
                                >

                                <option
                                    v-if="
                                        Number(user.id) !== Number(data.user_id)
                                    "
                                    value="3"
                                    >Request Pedigree Ownership Change
                                </option>
                                <option
                                    value="4"
                                    >Report Duplicate Pedigree</option
                                >
                            </select>
                        </div>
                    </div>
                </div>


                <div class="col-md-12 px-0 px-md-3">
                    <div class="table-scroll-wrap">
                        <PedStats v-if="showPedStat" :pedstats="pedstats" />

                        <table
                            v-if="tree && !showPedStat"
                            ref="level1"
                            class="table table-responsive table-bordered table-pedigree-chart"
                        >
                            <tbody>
                                <tr>
                                    <td class="pl-0 pr-0">
                                        <table
                                            class="inner-table"
                                            :style="`height:${height}px`"
                                        >
                                            <tr
                                                v-for="(l2,
                                                l2index) in tree.level2"
                                                :key="l2index"
                                            >
                                                <td
                                                    class=""
                                                    v-if="
                                                        l2 &&
                                                            typeof l2 ==
                                                                'object'
                                                    "
                                                >
                                                    <router-link
                                                        :to="{
                                                            name:
                                                                'pedigree.detail',
                                                            params: {
                                                                id: l2.id
                                                            }
                                                        }"
                                                        >{{
                                                            l2.name
                                                        }}</router-link
                                                    >
                                                </td>
                                                <td v-else>
                                                    <span v-if="l2">
                                                        <a
                                                            href="javascript:;"
                                                            data-toggle="modal"
                                                            data-target=".searchModal"
                                                            @click="
                                                                search_query =
                                                                    '';
                                                                searchResult = [];
                                                                currentAction = {
                                                                    name:
                                                                        'pedigree.add',
                                                                    query: {
                                                                        offspring_id: l2,
                                                                        type:
                                                                            l2index %
                                                                            2
                                                                    }
                                                                };
                                                            "
                                                            >+Add</a
                                                        >
                                                    </span>
                                                    <span v-else>
                                                        -
                                                    </span>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="pl-0 pr-0">
                                        <table
                                            class="inner-table second-table"
                                            :style="`height:${height}px`"
                                        >
                                            <tr
                                                v-for="(l3,
                                                l3index) in tree.level3"
                                                :key="l3index"
                                            >
                                                <td
                                                    v-if="
                                                        l3 &&
                                                            typeof l3 ==
                                                                'object'
                                                    "
                                                >
                                                    <router-link
                                                        :to="{
                                                            name:
                                                                'pedigree.detail',
                                                            params: {
                                                                id: l3.id
                                                            }
                                                        }"
                                                        >{{
                                                            l3.name
                                                        }}</router-link
                                                    >
                                                </td>
                                                <td v-else>
                                                    <span v-if="l3">
                                                        <a
                                                            href="javascript:;"
                                                            data-toggle="modal"
                                                            data-target=".searchModal"
                                                            @click="
                                                                search_query =
                                                                    '';
                                                                searchResult = undefined;
                                                                currentAction = {
                                                                    name:
                                                                        'pedigree.add',
                                                                    query: {
                                                                        offspring_id: l3,
                                                                        type:
                                                                            l3index %
                                                                            2
                                                                    }
                                                                };
                                                            "
                                                            >+Add</a
                                                        >
                                                    </span>
                                                    <span v-else>
                                                        -
                                                    </span>

                                                    <!-- <router-link :to="{ name: 'pedigree.search' } ">+Add</router-link> -->
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="pl-0 pr-0">
                                        <table
                                            class="inner-table third-table"
                                            :style="`height:${height}px`"
                                        >
                                            <tr
                                                v-for="(l4,
                                                l4index) in tree.level4"
                                                :key="l4index"
                                            >
                                                <td
                                                    v-if="
                                                        l4 &&
                                                            typeof l4 ==
                                                                'object'
                                                    "
                                                >
                                                    <router-link
                                                        :to="{
                                                            name:
                                                                'pedigree.detail',
                                                            params: {
                                                                id: l4.id
                                                            }
                                                        }"
                                                        >{{
                                                            l4.name
                                                        }}</router-link
                                                    >
                                                </td>
                                                <td v-else>
                                                    <span v-if="l4">
                                                        <a
                                                            href="javascript:;"
                                                            data-toggle="modal"
                                                            data-target=".searchModal"
                                                            @click="
                                                                search_query =
                                                                    '';
                                                                searchResult = [];
                                                                currentAction = {
                                                                    name:
                                                                        'pedigree.add',
                                                                    query: {
                                                                        offspring_id: l4,
                                                                        type:
                                                                            l4index %
                                                                            2
                                                                    }
                                                                };
                                                            "
                                                            >+Add</a
                                                        >
                                                    </span>
                                                    <span v-else>
                                                        -
                                                    </span>

                                                    <!-- <router-link :to="{ name: 'pedigree.search' } ">+Add</router-link> -->
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="pl-0 pr-0">
                                        <table
                                            class="inner-table last-table"
                                            :style="`height:${height}px`"
                                        >
                                            <tr
                                                v-for="(l5,
                                                l5index) in tree.level5"
                                                :key="l5index"
                                            >
                                                <td
                                                    v-if="
                                                        l5 &&
                                                            typeof l5 ==
                                                                'object'
                                                    "
                                                >
                                                    <router-link
                                                        :to="{
                                                            name:
                                                                'pedigree.detail',
                                                            params: {
                                                                id: l5.id
                                                            }
                                                        }"
                                                        >{{
                                                            l5.name
                                                        }}</router-link
                                                    >
                                                </td>
                                                <td v-else>
                                                    <span v-if="l5">
                                                        <a
                                                            href="javascript:;"
                                                            data-toggle="modal"
                                                            data-target=".searchModal"
                                                            @click="
                                                                search_query =
                                                                    '';
                                                                searchResult = [];
                                                                currentAction = {
                                                                    name:
                                                                        'pedigree.add',
                                                                    query: {
                                                                        offspring_id: l5,
                                                                        type:
                                                                            l5index %
                                                                            2
                                                                    }
                                                                };
                                                            "
                                                            >+Add</a
                                                        >
                                                    </span>
                                                    <span v-else>
                                                        -
                                                    </span>

                                                    <!-- <router-link :to="{ name: 'pedigree.search' } ">+Add</router-link> -->
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <PublicLinks :id="data.id" :name="data.full_name" />


            </div>
        </div>

        <div class="searchModal modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Search Pedigree</h5>
                        <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-label="Close"
                        >
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="input-group form-group col-12">
                            <input
                                type="text"
                                placeholder="Dog's Call Name"
                                v-model="search_query"
                                style="height:41px;"
                                class="form-control"
                            />
                            <div class="input-group-append">
                                <button
                                    @click="searchPedigree"
                                    class="btn btn-primary"
                                    type="button"
                                >
                                    <span class="fa fa-search"></span>
                                </button>
                            </div>
                            <div class="alert alert-warning mt-4">
                                <b>Note: </b> Please only input the call name of
                                your dog to search the database. This will allow
                                us to avoid duplicate entries
                            </div>
                        </div>
                        <div class="col-12">
                            <div
                                style="max-height: 350px; overflow:scroll"
                                class="table-content table-new-pedigree mb-4"
                            >
                                <table class="title-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 50%">Name</th>
                                            <th style="width: 25%">ID</th>
                                            <th style="width: 25%">Select</th>
                                        </tr>
                                    </thead>
                                </table>
                                <div class="slimScrollDiv">
                                    <div class="table-small">
                                        <table class="table table-data assign-table">
                                            <tbody v-if="searchResult">
                                                <tr
                                                    v-for="(sr,
                                                    srindex) in searchResult"
                                                    :key="srindex"
                                                >
                                                    <td style="width: 50%">
                                                        <label class="w-100">
                                                            {{ sr.full_name }}
                                                        </label>
                                                    </td>
                                                    <td style="width: 25%">
                                                        {{ sr.uid }}
                                                    </td>
                                                    <td style="width: 25%">
                                                        <label class="w-100">
                                                            <button
                                                                @click="
                                                                    assignPedigree(
                                                                        sr.id
                                                                    )
                                                                "
                                                                type="button"
                                                                class="btn btn-primary px-3 px-md-4 py-2"
                                                            >
                                                                Assign ?
                                                            </button>
                                                        </label>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            v-if="searchResult && searchResult.length == 0"
                            @click="quickAdd"
                            class="btn btn-primary"
                        >
                            Quick Add +
                        </button>

                        <button
                            type="button"
                            v-if="searchResult"
                            @click="canNotFindMatch"
                            class="btn btn-primary"
                        >
                            Couldn't Find ? Add New
                        </button>
                        <button
                            type="button"
                            class="btn btn-secondary"
                            data-dismiss="modal"
                        >
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <ReportDuplicatePedigree :pedigree-id="$route.params.id" />
    </section>
</template>
<style>
.second-table td{
    height: 20px;
}
.third-table td{
    height: 20px;
}
.last-table td{

    height: 10px;
}
.bl-0 {
    border-left: 0px;
}
.br-0 {
    border-right: 0px;
}
.bt-0 {
    border-top: 0px;
}
.bb-0 {
    border-bottom: 0px;
}
.inner-table td {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}
.table-new-pedigree {
    text-transform: uppercase !important;
}
</style>
<script>
import DetComp from "./partials/DetComponent.vue";

import PedStats from "./partials/PedStats.vue";

import PublicLinks from "./partials/PublicLinks.vue";
import ReportDuplicatePedigree from "../../components/ReportDuplicatePedigree.vue";

export default {
    data() {
        return {
            pedigreeOption: "",
            user: window.user,
            showPedStat: false,
            data: undefined,
            error: false,
            table: undefined,
            tree: undefined,
            currentAction: undefined,
            pedstats: {},
            height: 310,
            search_query: "",
            rowspan: [16, 8, 4, 2, 1],
            searchResult: undefined,
            type_class: ["default", "success", "warning", "danger"]
        };
    },
    components: { DetComp, PedStats, PublicLinks, ReportDuplicatePedigree },

    mounted() {
        this.getMyPedigree();
        this.getMyTree();
        this.getHeight();
    },
    methods: {
        canNotFindMatch() {
            $(".searchModal").modal("hide");

            let action = this.currentAction;

            action.query.name = this.search_query || "";

            this.$router.push(action);
        },
        quickAdd() {
            let pd = {
                offspring_id: this.currentAction.query.offspring_id || "",
                name: this.search_query || "",
                breed_id: localStorage.getItem('breedId') ?? 1,
                gender:
                    this.currentAction.query.type !== ""
                        ? Number(this.currentAction.query.type)
                        : ""
            };

            axios
                .post(`/pedigree`, pd)
                .then(data => {
                    $(".searchModal").modal("hide");
                    this.getMyTree();
                })
                .catch(e => {
                    this.loading = false;
                    let errors = e.response.data.errors;
                    Object.keys(errors).forEach(key => {
                        this.$toastr.error(errors[key], "Error!");
                    });
                });
        },

        searchPedigree() {
            let value = this.search_query;

            if (value == "") {
                this.searchResult = [];
                return;
            }
            // if(this.search_query.length < 3)
            //   return;
            let query = {
                search_query: value,
                search_type: this.currentAction.query.type,
                noloader: true,
                myid: this.data.id
            };
            axios
                .get(`/pedigree/search/all?${this.buildqueryparams(query)}`)
                .then(({ data }) => {
                    if (this.currentAction.query.type == 0)
                        this.searchResult = data.sire;
                    else this.searchResult = data.dam;
                });
        },
        assignPedigree(id) {
            axios
                .post(`/pedigree/assign-pedigree/submit`, {
                    pedigree_id: this.currentAction.query.offspring_id,
                    id: id,
                    type: this.currentAction.query.type
                })
                .then(d => {
                    this.$toastr.success(d.data.message, "Success", {});
                    // $(".searchModal").hide();
                    window.location.reload();
                    this.getMyTree();
                })
                .catch(e => {
                    let errors = e.response.data.errors;
                    Object.keys(errors).forEach(key => {
                        this.$toastr.error(errors[key], "Error!");
                    });
                });
        },
        handlePedigreeOption(id) {
            if (this.pedigreeOption == 1) {
                this.$router.push({
                    name: "pedigree.edit",
                    params: { id: id }
                });
            } else if (this.pedigreeOption == 2) {
                this.$dialog
                    .confirm(
                        `<h2 class="text-center">DELETE PEDIGREE</h2><p class="text-center">Are you sure ?</p>`,
                        {
                            okText: "Yes",
                            cancelText: "> No"
                        }
                    )
                    .then(dialog => {
                        axios
                            .delete(`/pedigree/${id}`)
                            .then(d => {
                                this.$toastr.success(
                                    d.data.message,
                                    "Success",
                                    {}
                                );
                                dialog.close();
                                this.$router.push({ name: "pedigree.mine" });
                            })
                            .catch(d => {});
                    });
            } else if (this.pedigreeOption == 3 && this.pedigreeOption !== "") {
                this.$dialog
                    // .confirm(
                    //     `<div class="p-4"><h2 class="text-center">Request Ownership Change</h2><p class="text-center">By clicking on "Confirm", you will receive ownership of this pedigree. Any malicious use of this pedigree will result in the user being banned. You can request ownership of a pedigree even if you didn't own the dog for the purposes of adding additional information & pictures. Please don't use this feature to delete duplicate pedigrees.</p></div>`,
                    //     {
                    //         okText: "Confirm",
                    //         cancelText: "> Cancel"
                    //     }
                    // )
                    .prompt({
                            body: "We're sorry. Some users were abusing this automated tool and thus we have removed it. Please submit a message explaining why you are requesting ownership and we will transfer the pedigree",
                        }, {
                            okText: "Send",
                        })
                    .then(dialog => {
                        console.log( dialog.data);

                        axios
                            .post(`/pedigree/${id}/change-ownership`, {data: dialog.data})
                            .then(d => {
                                this.$toastr.success(
                                    d.data.message,
                                    "Success",
                                    {}
                                );
                                this.pedigreeOption = "";
                                dialog.close();
                                // this.getMyPedigree();
                                // this.getMyTree();
                                // this.getHeight();
                            })
                            .catch(d => {
                                console.log(d);

                            });
                    })
                    .catch(() => {
                        console.log('Clicked on cancel');
                        this.pedigreeOption = "";
                    });

            } else if (this.pedigreeOption == 0 && this.pedigreeOption !== "") {
                window.open(
                    `${window.base_url}/module.php/portal/pedigree/detail/${id}`
                );
                // window.open(
                //     `${window.base_url}/pedigree-details/print?i=${id}&w=${window.innerWidth}&h=${window.innerHeight}`
                // );
            }
            else if(this.pedigreeOption == 4){
                $(".reportDuplicateModal").modal("show");
            }
        },
        getHeight() {},
        getNameFromLevel(data, level, type) {
            data;
        },
        getMyPedigree() {
            axios.get(`/pedigree/${this.$route.params.id}`).then(({ data }) => {
                this.data = data;
            });
        },
        getMyTree() {
            axios
                .get(`/pedigree/${this.$route.params.id}/tree`)
                .then(({ data }) => {
                    this.tree = data;
                    this.pedstats = {};
                    this.calculatePedstat(data);
                });
        },
        calculatePedstat(tree) {
            var pedstatsPercent = {
                level2: 50,
                level3: 25,
                level4: 12.5,
                level5: 6.25
            };
            for (var key in tree) {
                if (key !== "level1") {
                    tree[key].map((item, _) => {
                        if (typeof item === "object" && item !== null) {
                            if (this.pedstats[item.slug] !== undefined) {
                                // if (item.slug in this.pedstats) {
                                this.pedstats[item.slug]["value"] +=
                                    pedstatsPercent[key];
                            } else {
                                this.pedstats[item.slug] = {};
                                this.pedstats[item.slug]["name"] = item.name;
                                this.pedstats[item.slug]["value"] =
                                    pedstatsPercent[key];
                            }
                        } else {
                            let uk = key + "_unknown_" + _;
                            this.pedstats[uk] = {};
                            this.pedstats[uk]["name"] = "Unkown";
                            this.pedstats[uk]["value"] = pedstatsPercent[key];
                        }
                    });
                }
            }

            // this.showPedStat = true;
        }
    },
    watch: {
        $route: function() {
            this.getMyPedigree();
            this.getMyTree();
        },
        showPedStat: function() {
            this.getMyTree();
        }
    }
};
</script>


<style>
.dg-form{
    margin-bottom: 0 !important;
}
</style>