From 29aedac8dcfc98ff67680d91d6f0f848e86fa4db Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 29 Dec 2021 10:41:48 +0100
Subject: Refactor plugin card

---
 client/src/app/+admin/admin.module.ts              | 14 +++--
 client/src/app/+admin/plugins/index.ts             |  5 ++
 .../+admin/plugins/plugin-list-installed/index.ts  |  1 +
 .../plugin-list-installed.component.html           | 50 +++++----------
 .../plugin-list-installed.component.scss           |  5 ++
 .../plugin-list-installed.component.ts             |  1 -
 .../src/app/+admin/plugins/plugin-search/index.ts  |  1 +
 .../plugin-search/plugin-search.component.html     | 52 ++++++----------
 .../plugin-search/plugin-search.component.ts       |  5 --
 .../+admin/plugins/plugin-show-installed/index.ts  |  1 +
 client/src/app/+admin/plugins/shared/index.ts      |  2 +
 .../plugins/shared/plugin-card.component.html      | 27 ++++++++
 .../plugins/shared/plugin-card.component.scss      | 69 +++++++++++++++++++++
 .../+admin/plugins/shared/plugin-card.component.ts | 24 ++++++++
 .../plugins/shared/plugin-list.component.scss      | 72 ----------------------
 15 files changed, 178 insertions(+), 151 deletions(-)
 create mode 100644 client/src/app/+admin/plugins/plugin-list-installed/index.ts
 create mode 100644 client/src/app/+admin/plugins/plugin-search/index.ts
 create mode 100644 client/src/app/+admin/plugins/plugin-show-installed/index.ts
 create mode 100644 client/src/app/+admin/plugins/shared/index.ts
 create mode 100644 client/src/app/+admin/plugins/shared/plugin-card.component.html
 create mode 100644 client/src/app/+admin/plugins/shared/plugin-card.component.scss
 create mode 100644 client/src/app/+admin/plugins/shared/plugin-card.component.ts
 delete mode 100644 client/src/app/+admin/plugins/shared/plugin-list.component.scss

diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 36a68ba91..dbced0e86 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -41,11 +41,14 @@ import {
   VideoAdminService,
   VideoListComponent
 } from './overview'
-import { PluginListInstalledComponent } from './plugins/plugin-list-installed/plugin-list-installed.component'
-import { PluginSearchComponent } from './plugins/plugin-search/plugin-search.component'
-import { PluginShowInstalledComponent } from './plugins/plugin-show-installed/plugin-show-installed.component'
-import { PluginsComponent } from './plugins/plugins.component'
-import { PluginApiService } from './plugins/shared/plugin-api.service'
+import {
+  PluginApiService,
+  PluginCardComponent,
+  PluginListInstalledComponent,
+  PluginsComponent,
+  PluginSearchComponent,
+  PluginShowInstalledComponent
+} from './plugins'
 import { JobService, LogsComponent, LogsService } from './system'
 import { DebugComponent, DebugService } from './system/debug'
 import { JobsComponent } from './system/jobs/jobs.component'
@@ -99,6 +102,7 @@ import { JobsComponent } from './system/jobs/jobs.component'
     PluginListInstalledComponent,
     PluginSearchComponent,
     PluginShowInstalledComponent,
+    PluginCardComponent,
 
     JobsComponent,
     LogsComponent,
diff --git a/client/src/app/+admin/plugins/index.ts b/client/src/app/+admin/plugins/index.ts
index b75a94556..c70b6568e 100644
--- a/client/src/app/+admin/plugins/index.ts
+++ b/client/src/app/+admin/plugins/index.ts
@@ -1 +1,6 @@
 export * from './plugins.component'
+export * from './shared'
+export * from './plugin-list-installed'
+export * from './plugin-search'
+export * from './plugin-show-installed'
+
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/index.ts b/client/src/app/+admin/plugins/plugin-list-installed/index.ts
new file mode 100644
index 000000000..0704fd22e
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-list-installed/index.ts
@@ -0,0 +1 @@
+export * from './plugin-list-installed.component'
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index b42bd27c5..2591c9a50 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -7,39 +7,21 @@
 </div>
 
 <div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
