1. DivId is related to >=1 Pages (not just one) - there is no check that AT LEAST one Page was selected.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@50971 d315682c-612b-4755-9ff5-7f18f6832af3

app/domain/divId.ts

@@ -4,7 +4,7 @@ import {Community} from './community';
 export interface DivId {
     _id: string;
     name: string;
-    page: string | Page;
+    pages: string[] | Page[];
     community: string | Community;
 }
 

app/pages/divId/divId-form.component.html

@@ -1,10 +1,33 @@
 <form [formGroup]="myForm">
-    <div class="form-group" [ngClass]="{'has-error':!myForm.controls.page.valid && myForm.controls.page.dirty}">
+    <!-- <div class="form-group" [ngClass]="{'has-error':!myForm.controls.page.valid && myForm.controls.page.dirty}">
         <label for="pageTag">Select Page</label>
         <select formControlName="page" id="pageTag" class="form-control">
             <option *ngFor="let page of availablePages" [value]="page._id">{{page.name}}</option>
         </select>
+    </div> -->
+
+    <div formArrayName="pages" class="form-group" [ngClass]="{'has-error':!myForm.controls.pages.valid && myForm.controls.pages.dirty}">
+        <label for="pageNameTag">Page Name</label>
+        <div id="pageNameTag">
+          <pre class="card card-block card-header"><span *ngFor="let page of formPages; let i=index">{{page.name}}<span *ngIf="i<(formPages.length-1)">, </span></span></pre>
+          <button type="button" (click)="toggle()">Add / Remove pages</button>
+          <ng-container *ngIf="!myForm.value.isCollapsed" >
+            <div *ngFor="let page of availablePages">
+              <span>
+                <span *ngIf="indexOfPageInForm(page._id) >= 0" class="activated" >
+                    <input (click)="togglePage(false, page)" class="deactivate" src="imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">
+                </span>
+                <span *ngIf="indexOfPageInForm(page._id) < 0" class="deactivated" >
+                    <input (click)="togglePage(true, page)" class="activate" src="imgs/add-icon.png" title="Enable" width="20" type="image" height="20">
+                </span>
+                {{page.name}}
+              </span>
+            </div>
+          </ng-container>
+
+        </div>
     </div>
+
     <div class="form-group" [ngClass]="{'has-error':!myForm.controls.name.valid && myForm.controls.name.dirty}">
         <label for="divIdNameTag">Class Name</label>
         <input type="text" class="form-control" formControlName="name" id="divIdNameTag" placeholder="Class Name">

app/pages/divId/divId-form.component.ts

