mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/unity.git
synced 2026-08-22 22:04:08 +00:00
user profile UI
This commit is contained in:
glovetleong
@@ -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"
|
||||
>
|
||||
|
||||
+9
-10
@@ -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>
|
||||
+5
-5
@@ -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);
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -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>
|
||||
+51
-39
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Vendored
+34
-115
@@ -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
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user