[DEV] update application to display with render-form
This commit is contained in:
parent
2ab3b85806
commit
e1bb3a3ab9
@ -47,36 +47,17 @@
|
||||
<name>Create new application</name>
|
||||
<description>Add a new application on the server</description>
|
||||
<body>
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td width="15%"><b>Name:</b></td>
|
||||
<td width="85%">
|
||||
<app-entry
|
||||
[value]="name"
|
||||
placeholder="Enter application name"
|
||||
[hasError]="nameState !== true"
|
||||
(changeValue)="checkName($event)"></app-entry>
|
||||
<app-error-message-state [value]="nameState"></app-error-message-state>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="15%"><b>Redirect:</b></td>
|
||||
<td width="85%">
|
||||
<app-entry
|
||||
[value]="redirect"
|
||||
placeholder="Enter http redirect adresses "
|
||||
[hasError]="redirectState !== true"
|
||||
(changeValue)="checkRedirect($event)"></app-entry>
|
||||
<app-error-message-state [value]="redirectState"></app-error-message-state>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<app-render-form
|
||||
[values]="createApplicationMenu"
|
||||
(deltaValues)="onCreateValueDeltaValues($event)"
|
||||
(changeState)="onCreateValueState($event)"
|
||||
></app-render-form>
|
||||
</body>
|
||||
<footer>
|
||||
<button
|
||||
class="button login color-button-validate color-shadow-black"
|
||||
id="create-button"
|
||||
[disabled]="validateButtonCreateApplicationDisabled"
|
||||
[disabled]="validateButtonCreateApplicationDisabled !== 0"
|
||||
(click)="onCreateApplication()"
|
||||
type="submit">
|
||||
Create application
|
||||
|
||||
@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
|
||||
import { Router } from '@angular/router';
|
||||
import { ApplicationService, ApplicationModel } from 'app/service';
|
||||
import { AsyncActionState } from 'common/component';
|
||||
import { SettingsItem, SettingType } from 'common/component/render-settings/render-settings';
|
||||
import { NotificationService, PopInService } from 'common/service';
|
||||
|
||||
@Component({
|
||||
@ -23,12 +24,13 @@ export class ApplicationsScene implements OnInit {
|
||||
private applicationService: ApplicationService,
|
||||
private notificationService: NotificationService,
|
||||
private router: Router,
|
||||
private popInService: PopInService,
|
||||
private popInService: PopInService,
|
||||
private cdr: ChangeDetectorRef,
|
||||
) {
|
||||
) {
|
||||
}
|
||||
ngOnInit() {
|
||||
let self = this;
|
||||
this.configureInput();
|
||||
this.applicationService
|
||||
.gets()
|
||||
.then((response: ApplicationModel[]) => {
|
||||
@ -67,116 +69,90 @@ export class ApplicationsScene implements OnInit {
|
||||
confirmDeleteApplication: ApplicationModel = undefined;
|
||||
|
||||
deleteConfirmed() {
|
||||
if(this.confirmDeleteApplication !== undefined) {
|
||||
if (this.confirmDeleteApplication !== undefined) {
|
||||
this.removeApplicationConfirm(this.confirmDeleteApplication);
|
||||
this.confirmDeleteComment = undefined;
|
||||
this.confirmDeleteApplication = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onEditApplication(_event: any, application: ApplicationModel) {
|
||||
this.router.navigate(["application-edit", application.id]);
|
||||
/*
|
||||
user.admin = value;
|
||||
console.log(`onSetAdmin: ${value} on ${user.login}`);
|
||||
user.adminState = AsyncActionState.LOADING;
|
||||
this.cdr.detectChanges();
|
||||
let self = this;
|
||||
this.adminUserService.setAdmin(user.id, value)
|
||||
.then(
|
||||
() => {
|
||||
user.adminState = AsyncActionState.DONE;
|
||||
self.cdr.detectChanges();
|
||||
setTimeout(() => {
|
||||
user.adminState = undefined;
|
||||
self.cdr.detectChanges();
|
||||
}, 3000);
|
||||
|
||||
}
|
||||
).catch(
|
||||
(error: any) => {
|
||||
user.adminState = AsyncActionState.FAIL;
|
||||
self.cdr.detectChanges();
|
||||
setTimeout(() => {
|
||||
user.adminState = undefined;
|
||||
user.admin = !value;
|
||||
self.cdr.detectChanges();
|
||||
}, 3000);
|
||||
}
|
||||
);
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public name: string = '';
|
||||
public nameState: boolean|string = false;
|
||||
|
||||
public redirect: string = '';
|
||||
public redirectState: boolean|string = false;
|
||||
createApplicationMenu: SettingsItem[] = []
|
||||
|
||||
public validateButtonCreateApplicationDisabled: boolean = true;
|
||||
// this permit to clear the input menu...
|
||||
configureInput() {
|
||||
this.createApplicationMenu = [
|
||||
{
|
||||
type: SettingType.STRING,
|
||||
title: 'Name:',
|
||||
placeholder: 'Enter application name',
|
||||
key: 'name',
|
||||
value: '',
|
||||
checker: (value) => { return this.checkName(value)},
|
||||
require: true,
|
||||
},
|
||||
{
|
||||
type: SettingType.STRING,
|
||||
title: 'Redirect:',
|
||||
placeholder: 'Enter http redirect adresses',
|
||||
key: 'redirect',
|
||||
value: '',
|
||||
checker: (value) => { return this.checkRedirect(value)},
|
||||
require: true,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
public validateButtonCreateApplicationDisabled: number = undefined;
|
||||
public dataCreateApplication: object = {};
|
||||
|
||||
/**
|
||||
* update the state of the validation button. if all is OK, the button will became clickable
|
||||
* Check the application name is available
|
||||
*/
|
||||
updateButtonVisibility(): void {
|
||||
if (this.nameState === true && this.redirectState === true) {
|
||||
this.validateButtonCreateApplicationDisabled = false;
|
||||
} else {
|
||||
this.validateButtonCreateApplicationDisabled = true;
|
||||
checkName(value: string): string | undefined {
|
||||
console.log(`input value : ${value}`)
|
||||
if (value.length < 6) {
|
||||
return "This name is too small >=6.";
|
||||
}
|
||||
for (let iii = 0; iii < this.applications.length; iii++) {
|
||||
let application = this.applications[iii];
|
||||
if (application.name === value) {
|
||||
return "This name already exist.";
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check the login writing rules
|
||||
* Check the redirection have a good form
|
||||
*/
|
||||
checkName(newValue: string): void {
|
||||
this.name = newValue;
|
||||
if (this.name.length < 6) {
|
||||
this.nameState = "This name is too small >=6.";
|
||||
checkRedirect(value: string): string | undefined {
|
||||
if (value.length <= 5) {
|
||||
return "This redirect is too small.";
|
||||
}
|
||||
this.nameState = true;
|
||||
for (let iii=0; iii<this.applications.length; iii++) {
|
||||
let application = this.applications[iii];
|
||||
if (application.name === this.name) {
|
||||
this.nameState = "This name already exist.";
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.updateButtonVisibility();
|
||||
}
|
||||
/**
|
||||
* Check the login writing rules
|
||||
*/
|
||||
checkRedirect(newValue: string): void {
|
||||
this.redirect = newValue;
|
||||
this.redirectState = true;
|
||||
if (this.redirect.length <= 5) {
|
||||
this.redirectState = "This redirect is too small.";
|
||||
}
|
||||
this.updateButtonVisibility();
|
||||
return undefined;
|
||||
}
|
||||
|
||||
createState: string | boolean = undefined;
|
||||
/**
|
||||
* Request the creation of a new application.
|
||||
*/
|
||||
onCreateApplication(): void {
|
||||
onCreateApplication(): void {
|
||||
console.log(`create user:`);
|
||||
this.createState = AsyncActionState.LOADING;
|
||||
let self = this;
|
||||
this.applicationService.create(this.name, this.redirect)
|
||||
this.applicationService.create(this.dataCreateApplication["name"], this.dataCreateApplication["redirect"])
|
||||
.then(
|
||||
(data: ApplicationModel) => {
|
||||
self.createState = AsyncActionState.DONE;
|
||||
console.log(`Get new user: ${JSON.stringify(data, null, 2)}`);
|
||||
self.applications.push(data);
|
||||
self.cdr.detectChanges();
|
||||
self.name = null;
|
||||
self.redirect = null;
|
||||
this.configureInput();
|
||||
setTimeout(() => {
|
||||
this.createState = undefined;
|
||||
}, 3000);
|
||||
@ -190,4 +166,16 @@ export class ApplicationsScene implements OnInit {
|
||||
}
|
||||
);
|
||||
}
|
||||
onCreateValueState(value: number) {
|
||||
console.log(`changeState : ${JSON.stringify(value, null, 2)}`);
|
||||
this.validateButtonCreateApplicationDisabled = value;
|
||||
// we do not change the main ref ==> notify angular that something have change and need to be re-render???
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
onCreateValueDeltaValues(value: any) {
|
||||
console.log(`onDeltaValues : ${JSON.stringify(value, null, 2)}`);
|
||||
this.dataCreateApplication = value;
|
||||
// we do not change the main ref ==> notify angular that something have change and need to be re-render???
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
}
|
||||
|
||||
@ -122,6 +122,7 @@ export class SettingsService {
|
||||
for (let key of keys) {
|
||||
this.set(key, data[key])
|
||||
.then((result: boolean) => {
|
||||
|
||||
multipleResponse.add(key, result);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user