From ec980e1b874395b73281e4bb6e47aa2b6709d1e4 Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Thu, 23 May 2024 12:55:45 +0300
Subject: [PATCH] [plugins-functionality | DONE | FIXED  ] plugins minor fixes

---
 .../search-bar/plugin-search-bar.component.ts   | 15 +++++++++------
 .../plugin-search-deposit-link.component.ts     |  5 +++--
 .../plugins-form/pluginsForm.component.html     |  2 +-
 dashboard/plugins/plugins.component.html        | 10 +++++-----
 dashboard/plugins/plugins.component.ts          |  2 +-
 dashboard/plugins/plugins.module.ts             |  3 ++-
 .../templates/pluginTemplates.component.html    | 12 ++++++------
 .../templates/pluginTemplates.component.ts      | 17 ++++++++---------
 .../plugins/wrapper/plugin-wrapper.module.ts    |  3 ++-
 9 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/dashboard/plugins/components/search-bar/plugin-search-bar.component.ts b/dashboard/plugins/components/search-bar/plugin-search-bar.component.ts
index acc35887..2d07087e 100644
--- a/dashboard/plugins/components/search-bar/plugin-search-bar.component.ts
+++ b/dashboard/plugins/components/search-bar/plugin-search-bar.component.ts
@@ -88,19 +88,22 @@ export class PluginSearchBarComponent extends PluginBaseComponent<PluginSearchBa
     this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
       community => {
         this.community = community;
-        this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
-          community => {
-            this.getLayout(community.communityId);
+        if(community) {
+          this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
+            community => {
+              this.getLayout(community.communityId);
 
-          }));
+            }));
+        }
       }
     ));
   }
   ngOnInit() {
     this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
       community => {
-        this.getLayout(community.communityId);
-
+        if(community) {
+          this.getLayout(community.communityId);
+        }
       }));
   }
 
diff --git a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.ts b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.ts
index 1d191685..76872444 100644
--- a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.ts
+++ b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.ts
@@ -41,8 +41,9 @@ export class PluginSearchDepositLinkComponent extends PluginBaseComponent<Plugin
   ngOnInit() {
     this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
       community => {
-        this.getLayout(community.communityId);
-
+        if(community) {
+          this.getLayout(community.communityId);
+        }
       }));
   }
 
diff --git a/dashboard/plugins/plugins-form/pluginsForm.component.html b/dashboard/plugins/plugins-form/pluginsForm.component.html
index 693fe2fe..e3c205b9 100644
--- a/dashboard/plugins/plugins-form/pluginsForm.component.html
+++ b/dashboard/plugins/plugins-form/pluginsForm.component.html
@@ -86,7 +86,7 @@
     </div>
   </aside>
 
-  <div page-content class="uk-width-1-1">
+  <div page-content [fullWidth]="true" >
     <div inner>
       <div> <!--class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">-->
 
diff --git a/dashboard/plugins/plugins.component.html b/dashboard/plugins/plugins.component.html
index e4db7ba9..d9da4791 100644
--- a/dashboard/plugins/plugins.component.html
+++ b/dashboard/plugins/plugins.component.html
@@ -36,7 +36,6 @@
       </div>
     </div>
     <div inner>
-      <div>
         <div *ngIf="showLoading" class="uk-position-center">
           <loading></loading>
         </div>
@@ -74,11 +73,12 @@
             <ng-container *ngIf="selectedPlacementView == placement.value || selectedPlacementView == 'all'">
               <div *ngIf="pluginsByPlacement.get(placement.value).length >0 && page && !sinlgePlacementAvailable"
                    class="uk-heading-divider uk-h6 uk-margin-left uk-padding-remove-left uk-text-capitalize ">{{placement.value}}</div>
+              <div class="uk-animation-toggle">
               <ng-container *ngFor="let pluginGroup of pluginsByPlacement.get(placement.value) ; let i=index">
                 <ng-container *ngIf="(pluginGroup.template.portalSpecific.length == 0 || pluginGroup.template.portalSpecific.indexOf(communityInfo.communityId) != -1 ) &&
                (pluginGroup.template.plan == 'Standard' || pluginGroup.template.plan == 'Default' || pluginGroup.template.plan == communityInfo.plan )
 && ( !filterActive || (filterActive && pluginGroup.plugin.active))">
-                  <div class="uk-card uk-card-default uk-margin-bottom">
+                  <div class="uk-card uk-card-default uk-margin-bottom uk-animation-fade" >
                     <div class="uk-card-body uk-flex">
                       <div class="uk-width-expand uk-text-small">
                         <ng-container *ngIf="pluginGroup.template && !templateView">
