new subdomain: minor improvements

components/Form/Parameters/SubdomainNew.vue

@@ -27,14 +27,13 @@
                     :data="entry['subdomain']"
                     type="string"
                     :rules="rules()"
-                    @change="checkSubdomainHook($event); updateRepository(entry['subdomain'], 'subdomain')"
+                    @change="checkSubdomainHook($event, updateRepository)"
                   />
-                  <span v-if="entry['subdomain'] && subdomainAvailable">Ce sous-domaine est disponible</span>
                 </v-col>
-
               </v-row>
+              <i v-if="validationPending" class="validation_status">{{ $t('validation_ongoing') }}</i>
+              <i v-else-if="subdomainAvailable === true" class="validation_status valid">{{ $t('this_subdomain_is_available') }}</i>
             </v-container>
-
           </template>
 
           <template #form.button>
@@ -74,6 +73,7 @@ export default defineComponent({
     const query: Query = repository.query()
     const subdomainAvailable: Ref<boolean | null> = ref(null)
     const form = ref(null);
+    const validationPending: Ref<boolean> = ref(false)
 
     const { checkSubdomainAvailability } = useValidator($dataProvider, i18n).useHandleSubdomain()
 
@@ -83,12 +83,15 @@ export default defineComponent({
       return actions
     })
 
-    const checkSubdomainHook = async (subdomain: string | null) => {
+    const checkSubdomainHook = async (subdomain: string | null, updateRepository: any) => {
       subdomainAvailable.value = null
       if (subdomain !== null && subdomain.match(/^[\w\-]{2,60}$/) !== null) {
+        validationPending.value = true
         subdomainAvailable.value = await checkSubdomainAvailability(subdomain);
-        (form.value as any).validate()
+        validationPending.value = false
       }
+      updateRepository(subdomain, 'subdomain');
+      (form.value as any).validate()
     }
 
     /** todo Computed properties needs to be returned as functions until nuxt3 : https://github.com/nuxt-community/composition-api/issues/207 **/
@@ -98,6 +101,7 @@ export default defineComponent({
       submitActions,
       form,
       checkSubdomainHook,
+      validationPending,
       subdomainAvailable,
       rules: () => [
         (subdomain: string | null) => (subdomain !== null) || i18n.t('please_enter_a_value_for_the_subdomain'),
@@ -112,3 +116,12 @@ export default defineComponent({
   }
 })
 </script>
+
+<style scoped>
+.validation_status {
+  font-size: 13px;
+}
+.validation_status.valid {
+  color: green;
+}
+</style>