fix skit2

package.json

@@ -41,6 +41,7 @@
         "vue-class-component": "^7.2.6",
         "vue-property-decorator": "^9.1.2",
         "vue-router": "^3.5.3",
-        "vue-toastification": "^1.7.14"
+        "vue-toastification": "^1.7.14",
+        "vuelidate": "^0.7.7"
     }
 }

resources/js/app.js

@@ -15,6 +15,7 @@ import { createPopper } from "@popperjs/core"
 import Toast from "vue-toastification"
 import "vue-toastification/dist/index.css"
 import router from './routes'
+import Vuelidate from 'vuelidate'
 
 require('./bootstrap');
 
@@ -37,6 +38,7 @@ const options = {
     newestOnTop: true
 };
 
+Vue.use(Vuelidate)
 Vue.use (VueApexCharts)
 Vue.use (Alpine)
 Vue.use(VueCompositionAPI)
@@ -63,6 +65,9 @@ Vue.component('modal-component', require('./components/util/Modal.vue').default)
 Vue.component('searchpelanggan-component', require('./components/Searchpelanggan.vue').default)
 Vue.component('laporanakaun-component', require('./Akaun/Laporan.vue').default)
 
+Vue.component('details-pelanggan', require('./pages/Detailspelanggan.vue').default)
+
+
 
 Vue.component('apexchart', VueApexCharts)
 

resources/js/pages/Detailspelanggan.vue

@@ -0,0 +1,179 @@
+<template>
+         <form class="w-full mt-10 p-6 bg-white rounded-xl shadow">
+            
+          <div class="flex flex-wrap -mx-3 mb-6">
+            <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0 form-group" :class="{ 'form-group--error': $v.name.$error }">
+              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 form__label">
+                Nama
+              </label>
+              <input :class="{ 'border border-red-500 focus:border-red-500': $v.name.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.name.$model" type="text">
+              <div class="text-red-500 text-xs italic" v-if="!$v.name.required">Field is required</div>
+              <div class="text-red-500 text-xs italic" v-if="!$v.name.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
+              <!-- <tree-view :data="$v.name" :options="{rootObjectKey: '$v.name', maxDepth: 2}"></tree-view> -->
+            </div>
+            <div class="w-full md:w-1/3 px-3">
+              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Ic No
+              </label>
+              <input :class="{ 'border border-red-500 focus:border-red-500': $v.name.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.icno.$model" type="text" >
+              <div class="text-red-500 text-xs italic" v-if="!$v.icno.required">Field is required</div>
+              <div class="text-red-500 text-xs italic" v-if="!$v.icno.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
+            </div>
+          </div>
+          <div class="flex flex-wrap -mx-3 mb-6">
+            <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                No tel 1
+              </label>
+              <input :class="{ 'border border-red-500 focus:border-red-500': $v.name.$error }" class="appearance-none block w-full bg-gray-200 border border-gray-200 text-gray-700 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.notel1.$model" type="text" placeholder="Jane">
+              <p class="text-red-500 text-xs italic" v-if="!$v.notel1.required">Please fill out this field.</p>
+            </div>
+            <div class="w-full md:w-1/3 px-3">
+              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                No tel 2
+              </label>
+              <input :class="{ 'border border-red-500 focus:border-red-500': $v.name.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.notel2.$model" type="text">
+            </div>
+            <div class="w-full md:w-1/3 px-3">
+              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                No Pelanggan
+              </label>
+              <input :class="{ 'border border-red-500 focus:border-red-500': $v.name.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.nopel.$model" type="text">
+            </div>
+          </div>
+          <div class="flex flex-wrap -mx-3 mb-6">
+            <div class="w-full md:w-1/3 px-3">
+              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Alamat
+              </label>
+              <textarea :class="{ 'border border-red-500 focus:border-red-500': $v.name.$error }" class="h-32 appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.alamat.$model" type="password"></textarea>
+              <p class="text-gray-600 text-xs italic">Make it as long and as crazy as you'd like</p>
+            </div>
+            <div class="w-full md:w-1/3 px-3">
+              <div class="flex flex-wrap -mx-3 mb-6">
+              <div class="md:w-1/2">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                  Poskod
+                </label>
+                  <div class="relative">
+                    <input :class="{ 'border border-red-500 focus:border-red-500': $v.name.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.poskod.$model" type="text" placeholder="90210">
+                  </div>
+                  <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2">
+                  Daerah
+                  </label>
+                  <div class="relative">
+                  <input :class="{ 'border border-red-500 focus:border-red-500': $v.name.$error }" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.koddaerah.$model" type="text" placeholder="Albuquerque">
+                  </div>
+              </div>
+              <div class="md:w-1/2 pl-2">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                  Negeri
+                </label>
+                <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.kodnegeri.$model" type="text" placeholder="Albuquerque">
+              </div>
+              </div>
+            </div>
+              <div class="w-full md:w-1/3 px-3">
+              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Nota
+              </label>
+              <textarea class="h-32 appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model.trim="$v.nota.$model" type="password"></textarea>
+              <p class="text-gray-600 text-xs italic">Make it as long and as crazy as you'd like</p>
+            </div>
+          </div>
+      
+
+          <div class="flex items-center justify-between mt-4">
+           
+            <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
+            </a>
+            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
+              Kemaskini
+            </button>
+          </div>
+
+          </form>
+</template>
+
+<script>
+import { required, minLength, between } from 'vuelidate/lib/validators'
+
+export default {
+  props: {
+		customer: {
+			type: Object,
+      required: true,
+		}
+	},
+  data() {
+    return {
+      name: this.customer.nama,
+      icno: (this.customer.kpbaru) ? this.customer.kpbaru : this.customer.kplama,
+      notel1: this.customer.telefon,
+      notel2: this.customer.telefon2,
+      nopel: this.customer.nopelanggan,
+      alamat: this.customer.alamat1,
+      nota: this.customer.nota,
+      poskod: this.customer.poskod,
+      koddaerah: '',
+      kodnegeri: ''
+    }
+  },
+  setup: (props, context) => {
+    // console.log(props.customer)
+  },
+  created() {
+    this.axios.get('http://localhost:8000/api/poskod/' + this.poskod).then(response => {
+      this.koddaerahCall(response.data.kodnegeri,response.data.koddaerah)
+    });
+  },
+  methods: {
+    koddaerahCall: function(negeri,daerah) {
+      this.axios.get('http://localhost:8000/api/negeri/' + negeri).then(response => {
+        this.kodnegeri = response.data.negeri
+      });
+
+      this.axios.get('http://localhost:8000/api/daerah/' + daerah).then(response => {
+        this.koddaerah = response.data.namadaerah
+      });
+
+    }
+  },
+  validations: {
+    name: {
+      required,
+      minLength: minLength(4)
+    },
+    icno: {
+      required,
+      minLength: minLength(4)
+    },
+    notel1: {
+      required,
+      minLength: minLength(4)
+    },    
+    notel2: {
+      minLength: minLength(4)
+    },    
+    nopel: {
+      minLength: minLength(4)
+    },    
+    alamat: {
+      minLength: minLength(4)
+    },    
+    nota: {
+      minLength: minLength(4)
+    },    
+    poskod: {
+      minLength: minLength(4)
+    },    
+    koddaerah: {
+      minLength: minLength(4)
+    },    
+    kodnegeri: {
+      minLength: minLength(4)
+    }
+  }
+    
+}
+</script>

