mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,123 +1,125 @@
|
||||
<template>
|
||||
<div v-if="user" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_delete.title') }}
|
||||
</FormLabel>
|
||||
<ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="User name" rules="required">
|
||||
<AppInputText :title="$t('admin_page_user.label_delete_user', {user: user.data.relationships.settings.data.attributes.name})" :description="$t('user_box_delete.description')" :error="errors[0]" :is-last="true">
|
||||
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<input v-model="userName"
|
||||
:placeholder="$t('admin_page_user.placeholder_delete_user')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="sm:w-auto w-full">
|
||||
{{ $t('admin_page_user.delete_user') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
<div v-if="user" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_delete.title') }}
|
||||
</FormLabel>
|
||||
<ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="User name" rules="required">
|
||||
<AppInputText
|
||||
:title="
|
||||
$t('admin_page_user.label_delete_user', {
|
||||
user: user.data.relationships.settings.data.attributes.name,
|
||||
})
|
||||
"
|
||||
:description="$t('user_box_delete.description')"
|
||||
:error="errors[0]"
|
||||
:is-last="true"
|
||||
>
|
||||
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
|
||||
<input
|
||||
v-model="userName"
|
||||
:placeholder="$t('admin_page_user.placeholder_delete_user')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="w-full sm:w-auto">
|
||||
{{ $t('admin_page_user.delete_user') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../../../../components/Admin/AppInputText";
|
||||
import FormLabel from "../../../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../../../components/Others/Forms/InfoBox";
|
||||
import AppInputText from '../../../../components/Admin/AppInputText'
|
||||
import FormLabel from '../../../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../../../components/Others/Forms/InfoBox'
|
||||
|
||||
import PageTabGroup from "../../../../components/Others/Layout/PageTabGroup";
|
||||
import PageTab from "../../../../components/Others/Layout/PageTab";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from "../../../../components/FilesView/ButtonBase";
|
||||
import SetupBox from "../../../../components/Others/Forms/SetupBox";
|
||||
import {required, is} from 'vee-validate/dist/rules'
|
||||
import {events} from '../../../../bus'
|
||||
import axios from 'axios'
|
||||
import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '../../../../components/Others/Layout/PageTab'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from '../../../../components/FilesView/ButtonBase'
|
||||
import SetupBox from '../../../../components/Others/Forms/SetupBox'
|
||||
import { required, is } from 'vee-validate/dist/rules'
|
||||
import { events } from '../../../../bus'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserDelete',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
AppInputText,
|
||||
FormLabel,
|
||||
InfoBox,
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSendingRequest: false,
|
||||
isLoading: false,
|
||||
userName: '',
|
||||
export default {
|
||||
name: 'UserDelete',
|
||||
props: ['user'],
|
||||
components: {
|
||||
AppInputText,
|
||||
FormLabel,
|
||||
InfoBox,
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSendingRequest: false,
|
||||
isLoading: false,
|
||||
userName: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async deleteUser() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.deleteUser.validate()
|
||||
|
||||
if (!isValid) return
|
||||
|
||||
if (this.userName !== this.user.data.relationships.settings.data.attributes.name) {
|
||||
this.$refs.deleteUser.setErrors({
|
||||
'User name': 'The user name is not the same.',
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async deleteUser() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.deleteUser.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
if (this.userName !== this.user.data.relationships.settings.data.attributes.name) {
|
||||
|
||||
this.$refs.deleteUser.setErrors({
|
||||
'User name': 'The user name is not the same.'
|
||||
});
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
this.isSendingRequest = true
|
||||
|
||||
axios
|
||||
.post(this.$store.getters.api + '/admin/users/' + this.$route.params.id + '/delete',
|
||||
{
|
||||
name: this.userName,
|
||||
_method: 'delete'
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
|
||||
if (response.status === 202) {
|
||||
events.$emit('alert:open', {
|
||||
emoji: '☹️',
|
||||
title: this.$t('popup_deleted_user_aborted.title'),
|
||||
message: this.$t('popup_deleted_user_aborted.message'),
|
||||
})
|
||||
}
|
||||
|
||||
if (response.status === 204) {
|
||||
events.$emit('success:open', {
|
||||
emoji: '👍',
|
||||
title: this.$t('popup_deleted_user.title'),
|
||||
message: this.$t('popup_deleted_user.message'),
|
||||
})
|
||||
|
||||
this.$router.push({name: 'Users'})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.isSendingRequest = true
|
||||
|
||||
axios
|
||||
.post(this.$store.getters.api + '/admin/users/' + this.$route.params.id + '/delete', {
|
||||
name: this.userName,
|
||||
_method: 'delete',
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status === 202) {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
emoji: '☹️',
|
||||
title: this.$t('popup_deleted_user_aborted.title'),
|
||||
message: this.$t('popup_deleted_user_aborted.message'),
|
||||
})
|
||||
}
|
||||
|
||||
if (response.status === 204) {
|
||||
events.$emit('success:open', {
|
||||
emoji: '👍',
|
||||
title: this.$t('popup_deleted_user.title'),
|
||||
message: this.$t('popup_deleted_user.message'),
|
||||
})
|
||||
|
||||
this.$router.push({ name: 'Users' })
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSendingRequest = false
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSendingRequest = false
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -7,193 +7,197 @@
|
||||
</FormLabel>
|
||||
<ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Role" rules="required">
|
||||
<AppInputText :title="$t('admin_page_user.select_role')" :description="$t('user_box_role.description')" :error="errors[0]" :is-last="true">
|
||||
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<SelectInput v-model="userRole" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
{{ $t('admin_page_user.save_role') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('admin_page_user.select_role')" :description="$t('user_box_role.description')" :error="errors[0]" :is-last="true">
|
||||
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
|
||||
<SelectInput v-model="userRole" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="w-full sm:w-auto">
|
||||
{{ $t('admin_page_user.save_role') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('admin_page_user.label_person_info') }}
|
||||
</FormLabel>
|
||||
{{ $t('admin_page_user.label_person_info') }}
|
||||
</FormLabel>
|
||||
|
||||
<!--Name-->
|
||||
<div class="md:flex justify-items md:space-x-4">
|
||||
<AppInputText :title="$t('First Name')" class="w-full">
|
||||
<input
|
||||
disabled
|
||||
:value="user.data.relationships.settings.data.attributes.first_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('Last Name')" class="w-full">
|
||||
<input
|
||||
disabled
|
||||
:value="user.data.relationships.settings.data.attributes.last_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
<!--Name-->
|
||||
<div class="justify-items md:flex md:space-x-4">
|
||||
<AppInputText :title="$t('First Name')" class="w-full">
|
||||
<input
|
||||
disabled
|
||||
:value="user.data.relationships.settings.data.attributes.first_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('Last Name')" class="w-full">
|
||||
<input
|
||||
disabled
|
||||
:value="user.data.relationships.settings.data.attributes.last_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
<AppInputText :title="$t('page_registration.label_name')" :is-last="true">
|
||||
<input :value="user.data.relationships.settings.data.attributes.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
<input
|
||||
:value="user.data.relationships.settings.data.attributes.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
disabled
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
|
||||
<AppInputText :title="$t('user_settings.name')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.name"
|
||||
type="text"
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
<input
|
||||
:value="user.data.relationships.settings.data.attributes.name"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
disabled
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.address')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.address"
|
||||
type="text"
|
||||
disabled
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
:value="user.data.relationships.settings.data.attributes.address"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.country')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.country"
|
||||
type="text"
|
||||
disabled
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
:value="user.data.relationships.settings.data.attributes.country"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
/>
|
||||
</AppInputText>
|
||||
<div class="flex space-x-4">
|
||||
<AppInputText :title="$t('user_settings.city')" class="w-full">
|
||||
<input :value="user.data.relationships.settings.data.attributes.city"
|
||||
type="text"
|
||||
disabled
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
:value="user.data.relationships.settings.data.attributes.city"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.postal_code')" class="w-full">
|
||||
<input :value="user.data.relationships.settings.data.attributes.postal_code"
|
||||
type="text"
|
||||
disabled
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
:value="user.data.relationships.settings.data.attributes.postal_code"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
<AppInputText :title="$t('user_settings.state')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.state"
|
||||
type="text"
|
||||
disabled
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
:value="user.data.relationships.settings.data.attributes.state"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.phone_number')" :is-last="true">
|
||||
<input :value="user.data.relationships.settings.data.attributes.phone_number"
|
||||
type="text"
|
||||
disabled
|
||||
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
|
||||
/>
|
||||
<input
|
||||
:value="user.data.relationships.settings.data.attributes.phone_number"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark disabled:text-gray-900 disabled:opacity-100"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../../../../components/Admin/AppInputText";
|
||||
import InfoBox from "../../../../components/Others/Forms/InfoBox";
|
||||
import PageTabGroup from "../../../../components/Others/Layout/PageTabGroup";
|
||||
import PageTab from "../../../../components/Others/Layout/PageTab";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectInput from "../../../../components/Others/Forms/SelectInput";
|
||||
import FormLabel from "../../../../components/Others/Forms/FormLabel";
|
||||
import ButtonBase from "../../../../components/FilesView/ButtonBase";
|
||||
import SetupBox from "../../../../components/Others/Forms/SetupBox";
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '../../../../bus'
|
||||
import axios from 'axios'
|
||||
import AppInputText from '../../../../components/Admin/AppInputText'
|
||||
import InfoBox from '../../../../components/Others/Forms/InfoBox'
|
||||
import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '../../../../components/Others/Layout/PageTab'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectInput from '../../../../components/Others/Forms/SelectInput'
|
||||
import FormLabel from '../../../../components/Others/Forms/FormLabel'
|
||||
import ButtonBase from '../../../../components/FilesView/ButtonBase'
|
||||
import SetupBox from '../../../../components/Others/Forms/SetupBox'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '../../../../bus'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserDetail',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
AppInputText,
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
InfoBox,
|
||||
FormLabel,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SelectInput,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['roles', 'config']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSendingRequest: false,
|
||||
userRole: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async changeRole() {
|
||||
export default {
|
||||
name: 'UserDetail',
|
||||
props: ['user'],
|
||||
components: {
|
||||
AppInputText,
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
InfoBox,
|
||||
FormLabel,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SelectInput,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['roles', 'config']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSendingRequest: false,
|
||||
userRole: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async changeRole() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.changeRole.validate()
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.changeRole.validate();
|
||||
if (!isValid) return
|
||||
|
||||
if (!isValid) return;
|
||||
this.isSendingRequest = true
|
||||
|
||||
this.isSendingRequest = true
|
||||
// Send request to get user reset link
|
||||
axios
|
||||
.post(this.$store.getters.api + '/admin/users/' + this.$route.params.id + '/role', {
|
||||
attributes: {
|
||||
role: this.userRole,
|
||||
},
|
||||
_method: 'patch',
|
||||
})
|
||||
.then(() => {
|
||||
// Reset errors
|
||||
this.$refs.changeRole.reset()
|
||||
|
||||
// Send request to get user reset link
|
||||
axios
|
||||
.post(this.$store.getters.api + '/admin/users/' + this.$route.params.id + '/role', {
|
||||
attributes: {
|
||||
role: this.userRole,
|
||||
},
|
||||
_method: 'patch'
|
||||
this.$emit('reload-user')
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.changed_user'),
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
// Reset errors
|
||||
this.$refs.changeRole.reset()
|
||||
|
||||
this.$emit('reload-user')
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.changed_user'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSendingRequest = false
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSendingRequest = false
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,91 +1,85 @@
|
||||
<template>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Subscription') }}
|
||||
</FormLabel>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Subscription') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="sm:text-3xl text-xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ status }}
|
||||
</b>
|
||||
<b class="-mt-3 mb-0.5 block text-xl font-extrabold sm:text-3xl">
|
||||
{{ status }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-8">
|
||||
{{ subscription.relationships.plan.data.attributes.name }} / {{ price }}
|
||||
</b>
|
||||
<b class="mb-3 mb-8 block text-sm text-gray-400">
|
||||
{{ subscription.relationships.plan.data.attributes.name }} /
|
||||
{{ price }}
|
||||
</b>
|
||||
|
||||
<div v-for="(limit, i) in limitations" :key="i" :class="{'mb-6': (Object.keys(limitations).length - 1) !== i}">
|
||||
<b class="mb-3 block text-sm text-gray-400">
|
||||
{{ limit.message }}
|
||||
</b>
|
||||
<ProgressLine :data="limit.distribution" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(limit, i) in limitations" :key="i" :class="{ 'mb-6': Object.keys(limitations).length - 1 !== i }">
|
||||
<b class="mb-3 block text-sm text-gray-400">
|
||||
{{ limit.message }}
|
||||
</b>
|
||||
<ProgressLine :data="limit.distribution" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FormLabel from "../../../../components/Others/Forms/FormLabel";
|
||||
import ProgressLine from "../../../../components/Admin/ProgressLine"
|
||||
import {mapGetters} from "vuex";
|
||||
import FormLabel from '../../../../components/Others/Forms/FormLabel'
|
||||
import ProgressLine from '../../../../components/Admin/ProgressLine'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'UserFixedSubscription',
|
||||
props: [
|
||||
'subscription',
|
||||
'user',
|
||||
],
|
||||
components: {
|
||||
ProgressLine,
|
||||
FormLabel,
|
||||
},
|
||||
computed: {
|
||||
status() {
|
||||
return {
|
||||
'active': `Active until ${this.subscription.attributes.renews_at}`,
|
||||
'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
|
||||
}[this.subscription.attributes.status]
|
||||
},
|
||||
price() {
|
||||
return {
|
||||
'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
|
||||
'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
|
||||
}[this.subscription.relationships.plan.data.attributes.interval]
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
limitations: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
Object
|
||||
.entries(this.user.data.meta.limitations)
|
||||
.map(([key, item]) => {
|
||||
export default {
|
||||
name: 'UserFixedSubscription',
|
||||
props: ['subscription', 'user'],
|
||||
components: {
|
||||
ProgressLine,
|
||||
FormLabel,
|
||||
},
|
||||
computed: {
|
||||
status() {
|
||||
return {
|
||||
active: `Active until ${this.subscription.attributes.renews_at}`,
|
||||
cancelled: `Active until ${this.subscription.attributes.ends_at}`,
|
||||
}[this.subscription.attributes.status]
|
||||
},
|
||||
price() {
|
||||
return {
|
||||
month: `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
|
||||
year: `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
|
||||
}[this.subscription.relationships.plan.data.attributes.interval]
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
limitations: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
Object.entries(this.user.data.meta.limitations).map(([key, item]) => {
|
||||
let payload = {
|
||||
color: {
|
||||
max_storage_amount: 'warning',
|
||||
max_team_members: 'purple',
|
||||
},
|
||||
message: {
|
||||
max_storage_amount: `Total ${item.use} of ${item.total} Used`,
|
||||
max_team_members: `Total ${item.use} of ${item.total} Members`,
|
||||
},
|
||||
title: {
|
||||
max_storage_amount: `Storage`,
|
||||
max_team_members: `Team Members`,
|
||||
},
|
||||
}
|
||||
|
||||
let payload = {
|
||||
color: {
|
||||
'max_storage_amount': 'warning',
|
||||
'max_team_members': 'purple',
|
||||
},
|
||||
message: {
|
||||
'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
|
||||
'max_team_members': `Total ${item.use} of ${item.total} Members`,
|
||||
},
|
||||
title: {
|
||||
'max_storage_amount': `Storage`,
|
||||
'max_team_members': `Team Members`,
|
||||
}
|
||||
}
|
||||
|
||||
this.limitations.push({
|
||||
message: payload.message[key],
|
||||
distribution: [
|
||||
{
|
||||
progress: item.percentage,
|
||||
color: payload.color[key],
|
||||
title: payload.title[key],
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
this.limitations.push({
|
||||
message: payload.message[key],
|
||||
distribution: [
|
||||
{
|
||||
progress: item.percentage,
|
||||
color: payload.color[key],
|
||||
title: payload.title[key],
|
||||
},
|
||||
],
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,150 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--Balance-->
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Balance') }}
|
||||
</FormLabel>
|
||||
<div>
|
||||
<!--Balance-->
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Balance') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ user.data.relationships.balance.data.attributes.formatted }}
|
||||
</b>
|
||||
<b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
|
||||
{{ user.data.relationships.balance.data.attributes.formatted }}
|
||||
</b>
|
||||
|
||||
<ValidationObserver ref="creditUserBalance" @submit.prevent="increaseBalance" v-slot="{ invalid }" tag="form" class="mt-6">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Balance Amount" rules="required">
|
||||
<AppInputText :description="$t('User balance will be increased for the 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="balanceAmount"
|
||||
:placeholder="$t('Increase user balance for...')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red': errors[0]}"
|
||||
/>
|
||||
<ButtonBase type="submit" button-style="theme" class="sm:w-auto w-full"
|
||||
:loading="isUpdatingBalanceAmount"
|
||||
:disabled="isUpdatingBalanceAmount"
|
||||
>
|
||||
{{ $t('Increase Balance') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
<ValidationObserver ref="creditUserBalance" @submit.prevent="increaseBalance" v-slot="{ invalid }" tag="form" class="mt-6">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Balance Amount" rules="required">
|
||||
<AppInputText :description="$t('User balance will be increased for the 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="balanceAmount"
|
||||
:placeholder="$t('Increase user balance for...')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<ButtonBase type="submit" button-style="theme" class="w-full sm:w-auto" :loading="isUpdatingBalanceAmount" :disabled="isUpdatingBalanceAmount">
|
||||
{{ $t('Increase Balance') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
|
||||
<!--Usage Estimates-->
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Usage Estimates') }}
|
||||
</FormLabel>
|
||||
<!--Usage Estimates-->
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Usage Estimates') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ user.data.meta.usages.costEstimate }}
|
||||
</b>
|
||||
<b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
|
||||
{{ user.data.meta.usages.costEstimate }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-5">
|
||||
{{ user.data.relationships.subscription.data.attributes.updated_at }} {{ $t('till now') }}
|
||||
</b>
|
||||
<b class="mb-3 mb-5 block text-sm text-gray-400">
|
||||
{{ user.data.relationships.subscription.data.attributes.updated_at }}
|
||||
{{ $t('till now') }}
|
||||
</b>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in user.data.meta.usages.featureEstimates" :key="i">
|
||||
<div class="w-2/4 leading-none">
|
||||
<b class="text-sm font-bold leading-none">
|
||||
{{ $t(usage.feature) }}
|
||||
</b>
|
||||
<small class="text-xs text-gray-500 pt-2 leading-none block">
|
||||
{{ $t(`feature_usage_desc_${usage.feature}`) }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="text-left w-1/4">
|
||||
<span class="text-sm font-bold text-gray-560">
|
||||
{{ usage.usage }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right w-1/4">
|
||||
<span class="text-sm font-bold text-theme">
|
||||
{{ usage.cost }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-between border-b border-dashed border-light py-2 dark:border-opacity-5"
|
||||
v-for="(usage, i) in user.data.meta.usages.featureEstimates"
|
||||
:key="i"
|
||||
>
|
||||
<div class="w-2/4 leading-none">
|
||||
<b class="text-sm font-bold leading-none">
|
||||
{{ $t(usage.feature) }}
|
||||
</b>
|
||||
<small class="block pt-2 text-xs leading-none text-gray-500">
|
||||
{{ $t(`feature_usage_desc_${usage.feature}`) }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="w-1/4 text-left">
|
||||
<span class="text-gray-560 text-sm font-bold">
|
||||
{{ usage.usage }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-1/4 text-right">
|
||||
<span class="text-theme text-sm font-bold">
|
||||
{{ usage.cost }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AppInputText from "../../../../components/Admin/AppInputText"
|
||||
import FormLabel from "../../../../components/Others/Forms/FormLabel"
|
||||
import ButtonBase from "../../../../components/FilesView/ButtonBase"
|
||||
import ColorLabel from "../../../../components/Others/ColorLabel"
|
||||
import {mapGetters} from "vuex";
|
||||
import axios from "axios";
|
||||
import {events} from "../../../../bus";
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import AppInputText from '../../../../components/Admin/AppInputText'
|
||||
import FormLabel from '../../../../components/Others/Forms/FormLabel'
|
||||
import ButtonBase from '../../../../components/FilesView/ButtonBase'
|
||||
import ColorLabel from '../../../../components/Others/ColorLabel'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { events } from '../../../../bus'
|
||||
|
||||
export default {
|
||||
name: 'UserMeteredSubscription',
|
||||
props: [
|
||||
'subscription',
|
||||
'user',
|
||||
],
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
ButtonBase,
|
||||
ColorLabel,
|
||||
FormLabel,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
export default {
|
||||
name: 'UserMeteredSubscription',
|
||||
props: ['subscription', 'user'],
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
ButtonBase,
|
||||
ColorLabel,
|
||||
FormLabel,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
balanceAmount: undefined,
|
||||
isUpdatingBalanceAmount: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async increaseBalance() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.creditUserBalance.validate()
|
||||
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
balanceAmount: undefined,
|
||||
isUpdatingBalanceAmount: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async increaseBalance() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.creditUserBalance.validate();
|
||||
if (!isValid) return
|
||||
|
||||
if (!isValid) return;
|
||||
this.isUpdatingBalanceAmount = true
|
||||
|
||||
this.isUpdatingBalanceAmount = true
|
||||
axios
|
||||
.post(`/api/subscriptions/admin/users/${this.user.data.id}/credit`, {
|
||||
amount: this.balanceAmount,
|
||||
})
|
||||
.then(() => {
|
||||
events.$emit('reload:user')
|
||||
|
||||
axios
|
||||
.post(`/api/subscriptions/admin/users/${this.user.data.id}/credit`, {
|
||||
amount: this.balanceAmount
|
||||
})
|
||||
.then(() => {
|
||||
events.$emit('reload:user')
|
||||
this.balanceAmount = undefined
|
||||
|
||||
this.balanceAmount = undefined
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('User balance was successfully increased'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isUpdatingBalanceAmount = false
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('User balance was successfully increased'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isUpdatingBalanceAmount = false
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,77 +1,74 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<div class="card shadow-card">
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_password.title') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputText :title="$t('Reset User Password')" :description="$t('user_box_password.description')" :is-last="true">
|
||||
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest" :disabled="isSendingRequest" class="sm:w-auto w-full" button-style="theme">
|
||||
{{ $t('admin_page_user.send_password_link') }}
|
||||
</ButtonBase>
|
||||
</AppInputText>
|
||||
</div>
|
||||
<AppInputText :title="$t('Reset User Password')" :description="$t('user_box_password.description')" :is-last="true">
|
||||
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest" :disabled="isSendingRequest" class="w-full sm:w-auto" button-style="theme">
|
||||
{{ $t('admin_page_user.send_password_link') }}
|
||||
</ButtonBase>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PageTabGroup from "../../../../components/Others/Layout/PageTabGroup";
|
||||
import AppInputSwitch from "../../../../components/Admin/AppInputSwitch"
|
||||
import FormLabel from "../../../../components/Others/Forms/FormLabel";
|
||||
import ButtonBase from "../../../../components/FilesView/ButtonBase";
|
||||
import SetupBox from "../../../../components/Others/Forms/SetupBox";
|
||||
import PageTab from "../../../../components/Others/Layout/PageTab";
|
||||
import InfoBox from "../../../../components/Others/Forms/InfoBox";
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {events} from '../../../../bus'
|
||||
import axios from 'axios'
|
||||
import AppInputText from "../../../../components/Admin/AppInputText";
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
|
||||
import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
|
||||
import FormLabel from '../../../../components/Others/Forms/FormLabel'
|
||||
import ButtonBase from '../../../../components/FilesView/ButtonBase'
|
||||
import SetupBox from '../../../../components/Others/Forms/SetupBox'
|
||||
import PageTab from '../../../../components/Others/Layout/PageTab'
|
||||
import InfoBox from '../../../../components/Others/Forms/InfoBox'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import { events } from '../../../../bus'
|
||||
import axios from 'axios'
|
||||
import AppInputText from '../../../../components/Admin/AppInputText'
|
||||
|
||||
export default {
|
||||
name: 'UserPassword',
|
||||
components: {
|
||||
AppInputText,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputSwitch,
|
||||
PageTabGroup,
|
||||
ButtonBase,
|
||||
FormLabel,
|
||||
SetupBox,
|
||||
required,
|
||||
InfoBox,
|
||||
PageTab,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSendingRequest: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
requestPasswordResetEmail() {
|
||||
|
||||
this.isSendingRequest = true
|
||||
|
||||
axios
|
||||
.post(`${this.$store.getters.api}/admin/users/${this.$route.params.id}/reset-password`,
|
||||
{}
|
||||
)
|
||||
.then(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.sended_password'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
.finally(() => this.isSendingRequest = false)
|
||||
}
|
||||
export default {
|
||||
name: 'UserPassword',
|
||||
components: {
|
||||
AppInputText,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputSwitch,
|
||||
PageTabGroup,
|
||||
ButtonBase,
|
||||
FormLabel,
|
||||
SetupBox,
|
||||
required,
|
||||
InfoBox,
|
||||
PageTab,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSendingRequest: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
requestPasswordResetEmail() {
|
||||
this.isSendingRequest = true
|
||||
|
||||
axios
|
||||
.post(`${this.$store.getters.api}/admin/users/${this.$route.params.id}/reset-password`, {})
|
||||
.then(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.sended_password'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
.finally(() => (this.isSendingRequest = false))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,79 +1,80 @@
|
||||
<template>
|
||||
<PageTab :is-loading="isLoading" v-if="storage">
|
||||
|
||||
<!--Storage Usage-->
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
<!--Storage Usage-->
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Storage Usage') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ storage.data.attributes.used }}
|
||||
</b>
|
||||
<b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
|
||||
{{ storage.data.attributes.used }}
|
||||
</b>
|
||||
|
||||
<b v-if="['fixed', 'none'].includes(config.subscriptionType)" class="mt-0.5 block text-sm text-gray-400">
|
||||
{{ $t('Total of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
|
||||
</b>
|
||||
<b v-if="['fixed', 'none'].includes(config.subscriptionType)" class="mt-0.5 block text-sm text-gray-400">
|
||||
{{ $t('Total of') }} {{ storage.data.attributes.capacity }}
|
||||
{{ $t('Used') }}
|
||||
</b>
|
||||
|
||||
<ProgressLine v-if="storage.data.attributes.used !== '0B'" :data="distribution" class="mt-5" />
|
||||
</div>
|
||||
<ProgressLine v-if="storage.data.attributes.used !== '0B'" :data="distribution" class="mt-5" />
|
||||
</div>
|
||||
|
||||
<!--Upload-->
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
<!--Upload-->
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Upload') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ storage.data.meta.traffic.upload }}
|
||||
</b>
|
||||
<b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
|
||||
{{ storage.data.meta.traffic.upload }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-5">
|
||||
{{ $t('In last 45 days') }}
|
||||
</b>
|
||||
<b class="mb-3 mb-5 block text-sm text-gray-400">
|
||||
{{ $t('In last 45 days') }}
|
||||
</b>
|
||||
|
||||
<BarChart :data="storage.data.meta.traffic.chart.upload" color="#FFBD2D" />
|
||||
</div>
|
||||
<BarChart :data="storage.data.meta.traffic.chart.upload" color="#FFBD2D" />
|
||||
</div>
|
||||
|
||||
<!--Download-->
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
<!--Download-->
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Download') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ storage.data.meta.traffic.download }}
|
||||
</b>
|
||||
<b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
|
||||
{{ storage.data.meta.traffic.download }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-5">
|
||||
{{ $t('In last 45 days') }}
|
||||
</b>
|
||||
<b class="mb-3 mb-5 block text-sm text-gray-400">
|
||||
{{ $t('In last 45 days') }}
|
||||
</b>
|
||||
|
||||
<BarChart :data="storage.data.meta.traffic.chart.download" color="#9d66fe" />
|
||||
</div>
|
||||
<BarChart :data="storage.data.meta.traffic.chart.download" color="#9d66fe" />
|
||||
</div>
|
||||
|
||||
<!--Set Storage Size-->
|
||||
<div v-if="config.storageLimit && ! user.data.attributes.subscription && config.subscriptionType !== 'metered'" class="card shadow-card">
|
||||
<!--Set Storage Size-->
|
||||
<div v-if="config.storageLimit && !user.data.attributes.subscription && config.subscriptionType !== 'metered'" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_storage.title') }}
|
||||
</FormLabel>
|
||||
<ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
|
||||
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :description="$t('user_box_storage.description')" :error="errors[0]" :is-last="true">
|
||||
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<input v-model="capacity"
|
||||
:placeholder="$t('admin_page_user.label_change_capacity')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
{{ $t('admin_page_user.change_capacity') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :description="$t('user_box_storage.description')" :error="errors[0]" :is-last="true">
|
||||
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
|
||||
<input
|
||||
v-model="capacity"
|
||||
:placeholder="$t('admin_page_user.label_change_capacity')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="w-full sm:w-auto">
|
||||
{{ $t('admin_page_user.change_capacity') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
@@ -81,119 +82,110 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProgressLine from "../../../../components/Admin/ProgressLine";
|
||||
import AppInputText from "../../../../components/Admin/AppInputText";
|
||||
import FormLabel from "../../../../components/Others/Forms/FormLabel";
|
||||
import InfoBox from "../../../../components/Others/Forms/InfoBox";
|
||||
import PageTabGroup from "../../../../components/Others/Layout/PageTabGroup";
|
||||
import PageTab from "../../../../components/Others/Layout/PageTab";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from "../../../../components/FilesView/ButtonBase";
|
||||
import SetupBox from "../../../../components/Others/Forms/SetupBox";
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import BarChart from "../../../../components/UI/BarChart"
|
||||
import {events} from '../../../../bus'
|
||||
import {mapGetters} from "vuex"
|
||||
import axios from 'axios'
|
||||
import ProgressLine from '../../../../components/Admin/ProgressLine'
|
||||
import AppInputText from '../../../../components/Admin/AppInputText'
|
||||
import FormLabel from '../../../../components/Others/Forms/FormLabel'
|
||||
import InfoBox from '../../../../components/Others/Forms/InfoBox'
|
||||
import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '../../../../components/Others/Layout/PageTab'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from '../../../../components/FilesView/ButtonBase'
|
||||
import SetupBox from '../../../../components/Others/Forms/SetupBox'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import BarChart from '../../../../components/UI/BarChart'
|
||||
import { events } from '../../../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserStorage',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
ProgressLine,
|
||||
AppInputText,
|
||||
PageTabGroup,
|
||||
FormLabel,
|
||||
PageTab,
|
||||
InfoBox,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
BarChart,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
isSendingRequest: false,
|
||||
capacity: undefined,
|
||||
storage: undefined,
|
||||
distribution: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async changeStorageCapacity() {
|
||||
export default {
|
||||
name: 'UserStorage',
|
||||
props: ['user'],
|
||||
components: {
|
||||
ProgressLine,
|
||||
AppInputText,
|
||||
PageTabGroup,
|
||||
FormLabel,
|
||||
PageTab,
|
||||
InfoBox,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
BarChart,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
isSendingRequest: false,
|
||||
capacity: undefined,
|
||||
storage: undefined,
|
||||
distribution: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async changeStorageCapacity() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.changeStorageCapacity.validate()
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.changeStorageCapacity.validate();
|
||||
if (!isValid) return
|
||||
|
||||
if (!isValid) return;
|
||||
this.isSendingRequest = true
|
||||
|
||||
this.isSendingRequest = true
|
||||
// Send request to get user reset link
|
||||
axios
|
||||
.post(this.$store.getters.api + '/admin/users/' + this.$route.params.id + '/capacity', {
|
||||
attributes: {
|
||||
max_storage_amount: this.capacity,
|
||||
},
|
||||
_method: 'patch',
|
||||
})
|
||||
.then(() => {
|
||||
// Reset errors
|
||||
this.$refs.changeStorageCapacity.reset()
|
||||
|
||||
// Send request to get user reset link
|
||||
axios
|
||||
.post(this.$store.getters.api + '/admin/users/' + this.$route.params.id + '/capacity', {
|
||||
attributes: {
|
||||
max_storage_amount: this.capacity
|
||||
},
|
||||
_method: 'patch'
|
||||
this.isSendingRequest = false
|
||||
|
||||
this.getStorageDetails()
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.changed_capacity'),
|
||||
})
|
||||
.then(() => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isSendingRequest = false
|
||||
|
||||
// Reset errors
|
||||
this.$refs.changeStorageCapacity.reset()
|
||||
|
||||
this.isSendingRequest = false
|
||||
|
||||
this.getStorageDetails()
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.changed_capacity'),
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
this.isSendingRequest = false
|
||||
|
||||
if (error.response.status == 422) {
|
||||
|
||||
// Password validation error
|
||||
if (error.response.data.errors['attributes.max_storage_amount']) {
|
||||
|
||||
this.$refs.changeStorageCapacity.setErrors({
|
||||
'Capacity': this.$t('errors.capacity_digit')
|
||||
});
|
||||
}
|
||||
} else {
|
||||
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
if (error.response.status == 422) {
|
||||
// Password validation error
|
||||
if (error.response.data.errors['attributes.max_storage_amount']) {
|
||||
this.$refs.changeStorageCapacity.setErrors({
|
||||
Capacity: this.$t('errors.capacity_digit'),
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getStorageDetails() {
|
||||
axios.get('/api/admin/users/' + this.$route.params.id + '/storage')
|
||||
.then(response => {
|
||||
this.distribution = this.$mapStorageUsage(response.data)
|
||||
|
||||
this.storage = response.data
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
} else {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.getStorageDetails()
|
||||
}
|
||||
}
|
||||
getStorageDetails() {
|
||||
axios.get('/api/admin/users/' + this.$route.params.id + '/storage').then((response) => {
|
||||
this.distribution = this.$mapStorageUsage(response.data)
|
||||
|
||||
this.storage = response.data
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getStorageDetails()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,136 +1,121 @@
|
||||
<template>
|
||||
<PageTab :is-loading="isLoading">
|
||||
<UserMeteredSubscription v-if="subscription && config.subscriptionType === 'metered'" :subscription="subscription" :user="user" />
|
||||
|
||||
<UserMeteredSubscription
|
||||
v-if="subscription && config.subscriptionType === 'metered'"
|
||||
:subscription="subscription"
|
||||
:user="user"
|
||||
/>
|
||||
<UserFixedSubscription v-if="subscription && config.subscriptionType === 'fixed'" :subscription="subscription" :user="user" />
|
||||
|
||||
<UserFixedSubscription
|
||||
v-if="subscription && config.subscriptionType === 'fixed'"
|
||||
:subscription="subscription"
|
||||
:user="user"
|
||||
/>
|
||||
<!--Free Plan-->
|
||||
<div v-if="!subscription && config.subscriptionType === 'fixed'" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Subscription') }}
|
||||
</FormLabel>
|
||||
|
||||
<!--Free Plan-->
|
||||
<div v-if="!subscription && config.subscriptionType === 'fixed'" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Subscription') }}
|
||||
</FormLabel>
|
||||
<b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
|
||||
{{ $t('Free Plan') }}
|
||||
</b>
|
||||
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ $t('Free Plan') }}
|
||||
</b>
|
||||
<b class="block text-sm text-gray-400">
|
||||
{{ $t('1GB Free storage space with 5 Team members') }}
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<b class="block text-sm text-gray-400">
|
||||
{{ $t('1GB Free storage space with 5 Team members') }}
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<!--Transactions-->
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="file-text">
|
||||
<!--Transactions-->
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="file-text">
|
||||
{{ $t('Transactions') }}
|
||||
</FormLabel>
|
||||
|
||||
<DatatableWrapper
|
||||
class="overflow-x-auto"
|
||||
@init="isLoading = false"
|
||||
:api="'/api/admin/users/' + this.$route.params.id + '/transactions'"
|
||||
:paginator="true"
|
||||
:columns="columns"
|
||||
>
|
||||
<DatatableWrapper
|
||||
class="overflow-x-auto"
|
||||
@init="isLoading = false"
|
||||
:api="'/api/admin/users/' + this.$route.params.id + '/transactions'"
|
||||
:paginator="true"
|
||||
:columns="columns"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
|
||||
<!--Transaction rows-->
|
||||
<!--Transaction rows-->
|
||||
<MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" @showDetail="showTransactionDetail" />
|
||||
<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" />
|
||||
|
||||
<!--Transaction detail-->
|
||||
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
|
||||
<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" />
|
||||
|
||||
<!--Transaction detail-->
|
||||
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
|
||||
</template>
|
||||
|
||||
<!--Empty page-->
|
||||
<!--Empty page-->
|
||||
<template v-slot:empty-page>
|
||||
<InfoBox style="margin-bottom: 0">
|
||||
<p>{{ $t("User doesn't have any transactions yet.") }}</p>
|
||||
<p>
|
||||
{{ $t("User doesn't have any transactions yet.") }}
|
||||
</p>
|
||||
</InfoBox>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MeteredTransactionDetailRow from "../../../../components/Subscription/MeteredTransactionDetailRow"
|
||||
import MeteredTransactionRow from "../../../../components/Subscription/MeteredTransactionRow"
|
||||
import FixedTransactionRow from "../../../../components/Subscription/FixedTransactionRow"
|
||||
import DatatableWrapper from "../../../../components/Others/Tables/DatatableWrapper";
|
||||
import FormLabel from "../../../../components/Others/Forms/FormLabel"
|
||||
import PageTab from "../../../../components/Others/Layout/PageTab";
|
||||
import InfoBox from "../../../../components/Others/Forms/InfoBox";
|
||||
import UserMeteredSubscription from "./UserMeteredSubscription"
|
||||
import UserFixedSubscription from "./UserFixedSubscription"
|
||||
import {mapGetters} from "vuex"
|
||||
import axios from 'axios'
|
||||
import MeteredTransactionDetailRow from '../../../../components/Subscription/MeteredTransactionDetailRow'
|
||||
import MeteredTransactionRow from '../../../../components/Subscription/MeteredTransactionRow'
|
||||
import FixedTransactionRow from '../../../../components/Subscription/FixedTransactionRow'
|
||||
import DatatableWrapper from '../../../../components/Others/Tables/DatatableWrapper'
|
||||
import FormLabel from '../../../../components/Others/Forms/FormLabel'
|
||||
import PageTab from '../../../../components/Others/Layout/PageTab'
|
||||
import InfoBox from '../../../../components/Others/Forms/InfoBox'
|
||||
import UserMeteredSubscription from './UserMeteredSubscription'
|
||||
import UserFixedSubscription from './UserFixedSubscription'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserSubscription',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
MeteredTransactionDetailRow,
|
||||
UserMeteredSubscription,
|
||||
MeteredTransactionRow,
|
||||
UserFixedSubscription,
|
||||
FixedTransactionRow,
|
||||
DatatableWrapper,
|
||||
FormLabel,
|
||||
InfoBox,
|
||||
PageTab,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config',
|
||||
]),
|
||||
columns() {
|
||||
let filter = {
|
||||
metered: ['user_id'],
|
||||
fixed: ['type', 'user_id'],
|
||||
}
|
||||
export default {
|
||||
name: 'UserSubscription',
|
||||
props: ['user'],
|
||||
components: {
|
||||
MeteredTransactionDetailRow,
|
||||
UserMeteredSubscription,
|
||||
MeteredTransactionRow,
|
||||
UserFixedSubscription,
|
||||
FixedTransactionRow,
|
||||
DatatableWrapper,
|
||||
FormLabel,
|
||||
InfoBox,
|
||||
PageTab,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
columns() {
|
||||
let filter = {
|
||||
metered: ['user_id'],
|
||||
fixed: ['type', 'user_id'],
|
||||
}
|
||||
|
||||
return this.$store.getters.transactionColumns.filter(column => !filter[config.subscriptionType].includes(column.field))
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showedTransactionDetailById: undefined,
|
||||
subscription: undefined,
|
||||
isLoading: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTransactionDetail(id) {
|
||||
if (this.showedTransactionDetailById === id)
|
||||
this.showedTransactionDetailById = undefined
|
||||
else
|
||||
this.showedTransactionDetailById = id
|
||||
}
|
||||
},
|
||||
created() {
|
||||
axios.get(`/api/subscriptions/admin/users/${this.$route.params.id}/subscription`)
|
||||
.then(response => {
|
||||
this.subscription = response.data.data
|
||||
return this.$store.getters.transactionColumns.filter((column) => !filter[config.subscriptionType].includes(column.field))
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showedTransactionDetailById: undefined,
|
||||
subscription: undefined,
|
||||
isLoading: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTransactionDetail(id) {
|
||||
if (this.showedTransactionDetailById === id) this.showedTransactionDetailById = undefined
|
||||
else this.showedTransactionDetailById = id
|
||||
},
|
||||
},
|
||||
created() {
|
||||
axios
|
||||
.get(`/api/subscriptions/admin/users/${this.$route.params.id}/subscription`)
|
||||
.then((response) => {
|
||||
this.subscription = response.data.data
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.response.status === 404)
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
this.isLoading = false
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.response.status === 404) this.isLoading = false
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user