From cb77bfcd0f5f81f5774d5ea9cad2c966e76d4268 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 11 Mar 2024 11:19:51 +0100
Subject: [PATCH] Use ng-select for jobs list

---
 .../app/+admin/system/jobs/jobs.component.html   | 16 +++++++++++-----
 .../app/+admin/system/jobs/jobs.component.scss   | 10 ++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index 3e8824e97..e10a2f785 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -1,17 +1,23 @@
 <div class="admin-sub-header">
   <div class="select-filter-block">
     <label for="jobType" i18n>Job type</label>
-    <div class="peertube-select-container">
-      <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
-        <option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</option>
-      </select>
-    </div>
+
+    <ng-select
+      class="select-job-type"
+      labelForId="jobType"
+      [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()"
+      [searchable]="true"
+      [clearable]="false"
+    >
+      <ng-option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</ng-option>
+    </ng-select>
   </div>
 
   <div class="select-filter-block">
     <label for="jobState" i18n>Job state</label>
     <ng-select
       class="select-job-state"
+      labelForId="jobState"
       [(ngModel)]="jobState"
       (ngModelChange)="onJobStateOrTypeChanged()"
       [clearable]="false"
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 4a76f1783..c88e7af1e 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -5,6 +5,16 @@
   min-width: 120px;
 }
 
+.select-job-type {
+  min-width: 240px;
+
+  ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items {
+    @media screen and (min-height: 500px) {
+      max-height: calc(90vh - 250px);
+    }
+  }
+}
+
 @media screen and (min-width: $primeng-breakpoint) {
   .job-id {
     max-width: 30vw !important;