manage plugins of a template

dashboard/plugins/plugins-routing.module.ts

@@ -6,7 +6,8 @@ import {PluginsComponent} from "./plugins.component";
 @NgModule({
     imports: [
         RouterModule.forChild([
-            { path: '',  component: PluginsComponent}
+            { path: '',  component: PluginsComponent},
+            { path: ':templateCode',  component: PluginsComponent, data: {templateView:true}}
         ])
     ]
 })

dashboard/plugins/plugins.component.html

@@ -24,7 +24,7 @@
           </div>
         </ng-container>
         <ng-container  *ngIf="!editView">
-        <div class="uk-width-expand">
+        <div *ngIf="!templateView" class="uk-width-expand">
           <a routerLink="../pages" class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
             <span class="uk-margin-right">
               <icon name="west" ratio="1.7" [flex]="true"></icon>
@@ -32,6 +32,14 @@
             <h1 *ngIf="page" class="uk-h5 uk-margin-remove">{{page.name}}</h1>
           </a>
         </div>
+        <div *ngIf="templateView" class="uk-width-expand">
+          <a routerLink="../.." class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
+          <span class="uk-margin-right">
+            <icon name="west" ratio="1.7" [flex]="true"></icon>
+          </span>
+            <h1 *ngIf="template" class="uk-h5 uk-margin-remove">{{template.name}}</h1>
+          </a>
+        </div>
         <div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search plugins" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1">
         </div>
         <div>
@@ -61,12 +69,15 @@
             <div class="uk-card uk-card-default">
               <div class="uk-card-body uk-flex">
                 <div class="uk-width-expand uk-text-small">
-                  <ng-container *ngIf="check.template">
+                  <ng-container *ngIf="check.template && !templateView">
                     <h6>{{check.template.name}}</h6>
                     <div  class="uk-margin-small-bottom">
                       {{check.template.description}}
                     </div>
                   </ng-container>
+                  <ng-container *ngIf="templateView">
+                    <h6>Community: {{check.plugin.pid}}</h6>
+                  </ng-container>
                   <ng-container *ngIf="!check.template">
                     <h6>{{check.plugin.code}}</h6>
                     <div  class="uk-margin-small-bottom uk-text-warning">

dashboard/plugins/plugins.component.ts

@@ -25,6 +25,7 @@ import {Plugin} from "../../utils/entities/adminTool/plugin";
 import {StringUtils} from "../../utils/string-utils.class";
 import {Portal} from "../../utils/entities/adminTool/portal";
 import {PluginTemplate} from "../../utils/entities/adminTool/pluginTemplate";
+import template = CKEDITOR.template;
 
 @Component({
   selector: 'plugins',
@@ -76,7 +77,9 @@ export class PluginsComponent implements OnInit {
   public selectedPageId: string;
   public community: Portal;
   public page: Page;
-
+  public templateView = false;
+  public templateCode:string = null;
+  public template
   constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router,
               private title: Title, private _helpContentService: HelpContentService,
               private _pluginsService: PluginsService, private _fb: UntypedFormBuilder,
@@ -93,29 +96,30 @@ export class PluginsComponent implements OnInit {
       this.searchText = new RegExp(value, 'i');
       this.applyFilters();
     }));
-    /*this.subscriptions.push(this.filterForm.get('type').valueChanges.subscribe(value => {
-      this.applyFilters();
-    }));*/
     this.subscriptions.push(this.route.params.subscribe(params => {
-      console.log(params)
-      this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
-      this.selectedCommunityPid = params.community;
 
+      this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
+      this.templateView = this.route.snapshot.data['templateView']
+      this.selectedCommunityPid = params.community;
+      this.templateCode = params['templateCode'];
+      if(this.templateView && this.templateCode){
+        this.getTemplateAndPlugins();
+      }
+      if(this.templateView && !this.templateCode){
+        this._router.navigate(['../..'], {relativeTo: this.route});
+      }
       this.subscriptions.push(this.route.queryParams.subscribe(params => {
         HelperFunctions.scroll();
-        console.log(params)
-        // this.selectedCommunityPid = params['communityId'];
         this.selectedPageId = params['pageId'];
         if (this.portal && this.selectedPageId) {
           this.getPage(this.selectedPageId);
         }
-        if (!this.selectedPageId) {
+        if (!this.selectedPageId && !this.templateView) {
           this._router.navigate(['../pages'], {relativeTo: this.route});
         }
       }));
     }));
 
-
   }
 
   ngOnDestroy(): void {
@@ -145,13 +149,13 @@ export class PluginsComponent implements OnInit {
           this._router.navigate(['./pageContents']);
         } else {
           this.page = page;
-          this.getPlugins();
+          this.getPagePlugins();
         }
       },
       error => this.handleError('System error retrieving page', error)));
   }
 
