mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
user admin page refactor
This commit is contained in:
Čarodej
@@ -4,6 +4,7 @@
|
||||
<thead class="table-header">
|
||||
<tr>
|
||||
<th
|
||||
class=""
|
||||
v-for="(column, index) in columns"
|
||||
@click="sort(column.field, column.sortable)"
|
||||
:key="index"
|
||||
@@ -390,7 +391,6 @@ export default {
|
||||
|
||||
.paginator-wrapper {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,33 +1,18 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content">
|
||||
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
|
||||
<PageHeader :title="$t($router.currentRoute.meta.title)"/>
|
||||
<div class="pr-6 w-full overflow-x-hidden relative" style="background: rgba(244, 245, 246, 0.6)">
|
||||
|
||||
<div class="content-page">
|
||||
|
||||
<!--Table tools-->
|
||||
<div class="table-tools">
|
||||
<div class="buttons">
|
||||
<router-link :to="{name: 'UserCreate'}">
|
||||
<MobileActionButton icon="user-plus">
|
||||
{{ $t('admin_page_user.create_user.submit') }}
|
||||
</MobileActionButton>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Datatable-->
|
||||
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
|
||||
<div class="card shadow-card lg:mt-6 mt-4">
|
||||
<!--Datatable-->
|
||||
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
|
||||
<template slot-scope="{ row }">
|
||||
<tr>
|
||||
<td style="min-width: 320px">
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<DatatableCellImage
|
||||
:image="row.data.relationships.settings.data.attributes.avatar.sm"
|
||||
:title="row.data.relationships.settings.data.attributes.name"
|
||||
:description="row.data.attributes.email"
|
||||
/>
|
||||
:image="row.data.relationships.settings.data.attributes.avatar.sm"
|
||||
:title="row.data.relationships.settings.data.attributes.name"
|
||||
:description="row.data.attributes.email"
|
||||
/>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
@@ -77,8 +62,26 @@
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</div>
|
||||
|
||||
<!-- <div id="page-content">
|
||||
|
||||
<div class="content-page">
|
||||
|
||||
<!–Table tools–>
|
||||
<div class="table-tools">
|
||||
<div class="buttons">
|
||||
<router-link :to="{name: 'UserCreate'}">
|
||||
<MobileActionButton icon="user-plus">
|
||||
{{ $t('admin_page_user.create_user.submit') }}
|
||||
</MobileActionButton>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
|
||||
@@ -1,88 +1,39 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" v-if="! isLoading">
|
||||
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
|
||||
<PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
|
||||
<div class="content-page">
|
||||
<div class="pr-6 w-full overflow-x-hidden relative" style="background: rgba(244, 245, 246, 0.6)">
|
||||
|
||||
<!--User thumbnail-->
|
||||
<div class="user-thumbnail">
|
||||
<div class="avatar">
|
||||
<img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name">
|
||||
<!--<img :src="user.data.attributes.avatar" :alt="user.data.attributes.name" class="blurred">-->
|
||||
</div>
|
||||
<div class="info">
|
||||
<b class="name">
|
||||
{{ user.data.relationships.settings.data.attributes.name }}
|
||||
<ColorLabel color="purple">
|
||||
{{ user.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</b>
|
||||
<span class="email">{{ user.data.attributes.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page-content" v-if="! isLoading">
|
||||
<!--Page Tab links-->
|
||||
<div class="card shadow-card pt-4 pb-0 lg:mt-6 mt-4 sticky top-0 z-10">
|
||||
<div class="user-thumbnail">
|
||||
<div class="avatar">
|
||||
<img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name">
|
||||
<!--<img :src="user.data.attributes.avatar" :alt="user.data.attributes.name" class="blurred">-->
|
||||
</div>
|
||||
<div class="info">
|
||||
<b class="name">
|
||||
{{ user.data.relationships.settings.data.attributes.name }}
|
||||
<ColorLabel color="purple">
|
||||
{{ user.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</b>
|
||||
<span class="email">{{ user.data.attributes.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Page Tab links-->
|
||||
<div class="menu-list-wrapper horizontal">
|
||||
<router-link replace :to="{name: 'UserDetail'}" class="menu-list-item link border-bottom-theme">
|
||||
<div class="icon text-theme">
|
||||
<user-icon size="17"></user-icon>
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('admin_page_user.tabs.detail') }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link
|
||||
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
|
||||
:class="{'text-theme': $router.currentRoute.name === page.route, 'text-gray-600': $router.currentRoute.name !== page.route}"
|
||||
v-for="(page, i) in pages"
|
||||
:to="{name: page.route}"
|
||||
:key="i"
|
||||
replace
|
||||
>
|
||||
{{ page.title }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<router-link replace :to="{name: 'UserStorage'}" class="menu-list-item link border-bottom-theme">
|
||||
<div class="icon text-theme">
|
||||
<hard-drive-icon size="17"></hard-drive-icon>
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('admin_page_user.tabs.storage') }}
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link v-if="config.isSaaS" replace :to="{name: 'UserSubscription'}" class="menu-list-item link border-bottom-theme">
|
||||
<div class="icon text-theme">
|
||||
<credit-card-icon size="17"></credit-card-icon>
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('admin_page_user.tabs.subscription') }}
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link v-if="config.isSaaS" replace :to="{name: 'UserInvoices'}" class="menu-list-item link border-bottom-theme">
|
||||
<div class="icon text-theme">
|
||||
<file-text-icon size="17"></file-text-icon>
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('admin_page_user.tabs.invoices') }}
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link replace :to="{name: 'UserPassword'}" class="menu-list-item link border-bottom-theme">
|
||||
<div class="icon text-theme">
|
||||
<lock-icon size="17"></lock-icon>
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('admin_page_user.tabs.password') }}
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link replace :to="{name: 'UserDelete'}" v-if="admin && user.data.relationships.settings.data.attributes.name !== admin.data.relationships.settings.data.attributes.name"
|
||||
class="menu-list-item link border-bottom-theme">
|
||||
<div class="icon text-theme">
|
||||
<trash2-icon size="17"></trash2-icon>
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('admin_page_user.tabs.delete') }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!--Router Content-->
|
||||
<router-view :user="user" @reload-user="fetchUser"/>
|
||||
</div>
|
||||
<!--Router Content-->
|
||||
<router-view :user="user" @reload-user="fetchUser"/>
|
||||
</div>
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
@@ -127,6 +78,32 @@
|
||||
return {
|
||||
isLoading: true,
|
||||
user: undefined,
|
||||
pages: [
|
||||
{
|
||||
title: this.$t('admin_page_user.tabs.detail'),
|
||||
route: 'UserDetail',
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_page_user.tabs.storage'),
|
||||
route: 'UserStorage',
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_page_user.tabs.subscription'),
|
||||
route: 'UserSubscription',
|
||||
},
|
||||
{
|
||||
title: this.$t('Transactions'),
|
||||
route: 'UserInvoices',
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_page_user.tabs.password'),
|
||||
route: 'UserPassword',
|
||||
},
|
||||
{
|
||||
title: this.$t('Delete Account'),
|
||||
route: 'UserDelete',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<PageTab v-if="user" class="form-fixed-width">
|
||||
<PageTabGroup>
|
||||
<FormLabel>{{ $t('user_box_delete.title') }}</FormLabel>
|
||||
<PageTab v-if="user">
|
||||
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_delete.title') }}
|
||||
</FormLabel>
|
||||
<InfoBox>
|
||||
<p>{{ $t('user_box_delete.description') }}</p>
|
||||
</InfoBox>
|
||||
@@ -12,7 +15,7 @@
|
||||
<input v-model="userName"
|
||||
:placeholder="$t('admin_page_user.placeholder_delete_user')"
|
||||
type="text"
|
||||
class="focus-border-theme"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
|
||||
@@ -23,6 +26,9 @@
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
|
||||
<PageTabGroup>
|
||||
</PageTabGroup>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<PageTab class="form-fixed-width">
|
||||
<PageTab>
|
||||
|
||||
<!--Change role-->
|
||||
<PageTabGroup>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_role.title') }}
|
||||
</FormLabel>
|
||||
@@ -25,41 +25,41 @@
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</PageTabGroup>
|
||||
</div>
|
||||
|
||||
<!--Personal Information-->
|
||||
<PageTabGroup>
|
||||
<div class="form block-form">
|
||||
<div class="card shadow-card">
|
||||
<div class="form block-form">
|
||||
<FormLabel>{{ $t('admin_page_user.label_person_info') }}</FormLabel>
|
||||
|
||||
<!--Email-->
|
||||
<!--Email-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.attributes.email"
|
||||
:placeholder="$t('page_registration.placeholder_email')"
|
||||
type="email"
|
||||
disabled
|
||||
/>
|
||||
:placeholder="$t('page_registration.placeholder_email')"
|
||||
type="email"
|
||||
class="focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<!--Name-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
</div>
|
||||
|
||||
<!--Billing Information-->
|
||||
<PageTabGroup v-if="config.isSaaS">
|
||||
<div class="card shadow-card">
|
||||
<div class="form block-form">
|
||||
<FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
|
||||
|
||||
@@ -67,27 +67,30 @@
|
||||
<label>{{ $t('user_settings.name') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.name"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.address') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.address"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.country') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.country"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-inline">
|
||||
@@ -95,18 +98,20 @@
|
||||
<label>{{ $t('user_settings.city') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.city"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.postal_code') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.postal_code"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -114,22 +119,24 @@
|
||||
<label>{{ $t('user_settings.state') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.state"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.phone_number') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.phone_number"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<PageTab class="form-fixed-width">
|
||||
<PageTabGroup>
|
||||
<PageTab>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_password.title') }}
|
||||
</FormLabel>
|
||||
@@ -11,7 +11,7 @@
|
||||
:disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
|
||||
{{ $t('admin_page_user.send_password_link') }}
|
||||
</ButtonBase>
|
||||
</PageTabGroup>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user