mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-23 17:50:38 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,191 +1,195 @@
|
||||
<template>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="bell">
|
||||
{{ $t('Billing Alert') }}
|
||||
</FormLabel>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="bell">
|
||||
{{ $t('Billing Alert') }}
|
||||
</FormLabel>
|
||||
|
||||
<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>
|
||||
<div v-if="user.data.relationships.alert">
|
||||
<b class="-mt-3 mb-0.5 block flex items-center text-3xl font-extrabold">
|
||||
{{ user.data.relationships.alert.data.attributes.formatted }}
|
||||
<edit2-icon
|
||||
v-if="!showUpdateBillingAlertForm"
|
||||
@click="showUpdateBillingAlertForm = !showUpdateBillingAlertForm"
|
||||
size="12"
|
||||
class="vue-feather ml-2 -translate-y-0.5 transform cursor-pointer"
|
||||
/>
|
||||
<trash2-icon v-if="showUpdateBillingAlertForm" @click="deleteBillingAlert" size="12" class="vue-feather ml-2 -translate-y-0.5 transform cursor-pointer" />
|
||||
</b>
|
||||
|
||||
<b class="block text-sm text-gray-400">
|
||||
{{ $t('Alert will be triggered after you reach the value above.') }}
|
||||
</b>
|
||||
</div>
|
||||
<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="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<input v-model="billingAlertAmount"
|
||||
:placeholder="$t('Alert Amount...')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
{{ $t('Update Alert') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
<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="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
|
||||
<input
|
||||
v-model="billingAlertAmount"
|
||||
:placeholder="$t('Alert Amount...')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="w-full sm:w-auto">
|
||||
{{ $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="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<input v-model="billingAlertAmount"
|
||||
:placeholder="$t('Alert Amount...')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
{{ $t('Set Alert') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
<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="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
|
||||
<input
|
||||
v-model="billingAlertAmount"
|
||||
:placeholder="$t('Alert Amount...')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="w-full sm:w-auto">
|
||||
{{ $t('Set Alert') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from "../FilesView/ButtonBase";
|
||||
import AppInputText from "../Admin/AppInputText"
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from '../FilesView/ButtonBase'
|
||||
import AppInputText from '../Admin/AppInputText'
|
||||
import FormLabel from '../Others/Forms/FormLabel'
|
||||
import { Edit2Icon, Trash2Icon } from 'vue-feather-icons'
|
||||
import {events} from "../../bus";
|
||||
import {mapGetters} from "vuex";
|
||||
import axios from "axios";
|
||||
import { events } from '../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserBillingAlerts',
|
||||
components: {
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
AppInputText,
|
||||
ButtonBase,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
FormLabel,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
billingAlertAmount: undefined,
|
||||
isSendingBillingAlert: false,
|
||||
showUpdateBillingAlertForm: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async updateBillingAlert() {
|
||||
name: 'UserBillingAlerts',
|
||||
components: {
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
AppInputText,
|
||||
ButtonBase,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
FormLabel,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['user']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
billingAlertAmount: undefined,
|
||||
isSendingBillingAlert: false,
|
||||
showUpdateBillingAlertForm: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async updateBillingAlert() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.updatebillingAlertForm.validate()
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.updatebillingAlertForm.validate();
|
||||
if (!isValid) return
|
||||
|
||||
if (!isValid) return;
|
||||
this.isSendingBillingAlert = true
|
||||
|
||||
this.isSendingBillingAlert = true
|
||||
axios
|
||||
.patch(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`, {
|
||||
amount: this.billingAlertAmount,
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
axios
|
||||
.patch(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`, {
|
||||
amount: this.billingAlertAmount
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('getAppData')
|
||||
this.showUpdateBillingAlertForm = false
|
||||
|
||||
this.showUpdateBillingAlertForm = false
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your billing alert was updated successfully'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSendingBillingAlert = false
|
||||
})
|
||||
},
|
||||
async setBillingAlert() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.billingAlertForm.validate()
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your billing alert was updated successfully'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSendingBillingAlert = false
|
||||
})
|
||||
},
|
||||
async setBillingAlert() {
|
||||
if (!isValid) return
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.billingAlertForm.validate();
|
||||
this.isSendingBillingAlert = true
|
||||
|
||||
if (!isValid) return;
|
||||
axios
|
||||
.post('/api/subscriptions/billing-alerts', {
|
||||
amount: this.billingAlertAmount,
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
this.isSendingBillingAlert = true
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your billing alert was set successfully'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
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',
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
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')
|
||||
|
||||
axios
|
||||
.post('/api/subscriptions/billing-alerts', {
|
||||
amount: this.billingAlertAmount
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('getAppData')
|
||||
this.showUpdateBillingAlertForm = false
|
||||
this.billingAlertAmount = undefined
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your billing alert was set successfully'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
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',
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
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())
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
events.$off('action:confirmed')
|
||||
},
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your billing alert was deleted.'),
|
||||
})
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
events.$off('action:confirmed')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user