refactor(tenant-management): add disabled input to abp-button

add autofocus feature to defaultConnectionString input

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -129,12 +129,14 @@
     <button #abpClose type="button" class="btn btn-secondary">
       {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="save()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
+    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="isDisabledSaveButton">{{
+      'AbpIdentity::Save' | abpLocalization
+    }}</abp-button>
   </ng-template>
 </abp-modal>
 
 <ng-template #tenantModalTemplate>
-  <form [formGroup]="tenantForm" (ngSubmit)="save()">
+  <form [formGroup]="tenantForm" (ngSubmit)="save()" validateOnSubmit>
     <div class="mt-2">
       <div class="form-group">
         <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
@@ -145,7 +147,7 @@
 </ng-template>
 
 <ng-template #connectionStringModalTemplate>
-  <form [formGroup]="defaultConnectionStringForm" (ngSubmit)="save()">
+  <form [formGroup]="defaultConnectionStringForm" (ngSubmit)="save()" validateOnSubmit>
     <label class="mt-2">
       <div class="form-group">
         <div class="custom-checkbox custom-control mb-2">
@@ -155,6 +157,7 @@
             class="custom-control-input"
             formControlName="useSharedDatabase"
             autofocus
+            (ngModelChange)="onSharedDatabaseChange($event)"
           />
           <label for="useSharedDatabase" class="custom-control-label">{{
             'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts

@@ -1,6 +1,6 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
@@ -16,7 +16,7 @@ import { TenantManagementService } from '../../services/tenant-management.servic
 import { TenantManagementState } from '../../states/tenant-management.state';
 
 interface SelectedModalContent {
-  type: string;
+  type: 'saveConnStr' | 'saveTenant';
   title: string;
   template: TemplateRef<any>;
 }
@@ -74,6 +74,18 @@ export class TenantsComponent implements OnInit {
   @ViewChild('connectionStringModalTemplate', { static: false })
   connectionStringModalTemplate: TemplateRef<any>;
 
+  get isDisabledSaveButton(): boolean {
+    if (!this.selectedModalContent) return false;
+
+    if (this.selectedModalContent.type === 'saveConnStr' && this.defaultConnectionStringForm.invalid) {
+      return true;
+    } else if (this.selectedModalContent.type === 'saveTenant' && this.tenantForm.invalid) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   constructor(
     private confirmationService: ConfirmationService,
     private tenantService: TenantManagementService,
@@ -103,7 +115,7 @@ export class TenantsComponent implements OnInit {
     });
   }
 
-  openModal(title: string, template: TemplateRef<any>, type: string) {
+  openModal(title: string, template: TemplateRef<any>, type: 'saveConnStr' | 'saveTenant') {
     this.selectedModalContent = {
       title,
       template,
@@ -224,4 +236,15 @@ export class TenantsComponent implements OnInit {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
+
+  onSharedDatabaseChange(value: boolean) {
+    if (!value) {
+      setTimeout(() => {
+        const defaultConnectionString = document.getElementById('defaultConnectionString') as HTMLInputElement;
+        if (defaultConnectionString) {
+          defaultConnectionString.focus();
+        }
+      }, 0);
+    }
+  }
 }