Untitled
unknown
plain_text
4 years ago
32 kB
6
Indexable
<template> <app-layout> <template #header> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> Daftar Alamat Pengiriman </h2> </template> <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8"> <jet-validation-errors class="mb-4"/> <transition name="fade"> <jet-form-section @submitted="createNewAddress" v-if="formCreateAddress"> <template #title> Tambah Alamat Pengiriman </template> <template #description> Silahkan lengkapi isian pada form berikut untuk menambahkan alamat pengiriman yang baru. </template> <template #form> <div class="col-span-6 sm:col-span-8"> <jet-label for="address_name" value="Nama Lokasi"/> <jet-input id="address_name" type="text" class="mt-1 block w-full" autocomplete="on" autofocus v-model.trim="form.address_name" placeholder="Cth: Rumah, Apartemen, Kantor, dll."/> <jet-input-error :message="form.errors.address_name" class="mt-2"/> </div> <div class="col-span-6 sm:col-span-8"> <jet-label for="address_contact_name" value="Nama Penerima"/> <jet-input id="address_contact_name" type="text" class="mt-1 block w-full" autocomplete="name" autocapitalize="words" v-model="form.address_contact_name" placeholder="Masukkan nama penerima barang"/> <jet-input-error :message="form.errors.address_contact_name" class="mt-2"/> </div> <div class="col-span-6 sm:col-span-8"> <jet-label for="address_contact_phone" value="Nomor Kontak Penerima (Telp./WA)"/> <jet-input id="address_contact_phone" type="tel" class="mt-1 block w-full" autocomplete="tel" v-model.number="form.address_contact_phone" placeholder="62812xxx"/> <jet-input-error :message="form.errors.address_contact_phone" class="mt-2"/> </div> <div class="col-span-6 sm:col-span-8"> <jet-label for="address_destination" value="Alamat Lengkap"/> <textarea rows="5" class="shadow-sm border-gray-300 focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50 rounded-md mt-1 block w-full" id="address_destination" placeholder="Masukkan Alamat Lengkap" autocomplete="street-address" v-model="form.address_destination"></textarea> <jet-input-error :message="form.errors.address_destination" class="mt-2"/> </div> <div class="col-span-6 sm:col-span-8"> <jet-label value="Pilih Wilayah"/> <Multiselect v-model.lazy="form.address_area" v-bind="selectArea"> </Multiselect> <jet-input-error :message="form.errors.address_area" class="mt-2"/> </div> <div class="col-span-6 sm:col-span-8"> <jet-label for="searchmap" value="Cari Lokasi Anda Dalam Peta" /> <jet-input id="searchmap" type="text" class="mt-1 block w-full" placeholder="Cari Lokasi" autofocus="autofocus" required /> </div> <div id="mapcanvas" class="col-span-6 sm:col-span-8" ref="mapcanvas">Test</div> <div class="col-span-6 sm:col-span-8"> <jet-label for="address_provinsi" value="Propinsi" /> <jet-input id="address_provinsi" type="text" class="mt-1 block w-full" autocomplete="address_provinsi" v-model="form.address_provinsi" readonly/> <jet-input-error :message="form.errors.address_provinsi" class="mt-2" /> </div> <div class="col-span-6 sm:col-span-8"> <jet-label for="latitude" value="Latitude" /> <jet-input id="lat" type="text" class="mt-1 block w-full" autocomplete="address_latitude" v-model="form.address_latitude" readonly/> <jet-input-error :message="form.errors.address_latitude" class="mt-2" /> </div> <div class="col-span-6 sm:col-span-8"> <jet-label for="longitude" value="Longitude" /> <jet-input id="lng" type="text" class="mt-1 block w-full" autocomplete="address_longitude" v-model="form.address_longitude" readonly/> <jet-input-error :message="form.errors.address_longitude" class="mt-2" /> </div> <div class="col-span-6 sm:col-span-8"> <div class="flex items-center"> <input id="address_default" v-model="form.address_default" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"> <label for="address_default" class="ml-2 block text-gray-900"> Jadikan alamat utama </label> </div> <jet-input-error :message="form.errors.address_default" class="mt-2"/> </div> </template> <template #actions> <jet-action-message :on="form.recentlySuccessful" class="mr-3"> Berhasil menyimpan alamat pengiriman yang baru. </jet-action-message> <jet-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> Simpan Perubahan </jet-button> </template> </jet-form-section> </transition> <div class="relative my-5"> <div class="absolute inset-0 flex items-center" aria-hidden="true"> <div class="w-full border-t border-gray-200"></div> </div> <div class="relative flex justify-center"> <button id="test" @click="formCreateAddress = !formCreateAddress" type="button" class="inline-flex items-center shadow-sm px-4 py-1.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" > <!-- Heroicon name: solid/plus-sm --> <svg class="-ml-1.5 mr-1 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /> </svg> <span>Tambah Alamat</span> </button> </div> </div> <div v-for="(address, index) in addresses" :key="address.address_id"> <div class="bg-white shadow overflow-hidden sm:rounded-lg"> <div class="px-4 py-5 sm:px-6 flex justify-between items-center align-middle"> <div> <h3 class="text-lg leading-6 font-medium text-gray-900"> Alamat Pengiriman ke-{{ index + 1 }} </h3> <p class="mt-1 max-w-2xl text-sm text-gray-500" v-if="address.address_default"> Alamat ini merupakan alamat pengiriman utama. </p> </div> <button @click="edit(address)" type="button" class="inline-flex items-center p-1.5 border border-transparent rounded-md shadow-sm text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500"> <PencilAltIcon class="h-5 w-5" aria-hidden="true" /> </button> </div> <div class="border-t border-gray-200"> <dl> <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Nama Lokasi </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.address_name }} </dd> </div> <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Nama Penerima </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.address_contact_name }} </dd> </div> <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Nomor Kontak Penerima </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.address_contact_phone }} </dd> </div> <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Alamat Lengkap </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.address_destination }} </dd> </div> <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Kode Pos </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.address_postal_code }} </dd> </div> <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Kelurahan </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.address_kelurahan }} </dd> </div> <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Kecamatan </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.address_kecamatan }} </dd> </div> <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Kabupaten/Kota </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.address_kabupaten }} </dd> </div> <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Provinsi </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.address_provinsi }} </dd> </div> <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <dt class="text-sm font-medium text-gray-500"> Dibuat pada </dt> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> {{ address.created_at }} </dd> </div> <div class="px-4 py-3 bg-gray-50 text-right sm:px-6"> <button @click="deleteRow(address)" type="button" class="inline-flex items-center px-9 py-3 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-900 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150"> Hapus Alamat </button> </div> </dl> </div> </div> <div class="py-5"> <div class="border-t border-gray-200"></div> </div> </div> </div> <div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400" v-if="isOpen"> <div class="flex items-end justify-center min-h-screen text-center sm:block sm:p-0"> <div class="fixed inset-0 transition-opacity"> <div class="absolute inset-0 bg-gray-500 opacity-75"></div> </div> <!-- This element is to trick the browser into centering the modal contents. --> <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span> <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle max-w-lg w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline"> <form @submit.prevent="updateAddress(form)"> <div class="bg-white px-4 pt-5 pb-4 sm:p-9 sm:pb-4"> <div> <input type="hidden" v-model.trim="form.address_id"> <div class="mb-4"> <jet-label for="exampleFormControlInput1" value="Nama Lokasi"/> <jet-input id="exampleFormControlInput1" type="text" class="mt-1 block w-full" autocomplete="on" v-model.trim="form.address_name" placeholder="Cth: Rumah, Apartemen, Kantor, dll."/> <jet-input-error :message="form.errors.address_name" class="mt-2"/> </div> <div class="mb-4"> <jet-label for="exampleFormControlInput2" value="Nama Penerima"/> <jet-input id="exampleFormControlInput2" type="text" class="mt-1 block w-full" autocomplete="name" autocapitalize="words" v-model="form.address_contact_name" placeholder="Masukkan nama penerima barang"/> <jet-input-error :message="form.errors.address_contact_name" class="mt-2"/> </div> <div class="mb-4"> <jet-label for="exampleFormControlInput3" value="Nomor Kontak Penerima (Telp./WA)"/> <jet-input id="exampleFormControlInput3" type="tel" class="mt-1 block w-full" autocomplete="tel" v-model.number="form.address_contact_phone" placeholder="62812xxx"/> <jet-input-error :message="form.errors.address_contact_phone" class="mt-2"/> </div> <div class="mb-4"> <jet-label for="exampleFormControlInput4" value="Alamat Lengkap"/> <textarea rows="5" class="shadow-sm border-gray-300 focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50 rounded-md mt-1 block w-full" id="exampleFormControlInput4" placeholder="Masukkan Alamat Lengkap" autocomplete="street-address" v-model="form.address_destination"></textarea> <jet-input-error :message="form.errors.address_destination" class="mt-2"/> </div> <div class="mb-4"> <jet-label value="Pilih Wilayah"/> <Multiselect v-model.lazy="form.address_area" v-bind="selectArea"> </Multiselect> <jet-input-error :message="form.errors.address_area" class="mt-2"/> </div> <div class="mb-4"> <div class="flex items-center"> <input id="exampleFormControlInput6" v-model="form.address_default" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"> <label for="exampleFormControlInput6" class="ml-2 block text-gray-900"> Jadikan alamat utama </label> </div> <jet-input-error :message="form.errors.address_default" class="mt-2"/> </div> </div> </div> <div class="px-6 py-4 bg-gray-100 text-right flex justify-end"> <jet-secondary-button @click="closeModal"> Batalkan </jet-secondary-button> <jet-button class="ml-2" :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> Simpan Perubahan </jet-button> </div> </form> </div> </div> </div> </app-layout> </template> <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } </style> <style src="@vueform/multiselect/themes/default.css"></style> <script> import AppLayout from '@/Layouts/AppLayout' import JetButton from '@/Jetstream/Button' import JetFormSection from '@/Jetstream/FormSection' import JetInput from '@/Jetstream/Input' import JetInputError from '@/Jetstream/InputError' import JetLabel from '@/Jetstream/Label' import JetActionMessage from '@/Jetstream/ActionMessage' import JetSecondaryButton from '@/Jetstream/SecondaryButton' import JetSectionBorder from '@/Jetstream/SectionBorder' import JetValidationErrors from '@/Jetstream/ValidationErrors' import Multiselect from '@vueform/multiselect' import { PencilAltIcon } from '@heroicons/vue/outline' import $ from 'jquery' export default { components: { AppLayout, JetActionMessage, JetButton, JetFormSection, JetInput, JetInputError, JetLabel, JetSecondaryButton, JetSectionBorder, JetValidationErrors, Multiselect, PencilAltIcon, }, props: [ 'user', 'addresses', 'create_new_address', 'areas', 'errors' ], data() { return { form: this.$inertia.form({ reseller_id: this.user.related_reseller.reseller_id, address_id: null, address_name: '', address_contact_name: '', address_contact_phone: '', address_destination: '', address_default: false, address_area: '', address_provinsi: '', address_latitude: '', address_longitude: '', }), editForm: Object, formCreateAddress: this.create_new_address, isOpen: false, selectArea: { value: null, placeholder: 'Kelurahan, Kecamatan, Kota, Kode Pos', filterResults: true, minChars: 1, resolveOnLoad: true, delay: 250, searchable: true, limit: 10, required: true, noOptionsText: 'Data kosong', noResultsText: 'Tidak ada data', // options: this.areas, options: async (query) => { return await fetchData(query) } }, } }, async mounted() { this.initializeHereMap() }, methods: { async initializeHereMap() { var marker; var lat = -6.1753924; var lng = 106.8271528; var map = new google.maps.Map(document.getElementById('mapcanvas'), { center: {lat: lat, lng: lng}, zoom: 15, apikey: this.apikey }); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const pos = { lat: position.coords.latitude, lng: position.coords.longitude, }; map.setCenter(pos); addMarker(position.coords.latitude, position.coords.longitude) }, () => { handleLocationError(true, map.getCenter()); } ); } else { // Browser doesn't support Geolocation handleLocationError(false, map.getCenter()); } function addMarker(lati, long) { marker = new google.maps.Marker({ position: { lat: lati, lng: long }, map: map, draggable: true }); var searchBox = new google.maps.places.SearchBox(document.getElementById('searchMap')); google.maps.event.addListener(searchBox, 'places_changed', function () { var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); console.log(places); for (i = 0; place = places[i]; i++) { bounds.extend(place.geometry.location); marker.setPosition(place.geometry.location); //set marker position new... for (var i = 0; i < place.address_components.length; i++) { for (var j = 0; j < place.address_components[i].types.length; j++) { // if (place.address_components[i].types[j] == "postal_code") { // $('#postal_code').val(place.address_components[i].long_name); // } // if (place.address_components[i].types[j] == "administrative_area_level_4") { // $('#exampleInputName2').val(place.address_components[i].long_name); // } // if (place.address_components[i].types[j] == "administrative_area_level_3") { // $('#address_provinsi').val(place.address_components[i].long_name); // } // if (place.address_components[i].types[j] == "administrative_area_level_2") { // $('#exampleInputName4').val(place.address_components[i].long_name); // } if (place.address_components[i].types[j] == "administrative_area_level_1") { $('#address_provinsi').val(place.address_components[i].long_name); } } } } $('#exampleTextarea1').val(document.getElementById('searchMap').value); map.fitBounds(bounds); map.setZoom(15); }); google.maps.event.addListener(marker, 'position_changed', function () { var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng(); var street = marker.formatted_address; $('#lat').val(lat); $('#lng').val(lng); }); } }, createNewAddress() { this.form.clearErrors() this.form.post(route('address.store'), { errorBag: 'createNewAddress', preserveScroll: true, onFinish: () => this.form.reset(), }); }, openModal: function () { this.isOpen = true }, closeModal: function () { this.isOpen = false }, edit: function (data) { this.editForm = Object.assign({}, data); console.log(data) this.form.address_id = this.editForm.address_id this.form.address_name = this.editForm.address_name this.form.address_contact_name = this.editForm.address_contact_name this.form.address_contact_phone = this.editForm.address_contact_phone this.form.address_destination = this.editForm.address_destination this.form.address_area = this.editForm.address_area this.form.address_default = this.editForm.address_default this.areas.shift() this.areas.unshift({ value: data.address_kecamatan + ", " + data.address_kelurahan + ", " + data.address_postal_code, label: data.address_kecamatan + ", " + data.address_kelurahan + ", " + data.address_postal_code, selected: true }) this.openModal(); }, updateAddress: function (form) { form._method = 'PUT' this.$inertia.post('/user/address/' + form.address_id, form, { errorBag: 'updateAddress', preserveScroll: true, onSuccess: page => { console.log(page) form.reset() this.closeModal() location.reload(); }, onError : errors => { console.log(errors); form.errors = Object.assign({}, errors) } }) // this.form.put(route('address.update', data.address_id), { // errorBag: 'updateAddress', // preserveScroll: true, // onFinish: visit => { // console.log(visit) // this.form.reset() // this.closeModal() // }, // }); }, deleteRow: function (data) { if (!confirm('Are you sure want to remove?')) return; data._method = 'DELETE'; this.$inertia.post('/user/address/' + data.address_id, data) location.reload(); } }, } const fetchData = async (query) => { let result, val, vals; await axios.get('https://api.sandbox.shipper.id/public/v1/details/'+ query+'?apiKey='+process.env.MIX_SHIPPER_API_KEY+'' ).then(res => { result = res.data.data.rows.map((item) => { if (item.city_name && item.suburb_name && item.area_name) { val += item.label + "," + item.value; vals = val.replace('undefined', ''); vals = vals.replace(/[|]/g, ','); return {value: vals, label: item.label} } }) }) return result; } // window.onload = function() { // console.log(document.getElementById('mapcanvas')); // if(document.getElementById('mapcanvas')){ // alert('jo'); // //Init for Vue // } else { // alert('no') // } // } </script> <style scoped> #mapcanvas { width: 100%; height: 250px; } </style>
Editor is loading...