[DEV] basic modal concapt for test

front/package-lock.json

@@ -7520,6 +7520,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

front/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --watch",
     "build": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
@@ -23,7 +23,8 @@
     "core-js": "^3.6.4",
     "rxjs": "^6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.9.1",
+    "jquery": "3.4.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.803.25",

front/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { ElementTypeComponent } from './component/element-type/element-type.comp
 import { ElementGroupComponent } from './component/element-group/element-group.component';
 import { ElementSaisonComponent } from './component/element-saison/element-saison.component';
 import { ElementVideoComponent } from './component/element-video/element-video.component';
+import { ModalComponent } from './component/modal/modal';
 
 import { HelpComponent } from './scene/help/help.component';
 import { LoginComponent } from './scene/login/login.component';
@@ -51,11 +52,9 @@ import { SaisonService } from './service/saison.service';
 import { VideoService } from './service/video.service';
 import { SessionService } from './service/session.service';
 import { BddService } from './service/bdd.service';
+import { ModalService } from './service/modal';
 import { AppComponent } from './app.component';
 
-
-
-
 @NgModule({
 	declarations: [
 		AppComponent,
@@ -80,7 +79,8 @@ import { AppComponent } from './app.component';
 		ErrorComponent,
 		VideoEditComponent,
 		SaisonEditComponent,
-		GroupEditComponent
+		GroupEditComponent,
+		ModalComponent
 		],
 	imports: [
 		BrowserModule,
@@ -92,6 +92,7 @@ import { AppComponent } from './app.component';
 		ReactiveFormsModule
 		],
 	providers: [
+		ModalService,
 		HttpWrapperService,
 		BddService,
 		AuthService,

front/src/app/component/modal/modal.html

@@ -0,0 +1,9 @@
+<div class="fill-modal">
+    <div class="modal">
+        <div class="modal-body">
+        	<h1>{{title}}</h1>
+        	<ng-content></ng-content>
+        </div>
+    </div>
+    <div class="modal-background"></div>
+</div>

front/src/app/component/modal/modal.less

@@ -0,0 +1,59 @@
+/* MODAL STYLES
+-------------------------------*/
+
+/* modals are hidden by default */
+//display: none;
+.fill-modal {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 800;
+}
+
+.modal {
+	/* modal container fixed across whole screen */
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: block;
+
+	/* z-index must be higher than .modal-background */
+	z-index: 1000;
+	
+	/* enables scrolling for tall modals */
+	overflow: auto;
+
+	.modal-body {
+		padding: 20px;
+		background: #fff;
+
+		/* margin exposes part of the modal background */
+		margin: 40px;
+	}
+}
+
+.modal-background {
+	/* modal background fixed across whole screen */
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	/* semi-transparent black  */
+	background-color: #000;
+	opacity: 0.75;
+	
+	/* z-index must be below .modal and above everything else  */
+	z-index: 900;
+}
+
+
+body.modal-open {
+	/* body overflow is hidden to hide main scrollbar when modal window is open */
+	overflow: hidden;
+}

front/src/app/component/modal/modal.ts

@@ -0,0 +1,60 @@
+import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+import * as $ from 'jquery';
+
+import { ModalService } from '../../service/modal';
+
+@Component({
+	moduleId: module.id.toString(),
+	selector: 'modal',
+	templateUrl: './modal.html',
+	styleUrls: ['./modal.less']
+})
+
+export class ModalComponent implements OnInit, OnDestroy {
+	@Input() id: string;
+	@Input() title: string = 'No title';
+	@Input() closeOnOutClick: any = "false";
+	private element: any;
+	constructor(private modalService: ModalService,
+	            private el: ElementRef) {
+		this.element = $(el.nativeElement);
+	}
+	ngOnInit(): void {
+		let modal = this;
+		// ensure id attribute exists
+		if (!this.id) {
+			console.error('modal must have an id');
+			return;
+		}
+		// move element to bottom of page (just before </body>) so it can be displayed above everything else
+		this.element.appendTo('body');
+		if (this.closeOnOutClick == "true") {
+			// close modal on background click
+			this.element.on('click', function (e: any) {
+				let target = $(e.target);
+				if (!target.closest('.modal-body').length) {
+					modal.close();
+				}
+			});
+		}
+		// add self (this modal instance) to the modal service so it's accessible from controllers
+		this.modalService.add(this);
+	}
+	// remove self from modal service when directive is destroyed
+	ngOnDestroy(): void {
+		this.modalService.remove(this.id);
+		this.element.remove();
+	}
+	// open modal
+	open(): void {
+		//console.log("request element show ...");
+		this.element.show();
+		//$('body').addClass('modal-open');
+		//console.log("    ==> done");
+	}
+	// close modal
+	close(): void {
+		this.element.hide();
+		//$('body').removeClass('modal-open');
+	}
+}

front/src/app/scene/video-edit/video-edit.html

@@ -166,4 +166,17 @@
 		</div>
 		<div class="clear"></div>
 	</div>
-</div>
+</div>
+
+
+<modal id="custom-modal-1" title="A Custom Modal test 1" >
+    <p>
+        Home page text: <input type="text" [(ngModel)]="bodyText" />
+    </p>
+    <button (click)="closeModal('custom-modal-1');">Close</button>
+</modal>
+
+<modal id="custom-modal-2" title="My second test" closeOnOutClick="true">
+    <button (click)="closeModal('custom-modal-2');">Close</button>
+</modal>
+

front/src/app/scene/video-edit/video-edit.ts

@@ -14,6 +14,7 @@ import { HttpWrapperService } from '../../service/http-wrapper.service';
 import { HttpEventType, HttpResponse} from '@angular/common/http';
 
 
+import { ModalService } from '../../service/modal';
 import { TypeService } from '../../service/type.service';
 import { UniversService } from '../../service/univers.service';
 import { GroupService } from '../../service/group.service';
@@ -104,7 +105,8 @@ export class VideoEditComponent implements OnInit {
 	            private groupService: GroupService,
 	            private videoService: VideoService,
 	            private httpService: HttpWrapperService,
-	            private arianeService: ArianeService) {
+	            private arianeService: ArianeService,
+	            private modalService: ModalService) {
 		
 	}
 	
@@ -381,9 +383,14 @@ export class VideoEditComponent implements OnInit {
 	}
 	newSaison() {
 		console.log("Request new Saison...");
+		this.modalService.open("custom-modal-1");
 	}
 	newSerie() {
 		console.log("Request new Serie...");
+		this.modalService.open("custom-modal-2");
+	}
+	closeModal(_id) {
+		this.modalService.close(_id);
 	}
 	newType() {
 		console.log("Request new Type...");

front/src/app/service/modal.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ModalService {
+	private modals: any[] = [];
+	
+	constructor() {
+		console.log("Start Modal Service");
+	}
+	
+	add(_modal: any) {
+		// add modal to array of active modals
+		this.modals.push(_modal);
+	}
+	
+	remove(_id: string) {
+		// remove modal from array of active modals
+		//let modalToRemove = _.findWhere(this.modals, { id: id });
+		//this.modals = _.without(this.modals, modalToRemove);
+	}
+	
+	open(_id: string) {
+		console.log("Try to open pop-in: '" + _id + "'");
+		// open modal specified by id
+		for (let iii=0; iii<this.modals.length; iii++) {
+			if (this.modals[iii].id == _id) {
+				console.log("    ==>find it ...");
+				this.modals[iii].open();
+				return;
+			}
+		}
+		console.log("    ==> NOT found     !!!!!");
+	}
+	
+	close(_id: string) {
+		// close modal specified by id
+		for (let iii=0; iii<this.modals.length; iii++) {
+			if (this.modals[iii].id == _id) {
+				this.modals[iii].close();
+				return;
+			}
+		}
+	}
+}