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

users page refactor

Browse Source
This commit is contained in:
Čarodej
2021-11-22 14:50:00 +01:00
parent 054c0eb32c
commit 9cece789a0
7 changed files with 113 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/App.vue
View File

@@ -139,7 +139,7 @@ export default {
}
.input-dark {
@apply w-full bg-light-background py-3 px-4.5 rounded-lg appearance-none border-transparent text-base font-bold border
@apply w-full bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
}
[v-cloak],

2
resources/js/views/Admin.vue
View File

@@ -87,7 +87,7 @@
</ContentGroup>
</ContentSidebar>
<router-view/>
<router-view class="pr-6 w-full overflow-x-hidden relative lg:pt-6 pt-4" style="background: rgba(244, 245, 246, 0.6)" />
</div>
</template>

4
resources/js/views/Admin/AppSettings/AppSettings.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="pr-6 w-full overflow-x-hidden relative" style="background: rgba(244, 245, 246, 0.6)">
<div>
<!--Page Tab links-->
<div class="card shadow-card py-0 lg:mt-6 mt-4 sticky top-0 z-10">
<div class="card shadow-card py-0 sticky top-0 z-10">
<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}"

17
resources/js/views/Admin/Users.vue
View File

@@ -1,7 +1,15 @@
<template>
<div class="pr-6 w-full overflow-x-hidden relative" style="background: rgba(244, 245, 246, 0.6)">
<div>
<div class="card shadow-card">
<div class="mb-6">
<router-link :to="{name: 'UserCreate'}">
<MobileActionButton icon="user-plus">
{{ $t('admin_page_user.create_user.submit') }}
</MobileActionButton>
</router-link>
</div>
<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 }">
@@ -71,11 +79,6 @@
&lt;!&ndash;Table tools&ndash;&gt;
<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>

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

@@ -1,9 +1,8 @@
<template>
<div class="pr-6 w-full overflow-x-hidden relative" style="background: rgba(244, 245, 246, 0.6)">
<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="card shadow-card pt-4 pb-0 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">

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

@@ -1,92 +1,83 @@
<template>
<div id="single-page">
<div id="page-content" class="small-width">
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
<PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
<ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form">
<div class="content-page">
<ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form">
<div class="card shadow-card">
<FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
<div class="form-group">
<FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
<!--Avatar-->
<div class="block-wrapper">
<label>{{ $t('admin_page_user.create_user.avatar') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
<ImageInput v-model="user.avatar" :error="errors[0]" />
</ValidationProvider>
</div>
<!--Avatar-->
<div class="block-wrapper">
<label>{{ $t('admin_page_user.create_user.avatar') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
<ImageInput v-model="user.avatar" :error="errors[0]" />
</ValidationProvider>
</div>
<!--Email-->
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
<input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Email-->
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
<input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Name-->
<div class="block-wrapper">
<label>{{ $t('page_registration.label_name') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }">
<input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Name-->
<div class="block-wrapper">
<label>{{ $t('page_registration.label_name') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }">
<input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Password-->
<div class="wrapper-inline">
<div class="block-wrapper">
<label>{{ $t('page_registration.label_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }">
<input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Password-->
<div class="wrapper-inline">
<div class="block-wrapper">
<label>{{ $t('page_registration.label_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }">
<input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>{{ $t('page_registration.label_confirm_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
<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="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
</div>
<div class="block-wrapper">
<label>{{ $t('page_registration.label_confirm_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
<input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
</div>
<div class="card shadow-card">
<FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
<div class="form-group">
<FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
<!--User Role-->
<div class="block-wrapper">
<label>{{ $t('admin_page_user.select_role') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="permission" rules="required" v-slot="{ errors }">
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--User Role-->
<div class="block-wrapper">
<label>{{ $t('admin_page_user.select_role') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="permission" rules="required" v-slot="{ errors }">
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--Storage Capacity-->
<div class="block-wrapper">
<label>{{ $t('admin_page_user.label_change_capacity') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="storage capacity" rules="required" v-slot="{ errors }">
<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="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
<!--Storage Capacity-->
<div class="block-wrapper">
<label>{{ $t('admin_page_user.label_change_capacity') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="storage capacity" rules="required" v-slot="{ errors }">
<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" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
<div class="form-group">
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
{{ $t('admin_page_user.create_user.submit') }}
</ButtonBase>
</div>
</ValidationObserver>
</div>
</div>
</div>
<div class="form-group">
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
{{ $t('admin_page_user.create_user.submit') }}
</ButtonBase>
</div>
</ValidationObserver>
</template>
<script>