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