@@ -157,7 +157,7 @@
                         <div *ngIf="i >0">
                           <div class="uk-padding-small uk-padding-remove-horizontal">
                             <button
-                                class="uk-button uk-button-link uk-flex uk-flex-middle"
+                                class="uk-button uk-button-link uk-flex uk-flex-middle" [class.uk-disabled]="filterActive" [title]="filterActive?'Move is disabled when plugins are filtered':''"
                                 (click)="swap(i, i-1, placement.value)">
                               <icon name="arrow_upward"  [flex]="true"></icon>
                               <span class="uk-margin-xsmall-left"> Up</span>
@@ -167,7 +167,7 @@
                         <div *ngIf="i < pluginsByPlacement.get(placement.value).length -1 ">
                           <div class="uk-padding-small uk-padding-remove-horizontal">
                             <button
-                                class="uk-button uk-button-link uk-flex uk-flex-middle"
+                                class="uk-button uk-button-link uk-flex uk-flex-middle"  [class.uk-disabled]="filterActive" [title]="filterActive?'Move is disabled when plugins are filtered':''"
                                 (click)="swap(i+1, i, placement.value)">
                               <icon name="arrow_downward"  [flex]="true"></icon>
                               <span class="uk-margin-xsmall-left">Down</span>
@@ -189,13 +189,13 @@
                   </div>
                 </ng-container>
               </ng-container>
+              </div>
             </ng-container>
 
           </ng-container>
         </ng-container>
       </div>
     </div>
-  </div>
 <!--</div>-->
   <modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmDelete()"
                classTitle="uk-background-primary uk-light"></modal-alert>
diff --git a/dashboard/plugins/plugins.component.ts b/dashboard/plugins/plugins.component.ts
index 59b131f2..58fead75 100644
--- a/dashboard/plugins/plugins.component.ts
+++ b/dashboard/plugins/plugins.component.ts
@@ -467,7 +467,7 @@ export class PluginsComponent implements OnInit {
           this.pluginsByPlacement.get(placement)[index].plugin = saved;
           this.clearCache();
         },
