user profile UI

This commit is contained in:
glovetleong
2021-07-07 14:47:43 +08:00
parent ad85832e75
commit 3283d379c5
20 changed files with 1391 additions and 308 deletions
@@ -22,34 +22,16 @@ class UserController extends BaseController
return $self;
}
// public function list(Request $request)
// {
// $admin_list = AdminModule::list($request);
// return $admin_list;
// }
public function update(Request $request)
{
$user = UserModule::update($request);
return $user;
}
// public function show(Request $request, $hash_id)
// {
// $admin = AdminModule::show($request, $hash_id);
// return $admin;
// }
// public function store(Request $request)
// {
// $admin = AdminModule::store($request);
// return $admin;
// }
// public function update(Request $request, $hash_id)
// {
// $admin = AdminModule::update($request, $hash_id);
// return $admin;
// }
// public function validCheck(Request $request, $hash_id = '')
// {
// $method = empty($hash_id) ? 'POST' :'PUT' ;
// $valid = AdminModule::validCheck($request, $hash_id, $method);
// return $valid;
// }
public function validCheck(Request $request, $hash_id = '')
{
$method = empty($hash_id) ? 'POST' :'PUT' ;
$valid = UserModule::validCheck($request, $hash_id, $method);
return $valid;
}
}
+102 -3
View File
@@ -6,10 +6,7 @@ use Auth;
use App\Models\User;
use App\Models\UserLog;
use App\Http\Rules\User\UnderCheck;
use App\Http\Rules\User\ExistCheck;
use App\Http\Rules\User\Image64Check;
use App\Http\Rules\User\CkeckAuthUpdate;
use App\Http\Helpers\General;
use App\Http\Helpers\Hasher;
@@ -37,6 +34,108 @@ class UserModule extends BaseController
return response()->json($data);
}
public static function update(Request $request)
{
$id = Auth::guard('user-api')->user()->id;
$validation = UserModule::validation($request, $id, 'PUT');
if (!$validation->status) {
return response()->json($validation, 422);
}
DB::beginTransaction();
$first_name = $request->input('first_name');
$last_name = $request->input('last_name');
$email = $request->input('email');
$password = $request->input('password');
$status = $request->input('status');
$user = User::find($id);
$user->first_name = $first_name ?? $user->first_name;
$user->last_name = $last_name ?? $user->last_name;
$user->email = $email ?? $user->email;
if (!empty($password)) {
$user->password = bcrypt($password);
}
$user->status = $status ?? 2;
// img
$img = $request->input('img');
if (!empty($img)) {
$remove_image = $user->img;
$remove_image = $remove_image ? ImageHandel::removeImage($remove_image) : '';
$img = json_encode(ImageHandel::insertImage('user', $img));
$user->img = $img;
if (!$img) {
DB::rollBack();
}
}
$user->update();
// log
UserModule::makeLog($user->id, 'user (' . Auth::guard('user-api')->user()->id . ') updated');
DB::commit();
$query_string = General::getCachePerviousQuery('admin_query');
$data = General::returnData($user, $query_string);
return response()->json($data);
}
public static function validCheck(Request $request, $hash_id = '', $method = 'POST')
{
$id = Auth::guard('user-api')->user()->id;
$validation = UserModule::validation($request, $id, $method);
if (!$validation->status) {
return response()->json($validation, 422);
}
}
private static function validation(Request $request, $id = '', $method = 'POST')
{
$data = $request->all();
$rule= [];
if ($method == 'PUT') {
$rule = [
'img' => '',
'first_name' => 'required',
'last_name' => 'required',
'email' => 'required|email|max:255|unique:users,email,' . $id,
'password' => 'sometimes|confirmed',
];
}
if (!empty($data['img'])) {
foreach ($data['img'] as $key => $row) {
$rule['img'.'.'.$key] = ['required', new Image64Check()];
}
}
$validator = Validator::make($data, $rule, config('error_code'));
$errors = $validator->errors();
if (!empty($data['img'])) {
foreach ($data['img'] as $key => $row) {
if ($errors->first('img'.'.'.$key)) {
$errors->add('img', config('error_code.img_error'));
break;
}
}
}
if ($validator->fails()) {
$data = General::returnErrorData($errors);
return $data;
}
else {
return (object)['status' => true];
}
}
public static function makeLog($id = '', $remark = '')
{
$user = User::find($id);
+52
View File
@@ -0,0 +1,52 @@
<?php
namespace App\Http\Rules\User;
use Illuminate\Contracts\Validation\Rule;
class Image64Check implements Rule
{
/**
* Create a new rule instance.
*
* @return void
*/
public function __construct()
{
}
/**
* Determine if the validation rule passes.
*
* @param string $attribute
* @param mixed $value
* @return bool
*/
public function passes($attribute, $value)
{
$this->attribute = $attribute;
$accept_mime_type = ['image/gif', 'image/png', 'image/jpeg'];
$f = finfo_open();
$mime_type = finfo_file($f, $value, FILEINFO_MIME_TYPE);
if (!in_array($mime_type, $accept_mime_type)) {
return false;
}
return true;
}
/**
* Get the validation error message.
*
* @return string
*/
public function message()
{
return config('error_code.img_error');
}
}
+661 -5
View File
File diff suppressed because one or more lines are too long
@@ -7,7 +7,7 @@
:to="'/'"
class="btn-link pl-3"
>
<div class="logo-src" :style='{ background: "url(" + share_url + "favicon.png" + ")" }'></div>
<div class="logo-src" :style='{ background: "url(" + share_url + "white-logo.png" + ")" }'></div>
</router-link>
<div class="pl-3 app-header-title">
<h5 class="card-title">Page 404</h5>
@@ -7,7 +7,7 @@
<b-dropdown toggle-class="p-0 mr-2" menu-class="dropdown-menu-lg" variant="link" no-caret right>
<span slot="button-content">
<div class="icon-wrapper icon-wrapper-alt rounded-circle">
<img width="50" height="50" class="rounded-circle" :src="user_detail.img[0].file_info.small.file" alt="">
<img width="50" height="50" class="rounded-circle" :src="user_detail.img[0].file_info.original.file" alt="">
</div>
</span>
<div class="dropdown-menu-header">
@@ -17,7 +17,7 @@
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left mr-3">
<img width="42" class="rounded-circle" :src="user_detail.img[0].file_info.small.file" alt="">
<img width="42" class="rounded-circle" :src="user_detail.img[0].file_info.original.file" alt="">
</div>
<div class="widget-content-left">
<div class="widget-heading">{{ user_detail.username}}</div>
@@ -42,7 +42,7 @@
<li class="nav-item-header nav-item">My Account</li>
<li class="nav-item">
<router-link
:to="'/admin/profile/update'"
:to="'/user/profile/update'"
class="nav-link"
title="Profile"
>
@@ -8,15 +8,15 @@
<breadcrumb
:menu_item_list="menu_item_list"
></breadcrumb>
<user-form
<admin-form
:mode="'create'"
></user-form>
></admin-form>
</div>
</template>
<script>
import PageTitle from "../../components/titles/PageTitle";
import Breadcrumb from "../../layouts/parts/Breadcrumb";
import UserForm from "./Form";
import AdminForm from "./Form";
export default {
metaInfo() {
@@ -29,12 +29,11 @@
components: {
PageTitle,
Breadcrumb,
UserForm
AdminForm
},
data() {
let vm = this;
return {
heading: 'User Detail',
heading: 'Create Admin',
icon: 'fa fa-plus',
menu_item_list: [
{
@@ -43,14 +42,14 @@
path: '/'
},
{
title: 'User List',
title: 'Admin List',
active: false,
path: '/user/list'
path: '/admin/list'
},
{
title: 'User Detail',
title: 'Create Admin',
active: true,
path: '/user/detail/' + vm.$route.params.hash_id
path: '/admin/create'
},
],
}
@@ -0,0 +1,59 @@
<template>
<div>
<page-title
:heading="heading"
:icon="icon"
:add="true"
></page-title>
<breadcrumb
:menu_item_list="menu_item_list"
></breadcrumb>
<admin-form
:mode="'edit'"
></admin-form>
</div>
</template>
<script>
import PageTitle from "../../components/titles/PageTitle";
import Breadcrumb from "../../layouts/parts/Breadcrumb";
import AdminForm from "./Form";
export default {
metaInfo() {
let vm = this;
return {
title: Constants.site.title,
titleTemplate: '%s | ' + vm.$router.currentRoute.name
}
},
components: {
PageTitle,
Breadcrumb,
AdminForm
},
data() {
let vm = this;
return {
heading: 'Edit Admin',
icon: 'fa fa-edit',
menu_item_list: [
{
title: 'Dashboard',
active: false,
path: '/'
},
{
title: 'Admin List',
active: false,
path: '/admin/list'
},
{
title: 'Edit Admin',
active: true,
path: '/admin/edit/' + vm.$route.params.hash_id
},
]
}
}
}
</script>
@@ -16,10 +16,10 @@
<select-option-auto-complete-input
:input_name="'status'"
:form="form"
:exist_data="exist_user_status"
:exist_data="exist_admin_status"
:placeholder="''"
:label="'Status'"
:data_set="user_status"
:data_set="admin_status"
:array="true"
></select-option-auto-complete-input>
<v-btn
@@ -60,8 +60,8 @@
data() {
let vm = this;
return {
exist_user_status: [],
user_status: General.autoCompleteKeyConvert(Constants.user_status)
exist_admin_status: [],
admin_status: General.autoCompleteKeyConvert(Constants.admin_status)
}
},
methods: {
@@ -69,7 +69,7 @@
let vm = this;
if (vm.form.status[0]) {
let status_list = [];
vm.exist_user_status = General.initFormArray(vm.user_status, vm.form.status);
vm.exist_admin_status = General.initFormArray(vm.admin_status, vm.form.status);
}
}
},
+170
View File
@@ -0,0 +1,170 @@
<template>
<b-card class="main-card mb-3">
<div v-if="!this_admin.data && mode == 'edit'" class="text-center">
<vue-element-loading :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
</div>
<div v-if="this_admin.data || mode == 'create'">
<form-wizard
@on-complete="onComplete"
title=""
subtitle=""
finish-button-text="Submit"
@keydown="form.errors.clear($event.target.name)"
color="var(--primary)"
>
<tab-content
title="Details"
:before-change="validOne"
ref="valid_one"
icon="fa fa-info-circle"
>
<!-- ///////////////////////////////////////////////////// -->
<image-input
:input_name="'img'"
:form="form"
:label="'Profile Img'"
:exist_img="exist_img"
></image-input>
<!-- ///////////////////////////////////////////////////// -->
<text-input
:input_name="'name'"
:form="form"
:label="'Name*'"
></text-input>
<!-- ///////////////////////////////////////////////////// -->
<text-input
:input_name="'email'"
:form="form"
:label="'Email*'"
></text-input>
<!-- ///////////////////////////////////////////////////// -->
<password-input
:input_name="'password'"
:form="form"
:label="'Password*'"
></password-input>
<!-- ///////////////////////////////////////////////////// -->
<password-input
:input_name="'password_confirmation'"
:form="form"
:label="'Confirm Password*'"
></password-input>
<!-- ///////////////////////////////////////////////////// -->
<select-option-auto-complete-input
v-if="mode != 'profile'"
:input_name="'role_id'"
:form="form"
:exist_data="exist_admin_role"
:placeholder="''"
:label="'Role*'"
:endpoint="'admin-role/list'"
:search_field="'name'"
:limit_tag="1"
:return_key="'hash_id'"
></select-option-auto-complete-input>
<!-- ///////////////////////////////////////////////////// -->
<text-read-only-input
v-if="mode == 'profile'"
:value="this_admin.data.role_list[0].name"
:label="'Role'"
>
</text-read-only-input>
<!-- ///////////////////////////////////////////////////// -->
<switch-input
:input_name="'status'"
:form="form"
:label="'Status'"
></switch-input>
<!-- ///////////////////////////////////////////////////// -->
</tab-content>
</form-wizard>
</div>
</b-card>
</template>
<script>
import TextInput from '../../components/inputs/TextInput';
import TextReadOnlyInput from '../../components/inputs/TextReadOnlyInput';
import PasswordInput from '../../components/inputs/PasswordInput';
import SwitchInput from '../../components/inputs/SwitchInput';
import SelectOptionAutoCompleteInput from '../../components/inputs/SelectOptionAutoCompleteInput';
import ImageInput from '../../components/inputs/ImageInput';
export default {
props: {
mode: String
},
components: {
TextInput,
TextReadOnlyInput,
PasswordInput,
SelectOptionAutoCompleteInput,
SwitchInput,
ImageInput
},
data() {
return {
form: new Form({
img: [],
name: '',
email: '',
password: '',
password_confirmation: '',
role_id: [],
status: 1
}),
this_admin: [],
exist_img: [],
exist_admin_role: []
}
},
methods: {
validOne() {
let vm = this;
let ref_inputs = ['img', 'name', 'email', 'password', 'password_confirmation', 'role_id', 'status'];
let url = vm.mode == 'create' ? 'admin/valid-check' : 'admin/valid-check/' + vm.this_admin.data.hash_id;
return General.validCheck(url, vm.form, ref_inputs);
},
onComplete() {
let vm = this;
let method = vm.mode == 'create' ? 'post' : 'put';
let url = vm.mode == 'create' ? 'admin/store' : 'admin/update/' + vm.this_admin.data.hash_id;
return General.onComplete(url, vm.form, method)
.then(data => {
if (vm.mode != 'profile') {
let pervious_query = data.pervious_query ? '?' + data.pervious_query : '';
vm.$router.push('/admin/list' + pervious_query);
}
if (vm.mode == 'create') {
General.toastedMessage('create', 'Admin', data.data.name);
}
else {
General.toastedMessage('edit', 'Admin', data.data.name);
}
});
},
loadThisAdmin() {
let vm = this;
let url = vm.mode == 'edit' ? 'admin/show/' + vm.$route.params.hash_id : 'admin/self';
let form = new Form({});
General.getCall(url, form).then(data => {
vm.this_admin = data;
vm.exist_img = vm.this_admin.data.img;
vm.form.name = vm.this_admin.data.name;
vm.form.email = vm.this_admin.data.email;
vm.form.status = vm.this_admin.data.status;
vm.form.role_id = General.getKey(vm.this_admin.data.role_list, 'id');
vm.exist_admin_role = General.autoCompleteKeyConvert(vm.this_admin.data.role_list);
});
}
},
created() {
let vm = this;
if (vm.mode == 'edit' || vm.mode == 'profile') {
vm.loadThisAdmin();
}
}
}
</script>
@@ -8,13 +8,13 @@
<breadcrumb
:menu_item_list=menu_item_list
></breadcrumb>
<user-table></user-table>
<admin-table></admin-table>
</div>
</template>
<script>
import PageTitle from "../../components/titles/PageTitle";
import Breadcrumb from "../../layouts/parts/Breadcrumb";
import UserTable from "./Table";
import AdminTable from "./Table";
export default {
metaInfo() {
@@ -27,11 +27,11 @@
components: {
PageTitle,
Breadcrumb,
UserTable
AdminTable
},
data() {
return {
heading: 'User List',
heading: 'Admin List',
icon: 'fa fa-list',
menu_item_list: [
{
@@ -40,7 +40,7 @@
path: '/'
},
{
title: 'User List',
title: 'Admin List',
active: true,
path: 'list'
},
@@ -0,0 +1,59 @@
<template>
<div>
<page-title
:heading="heading"
:icon="icon"
:add="true"
></page-title>
<breadcrumb
:menu_item_list="menu_item_list"
></breadcrumb>
<admin-form
:mode="'profile'"
></admin-form>
</div>
</template>
<script>
import PageTitle from "../../components/titles/PageTitle";
import Breadcrumb from "../../layouts/parts/Breadcrumb";
import AdminForm from "./Form";
export default {
metaInfo() {
let vm = this;
return {
title: Constants.site.title,
titleTemplate: '%s | ' + vm.$router.currentRoute.name
}
},
components: {
PageTitle,
Breadcrumb,
AdminForm
},
data() {
let vm = this;
return {
heading: 'Edit Profile',
icon: 'fa fa-edit',
menu_item_list: [
{
title: 'Dashboard',
active: false,
path: '/'
},
{
title: 'Admin List',
active: false,
path: '/admin/list'
},
{
title: 'Edit Profile',
active: true,
path: '/admin/edit/' + vm.$route.params.hash_id
},
]
}
}
}
</script>
@@ -7,81 +7,94 @@
<i class="fa fa-filter"></i>
</button>
<div v-if="filter_status" class="filter dropdown-menu show">
<user-filter
<admin-filter
:form="form"
@clicked="filterSubmit"
@reset="FilterReset"
></user-filter>
></admin-filter>
</div>
</b-col>
<b-col md="6" v-if="permission_list.includes('add admin')" class="text-right">
<router-link
class="btn btn-primary"
to="create"
tag="button"
>
<i class="fa fa-plus"></i>
</router-link>
</b-col>
</b-row>
<table class="table table-striped">
<thead>
<paginate-nav
v-if="user_list.page"
v-if="admin_list.page"
:colspan="colspan"
:pervious_page="user_list.page.pervious_page"
:next_page="user_list.page.next_page"
:pervious_page="admin_list.page.pervious_page"
:next_page="admin_list.page.next_page"
@clicked="dataHandler"
></paginate-nav>
<tr>
<th>#</th>
<th>Profile</th>
<th style="width: 25%">Details</th>
<th>Role</th>
<th>Status</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-if="user_list.data" v-for="(user, $index) in user_list.data" :key="$index">
<tr v-if="admin_list.data" v-for="(admin, $index) in admin_list.data" :key="$index">
<td>{{ $index + 1 }}</td>
<td>
<img class="img-fluid pointer-cursor"
:src="user.img[0].file_info.original.file" width="60px" height="60px"
@click="ImgPopModalToggle(user.img)"
:src="admin.img[0].file_info.original.file" width="60px" height="60px"
@click="ImgPopModalToggle(admin.img)"
>
</td>
<td>
<div><b>Name</b>: {{ user.username }}</div>
<div><b>Email</b>: {{ user.email }}</div>
<div><b>Country</b>: {{ user.country_list[0].name }}</div>
<div><b>Name</b>: {{ admin.name }}</div>
<div><b>Email</b>: {{ admin.email }}</div>
<div><b>Country</b>: {{ admin.country_list[0].name }}</div>
</td>
<td>
<span :class="'badge badge-' + user.status[0].color">{{ user.status[0].name }}</span>
{{ admin.role_list[0].name }}
</td>
<td>
{{ user.created_at }}
<span :class="'badge badge-' + admin.status[0].color">{{ admin.status[0].name }}</span>
</td>
<td>
{{ admin.created_at }}
</td>
<td>
<router-link
v-if="permission_list.includes('view user')"
:to="'detail/' + user.hash_id"
v-if="permission_list.includes('edit admin')"
:to="'edit/' + admin.hash_id"
class="btn btn-xs btn-light"
title="View"
title="Edit"
>
<i class="fa fa-eye"></i>
<i class="fa fa-edit"></i>
</router-link>
</td>
</tr>
<tr v-if="!user_list.data || !user_list.data[0]">
<tr v-if="!admin_list.data || !admin_list.data[0]">
<td class="text-center" :colspan="colspan">
<vue-element-loading v-if="loading" :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
<span v-if="!loading">Empty</span>
</td>
</tr>
</tbody>
<tfoot v-if="user_list.page">
<tfoot v-if="admin_list.page">
<paginate-nav
:colspan="colspan"
:pervious_page="user_list.page.pervious_page"
:next_page="user_list.page.next_page"
:pervious_page="admin_list.page.pervious_page"
:next_page="admin_list.page.next_page"
@clicked="dataHandler"
>
</paginate-nav>
<tr>
<td class="text-right" :colspan="colspan">
<small>Total: {{ user_list.total }}</small>
<small>Total: {{ admin_list.total }}</small>
</td>
</tr>
</tfoot>
@@ -96,29 +109,28 @@
</template>
<script>
import userFilter from "./Filter";
import AdminFilter from "./Filter";
import ImgPopModal from "../../components/modals/ImgPopModal";
import PaginateNav from '../../components/paginations/NextPerviousPagination';
export default {
components: {
userFilter,
AdminFilter,
ImgPopModal,
PaginateNav
},
data() {
return {
form_permission: new Form({}),
form: new Form({
username: General.getURLParam('username'),
name: General.getURLParam('name'),
email: General.getURLParam('email'),
status: General.returnAray(General.getURLParam('status[]')),
page: General.getURLParam('page')
}),
colspan: 6,
colspan: 7,
filter_status: false,
loading: true,
user_list: [],
admin_list: [],
selected_img: [],
permission_list: []
}
@@ -132,14 +144,14 @@
getPermissionList() {
let vm = this;
let url = 'admin/self';
let params = {}
General.getCall(url, vm.form_permission).then(response => {
let form = new Form({});
General.getCall(url, form).then(response => {
vm.permission_list = response.data.permission_list;
});
},
getUserList() {
getAdminList() {
let vm = this;
let url = 'user/list';
let url = 'admin/list';
vm.tableCall(url);
},
tableCall(url) {
@@ -147,21 +159,21 @@
vm.loading = true;
General.tableCall(url, vm.form).then(response => {
vm.loading = false;
vm.user_list = response;
vm.admin_list = response;
vm.form.page = General.getURLParam('page');
vm.convertStatus();
});
},
convertStatus() {
let vm = this;
vm.user_list.data.forEach(function(element, index) {
element.status = General.initFormArray(Constants.user_status, [element.status]);
vm.admin_list.data.forEach(function(element, index) {
element.status = General.initFormArray(Constants.admin_status, [element.status]);
});
},
dataHandler(url) {
let vm = this;
vm.form.page = General.getStringParam('page', url);
vm.tableCall('user/list');
vm.tableCall('admin/list');
},
filterToggle() {
let vm = this;
@@ -175,9 +187,9 @@
},
filterSubmit() {
let vm = this;
let url = 'user/list';
vm.tableCall(url);
let url = 'admin/list';
vm.form.page = '';
vm.tableCall(url);
vm.filterToggle();
},
FilterReset() {
@@ -193,7 +205,7 @@
created() {
let vm = this;
vm.getPermissionList();
vm.getUserList();
vm.getAdminList();
}
}
</script>
@@ -7,7 +7,7 @@
:to="'/'"
class="btn-link pl-3"
>
<div class="logo-src" :style='{ background: "url(" + share_url + "favicon.png" + ")" }'></div>
<div class="logo-src" :style='{ background: "url(" + share_url + "white-logo.png" + ")" }'></div>
</router-link>
<div class="pl-3 app-header-title">
<h5 class="card-title">Page 404</h5>
+95 -42
View File
@@ -1,50 +1,73 @@
<template>
<b-card class="main-card mb-3">
<div v-if="!this_user.data" class="text-center">
<div v-if="!this_admin.data" class="text-center">
<vue-element-loading :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
</div>
<div v-if="this_user.data">
<div v-if="this_admin.data">
<form-wizard
@on-complete="onComplete"
title=""
subtitle=""
finish-button-text="Back"
finish-button-text="Submit"
@keydown="form.errors.clear($event.target.name)"
color="var(--primary)"
>
<tab-content
title="Details"
:before-change="validOne"
ref="valid_one"
icon="fa fa-info-circle"
>
<image-read-only-input
:label="'Profile'"
:exist_img="this_user.data.img"
>
</image-read-only-input>
<!-- ///////////////////////////////////////////////////// -->
<image-input
:input_name="'img'"
:form="form"
:label="'Profile Img'"
:exist_img="exist_img"
></image-input>
<!-- ///////////////////////////////////////////////////// -->
<text-input
:input_name="'first_name'"
:form="form"
:label="'First Name*'"
></text-input>
<!-- ///////////////////////////////////////////////////// -->
<text-input
:input_name="'last_name'"
:form="form"
:label="'Last Name*'"
></text-input>
<!-- ///////////////////////////////////////////////////// -->
<text-input
:input_name="'email'"
:form="form"
:label="'Email*'"
></text-input>
<!-- ///////////////////////////////////////////////////// -->
<password-input
:input_name="'password'"
:form="form"
:label="'Password*'"
></password-input>
<!-- ///////////////////////////////////////////////////// -->
<password-input
:input_name="'password_confirmation'"
:form="form"
:label="'Confirm Password*'"
></password-input>
<!-- ///////////////////////////////////////////////////// -->
<text-read-only-input
:label="'Username'"
:value="this_user.data.username"
v-if="mode == 'profile'"
:value="this_admin.data.role_list[0].name"
:label="'Role'"
>
</text-read-only-input>
<!-- ///////////////////////////////////////////////////// -->
<text-read-only-input
:label="'Email'"
:value="this_user.data.email"
>
</text-read-only-input>
<!-- ///////////////////////////////////////////////////// -->
<text-read-only-input
:label="'Country'"
:value="this_user.data.country_list[0].name"
>
</text-read-only-input>
<!-- ///////////////////////////////////////////////////// -->
<text-read-only-input
<switch-input
:input_name="'status'"
:form="form"
:label="'Status'"
:value="this_user.data.status[0].name"
>
</text-read-only-input>
></switch-input>
<!-- ///////////////////////////////////////////////////// -->
</tab-content>
</form-wizard>
@@ -53,45 +76,75 @@
</template>
<script>
import TextInput from '../../components/inputs/TextInput';
import TextReadOnlyInput from '../../components/inputs/TextReadOnlyInput';
import ImageReadOnlyInput from '../../components/inputs/ImageReadOnlyInput';
import PasswordInput from '../../components/inputs/PasswordInput';
import SwitchInput from '../../components/inputs/SwitchInput';
import ImageInput from '../../components/inputs/ImageInput';
export default {
props: {
mode: String
},
components: {
TextInput,
TextReadOnlyInput,
ImageReadOnlyInput
PasswordInput,
SwitchInput,
ImageInput
},
data() {
return {
this_user: [],
form: new Form({
img: [],
first_name: '',
last_name: '',
email: '',
password: '',
password_confirmation: '',
status: 1
}),
this_admin: [],
exist_img: [],
exist_user_role: []
}
},
methods: {
validOne() {
let vm = this;
let ref_inputs = ['img', 'first_name', 'last_name', 'email', 'password', 'password_confirmation', 'status'];
let url = 'user/valid-check/' + vm.this_admin.data.hash_id;
return General.validCheck(url, vm.form, ref_inputs);
},
onComplete() {
let vm = this;
vm.$router.push('/user/list');
return true;
let method = vm.mode == 'create' ? 'post' : 'put';
let url = 'user/update';
return General.onComplete(url, vm.form, method)
.then(data => {
General.toastedMessage('edit', 'User Profile', data.data.hash_id);
});
},
loadThisUser() {
loadThisAdmin() {
let vm = this;
let url = 'user/show/' + vm.$route.params.hash_id;
let url = 'user/self';
let form = new Form({});
General.getCall(url, form).then(response => {
vm.this_user = response;
vm.convertStatus();
General.getCall(url, form).then(data => {
vm.this_admin = data;
vm.exist_img = vm.this_admin.data.img;
vm.form.first_name = vm.this_admin.data.first_name;
vm.form.last_name = vm.this_admin.data.last_name;
vm.form.email = vm.this_admin.data.email;
vm.form.status = vm.this_admin.data.status;
vm.form.role_id = General.getKey(vm.this_admin.data.role_list, 'id');
vm.exist_user_role = General.autoCompleteKeyConvert(vm.this_admin.data.role_list);
});
},
convertStatus() {
let vm = this;
vm.this_user.data.status = General.initFormArray(Constants.admin_status, [vm.this_user.data.status]);
},
}
},
created() {
let vm = this;
vm.loadThisUser();
vm.loadThisAdmin();
}
}
</script>
+54
View File
@@ -0,0 +1,54 @@
<template>
<div>
<page-title
:heading="heading"
:icon="icon"
:add="true"
></page-title>
<breadcrumb
:menu_item_list="menu_item_list"
></breadcrumb>
<user-form
:mode="'profile'"
></user-form>
</div>
</template>
<script>
import PageTitle from "../../components/titles/PageTitle";
import Breadcrumb from "../../layouts/parts/Breadcrumb";
import UserForm from "./Form";
export default {
metaInfo() {
let vm = this;
return {
title: Constants.site.title,
titleTemplate: '%s | ' + vm.$router.currentRoute.name
}
},
components: {
PageTitle,
Breadcrumb,
UserForm
},
data() {
let vm = this;
return {
heading: 'Edit Profile',
icon: 'fa fa-edit',
menu_item_list: [
{
title: 'Dashboard',
active: false,
path: '/'
},
{
title: 'Edit Profile',
active: true,
path: '/user/edit/' + vm.$route.params.hash_id
},
]
}
}
}
</script>
+34 -115
View File
@@ -3,21 +3,9 @@ import Router from 'vue-router'
Vue.use(Router);
import Logins from './pages/logins/Index';
// import Dashboards from './pages/dashboards/Index';
// import UserList from './pages/users/List';
// import UserDetail from './pages/users/Detail';
// import AdminList from './pages/admins/List';
// import AdminCreate from './pages/admins/Create';
// import AdminEdit from './pages/admins/Edit';
// import AdminProfile from './pages/admins/Profile';
// import AdminRoleList from './pages/admin-roles/List';
// import AdminRoleCreate from './pages/admin-roles/Create';
// import AdminRoleEdit from './pages/admin-roles/Edit';
// import PageNotFound from './pages/page-not-founds/Index';
import Dashboards from './pages/dashboards/Index';
import UserProfile from './pages/users/Profile';
import PageNotFound from './pages/page-not-founds/Index';
let router = new Router({
mode: 'history',
@@ -37,110 +25,41 @@ let router = new Router({
},
component: Logins
},
///////////////////////////////////////////////////
// Dashboard
{
path: '/',
name: 'Dashboards',
meta: {
auth: true
},
component: Dashboards
},
/////////////////////////////////////////////////////
// User
{
path: '/user/profile/update',
name: 'User Profile',
meta: {
auth: true
},
component: UserProfile
},
/////////////////////////////////////////////////////
// 404
{
path: '*',
name: 'Page 404',
meta: {
layout: 'userpages',
guest: true
},
component: PageNotFound
},
/////////////////////////////////////////////////////
// // Dashboard
// {
// path: '/',
// name: 'Dashboards',
// meta: {
// auth: true
// },
// component: Dashboards
// },
// /////////////////////////////////////////////////////
// // User
// {
// path: '/user/list',
// name: 'User List',
// meta: {
// auth: true
// },
// component: UserList
// },
// {
// path: '/user/detail/:hash_id',
// name: 'User Detail',
// meta: {
// auth: true
// },
// component: UserDetail
// },
// /////////////////////////////////////////////////////
// // Admin
// {
// path: '/admin/list',
// name: 'Admin List',
// meta: {
// auth: true
// },
// component: AdminList
// },
// {
// path: '/admin/create',
// name: 'Admin Create',
// meta: {
// auth: true
// },
// component: AdminCreate
// },
// {
// path: '/admin/edit/:hash_id',
// name: 'Admin Edit',
// meta: {
// auth: true
// },
// component: AdminEdit
// },
// {
// path: '/admin/profile/update',
// name: 'Admin Profile',
// meta: {
// auth: true
// },
// component: AdminProfile
// },
// /////////////////////////////////////////////////////
// // Admin Role
// {
// path: '/admin-role/list',
// name: 'Admin Role List',
// meta: {
// auth: true
// },
// component: AdminRoleList
// },
// {
// path: '/admin-role/create',
// name: 'Admin Role Create',
// meta: {
// auth: true
// },
// component: AdminRoleCreate
// },
// {
// path: '/admin-role/edit/:hash_id',
// name: 'Admin Role Edit',
// meta: {
// auth: true
// },
// component: AdminRoleEdit
// },
// /////////////////////////////////////////////////////
// // 404
// {
// path: '*',
// name: 'Page 404',
// meta: {
// layout: 'userpages',
// guest: true
// },
// component: PageNotFound
// },
// /////////////////////////////////////////////////////
]
});
// window.USER_DETAIL = localStorage.getItem('user_detail') != null ? JSON.parse(localStorage.getItem('user_detail')) : null;
window.TOKEN = localStorage.getItem('user_jwt');
router.beforeEach((to, from, next) => {
+4 -49
View File
@@ -18,65 +18,20 @@ module.exports.menuDefine = function(permission = []) {
});
/////////////////////////////////////////////////////
if (permission.includes('view user')) {
if (permission.includes('view contract')) {
let admin_access_menu = {};
admin_access_menu = {
title: 'User',
icon: 'fa fa-user',
title: 'Contract',
icon: 'fa fa-file-contract',
child: [
{
href: '/user/list',
href: '/contract/list',
title: 'List',
},
]
};
menu.push(admin_access_menu);
}
/////////////////////////////////////////////////////
if (permission.includes('view admin')) {
let admin_access_menu = {};
admin_access_menu = {
title: 'Admin',
icon: 'fa fa-user-astronaut',
child: [
{
href: '/admin/list',
title: 'List',
},
]
};
if (permission.includes('add admin')) {
admin_access_menu.child.push(
{
href: '/admin/create',
title: 'Create',
}
);
}
menu.push(admin_access_menu);
}
/////////////////////////////////////////////////////
if (permission.includes('view role')) {
let admin_access_menu = {};
admin_access_menu = {
title: 'Role',
icon: 'fa fa-user-tag',
child: [
{
href: '/admin-role/list',
title: 'Admin List',
},
{
href: '/reviewer-role/list',
title: 'Reviewer List',
},
]
};
menu.push(admin_access_menu);
}
/////////////////////////////////////////////////////
return menu;
+12
View File
@@ -11,6 +11,18 @@ Route::group(['namespace' => 'User', 'prefix' => 'user-backsys/api'], function (
'uses' => 'UserController@self',
]
);
Route::put('update',
[
'as' => 'api.user.update',
'uses' => 'UserController@update',
]
);
Route::post('valid-check/{hash_id?}',
[
'as' => 'api.user.valid-check',
'uses' => 'UserController@validCheck',
]
);
});
// Entity
+3 -1
View File
@@ -2,7 +2,9 @@
Route::group(['namespace' => 'User'], function () {
Route::group(['namespace' => 'Web'], function () {
Route::get('/login', ['as' => 'user.app', 'uses' => 'AppController@index'])->where('any', '.*');
Route::get('/login', ['as' => 'user.app.login', 'uses' => 'AppController@index'])->where('any', '.*');
Route::get('/user/profile/update', ['as' => 'user.app.profile.update', 'uses' => 'AppController@index'])->where('any', '.*');
Route::get('/contract/list', ['as' => 'user.app.contract.list', 'uses' => 'AppController@index'])->where('any', '.*');
Route::get('/', ['as' => 'user.app', 'uses' => 'AppController@index'])->where('any', '.*');
});
});