confirmation dialog ui fixes

2023-05-22 12:45:49 +05:30 · 2023-05-22 12:45:49 +05:30 · acce7393a8
parent b83eccf0ea
commit acce7393a8
6 changed files with 59 additions and 43 deletions
--- a/package.json
+++ b/package.json
@ -36,7 +36,6 @@
        "vue-tel-input": "^4.4.0",
        "vue3-cookies": "^1.0.6",
        "vue3-google-map": "^0.14.0",
-        "vue3-tel-input": "^1.0.4",
        "vueperslides": "^2.8.2",
        "vuetify": "^3.2.4",
        "vuex": "^4.0.2",
--- a/src/components/common/ConfirmationDialog.vue
+++ b/src/components/common/ConfirmationDialog.vue
@ -35,16 +35,16 @@
                  @click="onAction(false)"
                    :variant="isHovering ? 'outlined' : 'outlined'"
                  :class="
-                  isHovering ? ' bg-white text-error' : 'bg-error'
+                  isHovering ? ' bg-white text-primary' : 'bg-primary'
                  "
                >CANCEL</v-btn>
              </v-hover>
              <v-hover v-slot:default="{  isHovering , props }">
                <v-btn
-                  class="text-uppercase body-font ma-2 button-background"
+                  class="text-uppercase body-font ma-2 button-background text-white"
                   :variant="isHovering ? 'outlined' : 'outlined'"
                  :class="
-                  isHovering ? ' bg-white text-primary' : 'bg-primary'
+                  isHovering ? ' textColor' : 'bgColor'
                  "
                  v-bind="props"
                  size="large"
