✨ (transaction) possibility to change location

src/components/TransactionCreate.vue

@@ -94,15 +94,27 @@
             <label class="label">Localisation</label>
           </div>
           <div class="field-body">
-            <div class="field">
-              <div class="control" v-if="transaction.location">
+            <div
+              class="field"
+              :class="{ 'has-addons': !!transaction.location }"
+            >
+              <div class="control">
                 <input
                   type="text"
                   readonly
                   class="input"
+                  v-if="transaction.location"
                   v-model="transaction.location.place"
                 />
               </div>
+              <div class="control set-location">
+                <button
+                  class="button is-primary"
+                  @click="displayLocationModal = true"
+                >
+                  définir
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -176,6 +188,33 @@
         </div>
       </div>
     </div>
+    <div class="modal" :class="{ 'is-active': displayLocationModal }">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <section>
+          <earth-map
+            v-if="displayLocationModal"
+            :locations="
+              transaction.location ? [transaction.location] : undefined
+            "
+            :define-location="true"
+            @located="located"
+          />
+        </section>
+        <footer class="modal-card-foot">
+          <button
+            class="button is-primary"
+            :class="{ 'is-loading': isSetLocation }"
+            @click="validLocation"
+          >
+            valider
+          </button>
+          <button class="button" @click="displayLocationModal = false">
+            annuler
+          </button>
+        </footer>
+      </div>
+    </div>
     <fab-button
       @valid="submitTransaction"
       :margin="true"
@@ -203,11 +242,14 @@ import formatDate from '@/utils/format-date'
 import notif from '@/utils/notif'
 import { money } from '@/utils/filters'
 import { confirmation, alertMessage, findContrastColor } from '@/utils'
+import ILocation from '@/models/ILocation'
+import MapService from '../services/MapService'
 
 const today: Date = new Date()
 
 @Component({
   components: {
+    'earth-map': () => import('@/components/EarthMap.vue'),
     'fab-button': () => import('@/components/FabButton.vue'),
     'transaction-split': () => import('@/components/TransactionSplit.vue'),
     'transaction-tag-update': () =>
@@ -226,13 +268,15 @@ export default class TransactionCreate extends Vue {
   public tag: TransactionTag = TransactionTag.None
   public today: string = formatDate(today)
   public date: string = formatDate(today)
-  public location: string = ''
   public currency: ICurrency | null = null
   public payBy: string = ''
   public payFor: ISplit[] = []
   public maxAmount: number = 1000000
   public noTag: string = TransactionTag.None
   public transactionTagLabel: typeof TransactionTagLabel = TransactionTagLabel
+  public displayLocationModal = false
+  public isSetLocation = false
+  public location: ILocation | null = null
 
   public async created(): Promise<void> {
     this.setData(this.transaction)
@@ -325,6 +369,29 @@ export default class TransactionCreate extends Vue {
     this.payFor.forEach((p: ISplit) => (p.weight = p.weight || 1))
   }
 
+  public located(location: ILocation) {
+    this.location = location
+  }
+
+  public async validLocation() {
+    try {
+      this.isSetLocation = true
+      if (this.location) {
+        const place = await MapService.getPlace(this.location)
+        const location = {
+          ...this.location,
+          place
+        }
+        this.$set<ILocation>(this.transaction, 'location', location)
+      }
+    } catch (error) {
+      this.$set(this.transaction, 'location', this.transaction.location)
+    } finally {
+      this.displayLocationModal = false
+      this.isSetLocation = false
+    }
+  }
+
   public get payForUsers(): ISplit[] {
     return this.payFor.filter((p, index) => p.weight > 0)
   }
@@ -394,4 +461,7 @@ export default class TransactionCreate extends Vue {
 .help {
   text-align: left;
 }
+.set-location {
+  text-align: center;
+}
 </style>