First round of internationlization

This commit is contained in:
2023-03-09 15:51:00 +01:00
parent 0011b62a5d
commit 0f1c910919
10 changed files with 817 additions and 62 deletions

View File

@@ -1,36 +1,32 @@
<div>
<form cForm [formGroup]="form" (ngSubmit)="onSubmit(model)">
<span class="col col-form-label" *ngIf="formLoading$ || modelLoading$ | async">Loading...</span>
<span class="col col-form-label" i18n *ngIf="formLoading$ || modelLoading$ | async">Loading...</span>
<formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
<div class="d-grid gap-2 d-md-flex">
<button class="btn btn-success btn-lg" type="submit"
[disabled]="!form.valid && (formLoading$ || modelLoading$ | async)">
{{ this.isCreateForm() ? "Create" : "Update" }}
{{ submitText }}
</button>
<button class="btn btn-primary btn-lg" type="button" *ngIf="!this.isCreateForm()"
<button class="btn btn-primary btn-lg" i18n type="button" *ngIf="!this.isCreateForm()"
[disabled]="!form.valid && (formLoading$ || modelLoading$ | async)"
(click)="open(duplicationModal)">
Duplicate
</button>
<button class="btn btn-danger btn-lg" type="button" *ngIf="!this.isCreateForm()"
(click)="open(duplicationModal)">Duplicate</button>
<button class="btn btn-danger btn-lg" i18n type="button" *ngIf="!this.isCreateForm()"
[disabled]="formLoading$ || modelLoading$ | async"
(click)="open(confirmDeleteModal)">
Delete
</button>
(click)="open(confirmDeleteModal)">Delete</button>
<ng-template #confirmDeleteModal let-modal>
<div class="modal-header">
<h4 class="modal-title">Are you sure you want to delete this {{ this.schema }}?</h4>
<button type="button" class="btn-close" aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')"></button>
<h4 class="modal-title" i18n>Are you sure you want to delete this {{ this.schema }}?</h4>
<button type="button" class="btn-close" i18n-aria-label aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')"></button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')">Cancel</button>
<button type="button" class="btn btn-danger" (click)="modal.close('Save click')">Delete</button>
<button type="button" class="btn btn-light" i18n i18n-aria-label aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')">Cancel</button>
<button type="button" class="btn btn-danger" i18n (click)="modal.close('Save click')">Delete</button>
</div>
</ng-template>
<ng-template #duplicationModal let-modal>
<div class="modal-header">
<h4 class="modal-title">Duplicate {{ this.schema }}</h4>
<button type="button" class="btn-close" aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')"></button>
<h4 class="modal-title" i18n>Duplicate {{ this.schema }}</h4>
<button type="button" class="btn-close" i18n-aria-label aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')"></button>
</div>
<div class="modal-body">
<crud-card [resource]="this.resource"

View File

@@ -9,15 +9,15 @@ import { CrudFormlyJsonschemaService } from "../crud-formly-jsonschema.service";
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
@Component({
selector: 'crud-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
selector: 'crud-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
@Input() resource: string | undefined;
@Input() resource_id: string | null = null;
@Input() schema: string | undefined;
@Input() is_modal: Boolean = false;
@Input() resource: string | undefined;
@Input() resource_id: string | null = null;
@Input() schema: string | undefined;
@Input() is_modal: Boolean = false;
private _model: {} = {};
@@ -39,10 +39,10 @@ export class CardComponent implements OnInit {
@Output() error: EventEmitter<string> = new EventEmitter();
form = new FormGroup({});
fields: FormlyFieldConfig[] = [];
form = new FormGroup({});
fields: FormlyFieldConfig[] = [];
schemas = JSON.parse(`{}`);
schemas = JSON.parse(`{}`);
private _formLoading$ = new BehaviorSubject<boolean>(true);
private _modelLoading$ = new BehaviorSubject<boolean>(true);
@@ -55,12 +55,16 @@ export class CardComponent implements OnInit {
return this._modelLoading$.asObservable();
}
constructor(private crudService: CrudService,
private formlyJsonschema: CrudFormlyJsonschemaService,
private router: Router,
private route: ActivatedRoute,
private modalService: NgbModal,
) { }
get submitText() {
return this.isCreateForm() ? $localize`Create` : $localize`Update`
}
constructor(private crudService: CrudService,
private formlyJsonschema: CrudFormlyJsonschemaService,
private router: Router,
private route: ActivatedRoute,
private modalService: NgbModal,
) { }
ngOnInit(): void {
this._formLoading$.next(true);
@@ -136,9 +140,9 @@ export class CardComponent implements OnInit {
this.modalService.dismissAll();
}
isCreateForm() {
return this.resource_id === null;
}
isCreateForm() {
return this.resource_id === null;
}
open(content: any) {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(

View File

@@ -1,10 +1,9 @@
<form>
<button class="btn btn-success btn-lg float-end" type="button" (click)="onCreate()">
<button class="btn btn-success btn-lg float-end" type="button" i18n (click)="onCreate()">
Create {{ this.schema }}
</button>
<div class="mb-3 row">
<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Full text search:</label>
<label for="table-complete-search" i18n class="col-xs-3 col-sm-auto col-form-label">Full text search:</label>
<div class="col-xs-3 col-sm-auto">
<input
id="table-complete-search"
@@ -14,7 +13,7 @@
[(ngModel)]="searchTerm"
/>
</div>
<span class="col col-form-label" *ngIf="loading$ | async">Loading...</span>
<span class="col col-form-label" i18n *ngIf="loading$ | async">Loading...</span>
</div>
<div class="table-responsive-md">
<table class="table table-striped">
@@ -38,11 +37,11 @@
</ngb-pagination>
<select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="pageSize">
<option [ngValue]="10">10 items per page</option>
<option [ngValue]="15">15 items per page</option>
<option [ngValue]="25">25 items per page</option>
<option [ngValue]="50">50 items per page</option>
<option [ngValue]="100">100 items per page</option>
<option i18n [ngValue]="10">10 items per page</option>
<option i18n [ngValue]="15">15 items per page</option>
<option i18n [ngValue]="25">25 items per page</option>
<option i18n [ngValue]="50">50 items per page</option>
<option i18n [ngValue]="100">100 items per page</option>
</select>
</div>
</form>