@ -65,11 +65,15 @@ export default {
  props: ["confirmationDialog", "confirmationDetails"],
  data() {
    return {
-      confirmationDialogKey:this.confirmationDialog
+      
    };
  },
  components: {},
-  computed: {},
+  computed: {
+    confirmationDialogKey(){
+      return this.confirmationDialog
+    }
+  },
  methods: {
    onAction: function(action) {
      this.$emit("actionRemove", { submit: action });
@ -78,3 +82,14 @@ export default {
  created() {}
 };
 </script>
+<style scoped>
+.bgColor{
+    background-color: red;
+}
+.textColor{
+    background-color: white !important;
+    color: red !important;
+}
+</style>
+
+
--- a/src/main.js
+++ b/src/main.js
@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import VueCookies from 'vue3-cookies';
-import VueTelInput from 'vue3-tel-input'
-import 'vue3-tel-input/dist/vue3-tel-input.css'
+// import VueTelInput from 'vue3-tel-input'
+// import 'vue3-tel-input/dist/vue3-tel-input.css'
 import App from './App.vue'
 import router from './multipages'
 import store from './stores';
@ -11,15 +11,11 @@ import 'vuetify/lib/styles/settings/_variables.scss';

 import 'vuetify/dist/vuetify.min.css'

-const VueTelInputOptions = {
-    mode: "international",
-    onlyCountries: ['NG', 'GH', "GB", "US", "CA"]
-  }

 const app = createApp(App)
 app.use(vuetify)
 app.use(VueCookies)
-app.use(VueTelInput, VueTelInputOptions)
+// app.use(VueTelInput)

 app.use(store)
 app.use(router)
--- a/src/routes/retailer/address_book.scss
+++ b/src/routes/retailer/address_book.scss
@ -20,4 +20,11 @@
    color: #fb8c00 !important;
    background-color: #fdede8;
    border:thin solid #c5c4c4;
+}
+.bgColor{
+    background-color: red;
+}
+.textColor{
+    background-color: white !important;
+    color: red !important;
 }
--- a/src/routes/retailer/address_book.vue
+++ b/src/routes/retailer/address_book.vue
@ -155,7 +155,7 @@
                      <v-btn
                        @click="editAddress(address, index)"
                        v-bind="props"
-                        variant="isHovering ? 'outlined' : 'outlined'"
+                        :variant="isHovering ? 'outlined' : 'flat'"
                        :class="
                          isHovering ? ' bg-white text-primary' : 'bg-primary'
                        "
@ -171,13 +171,13 @@
                      <v-btn
                        @click="deleteAddress(address)"
                        v-bind="props"
-                        :variant="isHovering ? 'outlined' : 'outlined'"
+                        :variant="isHovering ? 'outlined' : 'flat'"
                        :class="
-                          isHovering ? ' bg-white text-primary' : 'bg-primary'
+                          isHovering ? 'textColor' : 'bgColor'
                        "
                        rounded="0"
                        size="large"
-                        class="body-font my-2 white--text"
+                        class="body-font my-2 text-white"
                        >DELETE</v-btn
                      >
                    </v-hover>
@ -252,7 +252,8 @@
                        density="compact"
                        variant="outlined"
                         ></v-text-field>
-                        <vue-tel-input
+                          
+                         <!-- <vue-tel-input
                        type="number"
                        v-model="telephone"
                        :defaultCountry="setCountryCode"
@ -262,7 +263,17 @@
                            : 'phonenumber-custom-input'
                        "
                        @input="validateNumber"
-                        ></vue-tel-input>
+                        ></vue-tel-input> -->
+                        <v-text-field
+                        label="Telephone"
+                        ref="telephone"
+                        :rules="phoneNumberRules"
+                        v-model="telephone"
+                        variant="outlined"
+                        density="compact"
+                        @input="acceptNumber"
+                        color="primary"
+                        ></v-text-field>
                       <span
                        class="text-red caption ml-3"
                        v-show="phoneNumberError"
@ -444,7 +455,7 @@ import MeVerifyAddressComponent from "@/components/retailer/address/MeVerifyAddr
 import { loginInterrupt } from "@/services/nav";
 import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
 import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
-import VueTelInput from 'vue3-tel-input'
+ 
 //import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent.vue";

 import { createHelpers } from "vuex-map-fields";
@ -457,6 +468,10 @@ export default {
  name: "AddressBook",
  data() {
    return {
+      phoneNumberRules: [
+      v => !!v || "Telephone is required",
+      v => (v && v.length >= 8) || "Phone Number must be at least 8 characters"
+    ],
      setCountryCode: "US",
      phoneNumberError: false,
      confirmationDialog: false,
@ -497,7 +512,6 @@ export default {
    BillingAddressComponent,
    ShippingAddressComponent,
    ConfirmationDialog,
-    VueTelInput,
    //BillingAddressComponent
  },
  computed: {
@ -554,6 +568,10 @@ export default {
    },
  },
  methods: {
+    acceptNumber() {
+        let x = this.telephone.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
+        this.telephone = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
+    },
    resetForm() {
      if (
        this.$refs.contactForm &&
@ -650,6 +668,7 @@ export default {
    },
    deleteAddress(address) {
      this.addressObj = address;
+       
      (this.confirmationDialog = true),
        (this.confirmation = {
          confirmationMessage: "Are you sure you want to delete this address?",
--- a/yarn.lock
+++ b/yarn.lock
@ -2396,7 +2396,7 @@ core-js@^3.6.4:
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
  integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==

-core-js@^3.6.5, core-js@^3.8.3:
+core-js@^3.8.3:
  version "3.30.1"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.1.tgz#fc9c5adcc541d8e9fa3e381179433cbf795628ba"
  integrity sha512-ZNS5nbiSwDTq4hFosEDqm65izl2CWmLz0hARJMyNQBgkUZMIF51cQiMvIQKA6hvuaeWxQDP3hEedM1JZIgTldQ==
@ -3020,11 +3020,6 @@ levn@^0.4.1:
    prelude-ls "^1.2.1"
    type-check "~0.4.0"

-libphonenumber-js@^1.9.6:
-  version "1.10.28"
-  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.28.tgz#cae7e929cad96cee5ecc9449027192ecba39ee72"
-  integrity sha512-1eAgjLrZA0+2Wgw4hs+4Q/kEBycxQo8ZLYnmOvZ3AlM8ImAVAJgDPlZtISLEzD1vunc2q8s2Pn7XwB7I8U3Kzw==
-
 loader-utils@^2.0.0:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
@ -3610,11 +3605,6 @@ uri-js@^4.2.2:
  dependencies:
    punycode "^2.1.0"

-user@^0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/user/-/user-0.0.0.tgz#f27f1b23fc511f2a8efa40db55cfba123824e02a"
-  integrity sha512-eRNM5isOvr6aEFAGi1CqAkmLkYxW2NJ5ThhbD+6IJXYKM1mo7Gtxx4mQIveHz/5K3p/SVnlW9k17ETn+QAu8IQ==
-
 util-deprecate@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@ -3747,17 +3737,7 @@ vue3-google-map@^0.14.0:
    "@googlemaps/js-api-loader" "^1.12.11"
    "@googlemaps/markerclusterer" "^2.0.6"

-vue3-tel-input@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/vue3-tel-input/-/vue3-tel-input-1.0.4.tgz#ed26cb808d124aebb5073d03f366b23e686804d6"
-  integrity sha512-C60OyAq5ORDErSJ4x7UmJJbF95CDncMswnySmAUtbuBP0pcVcJBu6DOTxKquykvTbJEh9I73DXyqMtDxtLrwJg==
-  dependencies:
-    core-js "^3.6.5"
-    libphonenumber-js "^1.9.6"
-    user "^0.0.0"
-    vue "^3.0.0-beta.1"
-
-vue@^3.0.0, vue@^3.0.0-beta.1, vue@^3.2.47:
+vue@^3.0.0, vue@^3.2.47:
  version "3.2.47"
  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"
  integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==