Run the following command
restaurentPos>npm install vuelidate --save
add the following code in the laravel project location:posmaster\routes\api.php
/* menu api */ Route::post('menu_insert','Json\ApiController@menu_insert'); Route::post('menu_filter','Json\ApiController@menu_filter'); Route::get('menu_edit/{id}','Json\ApiController@menu_edit'); Route::post('menu_update','Json\ApiController@menu_update'); Route::post('menu_del','Json\ApiController@menu_del'); Route::post('menu_instant','Json\ApiController@menu_instant'); /* menu api */
add the following code in the laravel project location:posmaster\app\Http\Controllers\Json\ApiController.php
/* menu api */ public function menu_insert(Request $request){ $insert = null; $checkUnique = null; $checkUnique = AdminMenu::where('menu_name',$request->input('menu_name'))->first(); if($request->input('menu_name')){ if(! @$checkUnique->id){ $unitIns = new AdminMenu(); $unitIns->menu_name = $request->input('menu_name'); $unitIns->type = $request->input('type'); //$unitIns->parent_type = $request->input('parent_type'); $unitIns->parent_id = $request->input('parent_id'); $unitIns->sl_no = $request->input('sl_no'); $unitIns->route_path = $request->input('route_path'); $unitIns->route_name = $request->input('route_name'); $unitIns->is_active = $request->input('is_active'); $unitIns->create_date = Carbon::now(); $unitIns->create_by = $request->input('create_by'); $insert = $unitIns->save(); if($insert){ return response()->json(['status'=>'success']); }else{ return response()->json(['status'=>'fail']); } }else{ return response()->json(['status'=>'no_unique']); } } } public function menu_edit(Request $request){ $update = null; $id = @$request->route()->parameter('id'); if($id){ $unitIns = AdminMenu::orderBy('admin_menu.create_date','desc') ->select('admin_menu.*','admin_user.full_name as create_by_name') ->leftJoin('admin_user','admin_user.id','=','admin_menu.create_by') ->where('admin_menu.id',$id) ->first(); if($unitIns){ return response()->json($unitIns); }else{ return response()->json(['status'=>'fail']); } } } public function menu_update(Request $request){ $update = null; if($request->input('id')){ $checkUnique = null; $checkUnique = AdminMenu::where('menu_name',$request->input('menu_name'))->where('id','!=',$request->input('id'))->first(); if(! @$checkUnique->id){ $unitIns = AdminMenu::where('id',$request->input('id'))->first(); if($unitIns){ $unitIns->menu_name = $request->input('menu_name'); $unitIns->type = $request->input('type'); //$unitIns->parent_type = $request->input('parent_type'); $unitIns->parent_id = ($request->input('parent_id'))? $request->input('parent_id'):null; $unitIns->sl_no = $request->input('sl_no'); $unitIns->route_path = $request->input('route_path'); $unitIns->route_name = $request->input('route_name'); $unitIns->is_active = $request->input('is_active'); $unitIns->update_date = Carbon::now(); $unitIns->update_by = $request->input('update_by'); $update = $unitIns->save(); if($update){ return response()->json(['status'=>'success']); }else{ return response()->json(['status'=>'fail']); } }else{ return response()->json(['status'=>'no_data']); } }else{ return response()->json(['status'=>'no_unique']); } } } public function menu_filter(Request $request){ $menu_name = ($request->input('menu_name'))? $request->input('menu_name'):''; $type = ($request->input('type'))? $request->input('type'):''; $is_active = ($request->input('is_active'))? $request->input('is_active'):''; if($menu_name || $is_active || $type ){ $unitList = AdminMenu::orderBy('admin_menu.sl_no','asc') ->select( 'admin_menu.*', 'admin_user.full_name as create_by_name', DB::raw("(SELECT menu_name FROM admin_menu p WHERE p.id = admin_menu.parent_id) as parent_menu_name") ) ->leftJoin('admin_user','admin_user.id','=','admin_menu.create_by') ->where(function($search) use($menu_name,$is_active,$type){ if($menu_name){ $search->where('admin_menu.menu_name','like', $menu_name.'%'); } if($type){ $search->where('admin_menu.type','=', $type); } if($is_active=='yes'){ $search->where('admin_menu.is_active','=', 1); }if($is_active=='no'){ $search->where('admin_menu.is_active','=', 0); }else{ $search->where('admin_menu.is_active','=', 1); } }) ->limit(500) ->get(); }else{ $unitList = AdminMenu::orderBy('admin_menu.sl_no','asc') ->select( 'admin_menu.*', 'admin_user.full_name as create_by_name', DB::raw("(SELECT menu_name FROM admin_menu p WHERE p.id = admin_menu.parent_id) as parent_menu_name") ) ->leftJoin('admin_user','admin_user.id','=','admin_menu.create_by') ->where('admin_menu.is_active',1) ->limit(500) ->get(); } if($unitList){ return response()->json($unitList); }else{ return response()->json(['status'=>'no_data']); } } public function menu_del(Request $request){ if($request->input('id')){ $unitList = AdminMenu::where("id",$request->input('id'))->first(); if($unitList){ $unitList->is_active = 0; $unitList->save(); return response()->json(['status'=>'success']); }else{ return response()->json(['status'=>'no_record_found']); } } } public function menu_instant(Request $request){ if($request->input('id')){ $unitIns = AdminMenu::orderBy('admin_menu.create_date','desc') ->select('admin_menu.*','admin_user.full_name as create_by_name') ->leftJoin('admin_user','admin_user.id','=','admin_menu.create_by') ->where('admin_menu.id',$request->input('id')) ->first(); if($unitIns){ return response()->json($unitIns); }else{ return response()->json(); } } } /* end menu api */
create MenuAddPage.vue file in the location:resources\js\components\page and add the following code:
<template> <div class="widthHeight"> <InventoryLayout> <MenuAddForm /> </InventoryLayout> </div> </template> <script> //import InventoryLayout from "../layout/InventoryLayout.vue" import MenuAddForm from "../block/menu/MenuAddForm.vue" export default { data:()=>({ }), components:{ InventoryLayout, MenuAddForm } }; </script> <style scopped> .widthHeight{ width:100%; height:100%; } </style>
create MenuAddPage.vue file in the location:resources\js\components\block\menu and add the following code:
<template> <div> <div class="infoHeader"> <b-row> <b-col cols="8" md="6">Menu Information[add]
<b-col cols="4" md="6"> <div class="rightAlign"> <router-link :to="{name:'ad_menu_list'}"><b-button variant="outline-info" class="btn_custom"><i class="fas fa-list"></i> List</b-button></router-link> </div> </b-col> </b-row> </div> </b-jumbotron> <b-card bg-variant="light"> <b-row> <b-col cols="0" md="2" class="bgtransparent"> <b-col cols="12" md="8" class="formStyle"> <b-form @submit.prevent="onSubmit" @reset="onReset"> <b-row> <b-col cols="12" md="6" > <b-form-group id="input-group-1" label="Menu Name" label-for="input-1" description="" > <b-form-input id="company_name" v-model="form.menu_name" type="text" placeholder="Enter menu name" @blur="$v.form.menu_name.$touch()" :state="$v.form.menu_name.$dirty ? !$v.form.menu_name.$anyError : null" > <span class="error" v-if="$v.form.menu_name.$dirty && !$v.form.menu_name.required">menu name is required <span class="error" v-if="$v.form.menu_name.$dirty && !$v.form.menu_name.minLength">menu name must have at least {{$v.form.menu_name.$params.minLength.min}} letters. </b-form-group> <b-form-group id="input-group-3" label="Type:" label-for="input-3"> <b-form-select id="is_active" v-model="form.type" :options="typeOptions" > <b-form-group id="input-group-3" label="Parent:" label-for="input-3"> <b-form-select id="is_active" v-model="form.parent_id" :options="defaultOption.concat(parentOptions)" > <b-form-group id="input-group-1" label="Sl No" label-for="input-1" description="" > <b-form-input id="company_name" v-model="form.sl_no" type="text" placeholder="Enter Sl No" @blur="$v.form.sl_no.$touch()" :state="$v.form.sl_no.$dirty ? !$v.form.sl_no.$anyError : null" > <span class="error" v-if="$v.form.sl_no.$dirty && !$v.form.sl_no.required">sl no is required <b-col cols="12" md="6" > <b-form-group id="input-group-1" label="Route Path" label-for="input-1" description="" > <b-form-input id="company_name" v-model="form.route_path" type="text" placeholder="Enter route path" @blur="$v.form.route_path.$touch()" :state="$v.form.route_path.$dirty ? !$v.form.route_path.$anyError : null" > <span class="error" v-if="$v.form.route_path.$dirty && !$v.form.route_path.required">route path is required <b-form-group id="input-group-1" label="Route Name" label-for="input-1" description="" > <b-form-input id="company_name" v-model="form.route_name" type="text" placeholder="Enter route name" @blur="$v.form.route_name.$touch()" :state="$v.form.route_name.$dirty ? !$v.form.route_name.$anyError : null" > <span class="error" v-if="$v.form.route_name.$dirty && !$v.form.route_name.required">route name is required <b-form-group id="input-group-3" label="Is Active:" label-for="input-3"> <b-form-select id="is_active" v-model="form.is_active" :options="activeOptions" ></b-form-select> </b-form-group> </b-col> </b-row> <b-row> <b-col cols="12" md="12" align="center"> <b-button type="submit" variant="outline-primary">Submit <b-button type="reset" variant="outline-danger">Reset </b-form> <b-col cols="0" md="2" class="bgtransparent"> </b-row> </b-card> </div> </template> <script> import { required, minLength, between,numeric,email,sameAs} from 'vuelidate/lib/validators'; import { helpers } from 'vuelidate/lib/validators'; export default { data() { return { form: { menu_name: '', type: 'ROOT', parent_type: '', parent_id: '', sl_no: '', route_path: '', route_name: '', is_active:'1' }, activeOptions: [{ text: 'Yes', value: 1 },{ text: 'No', value: 0 }], typeOptions: [{ text: 'ROOT', value: 'ROOT' },{ text: 'TREE', value: 'TREE' },{ text: 'MENU', value: 'MENU' }], parentTypeOptions: [{ text: 'Parent', value: 'parent'},{ text: 'Sub-Parent', value: 'subparent'},{ text: 'Child', value: 'child'}], parentOptions: [], defaultOption:[{ text: 'Select One', value:'' }], } }, validations: { form:{ menu_name: { required, minLength: minLength(3) }, sl_no: { required, numeric }, route_path: { required }, route_name: { required } } }, created(){ this.checkIsLog(); this.list(); }, updated(){ }, methods: { checkIsLog(){ if(localStorage.getItem('userData') == null){ this.$router.push({name:'/',query:{msg:['pl']}}); } }, onSubmit(event) { event.preventDefault(); this.$v.$touch(); if (this.$v.$invalid) { this.submitStatus = 'ERROR'; } else { if(JSON.parse(localStorage.getItem('userData')).id){ const data = { menu_name:this.form.menu_name, type:this.form.type, parent_type:this.form.parent_type, parent_id:this.form.parent_id, route_path:this.form.route_path, route_name:this.form.route_name, sl_no:this.form.sl_no, is_active:this.form.is_active, create_by:JSON.parse(localStorage.getItem('userData')).id } this.$store.dispatch('addMenu',data) .then(() => { if(this.$store.getters.getNotifications.type){ this.$notify({ group: this.$store.getters.getNotifications.group, type: this.$store.getters.getNotifications, title: 'Message', text: this.$store.getters.getNotifications.message, duration: 3000, speed: 300 }); } this.$store.commit('remove_notification'); this.form.menu_name = ''; this.form.type = ''; this.form.parent_type = ''; this.form.parent_id = ''; this.form.sl_no = ''; this.form.route_path = ''; this.form.route_name = ''; this.form.is_active ='1'; }); }else{ this.$router.push({page:'home'}); this.$notify({ group:'message1', type: 'error', title: 'Message', text:'Please login first', duration: 3000, speed: 300 }); } } }, onReset(event) { event.preventDefault() this.form.menu_name = ''; this.form.type = ''; this.form.parent_type = ''; this.form.parent_id = ''; this.form.sl_no = ''; this.form.route_path = ''; this.form.route_name = ''; this.form.is_active ='1'; }, list(){ this.$store.dispatch('getPosMenuFilterList',{ menu_name:'', type:'', is_active: 1, }).then(()=>{ if(this.$store.getters.allPosMenu[0].id){ let allMenu =[]; this.$store.getters.allPosMenu.forEach(function(value, key){ let menuLis ={ text:value.menu_name, value:value.id }; if(! allMenu.find(x => x.value === value.id)) { allMenu.push(menuLis); } }); this.parentOptions = allMenu; } }); } }, computed:{ }, watch:{ } } </script>
create MenuList.vue file in the location:resources\js\components\block\menu and add the following code:
<template> <div> <div class="infoHeader"> <b-row> <b-col cols="8" md="6"><h4>Menu Information[list]</h4></b-col> <b-col cols="4" md="6"> <div class="rightAlign"> <b-button v-b-toggle.collapse-1 variant="outline-secondary" class="btn_custom">Search</b-button> <router-link :to="{name:'ad_menu_add'}"><b-button variant="outline-info" class="btn_custom"><i class="fas fa-plus"> Add</b-button></router-link> </div> </b-col> </b-row> </div> </b-jumbotron> <b-card bg-variant="light"> <b-row> <b-col cols="0" md="2" class="bgtransparent"></b-col> <b-col cols="12" md="8" class="formStyle"> <div class="searchForm"> <b-collapse id="collapse-1" class="mt-2"> <b-card> <b-row> <b-col cols="12" md="3"> <b-form-group id="input-group-1" label="Menu Name" label-for="input-1" description="" > <b-form-input id="company_name" v-model="search.menu_name" type="text" placeholder="" required > <b-col cols="12" md="3"> <b-form-group id="input-group-3" label="Type:" label-for="input-3"> <b-form-select id="is_active" v-model="search.type" :options="typeOptions" > <b-col cols="12" md="3"> <b-form-group id="input-group-3" label="Is Active:" label-for="input-3"> <b-form-select id="is_active" v-model="search.is_active" :options="defaultOption.concat(activeOptions)" required > <b-col cols="12" md="3"> <b-form-group id="input-group-3" label=" " label-for="input-3" description="" > <b-button class="searchMarginTop" v-on:click="searchList">Search</b-button> <b-button class="searchMarginTop" v-on:click="searchListReset">Reset</b-button> </b-form-group> </b-col> </b-row> </b-card> </b-collapse> </div> <div class="table-responsive"> <table class="table table-striped table-hover table-bordered"> <tr> <th>Sl. <th>Menu Name <th>Type <th>Parent <th>Sl No <th>Route Path <th>Route Name <th>Create Date <th>Create By <th>Is Active <th>Action <tr v-for="(allPosCom,index) in pageOfItems" :key="index"> <td> {{index+1}} <td> {{allPosCom.menu_name}} <td> {{allPosCom.type}} <td>{{allPosCom.parent_menu_name}} <td> {{allPosCom.sl_no}} <td> {{allPosCom.route_path}} <td> {{allPosCom.route_name}} <td> {{allPosCom.create_date | formatDate(allPosCom.create_date)}} <td> {{allPosCom.create_by_name}} <td> <span v-if="allPosCom.is_active">Yes <span v-else>No <td> <span class="actionStyle cursor" title="edit"><router-link :to="{name:'ad_menu_edit',params: { id: allPosCom.id }}"><i class="fas fa-edit actionEdit"> <span class="actionStyle cursor" title="view"><router-link :to="{name:'ad_menu_view',params: { id: allPosCom.id }}"><i class="fas fa-eye actionView"> <span class="actionStyle cursor" title="delete" @click="deleteMenu(allPosCom.id)"><i class="fas fa-trash actionDel"> </td> </tr> </table> </div> <jw-pagination :items="this.$store.getters.allPosMenu" :pageSize="20" @changePage="onChangePage"> </b-col> <b-col cols="0" md="2" class="bgtransparent"></b-col> </b-row> </b-card> </div> </template> <script> import Vue from "vue"; import axios from "axios"; import moment from 'moment'; import manualConfig from "../../config/configManual"; Vue.filter('upper', function (value) { if(value){ return value.toUpperCase(); } }); Vue.filter('formatDate', function(value) { if (value) { return moment(String(value)).format('DD/MM/YYYY hh:mm'); } }); export default { data() { return { pageOfItems: [], activeOptions: [{ text: 'Yes', value: 'yes' },{ text: 'No', value: 'no' }], typeOptions: [{ text: 'ROOT', value: 'ROOT' },{ text: 'TREE', value: 'TREE' },{ text: 'MENU', value: 'MENU' }], search: { menu_name: '', type: '', parent_type: '', parent_id: '', is_active:'' }, isDel:null, defaultOption:[{ text: 'Select One', value:'' }], } }, beforeCreate(){ //alert("before created"); }, created(){ this.checkIsLog(); this.list(); }, beforeMount(){ //alert("before mounted"); }, mounted(){ //alert("mounted"); }, beforeUpdate(){ //alert("beforeUpdate"); }, updated(){ //alert("update"); }, beforeDestroy() { //alert("before destroy"); }, destroyed() { //alert("destroy"); }, methods:{ checkIsLog(){ if(localStorage.getItem('userData') == null){ this.$router.push({name:'/',query:{msg:['pl']}}); } }, onChangePage(pageOfItems) { this.pageOfItems = pageOfItems; }, searchList(event){ event.preventDefault(), this.$Progress.start(); this.$store.dispatch('getPosMenuFilterList',{ menu_name: this.search.menu_name, type:this.search.type, is_active: this.search.is_active }).then(()=>{ this.$Progress.finish(); }); }, searchListReset(event){ this.$Progress.start(); event.preventDefault(); this.search.menu_name =''; this.search.type =''; this.search.is_active = ''; this.$store.dispatch('getPosMenuFilterList',{ menu_name: this.search.menu_name, type:this.search.type, is_active: this.search.is_active }).then(()=>{ this.$Progress.finish(); }); }, deleteMenu(pid){ const data ={id:pid}; this.$store.dispatch('deleteMenu',data) .then(()=>{ this.list(); if(this.$store.getters.getNotifications.type){ this.$notify({ group: this.$store.getters.getNotifications.group, type: this.$store.getters.getNotifications.type, title: 'Message', text: this.$store.getters.getNotifications.message, duration: 3000, speed: 300 }); } this.$store.commit('remove_notification'); }); }, list(){ this.$store.dispatch('getPosMenuFilterList',{ menu_name: this.search.menu_name, type: this.search.type, is_active: this.search.is_active }).then(()=>{ }); }, }, computed:{ } } </script>
create MenuEditForm.vue file in the location:resources\js\components\block\menu and add the following code:
<template> <div> <div class="infoHeader"> <b-row> <b-col cols="8" md="6"><h4>Menu Information[edit] <b-col cols="4" md="6"> <div class="rightAlign"> <router-link :to="{name:'ad_menu_list'}"><span><b-button variant="outline-info" class="btn_custom"><i class="fas fa-list"></i> List</b-button></router-link> </div> </b-col> </b-row> </div> </b-jumbotron> <b-card bg-variant="light"> <b-row> <b-col cols="0" md="2" class="bgtransparent"></b-col> <b-col cols="12" md="8" class="formStyle"> <b-form @submit.prevent="onupdate"> <b-row> <b-col cols="12" md="6"> <b-form-group id="input-group-1" label="Menu Name" label-for="input-1" description="" > <b-form-input id="company_name" v-model="form.menu_name" type="text" placeholder="Enter menu name" @blur="$v.form.menu_name.$touch()" :state="$v.form.menu_name.$dirty ? !$v.form.menu_name.$anyError : null" ></b-form-input> <span class="error" v-if="$v.form.menu_name.$dirty && !$v.form.menu_name.required">menu name is required</span> <span class="error" v-if="$v.form.menu_name.$dirty && !$v.form.menu_name.minLength">menu name must have at least {{$v.form.menu_name.$params.minLength.min}} letters.</span> </b-form-group> <b-form-group id="input-group-3" label="Type:" label-for="input-3"> <b-form-select id="is_active" v-model="form.type" :options="typeOptions" ></b-form-select> </b-form-group> <b-form-group id="input-group-3" label="Parent:" label-for="input-3"> <b-form-select id="is_active" v-model="form.parent_id" :options="defaultOption.concat(parentOptions)" ></b-form-select> </b-form-group> <b-form-group id="input-group-1" label="Sl No" label-for="input-1" description="" > <b-form-input id="company_name" v-model="form.sl_no" type="text" placeholder="Enter Sl No" @blur="$v.form.sl_no.$touch()" :state="$v.form.sl_no.$dirty ? !$v.form.sl_no.$anyError : null" > <span class="error" v-if="$v.form.sl_no.$dirty && !$v.form.sl_no.required">sl no is required <b-col cols="12" md="6" > <b-form-group id="input-group-1" label="Route Path" label-for="input-1" description="" > <b-form-input id="company_name" v-model="form.route_path" type="text" placeholder="Enter route path" @blur="$v.form.route_path.$touch()" :state="$v.form.route_path.$dirty ? !$v.form.route_path.$anyError : null" > <span class="error" v-if="$v.form.route_path.$dirty && !$v.form.route_path.required">route path is required </b-form-group> <b-form-group id="input-group-1" label="Route Name" label-for="input-1" description="" > <b-form-input id="company_name" v-model="form.route_name" type="text" placeholder="Enter route name" @blur="$v.form.route_name.$touch()" :state="$v.form.route_name.$dirty ? !$v.form.route_name.$anyError : null" > <span class="error" v-if="$v.form.route_name.$dirty && !$v.form.route_name.required">route name is required <b-form-group id="input-group-3" label="Is Active:" label-for="input-3"> <b-form-select id="is_active" v-model="form.is_active" :options="activeOptions" > <b-row> <b-col cols="12" md="12" align="center"> <b-button type="submit" variant="outline-primary">Submit <b-button type="reset" variant="outline-danger">Reset </b-col> </b-row> </b-form> </b-col> <b-col cols="0" md="2" class="bgtransparent"> </b-row> </b-card> </div> </template> <script> import axios from 'axios'; import manualConfig from "../../config/configManual"; import { required, minLength, between,numeric,email,sameAs} from 'vuelidate/lib/validators'; import { helpers } from 'vuelidate/lib/validators'; export default { data() { return { form: { id:'', menu_name: '', type: 'menu', parent_type: 'menu', parent_id: '', sl_no: '', route_path: '', route_name: '', is_active:'' }, activeOptions: [{ text: 'Yes', value: 1 },{ text: 'No', value: 0 }], typeOptions: [{ text: 'ROOT', value: 'ROOT' },{ text: 'TREE', value: 'TREE' },{ text: 'MENU', value: 'MENU' }], parentTypeOptions: [{ text: 'Parent', value: 'parent'},{ text: 'Sub-Parent', value: 'subparent'},{ text: 'Child', value: 'child'}], parentOptions: [], defaultOption:[{ text: 'Select One', value:'' }], url_data:null } }, validations: { form:{ menu_name: { required, minLength: minLength(3) }, sl_no: { required, numeric }, route_path: { required }, route_name: { required } } }, created(){ //alert("created"); this.checkIsLog(); this.url_data = (this.$route.params.id)? this.$route.params.id:''; this.getData(); this.list(); }, updated(){ //alert("update"); }, mounted(){ //this.checkRedirect(); }, methods: { checkIsLog(){ if(localStorage.getItem('userData') == null){ this.$router.push({name:'/',query:{msg:['pl']}}); } }, onupdate(event) { event.preventDefault(); this.$v.$touch(); if (this.$v.$invalid) { this.submitStatus = 'ERROR'; } else { if(JSON.parse(localStorage.getItem('userData')).id && this.form.id){ const data = { id:this.form.id, menu_name:this.form.menu_name, type:this.form.type, parent_type:this.form.parent_type, parent_id:this.form.parent_id, sl_no:this.form.sl_no, route_path:this.form.route_path, route_name:this.form.route_name, is_active:this.form.is_active, update_by:JSON.parse(localStorage.getItem('userData')).id } this.$store.dispatch('updateMenu',data) .then(() => { if(this.$store.getters.getNotifications.type){ this.$notify({ group: this.$store.getters.getNotifications.group, type: this.$store.getters.getNotifications, title: 'Message', text: this.$store.getters.getNotifications.message, duration: 3000, speed: 300 }); } this.$store.commit('remove_notification'); }); }else{ this.$router.push({page:'home'}); this.$notify({ group:'message1', type: 'error', title: 'Message', text:'Please login first', duration: 3000, speed: 300 }); } } }, getData(){ if(this.url_data){ this.$store.dispatch('editPosMenu',{ id:this.url_data }).then(()=>{ if(this.$store.getters.editPosMenuList.id){ this.form.id = this.$store.getters.editPosMenuList.id; this.form.menu_name = this.$store.getters.editPosMenuList.menu_name; this.form.type = this.$store.getters.editPosMenuList.type; this.form.parent_type = this.$store.getters.editPosMenuList.parent_type; this.form.parent_id = (this.$store.getters.editPosMenuList.parent_id)? this.$store.getters.editPosMenuList.parent_id:''; this.form.sl_no = this.$store.getters.editPosMenuList.sl_no; this.form.route_path = this.$store.getters.editPosMenuList.route_path; this.form.route_name = this.$store.getters.editPosMenuList.route_name; this.form.is_active = this.$store.getters.editPosMenuList.is_active; }else{ this.$router.push({ name: 'ad_menu_list' }); } }).catch(error => { console.log(error) }); }else{ this.$router.push({ name: 'ad_menu_list' }); } }, checkRedirect(){ if(! this.url_data){ this.$router.push({ name: 'ad_menu_list' }); } }, list(){ this.$store.dispatch('getPosMenuFilterList',{ menu_name:'', type:'', is_active: 1, }).then(()=>{ if(this.$store.getters.allPosMenu[0].id){ let allMenu =[]; this.$store.getters.allPosMenu.forEach(function(value, key){ let menuLis ={ text:value.menu_name, value:value.id }; if(! allMenu.find(x => x.value === value.id)) { allMenu.push(menuLis); } }); this.parentOptions = allMenu; } }); }, }, computed:{ }, destroyed() { //alert("destroy page refresh"); } } <create MenuViewForm.vue file in the location:resources\js\components\block\menu and add the following code:
<template> <div> <div class="infoHeader"> <b-row> <b-col cols="8" md="6"></b-form-group> <b-form-group id="input-group-3" label="Type:" label-for="input-3"> <span class="viewField">{{this.form.type}} </b-form-group> <b-form-group id="input-group-3" label="Parent Type:" label-for="input-3"> <span class="viewField">{{this.form.parent_type}} </b-form-group> <b-form-group id="input-group-3" label="Parent:" label-for="input-3"> <span class="viewField">{{this.form.parent_menu}} </b-form-group> </b-col> <b-col cols="12" md="6" > <b-form-group id="input-group-1" label="Sl No" label-for="input-1" description="" > <span class="viewField">{{this.form.sl_no}} </b-form-group> <b-form-group id="input-group-1" label="Route Path" label-for="input-1" description="" > <span class="viewField">{{this.form.route_path}} </b-form-group> <b-form-group id="input-group-1" label="Route Name" label-for="input-1" description="" > <span class="viewField">{{this.form.route_name}} </b-form-group> <b-form-group id="input-group-3" label="Is Active:" label-for="input-3"> <span class="viewField"> <span v-if="this.form.is_active==1">Yes <span v-else>No </span> </b-form-group> </b-col> </b-row> </b-form> </b-col> <b-col cols="0" md="2" class="bgtransparent"> </b-row> </b-card> </div> </template> <script> import { required, minLength, between,numeric,email,sameAs} from 'vuelidate/lib/validators'; import { helpers } from 'vuelidate/lib/validators'; export default { data() { return { form: { menu_name: '', type: '', parent_type: '', parent_id: '', sl_no: '', route_path: '', route_name: '', is_active:'1', parent_menu:'', }, activeOptions: [{ text: 'Yes', value: 1 },{ text: 'No', value: 0 }], typeOptions: [{ text: 'Menu', value: 'menu' },{ text: 'form', value: 'form' }], parentTypeOptions: [{ text: 'Menu', value: 'menu'},{ text: 'Submenu', value: 'submenu'},{ text: 'Child', value: 'child'}], parentOptions: [], defaultOption:[{ text: 'Select One', value:'' }], } }, created(){ //alert("created"); this.checkIsLog(); this.url_data = (this.$route.params.id)? this.$route.params.id:''; this.getData(); this.list(); }, updated(){ }, methods: { checkIsLog(){ if(localStorage.getItem('userData') == null){ this.$router.push({name:'/',query:{msg:['pl']}}); } }, getData(){ if(this.url_data){ this.$store.dispatch('editPosMenu',{ id:this.url_data }).then(()=>{ if(this.$store.getters.editPosMenuList.id){ this.form.id = this.$store.getters.editPosMenuList.id; this.form.menu_name = this.$store.getters.editPosMenuList.menu_name; this.form.type = this.$store.getters.editPosMenuList.type; this.form.parent_type = this.$store.getters.editPosMenuList.parent_type; this.form.parent_id = this.$store.getters.editPosMenuList.parent_id; this.form.parent_menu = this.$store.getters.editPosMenuList.parent_menu; this.form.sl_no = this.$store.getters.editPosMenuList.sl_no; this.form.route_path = this.$store.getters.editPosMenuList.route_path; this.form.route_name = this.$store.getters.editPosMenuList.route_name; this.form.is_active = this.$store.getters.editPosMenuList.is_active; }else{ this.$router.push({ name: 'ad_menu_list' }); } }).catch(error => { console.log(error) }); }else{ this.$router.push({ name: 'ad_menu_list' }); } }, checkRedirect(){ if(! this.url_data){ this.$router.push({ name: 'ad_menu_list' }); } }, list(){ this.$store.dispatch('getPosMenuFilterList',{ menu_name:'', type:'', is_active: 1, }).then(()=>{ if(this.$store.getters.allPosMenu[0].id){ let allMenu =[]; this.$store.getters.allPosMenu.forEach(function(value, key){ let menuLis ={ text:value.menu_name, value:value.id }; if(! allMenu.find(x => x.value === value.id)) { allMenu.push(menuLis); } }); this.parentOptions = allMenu; } }); } }, computed:{ }, watch:{ } } </script>Menu Information[view]
<b-col cols="4" md="6"> <div class="rightAlign"> <router-link :to="{name:'ad_menu_list'}"><b-button variant="outline-info" class="btn_custom"><i class="fas fa-list"></i> List</b-button></router-link> </div> </b-col> </b-row> </div> </b-jumbotron> <b-card bg-variant="light"> <b-row> <b-col cols="0" md="2" class="bgtransparent"></b-col> <b-col cols="12" md="8" class="formStyle"> <b-form> <b-row> <b-col cols="12" md="6" > <b-form-group id="input-group-1" label="Menu Name" label-for="input-1" description="" > <span class="viewField">{{this.form.menu_name}}
Total : 19462
Today :59
Today Visit Country :