-  <div class="card plugin" *ngFor="let plugin of plugins">
-    <div class="card-body">
-      <div class="first-row">
-        <span class="plugin-name">{{ plugin.name }}</span>
-
-        <span class="plugin-version">{{ plugin.version }}</span>
-
-        <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
-          <my-global-icon iconName="home"></my-global-icon>
-        </a>
-
-        <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin homepage (new window)">
-          <my-global-icon iconName="npm"></my-global-icon>
-        </a>
-
-        <div class="buttons">
-          <my-edit-button
-            *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
-            [responsiveLabel]="true"
-          ></my-edit-button>
-
-          <my-button
-            class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
-            [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
-          ></my-button>
-
-          <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
-        </div>
-      </div>
-
-      <div class="second-row">
-        <div class="description">{{ plugin.description }}</div>
+  <ng-container *ngFor="let plugin of plugins">
+    <my-plugin-card [plugin]="plugin" [version]="plugin.version" [pluginType]="pluginType">
+      <div ngProjectAs="buttons">
+        <my-edit-button
+          *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
+          [responsiveLabel]="true"
+        ></my-edit-button>
+
+        <my-button
+          class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
+          [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
+        ></my-button>
+
+        <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
       </div>
-    </div>
-  </div>
+    </my-plugin-card>
+  </ng-container>
 </div>
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
index 5fa117d51..4039f2a02 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
@@ -4,3 +4,8 @@
 .update-button[disabled=true] ::ng-deep .action-button {
   cursor: default !important;
 }
+
+my-edit-button,
+my-button {
+  @include margin-right(10px);
+}
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index 85f9879bf..6fd238848 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -12,7 +12,6 @@ import { PeerTubePlugin, PluginType } from '@shared/models'
   templateUrl: './plugin-list-installed.component.html',
   styleUrls: [
     '../shared/toggle-plugin-type.scss',
-    '../shared/plugin-list.component.scss',
     './plugin-list-installed.component.scss'
   ]
 })
diff --git a/client/src/app/+admin/plugins/plugin-search/index.ts b/client/src/app/+admin/plugins/plugin-search/index.ts
new file mode 100644
index 000000000..5bb90a62f
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-search/index.ts
@@ -0,0 +1 @@
+export * from './plugin-search.component'
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index a0d228702..14f28f7ef 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -30,45 +30,29 @@
 </div>
 
 <div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
-  <div class="card plugin" *ngFor="let plugin of plugins">
-    <div class="card-body">
-      <div class="first-row">
-        <span class="plugin-name">{{ plugin.name }}</span>
-
-        <span class="plugin-version">{{ plugin.latestVersion }}</span>
-
-        <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
-          <my-global-icon iconName="home"></my-global-icon>
-        </a>
-
-        <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin npm package (new window)">
-          <my-global-icon iconName="npm"></my-global-icon>
-        </a>
-
-        <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
-
+  <ng-container *ngFor="let plugin of plugins" >
+    <my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType">
+      <div ngProjectAs="badges">
+        <span i18n *ngIf="plugin.installed" class="badge badge-success">Installed</span>
 
         <span *ngIf="plugin.official" class="badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft">
           Official
         </span>
-
-        <div class="buttons">
-          <my-edit-button
-            *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
-            label="Settings" i18n-label [responsiveLabel]="true"
-          ></my-edit-button>
-
-          <my-button
-            class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
-            [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
-            icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
-          ></my-button>
-        </div>
       </div>
 
-      <div class="second-row">
-        <div class="description">{{ plugin.description }}</div>
+      <div ngProjectAs="buttons">
+        <my-edit-button
+          *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
+          label="Settings" i18n-label [responsiveLabel]="true"
+        ></my-edit-button>
+
+        <my-button
+          class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
+          [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
+          icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
+        ></my-button>
       </div>
-    </div>
-  </div>
+
+    </my-plugin-card>
+  </ng-container>
 </div>
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index 803777eb3..ef704c83b 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -11,7 +11,6 @@ import { PeerTubePluginIndex, PluginType } from '@shared/models'
   templateUrl: './plugin-search.component.html',
   styleUrls: [
     '../shared/toggle-plugin-type.scss',
-    '../shared/plugin-list.component.scss',
     './plugin-search.component.scss'
   ]
 })
@@ -115,10 +114,6 @@ export class PluginSearchComponent implements OnInit {
     return !!this.installing[plugin.npmName]
   }
 
