Untitled

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