web/user: add column layouts

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

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,
     };

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,14 +122,32 @@ export class LibraryPage extends LitElement {
     }
 
     renderApps(config: UIConfig): TemplateResult {
-        return html`${this.getApps().map(([group, apps]) => {
-            return html`
+        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 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"
-                >
+                    <div class="pf-l-grid pf-m-gutter ${groupGrid}">
                         ${apps.map((app) => {
                             return html`<ak-library-app
                                 class="pf-l-grid__item"
@@ -136,8 +157,9 @@ export class LibraryPage extends LitElement {
                             ></ak-library-app>`;
                         })}
                     </div>
-            `;
-        })}`;
+                </div> `;
+            })}
+        </div>`;
     }
 
     render(): TemplateResult {