handle errors better.

add dashboard location validation.
This commit is contained in:
Jason Kulatunga 2023-08-24 21:22:04 -07:00
parent 9a4dcf9852
commit 349863211d
2 changed files with 24 additions and 2 deletions

View File

@ -79,16 +79,34 @@
id="remoteDashboardLocation"
class="form-control"
placeholder="https://gist.github.com/..."
pattern="https://gist.github.com/.*"
name="remoteDashboardLocation"
type="url"
[(ngModel)]="dashboardLocation"
#dashboardLocationField="ngModel"
/>
</div>
</div>
<div *ngIf="dashboardLocationField.invalid && (dashboardLocationField.dirty || dashboardLocationField.touched)"
class="alert alert-danger">
<div *ngIf="dashboardLocationField.errors?.['required']">
Dashboard Location is required.
</div>
<div *ngIf="dashboardLocationField.errors?.['pattern']">
Dashboard Location must be a valid github gist url.
</div>
</div>
<div *ngIf="dashboardLocationError" class="alert alert-danger">
{{dashboardLocationError}}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" [disabled]="addDashboardLoading" (click)="addDashboardLocation()">Add</button>
<button type="button" class="btn btn-outline-indigo" [disabled]="addDashboardLoading" (click)="addDashboardLocation()">Add</button>
</div>
</ng-template>

View File

@ -36,6 +36,7 @@ export class DashboardComponent implements OnInit {
//dashboardLocation is used to store the location of the dashboard that we're trying to add
addDashboardLoading: boolean = false
dashboardLocation: string = ''
dashboardLocationError: string = ''
@ViewChild(GridstackComponent) gridComp?: GridstackComponent;
@ -140,6 +141,7 @@ export class DashboardComponent implements OnInit {
public addDashboardLocation(){
this.addDashboardLoading = true
this.dashboardLocationError = ''
this.fastenApi.addDashboardLocation(this.dashboardLocation).subscribe((result) => {
console.log("Added Remote Dashboard", result)
this.addDashboardLoading = false
@ -151,7 +153,9 @@ export class DashboardComponent implements OnInit {
}, (error) => {
console.log("Error Adding Remote Dashboard", error)
this.addDashboardLoading = false
},
this.dashboardLocationError = error
},
() => {
console.log("Completed Adding Remote Dashboard")
this.addDashboardLoading = false