resources/views/pelanggan/detailspelanggan.blade.php

@@ -9,72 +9,7 @@
 
          <breadcrumb :items="[{ 'title' : 'Pelanggan', 'icon' : 'fas fa-users' },{ 'title' : 'Butiran', 'icon' : 'fas fa-users' }]"></breadcrumb>
        
-         <form class="w-full mt-10 p-6 bg-white rounded-xl shadow">
+        <details-pelanggan :customer="{{ json_encode($customer_info) }}"></details-pelanggan>
-            
-          <div class="flex flex-wrap -mx-3 mb-6">
-            <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
-              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
-                First Name
-              </label>
-              <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="Jane">
-              <p class="text-red-500 text-xs italic">Please fill out this field.</p>
-            </div>
-            <div class="w-full md:w-1/2 px-3">
-              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
-                Last Name
-              </label>
-              <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" placeholder="Doe">
-            </div>
-          </div>
-          <div class="flex flex-wrap -mx-3 mb-6">
-            <div class="w-full px-3">
-              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-password">
-                Alamat
-              </label>
-              <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-password" type="password" placeholder="******************">
-              <p class="text-gray-600 text-xs italic">Make it as long and as crazy as you'd like</p>
-            </div>
-          </div>
-          <div class="flex flex-wrap -mx-3 mb-2">
-            <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
-              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
-                City
-              </label>
-              <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-city" type="text" placeholder="Albuquerque">
-            </div>
-            <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
-              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
-                State
-              </label>
-              <div class="relative">
-                <select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
-                  <option>New Mexico</option>
-                  <option>Missouri</option>
-                  <option>Texas</option>
-                </select>
-                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                  <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
-                </div>
-              </div>
-            </div>
-            <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
-              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
-                Zip
-              </label>
-              <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-zip" type="text" placeholder="90210">
-            </div>
-          </div>
-
-          <div class="flex items-center justify-between mt-4">
-           
-            <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
-            </a>
-            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
-              Update Profile
-            </button>
-          </div>
-
-          </form>
 
       </div>
    </main>