Refactor admin plugins

5 files changed, 28 insertions, 15 deletions

diff --git a/client/src/app/+admin/plugins/shared/index.ts b/client/src/app/+admin/plugins/shared/index.ts
index de037c437..6d616b372 100644
--- a/client/src/app/+admin/plugins/shared/index.ts
+++ b/client/src/app/+admin/plugins/shared/index.ts
@@ -1,2 +1,3 @@
 export * from './plugin-api.service'
 export * from './plugin-card.component'
+export * from './plugin-navigation.component'
diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
index b95ee0c9d..fbfdaea18 100644
--- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -25,19 +25,6 @@ export class PluginApiService {
     private pluginService: PluginService
   ) { }
 
-  getPluginTypeOptions () {
-    return [
-      {
-        label: $localize`Plugins`,
-        value: PluginType.PLUGIN
-      },
-      {
-        label: $localize`Themes`,
-        value: PluginType.THEME
-      }
-    ]
-  }
-
   getPluginTypeLabel (type: PluginType) {
     if (type === PluginType.PLUGIN) {
       return $localize`plugin`
diff --git a/client/src/app/+admin/plugins/shared/plugin-navigation.component.html b/client/src/app/+admin/plugins/shared/plugin-navigation.component.html
new file mode 100644
index 000000000..fd298d145
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-navigation.component.html
@@ -0,0 +1,11 @@
+<div class="root">
+  <div class="btn-group" role="group" i18n-aria-label aria-label="Navigate between installed plugins and themes or find new ones">
+    <a i18n routerLink="/admin/plugins/list-installed" [queryParams]="{ pluginType: pluginType }" routerLinkActive="active">Installed</a>
+    <a i18n routerLink="/admin/plugins/search" [queryParams]="{ pluginType: pluginType }" routerLinkActive="active">Search</a>
+  </div>
+
+  <div class="btn-group" role="group" i18n-aria-label aria-label="Navigate between plugins and themes">
+    <a [ngClass]="{ active: pluginType === 1 }" routerLink="." [queryParams]="{ pluginType: 1 }" queryParamsHandling="merge" class="">Plugins</a>
+    <a [ngClass]="{ active: pluginType === 2 }" routerLink="." [queryParams]="{ pluginType: 2 }" queryParamsHandling="merge" class="">Themes</a>
+  </div>
+</div>
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/plugin-navigation.component.scss
index 67213ea72..5802acd56 100644
--- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-navigation.component.scss
@@ -1,8 +1,11 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.toggle-plugin-type {
+.root {
   display: flex;
   justify-content: center;
-  margin-bottom: 30px;
+}
+
+.btn-group:not(:last-child) {
+  @include margin-right(15px);
 }
diff --git a/client/src/app/+admin/plugins/shared/plugin-navigation.component.ts b/client/src/app/+admin/plugins/shared/plugin-navigation.component.ts
new file mode 100644
index 000000000..1c963f521
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-navigation.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { PluginType } from '@shared/models/plugins'
+
+@Component({
+  selector: 'my-plugin-navigation',
+  templateUrl: './plugin-navigation.component.html',
+  styleUrls: [ './plugin-navigation.component.scss' ]
+})
+export class PluginNavigationComponent {
+  @Input() pluginType: PluginType
+}