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

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
resources/js/views/Admin/Users/User.vue
View File

@@ -1,39 +1,38 @@
<template>
<div>
<div id="page-content" v-if="! isLoading">
<!--Page Tab links-->
<div class="card shadow-card pt-4 sticky top-0 z-10" style="padding-bottom: 0;">
<div id="page-content" v-if="!isLoading">
<!--Page Tab links-->
<div class="card sticky top-0 z-10 pt-4 shadow-card" style="padding-bottom: 0">
<!--User thumbnail-->
<div class="mb-3 flex items-center">
<!--Image input for replace avatar-->
<img
:src="user.data.relationships.settings.data.attributes.avatar.sm"
:alt="user.data.relationships.settings.data.attributes.name"
class="relative z-0 h-14 w-14 cursor-pointer rounded-xl object-cover shadow-lg md:h-16 md:w-16"
/>
<!--User name & email-->
<div class="ml-4">
<b class="text-md block font-bold sm:text-lg">
{{ user.data.relationships.settings.data.attributes.first_name }}
{{ user.data.relationships.settings.data.attributes.last_name }}
<!--User thumbnail-->
<div class="flex items-center mb-3">
<ColorLabel color="purple">
{{ user.data.attributes.role }}
</ColorLabel>
</b>
<small class="block text-xs text-gray-600 sm:text-sm">
{{ user.data.attributes.email }}
</small>
</div>
</div>
<!--Image input for replace avatar-->
<img
:src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name"
class="md:w-16 w-14 md:h-16 h-14 object-cover rounded-xl relative z-0 shadow-lg cursor-pointer"
/>
<CardNavigation :pages="pages" class="-mx-1" />
</div>
<!--User name & email-->
<div class="ml-4">
<b class="sm:text-lg text-md font-bold block">
{{ user.data.relationships.settings.data.attributes.first_name }} {{ user.data.relationships.settings.data.attributes.last_name }}
<ColorLabel color="purple">
{{ user.data.attributes.role }}
</ColorLabel>
</b>
<small class="sm:text-sm text-xs text-gray-600 block">
{{ user.data.attributes.email }}
</small>
</div>
</div>
<CardNavigation :pages="pages" class="-mx-1" />
</div>
<!--Router Content-->
<router-view :user="user" @reload-user="fetchUser"/>
<!--Router Content-->
<router-view :user="user" @reload-user="fetchUser" />
</div>
<div id="loader" v-if="isLoading">
<Spinner />
@@ -42,110 +41,107 @@
</template>
<script>
import CardNavigation from "../../../components/Admin/CardNavigation";
import {UserIcon, HardDriveIcon, LockIcon, Trash2Icon, FileTextIcon, CreditCardIcon} from 'vue-feather-icons'
import MobileHeader from "../../../components/Mobile/MobileHeader";
import SectionTitle from "../../../components/Others/SectionTitle";
import PageHeader from "../../../components/Others/PageHeader";
import ColorLabel from "../../../components/Others/ColorLabel";
import Spinner from "../../../components/FilesView/Spinner";
import {events} from '../../../bus'
import {mapGetters} from 'vuex'
import axios from 'axios'
import CardNavigation from '../../../components/Admin/CardNavigation'
import { UserIcon, HardDriveIcon, LockIcon, Trash2Icon, FileTextIcon, CreditCardIcon } from 'vue-feather-icons'
import MobileHeader from '../../../components/Mobile/MobileHeader'
import SectionTitle from '../../../components/Others/SectionTitle'
import PageHeader from '../../../components/Others/PageHeader'
import ColorLabel from '../../../components/Others/ColorLabel'
import Spinner from '../../../components/FilesView/Spinner'
import { events } from '../../../bus'
import { mapGetters } from 'vuex'
import axios from 'axios'
export default {
name: 'Profile',
components: {
CardNavigation,
CreditCardIcon,
HardDriveIcon,
SectionTitle,
FileTextIcon,
MobileHeader,
PageHeader,
ColorLabel,
Trash2Icon,
UserIcon,
LockIcon,
Spinner,
},
watch: {
'$route.fullPath': function() {
this.fetchUser()
}
},
computed: {
...mapGetters([
'config'
]),
admin() {
return this.$store.getters.user ? this.$store.getters.user : undefined
},
pages() {
if (this.config.subscriptionType === 'none') {
return [
{
title: this.$t('admin_page_user.tabs.detail'),
route: 'UserDetail',
},
{
title: this.$t('Storage'),
route: 'UserStorage',
},
{
title: this.$t('admin_page_user.tabs.password'),
route: 'UserPassword',
},
{
title: this.$t('Delete Account'),
route: 'UserDelete',
},
]
}
return [
{
title: this.$t('admin_page_user.tabs.detail'),
route: 'UserDetail',
},
{
title: this.$t('Storage'),
route: 'UserStorage',
},
{
title: this.$t('Billing'),
route: 'UserSubscription',
},
{
title: this.$t('admin_page_user.tabs.password'),
route: 'UserPassword',
},
{
title: this.$t('Delete Account'),
route: 'UserDelete',
},
]
}
},
data() {
return {
isLoading: true,
user: undefined,
}
},
methods: {
fetchUser() {
axios.get('/api/admin/users/' + this.$route.params.id)
.then(response => {
this.user = response.data
this.isLoading = false
})
}
},
created() {
export default {
name: 'Profile',
components: {
CardNavigation,
CreditCardIcon,
HardDriveIcon,
SectionTitle,
FileTextIcon,
MobileHeader,
PageHeader,
ColorLabel,
Trash2Icon,
UserIcon,
LockIcon,
Spinner,
},
watch: {
'$route.fullPath': function () {
this.fetchUser()
},
},
computed: {
...mapGetters(['config']),
admin() {
return this.$store.getters.user ? this.$store.getters.user : undefined
},
pages() {
if (this.config.subscriptionType === 'none') {
return [
{
title: this.$t('admin_page_user.tabs.detail'),
route: 'UserDetail',
},
{
title: this.$t('Storage'),
route: 'UserStorage',
},
{
title: this.$t('admin_page_user.tabs.password'),
route: 'UserPassword',
},
{
title: this.$t('Delete Account'),
route: 'UserDelete',
},
]
}
events.$on('reload:user', () => this.fetchUser())
return [
{
title: this.$t('admin_page_user.tabs.detail'),
route: 'UserDetail',
},
{
title: this.$t('Storage'),
route: 'UserStorage',
},
{
title: this.$t('Billing'),
route: 'UserSubscription',
},
{
title: this.$t('admin_page_user.tabs.password'),
route: 'UserPassword',
},
{
title: this.$t('Delete Account'),
route: 'UserDelete',
},
]
},
},
data() {
return {
isLoading: true,
user: undefined,
}
}
},
methods: {
fetchUser() {
axios.get('/api/admin/users/' + this.$route.params.id).then((response) => {
this.user = response.data
this.isLoading = false
})
},
},
created() {
this.fetchUser()
events.$on('reload:user', () => this.fetchUser())
},
}
</script>

298
resources/js/views/Admin/Users/UserCreate.vue
View File

@@ -3,37 +3,61 @@
<div class="card shadow-card">
<FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
<!--Avatar-->
<ValidationProvider tag="div" mode="passive" name="avatar" v-slot="{ errors }">
<AppInputText :title="$t('admin_page_user.create_user.avatar')" :error="errors[0]">
<ImageInput v-model="user.avatar" :error="errors[0]" />
<!--Avatar-->
<ValidationProvider tag="div" mode="passive" name="avatar" v-slot="{ errors }">
<AppInputText :title="$t('admin_page_user.create_user.avatar')" :error="errors[0]">
<ImageInput v-model="user.avatar" :error="errors[0]" />
</AppInputText>
</ValidationProvider>
</ValidationProvider>
<!--Email-->
<!--Email-->
<ValidationProvider tag="div" mode="passive" name="email" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('page_registration.label_email')" :error="errors[0]">
<input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
<input
v-model="user.email"
:placeholder="$t('admin_page_user.create_user.label_email')"
type="email"
class="focus-border-theme input-dark"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<!--Name-->
<!--Name-->
<ValidationProvider tag="div" mode="passive" name="user name" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('page_registration.label_name')" :error="errors[0]">
<input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
<input
v-model="user.name"
:placeholder="$t('admin_page_user.create_user.label_name')"
type="text"
class="focus-border-theme input-dark"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<!--Password-->
<!--Password-->
<div class="flex space-x-4">
<ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
<AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]">
<input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
<input
v-model="user.password"
:placeholder="$t('page_registration.placeholder_pass')"
type="password"
class="focus-border-theme input-dark"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
<AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]">
<input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
<input
v-model="user.password_confirmation"
:placeholder="$t('admin_page_user.create_user.label_conf_pass')"
type="password"
class="focus-border-theme input-dark"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
@@ -41,17 +65,25 @@
<div class="card shadow-card">
<FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
<!--User Role-->
<!--User Role-->
<ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
</AppInputText>
</ValidationProvider>
<!--Storage Capacity-->
<!--Storage Capacity-->
<ValidationProvider tag="div" mode="passive" name="storage capacity" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]">
<input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
<input
v-model="user.max_storage_amount"
min="1"
max="999999999"
:placeholder="$t('admin_page_user.label_change_capacity')"
type="number"
class="focus-border-theme input-dark"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
@@ -64,139 +96,133 @@
</template>
<script>
import AppInputText from "../../../components/Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import SelectInput from "../../../components/Others/Forms/SelectInput";
import ImageInput from "../../../components/Others/Forms/ImageInput";
import FormLabel from "../../../components/Others/Forms/FormLabel";
import MobileHeader from "../../../components/Mobile/MobileHeader";
import SectionTitle from "../../../components/Others/SectionTitle";
import ButtonBase from "../../../components/FilesView/ButtonBase";
import PageHeader from "../../../components/Others/PageHeader";
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 { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import SelectInput from '../../../components/Others/Forms/SelectInput'
import ImageInput from '../../../components/Others/Forms/ImageInput'
import FormLabel from '../../../components/Others/Forms/FormLabel'
import MobileHeader from '../../../components/Mobile/MobileHeader'
import SectionTitle from '../../../components/Others/SectionTitle'
import ButtonBase from '../../../components/FilesView/ButtonBase'
import PageHeader from '../../../components/Others/PageHeader'
import { required } from 'vee-validate/dist/rules'
import { mapGetters } from 'vuex'
import { events } from '../../../bus'
import axios from 'axios'
export default {
name: 'Profile',
components: {
AppInputText,
ValidationProvider,
ValidationObserver,
SectionTitle,
MobileHeader,
SelectInput,
ButtonBase,
ImageInput,
PageHeader,
FormLabel,
required,
},
computed: {
...mapGetters(['roles']),
},
data() {
return {
isLoading: false,
user: {
role: '',
avatar: undefined,
name: '',
email: '',
password: '',
password_confirmation: '',
max_storage_amount: 5,
},
}
},
methods: {
async createUser() {
export default {
name: 'Profile',
components: {
AppInputText,
ValidationProvider,
ValidationObserver,
SectionTitle,
MobileHeader,
SelectInput,
ButtonBase,
ImageInput,
PageHeader,
FormLabel,
required,
},
computed: {
...mapGetters(['roles']),
},
data() {
return {
isLoading: false,
user: {
role: '',
avatar: undefined,
name: '',
email: '',
password: '',
password_confirmation: '',
max_storage_amount: 5,
},
}
},
methods: {
async createUser() {
// Validate fields
const isValid = await this.$refs.createUser.validate()
// Validate fields
const isValid = await this.$refs.createUser.validate();
if (!isValid) return
if (!isValid) return;
// Start loading
this.isLoading = true
// Start loading
this.isLoading = true
// Create form
let formData = new FormData()
// Create form
let formData = new FormData()
// Add image to form
formData.append('name', this.user.name)
formData.append('role', this.user.role)
formData.append('email', this.user.email)
formData.append('password', this.user.password)
formData.append('max_storage_amount', this.user.max_storage_amount)
formData.append('password_confirmation', this.user.password_confirmation)
// Add image to form
formData.append('name', this.user.name)
formData.append('role', this.user.role)
formData.append('email', this.user.email)
formData.append('password', this.user.password)
formData.append('max_storage_amount', this.user.max_storage_amount)
formData.append('password_confirmation', this.user.password_confirmation)
// Append avatar if exist
if (this.user.avatar) formData.append('avatar', this.user.avatar)
// Append avatar if exist
if (this.user.avatar)
formData.append('avatar', this.user.avatar)
// Send request to get user token
axios
.post('/api/admin/users', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
// End loading
this.isLoading = false
// Send request to get user token
axios
.post('/api/admin/users', formData, {
headers: {
'Content-Type': 'multipart/form-data',
}
// Show toaster
events.$emit('toaster', {
type: 'success',
message: this.$t('toaster.created_user'),
})
.then(response => {
// End loading
this.isLoading = false
// Show toaster
events.$emit('toaster', {
type: 'success',
message: this.$t('toaster.created_user'),
})
// Go to User page
this.$router.push({name: 'UserDetail', params: {id: response.data.data.id}})
// Go to User page
this.$router.push({
name: 'UserDetail',
params: { id: response.data.data.id },
})
.catch(error => {
// Validation errors
if (error.response.status == 422) {
// Email validation error
if (error.response.data.errors['email']) {
this.$refs.createUser.setErrors({
'email': error.response.data.errors['email']
});
}
// Password validation error
if (error.response.data.errors['password']) {
this.$refs.createUser.setErrors({
'password': error.response.data.errors['password']
});
}
// Password validation error
if (error.response.data.errors['max_storage_amount']) {
this.$refs.createUser.setErrors({
'storage capacity': this.$t('errors.capacity_digit')
});
}
} else {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
.catch((error) => {
// Validation errors
if (error.response.status == 422) {
// Email validation error
if (error.response.data.errors['email']) {
this.$refs.createUser.setErrors({
email: error.response.data.errors['email'],
})
}
// End loading
this.isLoading = false
})
}
// Password validation error
if (error.response.data.errors['password']) {
this.$refs.createUser.setErrors({
password: error.response.data.errors['password'],
})
}
// Password validation error
if (error.response.data.errors['max_storage_amount']) {
this.$refs.createUser.setErrors({
'storage capacity': this.$t('errors.capacity_digit'),
})
}
} else {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
}
// End loading
this.isLoading = false
})
},
}
},
}
</script>

220
resources/js/views/Admin/Users/UserTabs/UserDelete.vue
View File

@@ -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>

300
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
View File

@@ -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>

160
resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
View File

@@ -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>

265
resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
View File

@@ -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>

125
resources/js/views/Admin/Users/UserTabs/UserPassword.vue
View File

@@ -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>

304
resources/js/views/Admin/Users/UserTabs/UserStorage.vue
View File

@@ -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>

201
resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
View File

@@ -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>