-        error => this.handleUpdateError("System error creating template", error)
+        error => this.handleUpdateError("System error saving plugin", error)
       ));
     } else {
 
diff --git a/dashboard/plugins/plugins.module.ts b/dashboard/plugins/plugins.module.ts
index ca4fa834..063aaa85 100644
--- a/dashboard/plugins/plugins.module.ts
+++ b/dashboard/plugins/plugins.module.ts
@@ -26,6 +26,7 @@ import {MatSlideToggleModule} from "@angular/material/slide-toggle";
 import {PluginWrapperModule} from "./wrapper/plugin-wrapper.module";
 import {SideBarModule} from "../sharedComponents/sidebar/sideBar.module";
 import {PluginEditWrapperModule} from "./wrapper/plugin-edit-wrapper.module";
+import {TransitionGroupModule} from "../../utils/transition-group/transition-group.module";
 
 
 @NgModule({
@@ -33,7 +34,7 @@ import {PluginEditWrapperModule} from "./wrapper/plugin-edit-wrapper.module";
     CommonModule, RouterModule, FormsModule,
     AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
     MatCheckboxModule, AdminTabsModule, PageContentModule, PluginsRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule,
-    MatSlideToggleModule, PluginWrapperModule, SideBarModule, PluginEditWrapperModule
+    MatSlideToggleModule, PluginWrapperModule, SideBarModule, PluginEditWrapperModule, TransitionGroupModule
   ],
   providers:[PluginsService],
   declarations: [PluginsComponent],
diff --git a/dashboard/plugins/templates/pluginTemplates.component.html b/dashboard/plugins/templates/pluginTemplates.component.html
index 7cd753cf..8e9412c1 100644
--- a/dashboard/plugins/templates/pluginTemplates.component.html
+++ b/dashboard/plugins/templates/pluginTemplates.component.html
@@ -52,7 +52,7 @@
                   *ngIf="templatesByPlacement.get(placement.value) && templatesByPlacement.get(placement.value).length >0 && page"
                   class="uk-heading-divider uk-h6 uk-margin-left uk-padding-remove-left uk-text-capitalize ">{{placement.value}}</div>
               <div *ngFor="let template of templatesByPlacement.get(placement.value) ; let i=index">
-                <div class="uk-card uk-card-default uk-margin-bottom">
+                <div class="uk-card uk-card-default uk-margin-bottom uk-animation-fade" >
                   <div class="uk-card-body uk-flex">
                     <div class="uk-width-expand uk-text-small">
                       <h6>{{template.name}}</h6>
@@ -90,23 +90,23 @@
                   <div class="uk-card-footer uk-padding-remove-vertical">
                     <div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid>
 
-                      <ng-container *ngIf="page">
-                        <div *ngIf="template.order>0">
+                      <ng-container>
+                        <div *ngIf="i>0">
                           <div class="uk-padding-small uk-padding-remove-horizontal">
                             <button
                                 class="uk-button uk-button-link uk-flex uk-flex-middle"
                                 (click)="swap(i, i-1, template.placement)">
-                              <!--                        <icon name="" [flex]="true"></icon>-->
+                              <icon name="arrow_upward"  [flex]="true"></icon>
                               <span class="uk-margin-xsmall-left"> Up</span>
                             </button>
                           </div>
                         </div>
-                        <div *ngIf="template.order < templatesByPlacement.get(placement.value).length -1 ">
+                        <div *ngIf="i < templatesByPlacement.get(placement.value).length -1 ">
                           <div class="uk-padding-small uk-padding-remove-horizontal">
                             <button
                                 class="uk-button uk-button-link uk-flex uk-flex-middle"
                                 (click)="swap(i+1, i, template.placement)">
-                              <!--                        <icon name="" [flex]="true"></icon>-->
+                              <icon name="arrow_downward"  [flex]="true"></icon>
                               <span class="uk-margin-xsmall-left"> Down</span>
                             </button>
                           </div>
diff --git a/dashboard/plugins/templates/pluginTemplates.component.ts b/dashboard/plugins/templates/pluginTemplates.component.ts
index a2dead46..31041916 100644
--- a/dashboard/plugins/templates/pluginTemplates.component.ts
+++ b/dashboard/plugins/templates/pluginTemplates.component.ts
@@ -221,19 +221,18 @@ export class PluginTemplatesComponent implements OnInit {
   }
 
   public swap(templateToMoveUp, templateToMoveDown, placement) {
-
-    this.move(this.templatesByPlacement.get(placement)[templateToMoveUp], true);
-    this.move(this.templatesByPlacement.get(placement)[templateToMoveDown], false);
-
+    let moveUpTemplate = this.templatesByPlacement.get(placement)[templateToMoveUp];
+    let moveDownTemplate = this.templatesByPlacement.get(placement)[templateToMoveDown];
+    this.templatesByPlacement.get(placement)[templateToMoveUp] = moveDownTemplate;
+    this.templatesByPlacement.get(placement)[templateToMoveDown] = moveUpTemplate;
+    this.move(moveUpTemplate, true, templateToMoveDown, placement);
+    this.move(moveDownTemplate, false, templateToMoveUp, placement);
   }
 
-  public move(template: PluginTemplate, up: boolean) {
-    this.showLoading = true;
+  public move(template: PluginTemplate, up: boolean, index, placement) {
     this.subscriptions.push(this._pluginsService.updatePluginTemplateOrder(template, this.properties.adminToolsAPIURL, up ? -1 : 1).subscribe(
       saved => {
-        this.savedSuccessfully(saved, true);
-
-        // this._clearCacheService.clearCache("Template updates");
+        this.templatesByPlacement.get(placement)[index] = saved;
       },
       error => this.handleUpdateError("System error creating template", error)
     ));
diff --git a/dashboard/plugins/wrapper/plugin-wrapper.module.ts b/dashboard/plugins/wrapper/plugin-wrapper.module.ts
index 2f64e3cf..bd3e2d59 100644
--- a/dashboard/plugins/wrapper/plugin-wrapper.module.ts
+++ b/dashboard/plugins/wrapper/plugin-wrapper.module.ts
@@ -14,11 +14,12 @@ import {PluginStatsModule} from "../components/stats/plugin-stats.module";
 import {PluginSearchBarModule} from "../components/search-bar/plugin-search-bar.module";
 import {PluginCardInfoModule} from "../components/card-info/plugin-card-info.module";
 import {PluginHtmlSectionModule} from "../components/html-section/plugin-html-section.module";
+import {PluginGraphInfoModule} from "../components/paragraph-info/plugin-graph-info.module";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule,
-    PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginHtmlSectionModule, PluginStatsModule, PluginSearchBarModule, PluginCardInfoModule
+    PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginHtmlSectionModule, PluginStatsModule, PluginSearchBarModule, PluginCardInfoModule, PluginGraphInfoModule
   ],
   declarations: [PluginWrapperComponent],
   exports: [PluginWrapperComponent]