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"
@@ -70,6 +71,7 @@ import { required } from 'vuelidate/lib/validators'
 import { mapWaitingActions } from 'vue-wait'
 import CscPageSticky from 'components/CscPageSticky'
 import useValidate from '@vuelidate/core'
+import { showGlobalError } from 'src/helpers/ui'
 export default {
     name: 'CscPageCustomerPhonebookAdd',
     components: {
@@ -119,6 +121,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)
@@ -128,7 +146,7 @@ export default {
                     this.numberError = true
                     this.numberErrorMessage = this.$t('This number is already in use.')
                 } else {
-                    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"
@@ -74,6 +75,7 @@ import { required } from 'vuelidate/lib/validators'
 import { mapWaitingActions } from 'vue-wait'
 import CscPageSticky from 'components/CscPageSticky'
 import useValidate from '@vuelidate/core'
+import { showGlobalError } from 'src/helpers/ui'
 export default {
     name: 'CscPageSubscriberPhonebookAdd',
     components: {
@@ -92,7 +94,9 @@ export default {
     data () {
         return {
             formData: this.getDefaultFormData(),
-            v$: useValidate()
+            v$: useValidate(),
+            numberErrorMessage: '',
+            numberError: false
         }
     },
     computed: {
@@ -102,20 +106,9 @@ export default {
                 return this.$t('{field} is required', {
                     field: this.$t('Name')
                 })
-            } else {
-                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')
-                })
-            } else {
             return ''
         }
-        }
     },
     methods: {
         ...mapWaitingActions('user', {
@@ -128,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 () {
+            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))
+                }
+            }
         }
     }
 }