karso/front/src/app/scene/application/applications.ts

/** @file
 * @author Edouard DUPIN
 * @copyright 2018, Edouard DUPIN, all right reserved
 * @license PROPRIETARY (see license file)
 */

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
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({
	selector: 'application-setting',
	templateUrl: './applications.html',
	styleUrls: ['./applications.less'],
	changeDetection: ChangeDetectionStrategy.Default,
})
export class ApplicationsScene implements OnInit {
	applications: ApplicationModel[] = [];

	constructor(
		private applicationService: ApplicationService,
		private notificationService: NotificationService,
		private router: Router,
		private popInService: PopInService,
		private cdr: ChangeDetectorRef,
	) {
	}
	ngOnInit() {
		let self = this;
		this.configureInput();
		this.applicationService
			.gets()
			.then((response: ApplicationModel[]) => {
				console.log(`??? get full response: ${JSON.stringify(response, null, 4)}`);
				self.applications = response;
			})
			.catch((error: any) => {
				console.log(`??? get ERROR response: ${JSON.stringify(error, null, 4)}`);
			});
	}

	onRemoveApplication(_event: any, application: ApplicationModel) {
		this.confirmDeleteComment = `Delete the application ID: [${application.id}] ${application.name}`;
		this.confirmDeleteApplication = application;
		this.popInService.open('popin-delete-confirm');
	}

	removeApplicationConfirm(application: ApplicationModel) {
		let self = this;
		this.applicationService.remove(application.id)
			.then(
				() => {
					const index = self.applications.indexOf(application, 0);
					if (index > -1) {
						self.applications.splice(index, 1);
						self.cdr.detectChanges();
					}
				}
			).catch(
				(error: any) => {
					self.notificationService.errorRaw(`Fail to delete application: [${application.id}]: ${application.name} ==> ${error}`)
				}
			);
	}
	confirmDeleteComment: string = undefined;
	confirmDeleteApplication: ApplicationModel = undefined;

	deleteConfirmed() {
		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]);
	}


	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 = {};

	/**
	 * Check the application name is available
	 */
	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 redirection have a good form
	 */
	checkRedirect(value: string): string | undefined {
		if (value.length <= 5) {
			return "This redirect is too small.";
		}
		return undefined;
	}

	createState: string | boolean = undefined;
	/**
	 * Request the creation of a new application.
	 */
	onCreateApplication(): void {
		console.log(`create user:`);
		this.createState = AsyncActionState.LOADING;
		let self = this;
		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();
					this.configureInput();
					setTimeout(() => {
						this.createState = undefined;
					}, 3000);
				}
			).catch(
				(error: any) => {
					self.createState = AsyncActionState.FAIL;
					setTimeout(() => {
						self.createState = undefined;
					}, 3000);
				}
			);
	}
	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();
	}
}