From d6c7c2b0959fd6c619fff9ff500c88ee77fc247a Mon Sep 17 00:00:00 2001
From: fjalili <forough@carrene.com>
Date: Mon, 29 Jul 2019 14:23:18 +0430
Subject: [PATCH] Fixed selection for country flag and name, #725

---
 src/components/ProfilePictureEditor.vue |  1 -
 src/pages/Profile.vue                   | 36 ++++++++++++++++++-------
 src/styles/layout/_profile_layout.sass  |  2 +-
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/ProfilePictureEditor.vue b/src/components/ProfilePictureEditor.vue
index ecd49b48..3f49f001 100644
--- a/src/components/ProfilePictureEditor.vue
+++ b/src/components/ProfilePictureEditor.vue
@@ -79,7 +79,6 @@ export default {
   },
   beforeMount () {
     this.member = new this.CasMember({ id: this.auth.member.referenceId })
-    console.log(this.member)
   }
 }
 </script>
diff --git a/src/pages/Profile.vue b/src/pages/Profile.vue
index a082ec8d..b39d9dfc 100644
--- a/src/pages/Profile.vue
+++ b/src/pages/Profile.vue
@@ -54,14 +54,26 @@
                 class="light-primary-input"
               >
             </div>
-            <div class="input-container">
-              <label class="label">
-                Phone
-              </label>
-              <input
-                type="text"
-                class="light-primary-input"
+            <div class="input-container select-country">
+              <label for="">Country</label>
+              <v-select
+                :clearable="false"
+                :options="countries"
+                label="emojiWithCode"
+                v-model="selectedCountry"
               >
+                <template
+                  slot="option"
+                  slot-scope="country"
+                  class="template"
+                >
+                  <span
+                    class="flag-icon"
+                    :class="`flag-icon-${country.alpha2.toLowerCase()}`"
+                  ></span>
+                  {{ country.name }}
+                </template>
+              </v-select>
             </div>
             <div class="input-container">
               <label class="label">
@@ -175,7 +187,8 @@ export default {
       casMemberMetadata: casServer.metadata.models.Member,
       auth: casServer.authenticator,
       status: null,
-      message: null
+      message: null,
+      selectedCountry: null
     }
   },
   validations () {
@@ -189,7 +202,8 @@ export default {
   },
   computed: {
     ...mapState([
-      'CasMember'
+      'CasMember',
+      'countries'
     ])
   },
   methods: {
@@ -222,7 +236,11 @@ export default {
     this.member = new this.CasMember()
   },
   mounted () {
+    console.log(this.countries)
     this.getMember()
+    this.selectedCountry = this.countries.find(country => {
+      return country.alpha2 === 'US'
+    })
   }
 }
 </script>
diff --git a/src/styles/layout/_profile_layout.sass b/src/styles/layout/_profile_layout.sass
index 32dc0437..e170d790 100644
--- a/src/styles/layout/_profile_layout.sass
+++ b/src/styles/layout/_profile_layout.sass
@@ -20,8 +20,8 @@
 
       > .form
         display: grid
-        grid-auto-flow: column
         grid-column-gap: 12px
+        grid-template-columns: repeat(2, 1fr)
 
         .inputs
           align-content: start