523 lines
21 KiB
JavaScript
523 lines
21 KiB
JavaScript
import importTemplate from "../../js/util/importTemplate.js";
|
|
|
|
export default {
|
|
template: await importTemplate("pages/billing/index.html"),
|
|
|
|
components: {},
|
|
data: () => ({
|
|
billDeatils: false,
|
|
paybutton: false,
|
|
currentBillButton: [],
|
|
oldBillingData: false,
|
|
animationTable: {
|
|
blueborder: false,
|
|
whitebackground: false,
|
|
paidText: false
|
|
},
|
|
showTooltip: null,
|
|
billingDataSearchBarInputValue: "",
|
|
totalModal: false,
|
|
allBills: false,
|
|
allowJobs: false,
|
|
allowSearchJobs: false,
|
|
societyBillingData: false,
|
|
currentBillButtonValue: false,
|
|
sortBox: false,
|
|
payWithInoviceValue: false,
|
|
payWithInoviceValueInput: "",
|
|
findedInvoice: false,
|
|
searchBillValue: "",
|
|
searchFoundValue: true
|
|
}),
|
|
methods: {
|
|
async payWithInoviceValueButton() {
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
if (this.payWithInoviceValueInput.length <= 0) return;
|
|
|
|
let data = await postNUI("checkInvoice", { invoice: this.payWithInoviceValueInput });
|
|
if (Object.keys(data).length <= 0) return;
|
|
this.findedInvoice = data;
|
|
},
|
|
payWithInvoiceId() {
|
|
this.payWithInoviceValue = true;
|
|
},
|
|
async cancelBilling(data) {
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
let reponse = await postNUI("cancelBilling", { id: data });
|
|
|
|
let dataArray = [].concat(...Object.values(reponse));
|
|
if (Object.keys(dataArray).length <= 0) {
|
|
this.oldBillingData = false;
|
|
return;
|
|
} else {
|
|
this.oldBillingData = false;
|
|
if (this.currentBillButtonValue == "societyunpaid") {
|
|
this.oldBillingData = false;
|
|
let filteredData = dataArray.filter(billing => billing.status === "unpaid");
|
|
setTimeout(() => {
|
|
this.oldBillingData = filteredData;
|
|
}, 250);
|
|
} else {
|
|
setTimeout(() => {
|
|
this.oldBillingData = dataArray;
|
|
}, 250);
|
|
}
|
|
}
|
|
},
|
|
async cancelMyBilling(data) {
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
let reponse = await postNUI("cancelmybilling", { id: data });
|
|
let dataArray = [].concat(...Object.values(reponse));
|
|
if (Object.keys(dataArray).length <= 0) {
|
|
return;
|
|
} else {
|
|
this.oldBillingData = false;
|
|
setTimeout(() => {
|
|
let filteredData = dataArray.filter(billing => billing.societyname == "identifier");
|
|
this.oldBillingData = filteredData;
|
|
}, 250);
|
|
}
|
|
},
|
|
async jobcancelBilling(data) {
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
let reponse = await postNUI("cancelBillingjob", { id: data });
|
|
let dataArray = [].concat(...Object.values(reponse));
|
|
if (Object.keys(dataArray).length <= 0) {
|
|
return;
|
|
} else {
|
|
this.oldBillingData = false;
|
|
if (this.currentBillButtonValue == "societyunpaid") {
|
|
this.oldBillingData = false;
|
|
let filteredData = dataArray.filter(
|
|
billing => billing.status === "unpaid" && billing.societyname === this.$store.state.billingpage.playerjob
|
|
);
|
|
setTimeout(() => {
|
|
this.oldBillingData = filteredData;
|
|
}, 250);
|
|
} else if (this.currentBillButtonValue == "society") {
|
|
this.oldBillingData = false;
|
|
let filteredData2 = dataArray.filter(billing => billing.societyname === this.$store.state.billingpage.playerjob);
|
|
|
|
setTimeout(() => {
|
|
this.oldBillingData = filteredData2;
|
|
}, 250);
|
|
} else {
|
|
this.oldBillingData = false;
|
|
setTimeout(() => {
|
|
this.oldBillingData = dataArray;
|
|
}, 250);
|
|
}
|
|
}
|
|
},
|
|
|
|
openFilterIcon() {
|
|
this.sortBox = !this.sortBox;
|
|
},
|
|
sortData(val) {
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
if (val == "latest") {
|
|
this.oldBillingData.sort((a, b) => {
|
|
return new Date(b.date) - new Date(a.date);
|
|
});
|
|
} else {
|
|
this.oldBillingData.sort((a, b) => {
|
|
return new Date(a.date) - new Date(b.date);
|
|
});
|
|
}
|
|
},
|
|
createInvoice() {
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
this.$store.state.activePage = "createbillingpage";
|
|
},
|
|
showBillDetails(val) {
|
|
this.billDeatils = val;
|
|
},
|
|
payAllBills() {
|
|
let filterData = this.oldBillingData.filter(bill => bill.status == "unpaid");
|
|
if (filterData.length <= 0) {
|
|
return;
|
|
} else {
|
|
this.totalModal = true;
|
|
this.allBills = this.$store.state.billingpage.billingData.filter(bill => bill.status == "unpaid");
|
|
this.$store.dispatch("soundPlay", "mbillingpay.mp3");
|
|
}
|
|
},
|
|
|
|
async payBill() {
|
|
if (!this.billDeatils) return;
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
let response = await postNUI("payBill", this.billDeatils);
|
|
this.oldBillingData = false;
|
|
if (response) {
|
|
this.paybutton = true;
|
|
this.animationTable.blueborder = true;
|
|
this.animationTable.whitebackground = true;
|
|
this.animationTable.paidText = true;
|
|
setTimeout(() => {
|
|
this.oldBillingData = response;
|
|
this.$store.state.billingpage.billingData = response;
|
|
this.$store.dispatch("soundPlay", "mbillingpay.mp3");
|
|
}, 250);
|
|
}
|
|
},
|
|
async payFindInvoice() {
|
|
if (!this.findedInvoice) return;
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
let response = await postNUI("payBillFind", this.findedInvoice);
|
|
this.oldBillingData = false;
|
|
if (response) {
|
|
this.paybutton = true;
|
|
this.animationTable.blueborder = true;
|
|
this.animationTable.whitebackground = true;
|
|
this.animationTable.paidText = true;
|
|
setTimeout(() => {
|
|
this.oldBillingData = response;
|
|
this.$store.state.billingpage.billingData = response;
|
|
}, 250);
|
|
}
|
|
},
|
|
|
|
closePayModal() {
|
|
this.payWithInoviceValue = false;
|
|
this.totalModal = false;
|
|
this.paybutton = false;
|
|
this.billDeatils = false;
|
|
this.findedInvoice = false;
|
|
this.animationTable.blueborder = false;
|
|
this.animationTable.whitebackground = false;
|
|
this.animationTable.paidText = false;
|
|
},
|
|
async payAllButton() {
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
let response = await postNUI("payAllBills");
|
|
if (Object.keys(response).length <= 0) return;
|
|
this.paybutton = true;
|
|
this.animationTable.blueborder = true;
|
|
this.animationTable.whitebackground = true;
|
|
this.animationTable.paidText = true;
|
|
this.$store.state.billingpage.billingData = false;
|
|
this.oldBillingData = false;
|
|
setTimeout(() => {
|
|
this.oldBillingData = response;
|
|
this.paybutton = true;
|
|
this.$store.state.billingpage.billingData = response;
|
|
}, 500);
|
|
},
|
|
async changeCategory(val) {
|
|
if (val == this.currentBillButtonValue) return;
|
|
this.searchFoundValue = true;
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
this.currentBillButtonValue = val;
|
|
for (let key in this.currentBillButton) {
|
|
if (key != val) {
|
|
this.currentBillButton[key] = false;
|
|
}
|
|
}
|
|
if (val == "paid") {
|
|
this.oldBillingData = false;
|
|
let data = await postNUI("getMyBillingData");
|
|
if (Object.keys(data).length <= 0) {
|
|
this.currentBillButton[val] = !this.currentBillButton[val];
|
|
return;
|
|
} else {
|
|
setTimeout(() => {
|
|
let filteredData = this.$store.state.billingpage.billingData.filter(billing => billing.status === "paid");
|
|
|
|
this.oldBillingData = filteredData;
|
|
}, 150);
|
|
}
|
|
}
|
|
if (val == "unpaid") {
|
|
this.oldBillingData = false;
|
|
let data = await postNUI("getMyBillingData");
|
|
if (Object.keys(data).length <= 0) {
|
|
this.currentBillButton[val] = !this.currentBillButton[val];
|
|
return;
|
|
} else {
|
|
setTimeout(() => {
|
|
let filteredData = this.$store.state.billingpage.billingData.filter(billing => billing.status === "unpaid");
|
|
this.oldBillingData = filteredData;
|
|
}, 150);
|
|
}
|
|
}
|
|
if (val == "all") {
|
|
this.oldBillingData = false;
|
|
let data = await postNUI("getMyBillingData");
|
|
if (Object.keys(data).length <= 0) {
|
|
this.currentBillButton[val] = !this.currentBillButton[val];
|
|
return;
|
|
} else {
|
|
setTimeout(() => {
|
|
this.oldBillingData = data;
|
|
this.$store.state.billingpage.billingData = data;
|
|
}, 150);
|
|
}
|
|
}
|
|
if (val == "society") {
|
|
this.oldBillingData = false;
|
|
let data = await postNUI("getSocietyBills", { society: this.allowJobs });
|
|
|
|
if (Object.keys(data).length <= 0) {
|
|
this.currentBillButton[val] = !this.currentBillButton[val];
|
|
return;
|
|
}
|
|
setTimeout(() => {
|
|
this.oldBillingData = data;
|
|
}, 150);
|
|
}
|
|
if (val == "societyunpaid") {
|
|
this.oldBillingData = false;
|
|
let data = await postNUI("getSocietyBills", { society: this.allowJobs });
|
|
if (Object.keys(data).length <= 0) {
|
|
this.currentBillButton[val] = !this.currentBillButton[val];
|
|
return;
|
|
}
|
|
let filteredData = data.filter(billing => billing.status === "unpaid");
|
|
this.oldBillingData = filteredData;
|
|
}
|
|
if (val == "societypaid") {
|
|
this.oldBillingData = false;
|
|
let data = await postNUI("getSocietyBills", { society: this.allowJobs });
|
|
if (Object.keys(data).length <= 0) {
|
|
this.currentBillButton[val] = !this.currentBillButton[val];
|
|
return;
|
|
}
|
|
let filteredData = data.filter(billing => billing.status === "paid");
|
|
this.oldBillingData = filteredData;
|
|
}
|
|
if (val == "createdinvoices") {
|
|
this.oldBillingData = false;
|
|
let data = await postNUI("getAllSociety");
|
|
if (Object.keys(data).length <= 0) {
|
|
this.currentBillButton[val] = !this.currentBillButton[val];
|
|
return;
|
|
}
|
|
|
|
this.oldBillingData = data;
|
|
}
|
|
if (val == "mybill") {
|
|
this.oldBillingData = false;
|
|
let data = await postNUI("getMyAllBillingData");
|
|
if (Object.keys(data).length <= 0) {
|
|
this.currentBillButton[val] = !this.currentBillButton[val];
|
|
return;
|
|
}
|
|
this.oldBillingData = data;
|
|
}
|
|
if (val == "searchbill") {
|
|
this.oldBillingData = false;
|
|
this.searchFoundValue = false;
|
|
}
|
|
|
|
this.currentBillButton[val] = !this.currentBillButton[val];
|
|
},
|
|
async searchBill() {
|
|
this.oldBillingData = false;
|
|
if (this.searchBillValue.trim().length <= 0) return;
|
|
const numberValue = parseFloat(this.searchBillValue);
|
|
|
|
if (isNaN(numberValue)) {
|
|
let response = await postNUI("searchBillName", { name: this.searchBillValue });
|
|
if (Object.keys(response).length <= 0) {
|
|
// this.currentBillButton[val] = !this.currentBillButton[val];
|
|
this.searchBillValue = "";
|
|
this.searchFoundValue = false;
|
|
return;
|
|
} else {
|
|
setTimeout(() => {
|
|
this.searchFoundValue = true;
|
|
this.searchBillValue = "";
|
|
this.oldBillingData = response;
|
|
this.$store.state.billingpage.billingData = response;
|
|
}, 150);
|
|
}
|
|
} else {
|
|
let response = await postNUI("searchBill", { id: numberValue });
|
|
if (Object.keys(response).length <= 0) {
|
|
// this.currentBillButton[val] = !this.currentBillButton[val];
|
|
this.searchBillValue = "";
|
|
this.searchFoundValue = false;
|
|
return;
|
|
} else {
|
|
setTimeout(() => {
|
|
this.searchFoundValue = true;
|
|
this.searchBillValue = "";
|
|
this.oldBillingData = response;
|
|
this.$store.state.billingpage.billingData = response;
|
|
}, 150);
|
|
}
|
|
}
|
|
},
|
|
closeMenu() {
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
postNUI("close", {});
|
|
this.$store.state.activePage = "";
|
|
this.closePayModal;
|
|
},
|
|
|
|
eventHandler(event) {
|
|
switch (event.data.action) {
|
|
case "updateBillData":
|
|
this.oldBillingData = event.data.payload;
|
|
this.$store.state.billingpage.billingData = event.data.payload;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
handleButtonClick(data) {
|
|
this.$store.dispatch("soundPlay", "click.wav");
|
|
if (this.buttonActionType === "cancelBilling") {
|
|
if (this.currentBillButtonValue == "societyunpaid" || this.currentBillButtonValue == "society") {
|
|
this.jobcancelBilling(data.uniqueid);
|
|
}
|
|
if (this.currentBillButtonValue == "createdinvoices") {
|
|
this.cancelBilling(data.uniqueid);
|
|
}
|
|
if (this.currentBillButtonValue == "mybill") {
|
|
this.cancelMyBilling(data.uniqueid);
|
|
}
|
|
} else {
|
|
this.showBillDetails(data);
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
filterByTermBillingData() {
|
|
if (this.billingDataSearchBarInputValue.length > 0) {
|
|
if (!this.oldBillingData || this.oldBillingData.length <= 0) {
|
|
return this.oldBillingData;
|
|
}
|
|
return this.oldBillingData.filter(name => {
|
|
return (
|
|
name.id.toString().toLowerCase().includes(this.billingDataSearchBarInputValue.toLowerCase()) ||
|
|
name.targetname.toLowerCase().includes(this.billingDataSearchBarInputValue.toLowerCase()) ||
|
|
name.name.toLowerCase().includes(this.billingDataSearchBarInputValue.toLowerCase()) ||
|
|
name.invoicelabel.toLowerCase().includes(this.billingDataSearchBarInputValue.toLowerCase()) ||
|
|
name.uniqueid.toLowerCase().includes(this.billingDataSearchBarInputValue.toLowerCase())
|
|
);
|
|
});
|
|
} else {
|
|
return this.oldBillingData;
|
|
}
|
|
},
|
|
getTotalUnpaidBillPrice() {
|
|
let total = 0;
|
|
if (this.$store.state.billingpage.billingData.length > 0) {
|
|
this.$store.state.billingpage.billingData.forEach(bill => {
|
|
if (bill.status == "unpaid") {
|
|
let kdv = parseFloat(bill.amount) * this.$store.state.billingpage.tax;
|
|
total += kdv;
|
|
total += parseFloat(bill.amount);
|
|
}
|
|
});
|
|
}
|
|
return total + "$";
|
|
},
|
|
getTotalUnpaidBillAmount() {
|
|
let total = 0;
|
|
if (this.$store.state.billingpage.billingData.length > 0) {
|
|
this.$store.state.billingpage.billingData.forEach(bill => {
|
|
if (bill.status == "unpaid") {
|
|
total += 1;
|
|
}
|
|
});
|
|
}
|
|
|
|
return total;
|
|
},
|
|
allPayTotalBillsPercent() {
|
|
let total = 0;
|
|
this.allBills.forEach(bill => {
|
|
total += parseFloat(bill.amount);
|
|
});
|
|
|
|
let kdv = total * this.$store.state.billingpage.tax;
|
|
return kdv;
|
|
},
|
|
allPayTotalBills() {
|
|
let total = 0;
|
|
this.allBills.forEach(bill => {
|
|
total += parseFloat(bill.amount);
|
|
});
|
|
|
|
return total;
|
|
},
|
|
isAdmin() {
|
|
return this.$store.state.billingpage.playerAccount.admin;
|
|
},
|
|
buttonActionType() {
|
|
if (this.isAdmin && this.currentBillButtonValue === "createdinvoices") return "cancelBilling";
|
|
if (this.currentBillButtonValue === "society" || this.currentBillButtonValue === "societyunpaid") return "cancelBilling";
|
|
if (this.currentBillButtonValue === "mybill") return "cancelBilling";
|
|
return "showBillDetails";
|
|
},
|
|
buttonText() {
|
|
return this.buttonActionType === "cancelBilling" ? this.$store.state.Locales["CANCEL"] : this.$store.state.Locales["PAY"];
|
|
},
|
|
buttonTextStyle() {
|
|
let baseStyle = "font-family: sf-pro-rounded-medium; font-size: 0.8vw;";
|
|
return this.buttonActionType === "cancelBilling" ? baseStyle + "color: #ff6565" : baseStyle + "color: black";
|
|
},
|
|
buttonClass() {
|
|
return {
|
|
"w-[90%]": true,
|
|
"h-[45%]": true,
|
|
flex: true,
|
|
"items-center": true,
|
|
"justify-center": true,
|
|
"cursor-pointer": true
|
|
};
|
|
},
|
|
formatDate() {
|
|
const date = new Date();
|
|
const monthNames = [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"Octomber",
|
|
"November",
|
|
"December"
|
|
];
|
|
return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}`;
|
|
}
|
|
// ...Vuex.mapState({
|
|
// Locales: state => state.Locales
|
|
// })
|
|
},
|
|
|
|
watch: {},
|
|
|
|
mounted() {
|
|
window.addEventListener("message", this.eventHandler);
|
|
this.oldBillingData = this.$store.state.billingpage.billingData;
|
|
|
|
if (this.$store.state.billingpage.allowJobs) {
|
|
for (let key in this.$store.state.billingpage.allowJobs) {
|
|
if (key == this.$store.state.billingpage.playerjob) {
|
|
this.allowJobs = key;
|
|
}
|
|
}
|
|
}
|
|
if (this.$store.state.billingpage.allowSearchJobs) {
|
|
for (let key in this.$store.state.billingpage.allowSearchJobs) {
|
|
if (key == this.$store.state.billingpage.playerjob) {
|
|
this.allowSearchJobs = key;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.changeCategory("all");
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("message", this.eventHandler);
|
|
}
|
|
};
|