-  getPlugins() {
+  getPagePlugins() {
     this.showLoading = true;
     this.subscriptions.push(this._pluginsService.getPluginTemplatesByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe(
       templates => {
@@ -174,7 +178,31 @@ export class PluginsComponent implements OnInit {
       },
       error => this.handleError('System error retrieving templates', error)));
   }
+  getTemplateAndPlugins(){
 
+    this.showLoading = true;
+    this.subscriptions.push(this._pluginsService.getPluginTemplate(this.properties.adminToolsAPIURL,  this.templateCode).subscribe(
+      template => {
+        this.template = template;
+        this.pluginTemplates = [template]
+
+        this.subscriptions.push(this._pluginsService.getPluginsByTemplatesCode(this.properties.adminToolsAPIURL,"", this.template.code).subscribe(
+          plugins => {
+            this.plugins = plugins;
+            this.checkboxes = [];
+
+            let self = this;
+            this.plugins.forEach(_ => {
+              self.checkboxes.push({plugin: _, checked: false, template: this.template});
+            });
+
+            this.showLoading = false;
+          },
+          error => this.handleError('System error retrieving plugins', error)));
+
+      },
+      error => this.handleError('System error retrieving templates', error)));
+  }
   public toggleCheckBoxes(event) {
     this.checkboxes.forEach(_ => _.checked = event.target.checked);
   }
@@ -249,9 +277,13 @@ export class PluginsComponent implements OnInit {
 
   public newPluginSelectTemplate() {
     this.selectedPlugin = null;
-    this.selectedTemplate = null;
     this.editView = true;
-    this.selectTemplateView = true;
+    if(!this.templateView) {
+      this.selectedTemplate = null;
+      this.selectTemplateView = true;
+    }else{
+      this.newPlugin( Object.assign({}, this.template));
+    }
   }
 
   public newPlugin(template) {

dashboard/plugins/pluginsComponent.module.ts

@@ -0,0 +1,40 @@
+/*
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {AlertModalModule} from '../../utils/modal/alertModal.module';
+import {PluginsComponent} from './plugins.component';
+import {AdminToolServiceModule} from "../../services/adminToolService.module";
+import {InputModule} from "../../sharedComponents/input/input.module";
+
+
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatFormFieldModule } from "@angular/material/form-field";
+
+
+import {MatChipsModule} from '@angular/material/chips';
+import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
+import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
+import {PluginsRoutingModule} from "./plugins-routing.module";
+import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
+import {IconsModule} from "../../utils/icons/icons.module";
+import {LoadingModule} from "../../utils/loading/loading.module";
+import {PluginsService} from "../../services/plugins.service";
+import {CKEditorModule} from "ng2-ckeditor";
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, FormsModule,
+    AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
+    MatCheckboxModule, AdminTabsModule, PageContentModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule,
+    MatSlideToggleModule
+  ],
+  providers:[PluginsService],
+    declarations: [PluginsComponent],
+    exports: [PluginsComponent]
+})
+export class PluginsComponentModule {}
+*/

dashboard/plugins/templates/pluginTemplates.component.html

@@ -66,9 +66,12 @@
                   <div class="uk-position-bottom-left">
                     <div class="uk-padding-small uk-padding-remove-horizontal">
                       <button
-                          class="uk-button uk-button-link uk-flex uk-flex-middle" [routerLink]="['./',check.template._id]" >
+                          class="uk-button uk-button-link uk-flex uk-flex-middle" [routerLink]="['./plugins',check.template.code]" >
                         <icon name="edit" [flex]="true"></icon>
-                        <span class="uk-margin-xsmall-left"> Manage Plugins</span>
+                        <span class="uk-margin-xsmall-left"> Manage Plugins
+                        <span *ngIf="pluginsCount[check.template.code]">({{pluginsCount[check.template.code]}}
+                          )</span>
+                        </span>
                       </button>
                     </div>
                   </div>

dashboard/plugins/templates/pluginTemplates.component.ts

@@ -66,7 +66,8 @@ export class PluginTemplatesComponent implements OnInit {
   selectedCommunityPid = null;
   public portalUtils: PortalUtils = new PortalUtils();
   private index: number;
-  
+  pluginsCount = {};
+
   constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router,
               private title: Title,private _helpContentService: HelpContentService,
               private _pluginsService: PluginsService, private _fb: UntypedFormBuilder,
@@ -87,10 +88,12 @@ export class PluginTemplatesComponent implements OnInit {
       this.applyFilters();
     }));
     this.getTemplates();
+
     this.subscriptions.push(this.route.queryParams.subscribe(params => {
       HelperFunctions.scroll();
       this.selectedCommunityPid = params['communityId'];
       this.getPages();
+      this.getPluginsCounts();
     }));
     
   }
@@ -351,5 +354,11 @@ export class PluginTemplatesComponent implements OnInit {
     }
     return pageId;
   }
-
+  getPluginsCounts() {
+    this.subscriptions.push(this._pluginsService.countPluginPerTemplate( this.properties.adminToolsAPIURL).subscribe(
+      countPlugins => {
+        this.pluginsCount = countPlugins;
+      },
+      error => this.handleError('System error retrieving page contents', error)));
+  }
 }

