From f2b540ed8a2b84dae84ba49a3cd22ca9c4fc1059 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 5 Apr 2022 23:28:00 +0200
Subject: [PATCH] web/user: add column layouts

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/common/config.ts    | 18 +++++++++--
 web/src/user/LibraryPage.ts | 62 +++++++++++++++++++++++++------------
 2 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/web/src/common/config.ts b/web/src/common/config.ts
index 619fc6be7..23da2fbaa 100644
--- a/web/src/common/config.ts
+++ b/web/src/common/config.ts
@@ -3,9 +3,15 @@ import { UserSelf } from "@goauthentik/api";
 import { me } from "../api/Users";
 
 export enum UserDisplay {
-    "username",
-    "name",
-    "email",
+    username = "username",
+    name = "name",
+    email = "email",
+}
+
+export enum LayoutType {
+    row = "row",
+    column_2 = "2-column",
+    column_3 = "3-column",
 }
 
 export interface UIConfig {
@@ -31,6 +37,9 @@ export interface UIConfig {
     pagination: {
         perPage: number;
     };
+    layout: {
+        type: LayoutType;
+    };
     locale: string;
 }
 
@@ -42,6 +51,9 @@ export class DefaultUIConfig implements UIConfig {
         applicationEdit: true,
         search: true,
     };
+    layout = {
+        type: LayoutType.row,
+    };
     navbar = {
         userDisplay: UserDisplay.username,
     };
diff --git a/web/src/user/LibraryPage.ts b/web/src/user/LibraryPage.ts
index 8ea108013..f24399fc3 100644
--- a/web/src/user/LibraryPage.ts
+++ b/web/src/user/LibraryPage.ts
@@ -19,7 +19,7 @@ import { Application, CoreApi } from "@goauthentik/api";
 
 import { AKResponse } from "../api/Client";
 import { DEFAULT_CONFIG } from "../api/Config";
-import { UIConfig, uiConfig } from "../common/config";
+import { LayoutType, UIConfig, uiConfig } from "../common/config";
 import { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
 import { groupBy, loading } from "../utils";
 import "./LibraryApplication";
@@ -79,6 +79,9 @@ export class LibraryPage extends LitElement {
             .header input:focus {
                 outline: 0;
             }
+            .pf-c-page__main {
+                overflow: hidden;
+            }
             .pf-c-page__main-section {
                 background-color: transparent;
             }
@@ -119,25 +122,44 @@ export class LibraryPage extends LitElement {
     }
 
     renderApps(config: UIConfig): TemplateResult {
-        return html`${this.getApps().map(([group, apps]) => {
-            return html`
-                <div class="pf-c-content app-group-header">
-                    <h2>${group}</h2>
-                </div>
-                <div
-                    class="pf-l-grid pf-m-gutter pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-5-col-on-lg pf-m-all-2-col-on-xl"
-                >
-                    ${apps.map((app) => {
-                        return html`<ak-library-app
-                            class="pf-l-grid__item"
-                            .application=${app}
-                            background=${config.color.cardBackground}
-                            ?selected=${app.slug === this.selectedApp?.slug}
-                        ></ak-library-app>`;
-                    })}
-                </div>
-            `;
-        })}`;
+        let groupClass = "";
+        let groupGrid = "";
+        switch (config.layout.type) {
+            case LayoutType.row:
+                groupClass = "pf-m-12-col";
+                groupGrid =
+                    "pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-5-col-on-lg pf-m-all-2-col-on-xl";
+                break;
+            case LayoutType.column_2:
+                groupClass = "pf-m-6-col";
+                groupGrid =
+                    "pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-4-col-on-lg pf-m-all-4-col-on-xl";
+                break;
+            case LayoutType.column_3:
+                groupClass = "pf-m-4-col";
+                groupGrid =
+                    "pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-4-col-on-xl";
+                break;
+        }
+        return html`<div class="pf-l-grid pf-m-gutter">
+            ${this.getApps().map(([group, apps]) => {
+                return html`<div class="pf-l-grid__item ${groupClass}">
+                    <div class="pf-c-content app-group-header">
+                        <h2>${group}</h2>
+                    </div>
+                    <div class="pf-l-grid pf-m-gutter ${groupGrid}">
+                        ${apps.map((app) => {
+                            return html`<ak-library-app
+                                class="pf-l-grid__item"
+                                .application=${app}
+                                background=${config.color.cardBackground}
+                                ?selected=${app.slug === this.selectedApp?.slug}
+                            ></ak-library-app>`;
+                        })}
+                    </div>
+                </div> `;
+            })}
+        </div>`;
     }
 
     render(): TemplateResult {