-  getPluginOrThemeHref (name: string) {
-    return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
-  }
-
   getShowRouterLink (plugin: PeerTubePluginIndex) {
     return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, this.pluginType) ]
   }
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/index.ts b/client/src/app/+admin/plugins/plugin-show-installed/index.ts
new file mode 100644
index 000000000..8aeceb90f
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-show-installed/index.ts
@@ -0,0 +1 @@
+export * from './plugin-show-installed.component'
diff --git a/client/src/app/+admin/plugins/shared/index.ts b/client/src/app/+admin/plugins/shared/index.ts
new file mode 100644
index 000000000..de037c437
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './plugin-api.service'
+export * from './plugin-card.component'
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.html b/client/src/app/+admin/plugins/shared/plugin-card.component.html
new file mode 100644
index 000000000..c9fe6201c
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.html
@@ -0,0 +1,27 @@
+<div class="card plugin">
+  <div class="card-body">
+    <div class="first-row">
+      <span class="plugin-name">{{ plugin.name }}</span>
+
+      <span class="plugin-version">{{ version }}</span>
+
+      <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
+        <my-global-icon iconName="home"></my-global-icon>
+      </a>
+
+      <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin homepage (new window)">
+        <my-global-icon iconName="npm"></my-global-icon>
+      </a>
+
+      <ng-content select="badges"></ng-content>
+
+      <div class="buttons">
+        <ng-content select="buttons"></ng-content>
+      </div>
+    </div>
+
+    <div class="second-row">
+      <div class="description">{{ plugin.description }}</div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.scss b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
new file mode 100644
index 000000000..608064722
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
@@ -0,0 +1,69 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.plugin {
+  margin: 15px 0;
+  background-color: pvar(--submenuBackgroundColor);
+}
+
+.first-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+
+  .plugin-name {
+    @include margin-right(10px);
+
+    font-size: 16px;
+    font-weight: $font-semibold;
+  }
+
+  .plugin-version {
+    opacity: 0.6;
+  }
+
+  .plugin-icon {
+    @include margin-left(10px);
+
+    my-global-icon {
+      @include apply-svg-color(pvar(--greyForegroundColor));
+
+      &[iconName=npm] {
+        @include fill-svg-color(pvar(--greyForegroundColor));
+      }
+    }
+  }
+
+  .buttons {
+    @include margin-left(auto);
+
+    width: max-content;
+  }
+}
+
+.second-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  justify-content: space-between;
+
+  .description {
+    opacity: 0.8;
+  }
+}
+
+.action-button {
+  @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
+}
+
+@media screen and (max-width: $small-view) {
+  .first-row {
+    flex-wrap: wrap;
+
+    .buttons {
+      flex-basis: 100%;
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.ts b/client/src/app/+admin/plugins/shared/plugin-card.component.ts
new file mode 100644
index 000000000..462a6c213
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core'
+import { PeerTubePlugin, PeerTubePluginIndex, PluginType } from '@shared/models'
+import { PluginApiService } from './plugin-api.service'
+
+@Component({
+  selector: 'my-plugin-card',
+  templateUrl: './plugin-card.component.html',
+  styleUrls: [ './plugin-card.component.scss' ]
+})
+
+export class PluginCardComponent {
+  @Input() plugin: PeerTubePluginIndex | PeerTubePlugin
+  @Input() version: string
+  @Input() pluginType: PluginType
+
+  constructor (
+    private pluginApiService: PluginApiService
+  ) {
+  }
+
+  getPluginOrThemeHref (name: string) {
+    return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
+  }
+}
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
deleted file mode 100644
index 01c6ee64d..000000000
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-.plugin {
-  margin: 15px 0;
-  background-color: pvar(--submenuBackgroundColor);
-}
-
-.first-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-
-  .plugin-name {
-    @include margin-right(10px);
-
-    font-size: 16px;
-    font-weight: $font-semibold;
-  }
-
-  .plugin-version {
-    opacity: 0.6;
-  }
-
-  .plugin-icon {
-    @include margin-left(10px);
-
-    my-global-icon {
-      @include apply-svg-color(pvar(--greyForegroundColor));
-
-      &[iconName=npm] {
-        @include fill-svg-color(pvar(--greyForegroundColor));
-      }
-    }
-  }
-
-  .buttons {
-    @include margin-left(auto);
-    width: max-content;
-
-    > *:not(:last-child) {
-      @include margin-right(10px);
-    }
-  }
-}
-
-.second-row {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  justify-content: space-between;
-
-  .description {
-    opacity: 0.8;
-  }
-}
-
-.action-button {
-  @include peertube-button-link;
-  @include button-with-icon(21px, 0, -2px);
-}
-
-@media screen and (max-width: $small-view) {
-  .first-row {
-    flex-wrap: wrap;
-
-    .buttons {
-      flex-basis: 100%;
-      margin-top: 10px;
-    }
-  }
-}
-- 
cgit v1.2.3