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>

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

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="layout-padding ">
+      <div class="card">
+        <div class="card-title bg-teal text-white">
+          Search Users
+        </div>
+        <div class="card-content bg-white">
+          <div class="flex">
+            <div class="width-2of3 gt-bg-width-1of3 sm-auto">
+              <q-autocomplete v-model="terms" :delay="0" @search="search" :max-results="4" @selected="selected">
+                <q-search v-model="terms" placeholder="Search by name"></q-search>
+              </q-autocomplete>
+            </div>
+          </div>
+          <q-transition name="slide">
+            <user-form :user="selectedUser" v-show="selectedUser.name"></user-form>
+          </q-transition>
+        </div>
+        <q-transition name="slide">
+          <div class="card-actions justify-center flex" v-show="selectedUser.name">
+            <div class="width-1of3 sm-width-3of3">
+              <button class="primary raised outline fit" @click="save()">Save</button>
+            </div>
+            <div class="width-1of3 sm-width-3of3">
+              <button class="teal raised outline fit"  @click="$refs.modal.$children[0].open()">Check Adress</button>
+            </div>
+          </div>
+        </q-transition>
+      </div>
+    </div>
+    <modal-adress :user="selectedUser" ref="modal"></modal-adress>
+  </div>
+</template>
+<script type="text/javascript">
+  import userForm from './userForm.vue'
+  import modalAdress from './modalAdress.vue'
+  export default {
+    name: 'Form',
+    mounted () {
+      this.getUsers()
+    },
+    data () {
+      return {
+        terms: '',
+        users: [],
+        selectedUser: { address: {} }
+      }
+    },
+    computed: {
+      usersParsed () {
+        return this.users.map(user => {
+          return {
+            allData: user,
+            label: user.name,
+            secondLabel: user.email,
+            value: user.name
+          }
+        })
+      }
+    },
+    components: {
+      userForm,
+      modalAdress
+    },
+    methods: {
+      search (terms, done) {
+        setTimeout(() => {
+          done(Utils.filter(terms, {field: 'value', list: this.usersParsed}))
+        }, 500)
+      },
+      getUsers () {
+        this.$http.jsonplaceholder
+          .get('users')
+          .then(response => { this.users = response.data })
+      },
+      selected (user) {
+        this.selectedUser = user.allData
+      },
+      save () {
+        this.$http.jsonplaceholder
+          .put(`users/${this.selectedUser.id}`, this.selectedUser)
+          .then(response => {  })
+      }
+    }
+  }
+</script>
+<style>
+  #map {
+    height: 180px;
+  }
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="flex wrap gutter">
+      <div class="width-1of3 sm-width-1of1">
+        <div class="floating-label">
+          <input required class="full-width" v-model="user.username">
+          <label>Username</label>
+        </div>
+      </div>
+      <div class="width-1of3 sm-width-1of1">
+        <div class="floating-label">
+          <input required class="full-width" v-model="user.phone">
+          <label>Phone</label>
+        </div>
+      </div>
+    </div>
+    <div class="flex wrap gutter">
+      <div class="width-1of3 sm-width-1of1">
+        <div class="floating-label">
+          <input required class="full-width" v-model="user.website">
+          <label>Website</label>
+        </div>
+      </div>
+      <div class="width-1of3 sm-width-1of1">
+        <div class="floating-label">
+          <input required class="full-width" v-model="user.email">
+          <label>Email</label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    data () {
+      return {}
+    },
+    props: ['user']
+  }
+</script>
+<style scoped>
+  .flex {
+    margin-top: 1%;
+  }
+</style>