Skip to content

Instantly share code, notes, and snippets.

@mshoaibdev
Created February 20, 2023 11:09
Show Gist options
  • Save mshoaibdev/bbf9dcc3b150faa6d42671d5cd2a7546 to your computer and use it in GitHub Desktop.
Save mshoaibdev/bbf9dcc3b150faa6d42671d5cd2a7546 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment