You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
285 lines
8.5 KiB
285 lines
8.5 KiB
<template>
|
|
<modal name="UploadRemittanceSlip" :clickToClose="false">
|
|
<div class="tw-text-base-primary">
|
|
<div v-if="choose == false">
|
|
<div>
|
|
<div class="modal-header tw-flex tw-w-full tw-mb-[10px]">
|
|
<div class="t18 tw-font-bold tw-mt-[15px] tw-flex tw-w-full justify-center lg:t28 lg:tw-font-bold">
|
|
{{ $t('Upload your file') }}
|
|
</div>
|
|
<button class="close tw-transition tw-btn-md" @click="$modal.hide('UploadRemittanceSlip')"></button>
|
|
</div>
|
|
<div class="t14 tw-flex tw-justify-center tw-text-base-tertiary tw-mb-[20px] lg:tw-body-2 lg:tw-mb-[40px]">
|
|
{{ $t('JPG, PNG, PDF are allowed') }}
|
|
</div>
|
|
<div class="modal-content">
|
|
<button
|
|
class="tw-flex tw-flex-col tw-items-center tw-bg-neutrals-0 tw-border tw-border-dashed tw-border-neutrals-800 tw-rounded-[16px] tw-w-full"
|
|
@click="handleUploadEvent">
|
|
<img src="~/assets/svg/uploadImg.svg" class="tw-mb-[15px] tw-mt-[23px] mb:tw-mb-[23px] mb:tw-mb-[35px]"
|
|
alt="" />
|
|
<div class="t14 tw-text-base-tertiary tw-whitespace-nowrap tw-mb-[10px] tw-mx-[10px] lg:tw-body-2">
|
|
{{ $t('Drag and drop or browse to choose a file') }}
|
|
</div>
|
|
<div class="tw-body-5 tw-text-base-tertiary tw-mb-[20px] lg:tw-body-3 lg:tw-mb-[40px]">
|
|
{{ $t('Upload up to 1 file') }}
|
|
</div>
|
|
|
|
<input type="file" class="d-none" ref="uploader" @change="UploadEvent" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="success == true">
|
|
<div class="modal-header tw-flex tw-mb-[20px]">
|
|
<div class="tw-mt-[15px] tw-flex tw-w-full tw-flex-col tw-items-center">
|
|
<img src="~/assets/svg/White.svg" class="tw-mb-[10px] tw-h-[36px] tw-w-[36px]" />
|
|
<div class="t18 tw-font-bold lg:t28">{{ $t('Upload Successfully') }}</div>
|
|
</div>
|
|
|
|
<button class="close tw-transition tw-btn-md" @click="hideUploadRemittanceSlip"></button>
|
|
</div>
|
|
<div class="modal-content t12 tw-text-neutrals-800">
|
|
<div class="tw-flex tw-mb-[10px] tw-w-full tw-justify-between lg:tw-body-2">
|
|
<div>{{ $t('1 of 1 uploaded') }}</div>
|
|
<button @click="cancelUpload">{{ $t('Cancel') }}</button>
|
|
</div>
|
|
<div class="tw-flex tw-bg-neutrals-0 tw-rounded-[10px]">
|
|
<div
|
|
class="t12 tw-flex tw-justify-between tw-items-center tw-break-words tw-text-neutrals-800 tw-w-full lg:t16">
|
|
<div class="tw-mr-[66px] tw-relative tw-z-[2] tw-pl-[20px] tw-py-[4px]">
|
|
<div class="tw-max-w-[170px] tw-whitespace-normal">
|
|
{{ $t(this.filename) }}
|
|
</div>
|
|
<div>{{ $t(this.size) }} KB</div>
|
|
</div>
|
|
<div class="tw-z-[2] tw-mr-[10px]">
|
|
<img src="~/assets/svg/UploadSuccessful.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="upload == true">
|
|
<div class="modal-header tw-flex tw-w-full tw-mb-[10px]">
|
|
<div
|
|
class="t18 tw-font-bold tw-mt-[15px] tw-mb-[20px] tw-flex tw-w-full justify-center lg:t28 lg:tw-font-bold">
|
|
{{ $t('Uploading ...') }}
|
|
</div>
|
|
<button class="close tw-transition tw-btn-md" @click="$modal.hide('UploadRemittanceSlip')"></button>
|
|
</div>
|
|
<div class="modal-content t12 tw-text-neutrals-800">
|
|
<div class="tw-flex tw-mb-[10px] tw-w-full tw-justify-between lg:tw-body-2">
|
|
<div>{{ $t('1 of 1 uploaded') }}</div>
|
|
<button>{{ $t('Cancel') }}</button>
|
|
</div>
|
|
<div class="t12 tw-flex tw-relative tw-justify-between tw-items-center tw-break-words tw-text-white lg:t16">
|
|
<div class="tw-mr-[66px] tw-relative tw-z-[2] tw-pl-[20px] tw-py-[4px]">
|
|
<div class="tw-max-w-[170px] tw-whitespace-normal">
|
|
{{ $t(this.filename) }}
|
|
</div>
|
|
<div>{{ $t(this.size) }} KB</div>
|
|
</div>
|
|
<div class="tw-z-[2] tw-mr-[10px]">
|
|
<img src="~/assets/svg/Cancel.svg" />
|
|
</div>
|
|
|
|
<progress max="100" :value.prop="uploadPercentage"
|
|
class="tw-absolute tw-left-0 tw-top-0 tw-w-full tw-z-[1] tw-h-full"></progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</modal>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "UploadRemittanceSlip",
|
|
data() {
|
|
return {
|
|
uploaded: null,
|
|
choose: false,
|
|
success: false,
|
|
upload: false,
|
|
uploadPercentage: 0,
|
|
filename: "",
|
|
size: "",
|
|
};
|
|
},
|
|
props:{
|
|
uploadBookingID:{
|
|
type: String,
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
handleUploadEvent() {
|
|
window.addEventListener("focus", () => {}, { once: true });
|
|
this.$refs.uploader.click();
|
|
},
|
|
|
|
UploadEvent(e) {
|
|
this.choose = true;
|
|
this.upload = true;
|
|
this.uploaded = new FormData();
|
|
this.uploaded.append("file", e.target.files[0]);
|
|
this.size = Math.ceil(e.target.files[0].size / 1000);
|
|
this.$axios
|
|
.post(
|
|
`/trending/api/BookingOnline/UploadRemittance?BookingID=${this.uploadBookingID}`, this.uploaded)
|
|
.then((response) => {
|
|
//console.log(JSON.stringify(response))
|
|
if(response && response.data){
|
|
this.upload = false;
|
|
this.success = true;
|
|
this.$emit('reload-BookingContent');
|
|
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
|
|
// this.$axios
|
|
// .post("/s3/upload", this.uploaded, {
|
|
// onUploadProgress: function (progressEvent) {
|
|
// this.uploadPercentage = parseInt(
|
|
// Math.round((progressEvent.loaded / progressEvent.total) * 100)
|
|
// );
|
|
// }.bind(this),
|
|
// })
|
|
// .then((response) => {
|
|
// console.log(response.status);
|
|
// if (response.status == 200) {
|
|
// this.upload = false;
|
|
// this.success = true;
|
|
// }
|
|
// })
|
|
// .catch((error) => console.log(error));
|
|
},
|
|
|
|
hideUploadRemittanceSlip() {
|
|
this.$modal.hide("UploadRemittanceSlip");
|
|
|
|
this.success = false;
|
|
this.choose = false;
|
|
this.upload = false;
|
|
},
|
|
|
|
cancelUpload() {},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.close {
|
|
position: absolute;
|
|
right: 25px;
|
|
top: 25px;
|
|
background-image: url("~/assets/svg/close.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 14px;
|
|
height: 14px;
|
|
|
|
@media (min-width: 1366px) {
|
|
position: relative;
|
|
right: initial;
|
|
top: initial;
|
|
}
|
|
}
|
|
|
|
progress[value] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
// width: 290px;
|
|
// height: 40px;
|
|
}
|
|
|
|
progress[value]::-webkit-progress-bar {
|
|
background-color: #f8f8f8;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
progress[value]::-webkit-progress-value {
|
|
background-color: #f48800;
|
|
border-radius: 16px;
|
|
background-size: 35px 20px, 100% 100%, 100% 100%;
|
|
}
|
|
|
|
@-webkit-keyframes animate-stripes {
|
|
100% {
|
|
background-position: -100px 0px;
|
|
-webkit-animation: animate-stripes 5s linear infinite;
|
|
animation: animate-stripes 5s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes animate-stripes {
|
|
100% {
|
|
background-position: -100px 0px;
|
|
-webkit-animation: animate-stripes 5s linear infinite;
|
|
animation: animate-stripes 5s linear infinite;
|
|
}
|
|
}
|
|
|
|
:deep() {
|
|
.v--modal {
|
|
background-color: white !important;
|
|
text-align: left;
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 60px -2px rgb(27 33 58 / 40%);
|
|
padding: 20px;
|
|
max-width: 100%;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
margin: 0 auto;
|
|
height: auto !important;
|
|
vertical-align: middle;
|
|
|
|
@media screen and (min-width: 768px) {
|
|
padding: 20px;
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
padding: 40px;
|
|
}
|
|
}
|
|
|
|
.v--modal-overlay {
|
|
position: fixed;
|
|
box-sizing: border-box;
|
|
left: 0;
|
|
top: 0;
|
|
width: max-content;
|
|
height: auto;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
z-index: 999;
|
|
opacity: 1;
|
|
}
|
|
|
|
.v--modal-top-right {
|
|
display: block;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.v--modal-background-click {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.v--modal-box {
|
|
margin-left: 30px;
|
|
margin-right: 30px;
|
|
|
|
@media (min-width: 768px) {
|
|
margin-left: 67px;
|
|
margin-right: 67px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|