services/plugins.service.ts

@@ -12,6 +12,10 @@ export class PluginsService {
   constructor(private http:HttpClient) {
   }
 
+  getPluginTemplate(api:string, code:string) {
+    return this.http.get<PluginTemplate>(api + 'pluginTemplates/' + code)
+
+  }
   getAllPluginTemplates(api:string) {
     return this.http.get<Array<PluginTemplate>>(api + 'pluginTemplates')
 
@@ -40,12 +44,18 @@ export class PluginsService {
   countPluginTemplatePerPage( api:string, pid:string){
     return this.http.get(api  + properties.adminToolsPortalType + '/' +pid+'/pluginTemplate/page/count');
   }
+  countPluginPerTemplate( api:string){
+    return this.http.get(api + '/plugin/template/count');
+  }
   getPluginsByPage(api:string, pid:string, pageId:string){
     return this.http.get<Array<Plugin>>(api  + properties.adminToolsPortalType + '/' +pid+'/plugins/page/' + pageId);
   }
   getPluginTemplatesByPage(api:string, pid:string, pageId:string){
     return this.http.get<Array<PluginTemplate>>(api  + properties.adminToolsPortalType + '/' +pid+'/pluginTemplates/page/' + pageId);
   }
+  getPluginsByTemplatesCode(api:string, pid:string, code:string){
+    return this.http.get<Array<Plugin>>(api  +'/plugins/template/' + code);
+  }
 
   togglePages(id : string,status : boolean, api:string) {
     return this.http.post(api + 'plugin/status/' + id, status, CustomOptions.getAuthOptionsWithBody());