MT#62145 Fix error handling in CscPageCustomerPhonebookAdd and in CscPageSubscriberPhonebookAdd

Change-Id: I6ee8dbe7d71ed09c7b54e4a6c286abef50cff03f
(cherry picked from commit b6445fbf18)

src/pages/CscPageCustomerPhonebookAdd.vue

@@ -43,7 +43,7 @@
                     :label="$t('Number')"
                     :error="numberError"
                     :error-message="numberErrorMessage"
-                    @update:model-value="v$.formData.number.$touch()"
+                    @update:model-value="numberUpdated()"
                 />
             </q-list>
         </q-item>
@@ -58,6 +58,7 @@
             <q-btn
                 icon="check"
                 :label="$t('Confirm')"
+                :disable="disableSaveButton()"
                 unelevated
                 text-color="primary"
                 @click="confirm"
@@ -68,6 +69,7 @@
 <script>
 import useValidate from '@vuelidate/core'
 import CscPageSticky from 'components/CscPageSticky'
+import { showGlobalError } from 'src/helpers/ui'
 import { mapWaitingActions } from 'vue-wait'
 import { required } from 'vuelidate/lib/validators'
 export default {
@@ -118,6 +120,22 @@ export default {
             this.$router.push('/user/pbx-configuration/customer-phonebook/')
             this.$emit('cancel')
         },
+        disableSaveButton () {
+            return this.v$.formData.$invalid
+        },
+        numberUpdated () {
+            this.v$.formData.number.$touch()
+            const errorsTab = this.v$.formData.number.$errors
+            if (errorsTab && errorsTab.length > 0 && errorsTab[0].$validator === 'required') {
+                this.numberErrorMessage = this.$t('{field} is required', {
+                    field: this.$t('Number')
+                })
+                this.numberError = true
+            } else {
+                this.numberErrorMessage = ''
+                this.numberError = false
+            }
+        },
         async confirm () {
             try {
                 await this.createPhonebookCustomer(this.formData)
@@ -127,8 +145,7 @@ export default {
                     this.numberError = true
                     this.numberErrorMessage = this.$t('This number is already in use.')
                 } else {
-                    // eslint-disable-next-line no-console
-                    console.error('An error occurred:', error)
+                    showGlobalError(this.$t('An error occurred:', error.response.data.message))
                 }
             }
         }

src/pages/CscPageSubscriberPhonebookAdd.vue

@@ -41,9 +41,9 @@
                 <q-input
                     v-model="formData.number"
                     :label="$t('Number')"
-                    :error="v$.formData.number.$errors.length > 0"
+                    :error="numberError"
                     :error-message="numberErrorMessage"
-                    @update:model-value="v$.formData.number.$touch()"
+                    @update:model-value="numberUpdated()"
                 />
                 <q-toggle
                     v-model="formData.shared"
@@ -62,6 +62,7 @@
             <q-btn
                 icon="check"
                 :label="$t('Confirm')"
+                :disable="disableSaveButton()"
                 unelevated
                 text-color="primary"
                 @click="confirm"
@@ -72,6 +73,7 @@
 <script>
 import useValidate from '@vuelidate/core'
 import CscPageSticky from 'components/CscPageSticky'
+import { showGlobalError } from 'src/helpers/ui'
 import { mapWaitingActions } from 'vue-wait'
 import { required } from 'vuelidate/lib/validators'
 export default {
@@ -92,7 +94,9 @@ export default {
     data () {
         return {
             formData: this.getDefaultFormData(),
-            v$: useValidate()
+            v$: useValidate(),
+            numberErrorMessage: '',
+            numberError: false
         }
     },
     computed: {
@@ -104,15 +108,6 @@ export default {
                 })
             }
             return ''
-        },
-        numberErrorMessage () {
-            const errorsTab = this.v$.formData.number.$errors
-            if (errorsTab && errorsTab.length > 0 && errorsTab[0].$validator === 'required') {
-                return this.$t('{field} is required', {
-                    field: this.$t('Number')
-                })
-            }
-            return ''
         }
     },
     methods: {
@@ -126,13 +121,38 @@ export default {
                 shared: false
             }
         },
+        disableSaveButton () {
+            return this.v$.formData.$invalid
+        },
+        numberUpdated () {
+            this.v$.formData.number.$touch()
+            const errorsTab = this.v$.formData.number.$errors
+            if (errorsTab && errorsTab.length > 0 && errorsTab[0].$validator === 'required') {
+                this.numberErrorMessage = this.$t('{field} is required', {
+                    field: this.$t('Number')
+                })
+                this.numberError = true
+            } else {
+                this.numberErrorMessage = ''
+                this.numberError = false
+            }
+        },
         cancel () {
             this.$router.push('/user/subscriber-phonebook/')
             this.$emit('cancel')
         },
         async confirm () {
-            await this.createPhonebookSubscriber(this.formData)
-            await this.$router.push('/user/subscriber-phonebook/')
+            try {
+                await this.createPhonebookSubscriber(this.formData)
+                await this.$router.push('/user/subscriber-phonebook/')
+            } catch (error) {
+                if (error.response && error.response.status === 422) {
+                    this.numberError = true
+                    this.numberErrorMessage = this.$t('This number is already in use.')
+                } else {
+                    showGlobalError(this.$t('An error occurred:', error.response.data.message))
+                }
+            }
         }
     }
 }