From d6f162a8ca782c1eb5ba81b0ca195b88a009b9e1 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Sat, 6 Apr 2024 12:30:44 +0200
Subject: [PATCH] dashboard: add initial version of app list view

---
 dashboard/src/theme.scss      | 20 ++++++++++++++
 dashboard/src/views/apps.html | 49 ++++++++++++++++++++++++++++++++++-
 dashboard/src/views/apps.js   |  1 +
 3 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index 84915f274..0c899fd0e 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -357,6 +357,26 @@ textarea {
 // Apps view
 // ----------------------------
 
+.app-list {
+    width: 100%;
+    margin-top: 20px !important;
+
+    .app-list-item {
+        .app-list-item-icon {
+            height: 32px;
+        }
+
+        .app-list-app-link {
+            display: block;
+            color: $text-dark;
+
+            &:hover {
+                text-decoration: none;
+            }
+        }
+    }
+}
+
 .app-grid {
     display: flex;
     flex-wrap: wrap;
diff --git a/dashboard/src/views/apps.html b/dashboard/src/views/apps.html
index 968650673..9cac1ca47 100644
--- a/dashboard/src/views/apps.html
+++ b/dashboard/src/views/apps.html
@@ -140,6 +140,7 @@
               <button class="btn btn-default" type="button" ng-class="{ 'active': showFilter, 'btn-warning': showFilter || selectedTags.length || selectedState.state || !selectedGroup._unset || !selectedDomain._alldomains }" ng-click="showFilter = !showFilter"><i class="fas fa-filter"></i></button>
             </span>
           </div>
+          <button class="btn btn-default" type="button" ng-click="view = view === 'grid' ? 'list' : 'grid'"><i class="fas" ng-class="{ 'fa-list': view === 'grid', 'fa-grip': view === 'list' }"></i></button>
         </form>
       </div>
       <div ng-show="showFilter" class="view-header-filter-bar">
@@ -154,7 +155,7 @@
     </h1>
 
     <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
-      <div class="app-grid">
+      <div class="app-grid" ng-show="view === 'grid'">
         <div class="grid-item" ng-class="{ 'stopped': app.runState === 'stopped' }" ng-repeat="app in installedApps | selectedGroupAccessFilter:selectedGroup | selectedStateFilter:selectedState | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:labelOrFQDN">
           <div class="grid-item-content" uib-tooltip="{{ app.fqdn }}">
             <a ng-show="app.type !== APP_TYPES.LINK && isOperator(app)" ng-href="#/app/{{ app.id}}/display" class="btn btn-lg btn-default grid-item-action"><i class="fas fa-cog"></i></a>
@@ -198,5 +199,51 @@
           </div>
         </div>
       </div>
+
+      <div class="app-list card card-large" ng-show="view === 'list'">
+        <table class="table table-hover" style="margin: 0;">
+          <thead>
+            <tr>
+              <th style="width: 32px">&nbsp;</th>
+              <th style="width: 95%">Location</th>
+              <th style="width: 95%">App</th>
+              <th style="width: 32px">&nbsp;</th>
+              <th style="width: 95%">Status</th>
+              <th style="width: 5%" class="text-right">{{ 'main.actions' | tr }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="app-list-item" ng-repeat="app in installedApps | selectedGroupAccessFilter:selectedGroup | selectedStateFilter:selectedState | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:labelOrFQDN">
+              <td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
+                <a ng-href="{{ app | applicationLink }}" ng-click="onAppClick(app, $event)" target="_blank" style="display: block;">
+                  <img ng-src="{{ app.iconUrl || 'img/appicon_fallback.png' }}" fallback-icon="img/appicon_fallback.png" onerror="imageErrorHandler(this)" class="app-list-item-icon"/>
+                </a>
+              </td>
+              <td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;">
+                <a ng-href="{{ app | applicationLink }}" ng-click="onAppClick(app, $event)" target="_blank" class="app-list-app-link">
+                  {{ app.label || app.subdomain || app.fqdn }}
+                </a>
+              </td>
+              <td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;">{{ app.manifest.title }}</td>
+              <td style="vertical-align: middle;">
+                <div ng-show="app.type !== APP_TYPES.LINK">
+                  <i class="fa-brands fa-openid" ng-show="app.ssoAuth && app.manifest.addons.oidc" uib-tooltip="{{ 'apps.auth.openid' | tr }}"></i>
+                  <i class="fas fa-user" ng-show="app.ssoAuth && (!app.manifest.addons.oidc && !app.manifest.addons.email)" uib-tooltip="{{ 'apps.auth.sso' | tr }}"></i>
+                  <i class="far fa-user" ng-show="!app.ssoAuth && !app.manifest.addons.email" uib-tooltip="{{ 'apps.auth.nosso' | tr }}"></i>
+                  <i class="fas fa-envelope" ng-show="app.manifest.addons.email" uib-tooltip="{{ 'apps.auth.email' | tr }}"></i>
+                </div>
+              </td>
+              <td style="vertical-align: middle;">{{ app | installationStateLabel }}</td>
+              <td class="text-right no-wrap" style="vertical-align: middle;">
+                <button class="btn btn-xs btn-default" ng-show="app.type === APP_TYPES.LINK && isOperator(app)" ng-click="applinksEdit.show(app)" uib-tooltip="Configure Applink"><i class="fa fa-cog"></i></button>
+                <button class="btn btn-xs btn-danger" ng-show="app.type === APP_TYPES.LINK && isOperator(app)" ng-click="applinksEdit.show(app)" uib-tooltip="Remove Applink"><i class="far fa-trash-alt"></i></button>
+
+                <a class="btn btn-xs btn-default" ng-show="app.type !== APP_TYPES.LINK && isOperator(app)" ng-href="#/app/{{ app.id}}/display" uib-tooltip="Configure App"><i class="fa fa-cog"></i></a>
+                <a class="btn btn-xs btn-danger" ng-show="app.type !== APP_TYPES.LINK && isOperator(app)" ng-href="#/app/{{ app.id}}/uninstall" uib-tooltip="Uninstall App"><i class="far fa-trash-alt"></i></a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
 </div>
diff --git a/dashboard/src/views/apps.js b/dashboard/src/views/apps.js
index d10fc18ce..17fe5301a 100644
--- a/dashboard/src/views/apps.js
+++ b/dashboard/src/views/apps.js
@@ -31,6 +31,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
     $scope.APP_TYPES = APP_TYPES;
     $scope.showFilter = false;
     $scope.filterActive = false;
+    $scope.view = 'list';
 
     $scope.allUsers = [];
     $scope.allGroups = [];