contract template UI

This commit is contained in:
glovetleong
2021-07-07 17:19:22 +08:00
parent b4ee5c20a1
commit 85a042b18a
16 changed files with 624 additions and 89 deletions
@@ -45,4 +45,11 @@ class ContractTemplateController extends BaseController
$contract_template = ContractTemplateModule::delete($request, $hash_id);
return $contract_template;
}
public function validCheck(Request $request, $hash_id = '')
{
$method = empty($hash_id) ? 'POST' :'PUT';
$valid = ContractTemplateModule::validCheck($request, $hash_id, $method);
return $valid;
}
}
@@ -70,6 +70,8 @@ class ContractTemplateModule extends BaseController
public static function show(Request $request, $hash_id)
{
$id = Hasher::decode('contract_templates', $hash_id);
$user_id = Auth::guard('user-api')->user()->id;
$contract_template = ContractTemplate::
where('id', $id)
->where('user_id', $user_id)
@@ -166,6 +168,14 @@ class ContractTemplateModule extends BaseController
return response()->json($data);
}
public static function validCheck(Request $request, $hash_id = '', $method = 'POST')
{
$id = $hash_id ? Hasher::decode('contract_templates', $hash_id) : '';
$validation = ContractTemplateModule::validation($request, $id, $method);
if (!$validation->status) {
return response()->json($validation, 422);
}
}
private static function validation(Request $request, $id = '', $method = 'POST')
{
+1 -22
View File
@@ -4,28 +4,7 @@ const En = {
'username': 'username',
'email': 'email',
'password': 'password',
'role_id': 'role',
'permission_id': 'permission',
'phone_code': 'phone code',
'code': 'code',
'currency_id': 'currency',
'language_id': 'language',
'symbol': 'symbol',
'sell': 'sell',
'buy': 'buy',
'description': 'description',
'min_file_size': 'min file size',
'max_file_size': 'max file size',
'credit_amount': 'credit amount',
'media_property_type_id': 'media property type',
'type': 'type',
'mime_type_id': 'mime type',
'trending_count': 'trending count',
'bank_name': 'bank name',
'holder_name': 'holder name',
'holder_no': 'holder no',
'country_id': 'country',
'complete_day_range': 'complete day range',
// Error
@@ -0,0 +1,58 @@
<template>
<div>
<page-title
:heading="heading"
:icon="icon"
:add="true"
></page-title>
<breadcrumb
:menu_item_list="menu_item_list"
></breadcrumb>
<contract-template-form
:mode="'create'"
></contract-template-form>
</div>
</template>
<script>
import PageTitle from "../../components/titles/PageTitle";
import Breadcrumb from "../../layouts/parts/Breadcrumb";
import ContractTemplateForm from "./Form";
export default {
metaInfo() {
let vm = this;
return {
title: Constants.site.title,
titleTemplate: '%s | ' + vm.$router.currentRoute.name
}
},
components: {
PageTitle,
Breadcrumb,
ContractTemplateForm
},
data() {
return {
heading: 'Create Contract Template',
icon: 'fa fa-plus',
menu_item_list: [
{
title: 'Dashboard',
active: false,
path: '/'
},
{
title: 'Contract Template List',
active: false,
path: '/contract-template/list'
},
{
title: 'Create Contract Template',
active: true,
path: '/contract-template/create'
},
],
}
}
}
</script>
@@ -9,7 +9,7 @@
:menu_item_list="menu_item_list"
></breadcrumb>
<admin-form
:mode="'profile'"
:mode="'edit'"
></admin-form>
</div>
</template>
@@ -34,7 +34,7 @@
data() {
let vm = this;
return {
heading: 'Edit Profile',
heading: 'Edit Admin',
icon: 'fa fa-edit',
menu_item_list: [
{
@@ -48,7 +48,7 @@
path: '/admin/list'
},
{
title: 'Edit Profile',
title: 'Edit Admin',
active: true,
path: '/admin/edit/' + vm.$route.params.hash_id
},
@@ -0,0 +1,75 @@
<template>
<b-col md="12">
<form @submit.prevent="$emit('clicked')" @keydown="form.errors.clear($event.target.name)">
<text-input
:input_name="'name'"
:form="form"
:label="'Name'"
>
</text-input>
<select-option-auto-complete-input
:input_name="'status'"
:form="form"
:exist_data="exist_contract_template_status"
:placeholder="''"
:label="'Status'"
:data_set="contract_template_status"
:array="true"
></select-option-auto-complete-input>
<v-btn
depressed
small
type="submit"
color="primary"
class="m-0"
>
Submit
</v-btn>
<v-btn
depressed
small
type="button"
color="warning"
class="m-0"
@click="$emit('reset')"
>
Reset
</v-btn>
</form>
</b-col>
</template>
<script>
import TextInput from '../../components/inputs/TextInput';
import SelectOptionAutoCompleteInput from '../../components/inputs/SelectOptionAutoCompleteInput';
export default {
props: {
form: Object
},
components: {
TextInput,
SelectOptionAutoCompleteInput
},
data() {
let vm = this;
return {
exist_contract_template_status: [],
contract_template_status: General.autoCompleteKeyConvert(Constants.contract_template_status)
}
},
methods: {
initForm() {
let vm = this;
if (vm.form.status[0]) {
let status_list = [];
vm.exist_contract_template_status = General.initFormArray(vm.contract_template_status, vm.form.status);
}
}
},
created() {
let vm = this;
vm.initForm();
}
}
</script>
@@ -0,0 +1,107 @@
<template>
<b-card class="main-card mb-3">
<div v-if="!this_contract_template.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_contract_template.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"
>
<!-- ///////////////////////////////////////////////////// -->
<text-input
:input_name="'name'"
:form="form"
:label="'Name*'"
></text-input>
<!-- ///////////////////////////////////////////////////// -->
<number-input
:input_name="'complete_day_range'"
:form="form"
:label="'Complete Day Range*'"
></number-input>
<!-- ///////////////////////////////////////////////////// -->
</tab-content>
</form-wizard>
</div>
</b-card>
</template>
<script>
import TextInput from '../../components/inputs/TextInput';
import NumberInput from '../../components/inputs/NumberInput';
export default {
props: {
mode: String
},
components: {
TextInput,
NumberInput,
},
data() {
return {
form: new Form({
name: '',
complete_day_range: '',
}),
this_contract_template: [],
}
},
methods: {
validOne() {
let vm = this;
let ref_inputs = ['name', 'complete_day_range'];
let url = vm.mode == 'create' ? 'contract-template/valid-check' : 'contract-template/valid-check/' + vm.this_contract_template.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' ? 'contract-template/store' : 'contract-template/update/' + vm.this_contract_template.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('/contract-template/list' + pervious_query);
}
if (vm.mode == 'create') {
General.toastedMessage('create', 'Admin', data.data.name);
}
else {
General.toastedMessage('edit', 'Admin', data.data.name);
}
});
},
loadThisContractTemplate() {
let vm = this;
let url = vm.mode == 'edit' ? 'contract-template/show/' + vm.$route.params.hash_id : 'contract-template/self';
let form = new Form({});
General.getCall(url, form).then(data => {
vm.this_contract_template = data;
vm.form.name = vm.this_contract_template.data.name;
vm.form.complete_day_range = vm.this_contract_template.data.complete_day_range;
vm.form.status = vm.this_contract_template.data.status;
});
}
},
created() {
let vm = this;
if (vm.mode == 'edit' || vm.mode == 'profile') {
vm.loadThisContractTemplate();
}
}
}
</script>
@@ -0,0 +1,51 @@
<template>
<div>
<page-title
:heading="heading"
:icon="icon"
:add="true"
></page-title>
<breadcrumb
:menu_item_list=menu_item_list
></breadcrumb>
<contract-template-table></contract-template-table>
</div>
</template>
<script>
import PageTitle from "../../components/titles/PageTitle";
import Breadcrumb from "../../layouts/parts/Breadcrumb";
import ContractTemplateTable from "./Table";
export default {
metaInfo() {
let vm = this;
return {
title: Constants.site.title,
titleTemplate: '%s | ' + vm.$router.currentRoute.name
}
},
components: {
PageTitle,
Breadcrumb,
ContractTemplateTable
},
data() {
return {
heading: 'Contract Template List',
icon: 'fa fa-list',
menu_item_list: [
{
title: 'Dashboard',
active: false,
path: '/'
},
{
title: 'Contract Template List',
active: true,
path: 'list'
},
],
}
}
}
</script>
@@ -0,0 +1,195 @@
<template>
<div>
<b-card class="main-card mb-4">
<b-row class="mb-2" no-gutters>
<b-col md="6">
<button type="button" class="btn btn-primary" @click="filterToggle">
<i class="fa fa-filter"></i>
</button>
<div v-if="filter_status" class="filter dropdown-menu show">
<contract-template-filter
:form="form"
@clicked="filterSubmit"
@reset="FilterReset"
></contract-template-filter>
</div>
</b-col>
<b-col md="6" v-if="permission_list.includes('add contract')" 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="contract_template_list.page"
:colspan="colspan"
:pervious_page="contract_template_list.page.pervious_page"
:next_page="contract_template_list.page.next_page"
@clicked="dataHandler"
></paginate-nav>
<tr>
<th>#</th>
<th style="width: 25%">Details</th>
<th>Obligation</th>
<th>Status</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-if="contract_template_list.data" v-for="(contract, $index) in contract_template_list.data" :key="$index">
<td>{{ $index + 1 }}</td>
<td>
<div><b>Name</b>: {{ contract.name }}</div>
<div><b>Complete Day Range</b>: {{ contract.complete_day_range }}</div>
</td>
<td>
<div v-if="contract.contract_template_obligation_list" v-for="(obligation, $index) in contract.contract_template_obligation_list" :key="$index">
<div>-{{ obligation.name }}</div>
</div>
<div v-if="!contract.contract_template_obligation_list[0]">
-
</div>
</td>
<td>
<span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
</td>
<td>
{{ contract.created_at }}
</td>
<td>
<router-link
v-if="permission_list.includes('edit contract')"
:to="'edit/' + contract.hash_id"
class="btn btn-xs btn-light"
title="Edit"
>
<i class="fa fa-edit"></i>
</router-link>
</td>
</tr>
<tr v-if="!contract_template_list.data || !contract_template_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="contract_template_list.page">
<paginate-nav
:colspan="colspan"
:pervious_page="contract_template_list.page.pervious_page"
:next_page="contract_template_list.page.next_page"
@clicked="dataHandler"
>
</paginate-nav>
<tr>
<td class="text-right" :colspan="colspan">
<small>Total: {{ contract_template_list.total }}</small>
</td>
</tr>
</tfoot>
</table>
</b-card>
</div>
</template>
<script>
import ContractTemplateFilter from "./Filter";
import PaginateNav from '../../components/paginations/NextPerviousPagination';
export default {
components: {
ContractTemplateFilter,
PaginateNav
},
data() {
return {
form: new Form({
name: General.getURLParam('name'),
email: General.getURLParam('email'),
status: General.returnAray(General.getURLParam('status[]')),
page: General.getURLParam('page')
}),
colspan: 7,
filter_status: false,
loading: true,
contract_template_list: [],
permission_list: []
}
},
methods: {
getPermissionList() {
let vm = this;
let url = 'user/self';
let form = new Form({});
General.getCall(url, form).then(response => {
vm.permission_list = response.data.permission_list;
});
},
getContractTemplateList() {
let vm = this;
let url = 'contract-template/list';
vm.tableCall(url);
},
tableCall(url) {
let vm = this;
vm.loading = true;
General.tableCall(url, vm.form).then(response => {
vm.loading = false;
vm.contract_template_list = response;
vm.form.page = General.getURLParam('page');
vm.convertStatus();
});
},
convertStatus() {
let vm = this;
vm.contract_template_list.data.forEach(function(element, index) {
element.status = General.initFormArray(Constants.contract_template_status, [element.status]);
});
},
dataHandler(url) {
let vm = this;
vm.form.page = General.getStringParam('page', url);
vm.tableCall('contract-template/list');
},
filterToggle() {
let vm = this;
vm.filter_status = !vm.filter_status;
},
filterCloseClick(e) {
let vm = this;
if (!vm.$el.contains(e.target) && !e.target.classList.contains('filter')) {
vm.filter_status = false;
}
},
filterSubmit() {
let vm = this;
let url = 'contract-template/list';
vm.form.page = '';
vm.tableCall(url);
vm.filterToggle();
},
FilterReset() {
let vm = this;
vm.form.reset();
vm.filterSubmit();
}
},
mounted() {
let vm = this;
document.addEventListener('click', vm.filterCloseClick);
},
created() {
let vm = this;
vm.getPermissionList();
vm.getContractTemplateList();
}
}
</script>
+5 -5
View File
@@ -8,13 +8,13 @@
<breadcrumb
:menu_item_list=menu_item_list
></breadcrumb>
<admin-table></admin-table>
<contract-table></contract-table>
</div>
</template>
<script>
import PageTitle from "../../components/titles/PageTitle";
import Breadcrumb from "../../layouts/parts/Breadcrumb";
import AdminTable from "./Table";
import ContractTable from "./Table";
export default {
metaInfo() {
@@ -27,11 +27,11 @@
components: {
PageTitle,
Breadcrumb,
AdminTable
ContractTable
},
data() {
return {
heading: 'Admin List',
heading: 'Contract List',
icon: 'fa fa-list',
menu_item_list: [
{
@@ -40,7 +40,7 @@
path: '/'
},
{
title: 'Admin List',
title: 'Contract List',
active: true,
path: 'list'
},
+30 -56
View File
@@ -7,14 +7,14 @@
<i class="fa fa-filter"></i>
</button>
<div v-if="filter_status" class="filter dropdown-menu show">
<admin-filter
<contract-filter
:form="form"
@clicked="filterSubmit"
@reset="FilterReset"
></admin-filter>
></contract-filter>
</div>
</b-col>
<b-col md="6" v-if="permission_list.includes('add admin')" class="text-right">
<b-col md="6" v-if="permission_list.includes('add contract')" class="text-right">
<router-link
class="btn btn-primary"
to="create"
@@ -27,49 +27,37 @@
<table class="table table-striped">
<thead>
<paginate-nav
v-if="admin_list.page"
v-if="contract_list.page"
:colspan="colspan"
:pervious_page="admin_list.page.pervious_page"
:next_page="admin_list.page.next_page"
:pervious_page="contract_list.page.pervious_page"
:next_page="contract_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="admin_list.data" v-for="(admin, $index) in admin_list.data" :key="$index">
<tr v-if="contract_list.data" v-for="(contract, $index) in contract_list.data" :key="$index">
<td>{{ $index + 1 }}</td>
<td>
<img class="img-fluid pointer-cursor"
:src="admin.img[0].file_info.original.file" width="60px" height="60px"
@click="ImgPopModalToggle(admin.img)"
>
<div><b>Name</b>: {{ contract.name }}</div>
<div><b>Complete Day Range</b>: {{ contract.complete_day_range }}</div>
</td>
<td>
<div><b>Name</b>: {{ admin.name }}</div>
<div><b>Email</b>: {{ admin.email }}</div>
<div><b>Country</b>: {{ admin.country_list[0].name }}</div>
<span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
</td>
<td>
{{ admin.role_list[0].name }}
</td>
<td>
<span :class="'badge badge-' + admin.status[0].color">{{ admin.status[0].name }}</span>
</td>
<td>
{{ admin.created_at }}
{{ contract.created_at }}
</td>
<td>
<router-link
v-if="permission_list.includes('edit admin')"
:to="'edit/' + admin.hash_id"
v-if="permission_list.includes('edit contract')"
:to="'edit/' + contract.hash_id"
class="btn btn-xs btn-light"
title="Edit"
>
@@ -77,81 +65,67 @@
</router-link>
</td>
</tr>
<tr v-if="!admin_list.data || !admin_list.data[0]">
<tr v-if="!contract_list.data || !contract_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="admin_list.page">
<tfoot v-if="contract_list.page">
<paginate-nav
:colspan="colspan"
:pervious_page="admin_list.page.pervious_page"
:next_page="admin_list.page.next_page"
:pervious_page="contract_list.page.pervious_page"
:next_page="contract_list.page.next_page"
@clicked="dataHandler"
>
</paginate-nav>
<tr>
<td class="text-right" :colspan="colspan">
<small>Total: {{ admin_list.total }}</small>
<small>Total: {{ contract_list.total }}</small>
</td>
</tr>
</tfoot>
</table>
</b-card>
<img-pop-modal
:label="'Profile'"
:img="selected_img"
>
</img-pop-modal>
</div>
</template>
<script>
import AdminFilter from "./Filter";
import ImgPopModal from "../../components/modals/ImgPopModal";
import ContractFilter from "./Filter";
import PaginateNav from '../../components/paginations/NextPerviousPagination';
export default {
components: {
AdminFilter,
ImgPopModal,
ContractFilter,
PaginateNav
},
data() {
return {
form: new Form({
name: General.getURLParam('name'),
email: General.getURLParam('email'),
status: General.returnAray(General.getURLParam('status[]')),
page: General.getURLParam('page')
}),
colspan: 7,
filter_status: false,
loading: true,
admin_list: [],
selected_img: [],
contract_list: [],
permission_list: []
}
},
methods: {
ImgPopModalToggle(img) {
let vm = this;
vm.selected_img = img;
vm.$bvModal.show('img-pop-modal');
},
getPermissionList() {
let vm = this;
let url = 'admin/self';
let url = 'user/self';
let form = new Form({});
General.getCall(url, form).then(response => {
vm.permission_list = response.data.permission_list;
});
},
getAdminList() {
getContractList() {
let vm = this;
let url = 'admin/list';
let url = 'contract/list';
vm.tableCall(url);
},
tableCall(url) {
@@ -159,21 +133,21 @@
vm.loading = true;
General.tableCall(url, vm.form).then(response => {
vm.loading = false;
vm.admin_list = response;
vm.contract_list = response;
vm.form.page = General.getURLParam('page');
vm.convertStatus();
});
},
convertStatus() {
let vm = this;
vm.admin_list.data.forEach(function(element, index) {
element.status = General.initFormArray(Constants.admin_status, [element.status]);
vm.contract_list.data.forEach(function(element, index) {
element.status = General.initFormArray(Constants.contract_status, [element.status]);
});
},
dataHandler(url) {
let vm = this;
vm.form.page = General.getStringParam('page', url);
vm.tableCall('admin/list');
vm.tableCall('contract/list');
},
filterToggle() {
let vm = this;
@@ -187,7 +161,7 @@
},
filterSubmit() {
let vm = this;
let url = 'admin/list';
let url = 'contract/list';
vm.form.page = '';
vm.tableCall(url);
vm.filterToggle();
@@ -205,7 +179,7 @@
created() {
let vm = this;
vm.getPermissionList();
vm.getAdminList();
vm.getContractList();
}
}
</script>
+30
View File
@@ -6,6 +6,10 @@ import Logins from './pages/logins/Index';
import Dashboards from './pages/dashboards/Index';
import UserProfile from './pages/users/Profile';
import ContractTemplateList from './pages/contract-templates/List';
import ContractTemplateCreate from './pages/contract-templates/Create';
import ContractTemplateEdit from './pages/contract-templates/Edit';
import ContractList from './pages/contracts/List';
import ContractCreate from './pages/contracts/Create';
import ContractEdit from './pages/contracts/Edit';
@@ -41,6 +45,32 @@ let router = new Router({
component: Dashboards
},
/////////////////////////////////////////////////////
// Contract Template
{
path: '/contract-template/list',
name: 'Contract Template List',
meta: {
auth: true
},
component: ContractTemplateList
},
{
path: '/contract-template/create',
name: 'Contract Template Create',
meta: {
auth: true
},
component: ContractTemplateCreate
},
{
path: '/contract-template/edit/:hash_id',
name: 'Contract Template Edit',
meta: {
auth: true
},
component: ContractTemplateEdit
},
/////////////////////////////////////////////////////
// Contract
{
path: '/contract/list',
+23 -1
View File
@@ -28,7 +28,7 @@ const Constant = {
'color': 'danger'
},
],
'role_status': [
'contract_template_status': [
{
'id': 1,
'name': 'Active',
@@ -39,6 +39,28 @@ const Constant = {
'name': 'De-active',
'color': 'danger'
},
{
'id': 9,
'name': 'Pending',
'color': 'warning'
},
],
'contract_status': [
{
'id': 1,
'name': 'Active',
'color': 'primary'
},
{
'id': 2,
'name': 'De-active',
'color': 'danger'
},
{
'id': 9,
'name': 'Pending',
'color': 'warning'
},
],
};
export default Constant;
+15
View File
@@ -17,6 +17,21 @@ module.exports.menuDefine = function(permission = []) {
]
});
/////////////////////////////////////////////////////
if (permission.includes('view contract_template')) {
let admin_access_menu = {};
admin_access_menu = {
title: 'Contract Template',
icon: 'fa fa-copy',
child: [
{
href: '/contract-template/list',
title: 'List',
},
]
};
menu.push(admin_access_menu);
}
/////////////////////////////////////////////////////
if (permission.includes('view contract')) {
let admin_access_menu = {};
+6
View File
@@ -140,6 +140,12 @@ Route::group(['namespace' => 'User', 'prefix' => 'user-backsys/api'], function (
'middleware' => ['permission:delete contract_template']
]
);
Route::post('valid-check/{hash_id?}',
[
'as' => 'api.contract-template.valid-check',
'uses' => 'ContractTemplateController@validCheck',
]
);
});
// Contract Templete Obligation
+6
View File
@@ -4,7 +4,13 @@ Route::group(['namespace' => 'User'], function () {
Route::group(['namespace' => 'Web'], function () {
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-template/list', ['as' => 'user.app.contract-template.list', 'uses' => 'AppController@index'])->where('any', '.*');
Route::get('/contract-template/create', ['as' => 'user.app.contract-template.create', 'uses' => 'AppController@index'])->where('any', '.*');
Route::get('/contract-template/edit/{hash_id}', ['as' => 'user.app.contract-template.create', 'uses' => 'AppController@index'])->where('any', '.*');
Route::get('/contract/list', ['as' => 'user.app.contract.list', 'uses' => 'AppController@index'])->where('any', '.*');
Route::get('/contract/create', ['as' => 'user.app.contract.create', 'uses' => 'AppController@index'])->where('any', '.*');
Route::get('/', ['as' => 'user.app', 'uses' => 'AppController@index'])->where('any', '.*');
});
});