nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

set/update/delete billing alert

Browse Source
This commit is contained in:
Čarodej
2021-12-17 10:44:50 +01:00
parent 04e46b7fcb
commit afb8323541
13 changed files with 307 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
resources/js/views/User/MeteredSubscription.vue
View File

@@ -76,19 +76,51 @@
{{ $t('Billing Alert') }}
</FormLabel>
<ValidationObserver ref="changeStorageCapacity" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
<div v-if="user.data.relationships.alert">
<b class="text-3xl font-extrabold -mt-3 block mb-0.5 flex items-center">
{{ user.data.relationships.alert.data.attributes.formatted }}
<edit2-icon v-if="! showUpdateBillingAlertForm" @click="showUpdateBillingAlertForm = ! showUpdateBillingAlertForm" size="12" class="vue-feather cursor-pointer ml-2 transform -translate-y-0.5" />
<trash2-icon v-if="showUpdateBillingAlertForm" @click="deleteBillingAlert" size="12" class="vue-feather cursor-pointer ml-2 transform -translate-y-0.5" />
</b>
<b class="block text-sm text-gray-400">
{{ $t('Alert will be triggered after you reach the value above.') }}
</b>
</div>
<ValidationObserver v-if="showUpdateBillingAlertForm" ref="updatebillingAlertForm" @submit.prevent="updateBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
<div class="flex space-x-4">
<input v-model="paymentAmount"
<input v-model="billingAlertAmount"
:placeholder="$t('Alert Amount...')"
type="number"
min="1"
max="999999999"
class="focus-border-theme input-dark"
:class="{'is-error': errors[0]}"
:class="{'border-red-700': errors[0]}"
/>
<ButtonBase type="submit" button-style="theme" class="submit-button">
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="submit-button">
{{ $t('Update Alert') }}
</ButtonBase>
</div>
</AppInputText>
</ValidationProvider>
</ValidationObserver>
<ValidationObserver v-if="! user.data.relationships.alert" ref="billingAlertForm" @submit.prevent="setBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
<div class="flex space-x-4">
<input v-model="billingAlertAmount"
:placeholder="$t('Alert Amount...')"
type="number"
min="1"
max="999999999"
class="focus-border-theme input-dark"
:class="{'border-red-700': errors[0]}"
/>
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="submit-button">
{{ $t('Set Alert') }}
</ButtonBase>
</div>
@@ -149,10 +181,15 @@
</template>
<script>
import {
XIcon,
Trash2Icon,
Edit2Icon,
} from "vue-feather-icons";
import ColorLabel from "../../components/Others/ColorLabel";
import DatatableWrapper from "../../components/Others/Tables/DatatableWrapper";
import AppInputText from "../../components/Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import PageTab from '/resources/js/components/Others/Layout/PageTab'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
@@ -161,6 +198,7 @@
import ProgressLine from "../../components/Admin/ProgressLine"
import {mapGetters} from 'vuex'
import axios from 'axios'
import {events} from "../../bus";
export default {
name: 'MeteredSubscription',
@@ -173,6 +211,9 @@
ProgressLine,
ButtonBase,
ColorLabel,
Trash2Icon,
Edit2Icon,
XIcon,
FormLabel,
InfoBox,
PageTab,
@@ -185,6 +226,11 @@
data() {
return {
isLoading: false,
isSendingBillingAlert: false,
billingAlertAmount: undefined,
showUpdateBillingAlertForm: false,
paymentAmount: undefined,
columns: [
{
@@ -216,12 +262,102 @@
}
},
methods: {
async updateBillingAlert() {
// Validate fields
const isValid = await this.$refs.updatebillingAlertForm.validate();
if (!isValid) return;
this.isSendingBillingAlert = true
axios
.patch(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`, {
amount: this.billingAlertAmount
})
.then(() => {
this.$store.dispatch('getAppData')
this.showUpdateBillingAlertForm = false
events.$emit('toaster', {
type: 'success',
message: this.$t('Your billing alert was updated successfully'),
})
})
.catch(() => {
events.$emit('toaster', {
type: 'success',
message: this.$t('popup_error.title'),
})
})
.finally(() => {
this.isSendingBillingAlert = false
})
},
async setBillingAlert() {
// Validate fields
const isValid = await this.$refs.billingAlertForm.validate();
if (!isValid) return;
this.isSendingBillingAlert = true
axios
.post('/api/subscriptions/billing-alerts', {
amount: this.billingAlertAmount
})
.then(() => {
this.$store.dispatch('getAppData')
events.$emit('toaster', {
type: 'success',
message: this.$t('Your billing alert was set successfully'),
})
})
.catch(() => {
events.$emit('toaster', {
type: 'success',
message: this.$t('popup_error.title'),
})
})
.finally(() => {
this.isSendingBillingAlert = false
})
},
deleteBillingAlert() {
events.$emit('confirm:open', {
title: this.$t('Are you sure you want to delete your alert?'),
message: this.$t('You will no longer receive any notifications that your billing limit has been exceeded.'),
action: {
id: this.user.data.relationships.alert.data.id,
operation: 'delete-billing-alert',
}
})
},
makePayment() {
// TODO: make a payment
}
},
},
created() {
events.$on('action:confirmed', data => {
if (data.operation === 'delete-billing-alert')
axios.delete(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`)
.then(() => {
this.$store.dispatch('getAppData')
this.showUpdateBillingAlertForm = false
this.billingAlertAmount = undefined
events.$emit('toaster', {
type: 'success',
message: this.$t('Your billing alert was deleted.'),
})
})
.catch(() => this.$isSomethingWrong())
})
}
}
</script>