Iniziato il SignUp

src/components/views/form/simpleForm/modalAdress.vue

@@ -0,0 +1,98 @@
+<template>
+  <q-modal ref="modal" @open="startMap()">
+    <div class="card fit">
+      <div class="card-title bg-teal text-white">
+        Adress of {{user.name}}
+      </div>
+      <div class="card-content bg-white">
+        <div id="map"></div>
+        <div class="wrap gutter">
+          <div class="width-1of1">
+            <div class="floating-label">
+              <input required class="full-width" v-model="user.address.street">
+              <label>Street</label>
+            </div>
+          </div>
+          <div class="width-1of1">
+            <div class="floating-label">
+              <input required class="full-width" v-model="user.address.suite">
+              <label>Suite</label>
+            </div>
+          </div>
+          <div class="width-1of1">
+            <div class="floating-label">
+              <input required class="full-width" v-model="user.address.city">
+              <label>City</label>
+            </div>
+          </div>
+          <div class="width-1of1">
+            <div class="floating-label">
+              <input required class="full-width" v-model="user.address.zipcode">
+              <label>Zipcode</label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-actions justify-center flex">
+      <div class="width-1of3 sm-width-3of3">
+        <button class="primary outline raised fit" @click="save()">Save</button>
+      </div>
+      <div class="width-1of3 sm-width-3of3">
+        <button class="teal outline raised fit" @click="$refs.modal.close()">Close</button>
+      </div>
+    </div>
+  </q-modal>
+</template>
+
+<script type="text/javascript">
+  /* eslint-disable */
+  //import { Toast } from 'quasar'
+  //import GMaps from 'gmaps'
+
+  export default {
+    data () {
+      return {
+        map: ''
+      }
+    },
+    props: ['user'],
+    methods: {
+      save () {
+        this.$http.jsonplaceholder
+          .patch(`users/${this.user.id}`, {address: this.user.address})
+          .then(response => {
+
+          })
+      },
+      startMap () {
+        let vm = this
+        /*
+        this.map = new GMaps({
+          el: '#map',
+          lat: parseFloat(this.user.address.geo.lat),
+          lng: parseFloat(this.user.address.geo.lng),
+          zoom: 3,
+          dblclick (e) {
+            vm.map.removeMarkers()
+            vm.addMarker(e.latLng.lat(), e.latLng.lng())
+          }
+        })
+        this.addMarker(this.user.address.geo.lat, this.user.address.geo.lng)
+        */
+      },
+      addMarker (lat, lng) {
+        this.map.addMarker({
+          lat: parseFloat(lat),
+          lng: parseFloat(lng)
+        })
+      }
+    }
+  }
+</script>
+<style scoped>
+  #map {
+    width: 300px !important;
+    height: 300px !important;
+  }
+</style>