showing default values and placeholders for selectors in advanced settings (#33)

Merge branch 'master' into feat/ui-layout

fix: showing default values

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement selector placeholders and default values

Merge branch 'feat/ui-layout' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

fix: getting user information after setting payment method

Merge branch 'master' into feat/ui-layout

feat: implement setting payment plan in payment page

feat: populate options for advanced settings modal

fix: remove showing advanced settings modal when loading the page

feat: implement Advanced Settings Modal layout

feat: implement modal and selector components

feat: implement launch bubble screen

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement add stripe card

feat: implement login process

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement payment page

feat: implement mail verification screen

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: prevent registration when the configs.allowRegistration is set to false

fix: weird routing

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement actual pages

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: api integration for register page

fix: messages

feat: api integration for forget-password page

fix: login title and password placeholder

feat: disable button until get response

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: integrate api for new login page

feat: implement responsive header

feat: implement checkbox

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

fix: checkbox event issue

feat: implement register page

feat: implement registration page

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement UI for forgot-password

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement new login page

feat: implement input shared component

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement auth header

Merge branch 'feat/ui-layout' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

capitalize filename

Co-authored-by: jonathan <jonathan@noreply.git.bubblev.org>
Co-authored-by: Tyler <everdev0923@gmail.com>
Co-authored-by: Jonathan Cobb <jonathan@kyuss.org>
Reviewed-on: https://git.bubblev.org/bubblev/bubble-web/pulls/33

src/_components/modals/AdvancedSettings.vue

@@ -19,22 +19,35 @@
         <Input
           class="form-control"
           :placeholder="messages.field_label_bubble_name"
+          v-model="accountPlan.name"
         />
       </div>
       <div class="form-group" v-if="domains">
         <v-select
           :placeholder="messages.field_label_network_domain"
           :options="domains"
+          v-model="accountPlan.domain"
           label="name"
         >
+          <template v-slot:selected-option="option">
+            <span>Domain: {{ option.name }}</span>
+          </template>
         </v-select>
       </div>
       <div class="form-group" v-if="nearestRegions">
         <v-select
           :placeholder="messages.field_label_region"
           :options="nearestRegions"
+          v-model="cloudRegionUuid"
           label="name"
+          :reduce="(region) => region.uuid"
         >
+          <template v-slot:selected-option="option">
+            <span>
+              Location: {{ option.name }}
+              {{ regionDistance(option.uuid) }}
+            </span>
+          </template>
           <template v-slot:option="option">
             {{ option.name }} {{ regionDistance(option.uuid) }}
           </template>
@@ -44,8 +57,13 @@
         <v-select
           :placeholder="messages.field_label_locale"
           :options="localeTexts"
+          v-model="accountPlan.locale"
+          :reduce="(locale) => locale.name"
           label="label"
         >
+          <template v-slot:selected-option="option">
+            <span>Language: {{ option.label }}</span>
+          </template>
         </v-select>
       </div>
       <div class="form-group" v-if="timezoneObjects">
@@ -54,21 +72,34 @@
           :options="timezoneObjects"
           :reduce="(tz) => tz.timezoneId"
           label="timezoneDescription"
+          v-model="accountPlan.timezone"
           type="text"
           name="timezone"
-        ></v-select>
+        >
+          <template v-slot:selected-option="option">
+            <span>Time Zone: {{ option.timezoneDescription }}</span>
+          </template>
+        </v-select>
       </div>
       <div class="form-group" v-if="footprintObjects">
         <v-select
           :placeholder="messages.field_label_footprint"
           :options="footprintObjects"
+          v-model="accountPlan.footprint"
+          :reduce="(options) => options.uuid"
           label="localName"
-        ></v-select>
+        >
+          <template v-slot:selected-option="option">
+            <span>Footprint: {{ option.localName }}</span>
+          </template>
+        </v-select>
       </div>
       <div class="form-group">
-        <v-select
-          :placeholder="messages.field_label_network_ssh_key"
-        ></v-select>
+        <v-select :placeholder="messages.field_label_network_ssh_key">
+          <template v-slot:selected-option="option">
+            <span>SSH Key: {{ option.name }}</span>
+          </template>
+        </v-select>
       </div>
       <div class="form-group">
         <Button color="outline" height="34">
@@ -141,7 +172,27 @@ export default {
     Checkbox,
   },
 
-  data: () => ({}),
+  data: () => ({
+    accountPlan: {
+      name: '',
+      domain: '',
+      locale: util.currentUser().locale,
+      timezone: '',
+      plan: 'bubble',
+      footprint: 'Worldwide',
+      sshKey: '',
+    },
+    defaults: {
+      domain: '',
+      locale: 'en_US',
+      timezone: '',
+      plan: 'bubble',
+      footprint: 'Worldwide',
+      region: '',
+      sshKey: '',
+    },
+    cloudRegionUuid: '',
+  }),
 
   computed: {
     ...mapState('system', ['configs', 'messages', 'locales', 'timezones']),
@@ -163,7 +214,7 @@ export default {
     localeTexts: function() {
       return this.locales
         ? this.locales.map((locale) => ({
-            ...locale,
+            name: locale.localeCode,
             label: this.messages['locale_' + locale.localeCode],
           }))
         : [];
@@ -256,6 +307,98 @@ export default {
     this.show();
   },
 
-  watch: {},
+  watch: {
+    domains(doms) {
+      if (doms && doms[0]) {
+        if (this.accountPlan.domain == null || this.accountPlan.domain === '')
+          this.accountPlan.domain = doms[0].name;
+        this.defaults.domain = doms[0].name;
+      }
+    },
+    detectedTimezone(tz) {
+      if (tz && tz.timeZoneId) {
+        if (
+          this.accountPlan.timezone == null ||
+          this.accountPlan.timezone === ''
+        )
+          this.accountPlan.timezone = tz.timeZoneId;
+        if (this.defaults.timezone == null || this.defaults.timezone === '')
+          this.defaults.timezone = tz.timeZoneId;
+      }
+    },
+    detectedLocale(loc) {
+      if (loc) {
+        if (this.accountPlan.locale === null || this.accountPlan.locale === '')
+          this.accountPlan.locale = loc;
+        this.defaults.locale = loc;
+      }
+    },
+    nearestRegions(regions) {
+      if (regions) {
+        this.regions = regions;
+        if (
+          this.cloudRegionUuid === null ||
+          typeof regions.find((r) => r.uuid === this.cloudRegionUuid) ===
+            'undefined'
+        ) {
+          this.cloudRegionUuid = regions[0].uuid;
+        }
+        if (
+          this.defaults.region === '' ||
+          typeof regions.find((r) => r.uuid === this.defaults.region.uuid) ===
+            'undefined'
+        ) {
+          this.defaults.region = regions[0];
+        }
+      }
+    },
+  },
+
+  watch: {
+    domains(doms) {
+      if (doms && doms[0]) {
+        if (this.accountPlan.domain == null || this.accountPlan.domain === '')
+          this.accountPlan.domain = doms[0].name;
+        this.defaults.domain = doms[0].name;
+      }
+    },
+    detectedTimezone(tz) {
+      if (tz && tz.timeZoneId) {
+        if (
+          this.accountPlan.timezone == null ||
+          this.accountPlan.timezone === ''
+        )
+          this.accountPlan.timezone = tz.timeZoneId;
+        if (this.defaults.timezone == null || this.defaults.timezone === '')
+          this.defaults.timezone = tz.timeZoneId;
+      }
+    },
+    detectedLocale(loc) {
+      if (loc) {
+        if (this.accountPlan.locale === null || this.accountPlan.locale === '')
+          this.accountPlan.locale = loc;
+        this.defaults.locale = loc;
+      }
+    },
+    nearestRegions(regions) {
+      if (regions) {
+        this.regions = regions;
+        if (
+          this.cloudRegionUuid === null ||
+          typeof regions.find((r) => r.uuid === this.cloudRegionUuid) ===
+            'undefined'
+        ) {
+          this.cloudRegionUuid = regions[0].uuid;
+        }
+        if (
+          this.defaults.region === '' ||
+          typeof regions.find((r) => r.uuid === this.defaults.region.uuid) ===
+            'undefined'
+        ) {
+          this.defaults.region = regions[0];
+        }
+      }
+    },
+  },
 };
 </script>