web: Table parity (#427)

* core: fix application API always being sorted by name

* web: add sorting to tables

* web: add search to TablePage

* core: add search to applications API

* core: add MetaNameSerializer

* *: fix signature for non-modal serializers

* providers/*: implement MetaNameSerializer

* web: implement full app list page, use as default in sidebar

* web: fix linting errors

* admin: remove old application list

* web: fix default sorting for application list

* web: fix spacing for search element in toolbar

web/src/elements/table/TableSearch.ts

@@ -0,0 +1,41 @@
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { COMMON_STYLES } from "../../common/styles";
+
+@customElement("ak-table-search")
+export class TableSearch extends LitElement {
+
+    @property()
+    value?: string;
+
+    @property()
+    onSearch?: (value: string) => void;
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-toolbar__group pf-m-filter-group">
+                <div class="pf-c-toolbar__item pf-m-search-filter">
+                    <form class="pf-c-input-group" method="GET" @submit=${(e: Event) => {
+        e.preventDefault();
+        if (!this.onSearch) return;
+        const el = this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]");
+        if (!el) return;
+        if (el.value === "") return;
+        this.onSearch(el?.value);
+    }}>
+                        <input class="pf-c-form-control" name="search" type="search" placeholder="Search..." value="${ifDefined(this.value)}" @search=${() => {
+    if (!this.onSearch) return;
+    this.onSearch("");
+}}>
+                        <button class="pf-c-button pf-m-control" type="submit">
+                            <i class="fas fa-search" aria-hidden="true"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>`;
+    }
+
+}