@@ -17,6 +17,10 @@ export class DivIdFormComponent implements OnInit{
     pageId: string;
     @Input('availablePages')
     availablePages : Page[] = [];
+    @Input('formPages')
+    formPages: Page[] = [];
+
+    private gotPages: boolean = false;
 
     public errorMessage: string;
 
@@ -25,7 +29,7 @@ export class DivIdFormComponent implements OnInit{
     ngOnInit(): void {
 
     }
-
+/*
     public get form() {
         return this._fb.group({
             _id : '',
@@ -43,11 +47,135 @@ export class DivIdFormComponent implements OnInit{
             community: this.communityPid
         });
     }
+*/
 
-    handleError(message: string, error) {
+
-        if(error == null) {
+
-            this.reset();
+public toggle() {
-        }
+  this.myForm.value.isCollapsed = !this.myForm.value.isCollapsed;
-        this.errorMessage = message + ' (Server responded: ' + error + ')';
+/*
+  if(!this.myForm.value.isCollapsed) {
+    let includedPages: Set<String> = new Set<String>();
+    for(let pageName of this.myForm.value.pages) {
+      includedPages.add(pageName._id);
     }
+
+    let allPages = this.availablePages;
+
+    let self = this;
+    allPages.forEach(function (status, page, map) {
+      if(includedPages.has(page._id)) {
+        self.allPages.set(page, true);
+      } else {
+        self.allEntities.set(page, false);
+      }            community: this.communityPid
+
+    });
+
+
+    if(!this.gotPages && this.myForm.value.pages.length > 0) {
+      this.gotPages = true;
+      this.getPages();
+    }
+  }
+*/
+}
+/*
+public getPages() {
+  let self = this;
+  this._helpContentService.getPages().subscribe(
+    pages => {
+        for(let page of pages) {
+          let index = self.myForm.value.pages.indexOf(page._id);
+          if(index >= 0) {
+            self.formPages[index] = page;
+          }
+        }
+    },
+    error => this.handleError('System error retrieving pages', error));
+}
+*/
+
+public getKeys( map) {
+  return Array.from(map.keys());
+}
+
+public get form() {
+    return this._fb.group({
+        _id: '',
+        name : ['', Validators.required],
+        pages: this._fb.array([]),
+        //pages: [[], Validators.required],
+        community: this.communityPid,
+        isCollapsed: [true]
+    });
+}
+
+public reset() {
+  console.info("reset");
+    this.myForm.patchValue({
+        _id : '',
+        name : '',
+        community: this.communityPid,
+        isCollapsed: [true]
+    });
+
+    this.setPages([]);
+    //this.initPages();
+    this.formPages = [];
+}
+
+public get pages(): FormArray {
+  return this.myForm.get('pages') as FormArray;
+};
+
+setPages(pages: string[]) {
+  console.info(pages);
+  //const pageFGs = pages.map(page => this._fb.group(page));
+  //const pageFormArray = this._fb.array(pageFGs);
+  const pageFormArray = this._fb.array(pages);
+  //const pageFormArray = this.myForm.pages.patchValue([]);
+  this.myForm.setControl('pages', pageFormArray);
+}
+/*
+initPages() {
+  let ctrl = <FormArray>this.form.controls.pages;
+  ctrl.push(this._fb.group({
+    page: ['', Validators.required]
+  }))
+}
+*/
+indexOfPageInForm(pageId: string): number {
+  let index: number = -1;
+  for(let i=0; i<this.formPages.length; i++) {
+    if(this.formPages[i]._id == pageId) {
+      index = i;
+      break;
+    }
+  }
+  return index;
+}
+
+public togglePage(status : boolean, page: Page) {
+  let index: number = this.indexOfPageInForm(page._id);
+  //index = this.formPages.indexOf(page);
+  console.info("status: "+status + "   index: "+index);
+
+  if(status && index<0) {
+    this.formPages.push(page);
+    //this.myForm.value.pages.push(page._id);
+  } else if(!status){
+    if(index >= 0) {
+      this.formPages.splice(index, 1);
+      //this.myForm.value.pages.splice(index, 1);
+    }
+  }
+}
+
+handleError(message: string, error) {
+    if(error == null) {
+        this.reset();
+    }
+    this.errorMessage = message + ' (Server responded: ' + error + ')';
+}
 }

app/pages/divId/divIds.component.html

@@ -66,7 +66,10 @@
                                                 <div class="community" href="#">{{check.divId.community.name}}</div>
                                             </td>
                                             <td>
-                                                <div class="page" href="#">{{check.divId.page.name}}</div>
+                                                <!-- <div class="page" href="#">{{check.divId.page.name}}</div> -->
+                                                <div class="pages" href="#">
+                                                  <span *ngFor="let page of check.divId.pages let i=index">{{page.name}}<span *ngIf="i<(check.divId.pages.length-1)">, </span></span>
+                                                </div>
                                             </td>
                                             <td>
                                                 <div class="actions" href="#">
@@ -96,7 +99,7 @@
 
 <modal-form #updateModal [saveText]="'Update'" [titleText]="'Update Class'" [formGroup]="formGroup" [type]="'divId'"
             [isModalShown]="isModalShown" (emmitObject)="divIdUpdatedSuccessfully($event)" (emmitError)="handleError($event)">
-    <divId-form [group]="formGroup" [communityPid]="selectedCommunityPid" [availablePages]="pages"></divId-form>
+    <divId-form [group]="formGroup" [communityPid]="selectedCommunityPid" [availablePages]="pages" [formPages]="formPages"></divId-form>
 </modal-form>
 
 <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteDivIds($event)">

app/pages/divId/divIds.component.ts

@@ -42,6 +42,7 @@ export class DivIdsComponent implements OnInit {
     public selectedCommunityPid: string;
     public communities: Community[] = [];
     public pages: Page[] = [];
+    public formPages: Page[] = [];
 
     ngOnInit() {
         this.formGroup = this.formComponent.form;
@@ -144,7 +145,23 @@ export class DivIdsComponent implements OnInit {
 
     public editDivId(i : number) {
         let divId : DivId = this.checkboxes[i].divId;
+        this.formPages = <Page[]>divId.pages;
+
+        let pageIds: string[] = [];
+        let index = 0;
+        for(let page of <Page[]>divId.pages) {
+          pageIds[index] = page._id;
+          index++;
+        }
+        //divId.pages = pageIds;
+
+        let community: Community = <Community>divId.community;
         this.formGroup.patchValue(divId);
+        this.formGroup.patchValue({
+          community: community._id
+        });
+        this.formComponent.setPages(pageIds);
+
         this.updateModal.showModal();
     }
 
@@ -191,6 +208,7 @@ export class DivIdsComponent implements OnInit {
 
     handleError(message: string, error) {
         if(error == null) {
+            console.info("handleError");
             this.formComponent.reset();
         }
         this.errorMessage = message + ' (Server responded: ' + error + ')';

app/pages/divhelpcontent/div-help-contents.component.html

@@ -91,7 +91,10 @@
                                                                                 name="entitiescb[]" value="{{check.divHelpContent._id}}" [(ngModel)]="check.checked">
                                             </td>
                                             <td *ngIf="!selectedPageId">
-                                                <div class="page" href="#">{{check.divHelpContent.divId.page.name}}</div>
+                                                <!-- <div class="page" href="#">{{check.divHelpContent.divId.page.name}}</div> -->
+                                                <div class="pages" href="#">
+                                                  <span *ngFor="let page of check.divHelpContent.divId.pages let i=index">{{page.name}}<span *ngIf="i<(check.divHelpContent.divId.pages.length-1)">, </span></span>
+                                                </div>
                                             </td>
                                             <td *ngIf="!selectedPageId">
                                                 <div class="community" href="#">{{check.divHelpContent.divId.community.name}}</div>

app/pages/divhelpcontent/div-help-contents.component.ts

@@ -139,8 +139,10 @@ export class DivHelpContentsComponent implements OnInit {
                 });*/
                 for (let i = self.divHelpContents.length - 1; i >= 0; i -= 1) {
                   let divId: DivId = self.divHelpContents[i].divId as DivId;
-                  let page: Page =  divId.page as Page;
+                  let pages: Page[] =  divId.pages as Page[];
-                  if(!self.selectedPageId || (page._id == self.selectedPageId)) {
+                  const pageIds = pages.map(x => x._id);
+
+                  if(!self.selectedPageId || pageIds.includes(self.selectedPageId)/*(page._id == self.selectedPageId)*/) {
                     self.checkboxes.push(<CheckDivHelpContent>{divHelpContent : self.divHelpContents[i], checked : false});
                   } else {
                     self.divHelpContents.splice(i, 1);
@@ -212,7 +214,6 @@ export class DivHelpContentsComponent implements OnInit {
             () => {
                 for(let id of ids) {
                     let i = this.checkboxes.findIndex(_ => _.divHelpContent._id == id);
-                    console.info(i);
                     this.checkboxes[i].divHelpContent.isActive=status;
                 }
                 this.countDivHelpContents();
@@ -223,8 +224,6 @@ export class DivHelpContentsComponent implements OnInit {
     }
 
     public saveDivHelpContent(data : any):void {
-        console.log(data);
-
         this._helpService.insertOrUpdateDivHelpContent(data).subscribe(
             divHelpContent => this.divHelpContentSavedSuccessfully(divHelpContent),
             error => this.handleError('System error saving the specified help content', error)
@@ -250,7 +249,10 @@ export class DivHelpContentsComponent implements OnInit {
 
     public filterDivHelpContent(divHelpContent : DivHelpContent, filters : DivHelpContentFilterOptions) : boolean {
         let divId: DivId = divHelpContent.divId as DivId;
-        let idFlag = filters.id == '' || (<Page>divId.page)._id == filters.id;
+        let pages: Page[] = <Page[]>divId.pages;
+        let pageIds: string[] = pages.map(x => x._id);
+
+        let idFlag = filters.id == '' || /*(<Page[]>divId.pages)._id == filters.id*/ pageIds.includes(filters.id);
         let activeFlag = filters.active == null || divHelpContent.isActive == filters.active;
         let textFlag = filters.text.toString() == '' || (divHelpContent.content).match(filters.text) != null;
         return idFlag && activeFlag && textFlag;

app/pages/modal-form.component.ts

@@ -125,14 +125,15 @@ export class ModalFormComponent {
                         error => this.emmitError.emit(error)
                     );
                   } else if(this.saveText == 'Save') {
+                    //console.info(<DivId> obj);
                     this._helpService.saveDivId(<DivId> obj).subscribe(
                         data => this.emmitObject.emit(data),
                         error => this.emmitError.emit(error)
                     );
                   }
               }
+              this.hideModal();
             }
-            this.hideModal();
         }
     }
 }