Crud using vuex

By ukmodak | May 18th 2022 09:26:00 AM | viewed 14 times

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">

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}} </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>
bONEandALL
Visitor

Total : 4235

Today :31

Today Visit Country :

  • United States