kangaroo-and-rabbit/karso
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Activity

[DEV] update application to display with render-form

Browse Source
This commit is contained in:
Edouard DUPIN 2023-02-10 00:14:48 +01:00
parent 2ab3b85806
commit e1bb3a3ab9
3 changed files with 72 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
front/src/app/scene/application/applications.html
View File

@ -47,36 +47,17 @@
<name>Create new application</name> <name>Create new application</name>
<description>Add a new application on the server</description> <description>Add a new application on the server</description>
<body> <body>
<table width="100%"> <app-render-form
<tr> [values]="createApplicationMenu"
<td width="15%"><b>Name:</b></td> (deltaValues)="onCreateValueDeltaValues($event)"
<td width="85%"> (changeState)="onCreateValueState($event)"
<app-entry ></app-render-form>
[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>
</body> </body>
<footer> <footer>
<button <button
class="button login color-button-validate color-shadow-black" class="button login color-button-validate color-shadow-black"
id="create-button" id="create-button"
[disabled]="validateButtonCreateApplicationDisabled" [disabled]="validateButtonCreateApplicationDisabled !== 0"
(click)="onCreateApplication()" (click)="onCreateApplication()"
type="submit"> type="submit">
Create application Create application

138
front/src/app/scene/application/applications.ts
View File

@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ApplicationService, ApplicationModel } from 'app/service'; import { ApplicationService, ApplicationModel } from 'app/service';
import { AsyncActionState } from 'common/component'; import { AsyncActionState } from 'common/component';
import { SettingsItem, SettingType } from 'common/component/render-settings/render-settings';
import { NotificationService, PopInService } from 'common/service'; import { NotificationService, PopInService } from 'common/service';
@Component({ @Component({
@ -23,12 +24,13 @@ export class ApplicationsScene implements OnInit {
private applicationService: ApplicationService, private applicationService: ApplicationService,
private notificationService: NotificationService, private notificationService: NotificationService,
private router: Router, private router: Router,
private popInService: PopInService, private popInService: PopInService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
) { ) {
} }
ngOnInit() { ngOnInit() {
let self = this; let self = this;
this.configureInput();
this.applicationService this.applicationService
.gets() .gets()
.then((response: ApplicationModel[]) => { .then((response: ApplicationModel[]) => {
@ -67,116 +69,90 @@ export class ApplicationsScene implements OnInit {
confirmDeleteApplication: ApplicationModel = undefined; confirmDeleteApplication: ApplicationModel = undefined;
deleteConfirmed() { deleteConfirmed() {
if(this.confirmDeleteApplication !== undefined) { if (this.confirmDeleteApplication !== undefined) {
this.removeApplicationConfirm(this.confirmDeleteApplication); this.removeApplicationConfirm(this.confirmDeleteApplication);
this.confirmDeleteComment = undefined; this.confirmDeleteComment = undefined;
this.confirmDeleteApplication = undefined; this.confirmDeleteApplication = undefined;
} }
} }
onEditApplication(_event: any, application: ApplicationModel) { onEditApplication(_event: any, application: ApplicationModel) {
this.router.navigate(["application-edit", application.id]); 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);
}
);
*/
} }
createApplicationMenu: SettingsItem[] = []
// 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 = {};
public name: string = '';
public nameState: boolean|string = false;
public redirect: string = '';
public redirectState: boolean|string = false;
public validateButtonCreateApplicationDisabled: boolean = true;
/** /**
* update the state of the validation button. if all is OK, the button will became clickable * Check the application name is available
*/ */
updateButtonVisibility(): void { checkName(value: string): string | undefined {
if (this.nameState === true && this.redirectState === true) { console.log(`input value : ${value}`)
this.validateButtonCreateApplicationDisabled = false; if (value.length < 6) {
} else { return "This name is too small >=6.";
this.validateButtonCreateApplicationDisabled = true;
} }
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 { checkRedirect(value: string): string | undefined {
this.name = newValue; if (value.length <= 5) {
if (this.name.length < 6) { return "This redirect is too small.";
this.nameState = "This name is too small >=6.";
} }
this.nameState = true; return undefined;
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();
} }
createState: string | boolean = undefined; createState: string | boolean = undefined;
/** /**
* Request the creation of a new application. * Request the creation of a new application.
*/ */
onCreateApplication(): void { onCreateApplication(): void {
console.log(`create user:`); console.log(`create user:`);
this.createState = AsyncActionState.LOADING; this.createState = AsyncActionState.LOADING;
let self = this; let self = this;
this.applicationService.create(this.name, this.redirect) this.applicationService.create(this.dataCreateApplication["name"], this.dataCreateApplication["redirect"])
.then( .then(
(data: ApplicationModel) => { (data: ApplicationModel) => {
self.createState = AsyncActionState.DONE; self.createState = AsyncActionState.DONE;
console.log(`Get new user: ${JSON.stringify(data, null, 2)}`); console.log(`Get new user: ${JSON.stringify(data, null, 2)}`);
self.applications.push(data); self.applications.push(data);
self.cdr.detectChanges(); self.cdr.detectChanges();
self.name = null; this.configureInput();
self.redirect = null;
setTimeout(() => { setTimeout(() => {
this.createState = undefined; this.createState = undefined;
}, 3000); }, 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();
}
} }

1
front/src/app/service/settings.ts
View File

@ -122,6 +122,7 @@ export class SettingsService {
for (let key of keys) { for (let key of keys) {
this.set(key, data[key]) this.set(key, data[key])
.then((result: boolean) => { .then((result: boolean) => {
multipleResponse.add(key, result); multipleResponse.add(key, result);
}) })
.catch((error: any) => { .catch((error: any) => {