- User Profile

- DashBoard start

src/components/CMyFieldDb/CMyFieldDb.ts

@@ -30,12 +30,14 @@ export default class CMyFieldDb extends MixinBase {
   public myvalue = ''
   public col: IColGridTable = { name: 'test' }
   public canEdit: boolean = true
+  public countryname = ''
 
   public created() {
     this.myvalue = this.getValDb(this.mykey, this.serv, '', this.table, this.mysubkey)
     this.col.jointable = this.jointable
     this.col.fieldtype = this.type
     this.col.label = this.title
+
     // console.log('created', this.myvalue)
   }
 
@@ -101,4 +103,14 @@ export default class CMyFieldDb extends MixinBase {
     this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey)
   }
 
+  public selectcountry({name, iso2, dialCode}) {
+    // console.log(name, iso2, dialCode)
+    this.myvalue = iso2
+    this.countryname = name
+  }
+
+  public intcode_change(coderec) {
+    this.myvalue = '+' + coderec.dialCode
+  }
+
 }

src/components/CMyFieldDb/CMyFieldDb.vue

@@ -31,6 +31,33 @@
                                 :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
                     </div>
                     <!-- Show Value -->
+                    <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+                      <q-input
+                        input-class="cursor-pointer"
+                        :readonly="true"
+                        v-model="countryname"
+                        rounded outlined
+                        debounce="1000"
+                        :label="$t('reg.nationality')">
+
+                        <div class="hidden">
+                          <vue-country-code
+                            :defaultCountry="myvalue"
+                            :disabledFetchingCountry="true"
+                            @onSelect="selectcountry"
+                            :preferredCountries="tools.getprefCountries"
+                            :dropdownOptions="{ disabledDialCode: true }">
+
+                          </vue-country-code>
+                        </div>
+
+                      </q-input>
+                    </div>
+                    <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+
+                      {{ myvalue }}
+
+                    </div>
                     <div v-else-if="type === tools.FieldType.multiselect">
                         <CMyChipList
                                 :type="tools.FieldType.multiselect"
@@ -111,6 +138,52 @@
                                        :useinput="false">
                             </CMySelect>
                         </div>
+                        <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+                          <div class="justify-center q-gutter-sm clgutter q-mt-sm">
+                            <q-input
+                              v-model="countryname"
+                              :readonly="true"
+                              rounded outlined
+                              debounce="1000"
+                              :label="$t('reg.nationality')">
+
+                              <template v-slot:prepend>
+                                <div style="font-size: 1rem;">
+                                <vue-country-code
+                                  :defaultCountry="myvalue"
+                                  :disabledFetchingCountry="true"
+                                  @onSelect="selectcountry"
+                                  :preferredCountries="tools.getprefCountries"
+                                  :dropdownOptions="{ disabledDialCode: true }">
+
+                                </vue-country-code>
+                                </div>
+                              </template>
+                            </q-input>
+                            <div style="height: 180px;">
+
+                            </div>
+                          </div>
+                        </div>
+                        <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+
+                          <div class="justify-center q-gutter-sm clgutter q-mt-sm">
+                            <vue-tel-input
+                              @country-changed="intcode_change"
+                              v-model="myvalue"
+                              :disabledFetchingCountry="true"
+                              :preferredCountries="tools.getprefCountries"
+                              :placeholder="$t('reg.cell')"
+                              :enabledCountryCode="true"
+                              inputClasses="clCell"
+                              wrapperClasses="clCellCode">
+                            </vue-tel-input>
+                            <div style="height: 180px;">
+
+                            </div>
+                          </div>
+
+                        </div>
                         <div v-else-if="type === tools.FieldType.multiselect">
                             <q-select
                                     v-model="myvalue"