From 52e34398a3a10ef8808064399adfa602f6e4273f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= Date: Tue, 20 Sep 2022 09:59:37 +0200 Subject: [PATCH] added grid and toggle between views --- .../users/editor-view-users-grid.element.ts | 71 ++++++++++++++ .../users/editor-view-users-list.element.ts | 52 ++-------- .../views/users/editor-view-users.element.ts | 98 ++++++++++++------- 3 files changed, 141 insertions(+), 80 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts new file mode 100644 index 0000000000..b781e8b40b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts @@ -0,0 +1,71 @@ +import { css, html, LitElement, nothing } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property, state } from 'lit/decorators.js'; +import { UmbContextConsumerMixin } from '../../../../../core/context'; +import { repeat } from 'lit/directives/repeat.js'; + +interface TableColumn { + name: string; + sort: Function; +} + +interface TableItem { + key: string; + name: string; + userGroup: string; + lastLogin: string; + status?: string; +} + +@customElement('umb-editor-view-users-grid') +export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitElement) { + static styles = [ + UUITextStyles, + css` + #user-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: var(--uui-size-space-4); + margin-top: var(--uui-size-space-4); + } + + uui-card-user { + width: 100%; + height: 180px; + } + + .user-login-time { + margin-top: auto; + } + `, + ]; + + @property() + public users: Array = []; + + render() { + return html` +
+ ${repeat( + this.users, + (user) => user.key, + (user) => html` + + ${user.status ? html`${user.status}` : nothing} +
${user.userGroup}
+ + + ` + )} +
+ `; + } +} + +export default UmbEditorViewUsersGridElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-editor-view-users-grid': UmbEditorViewUsersGridElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts index bae3c8d727..fe99852fab 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts @@ -1,6 +1,6 @@ import { css, html, LitElement } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, state } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { UmbContextConsumerMixin } from '../../../../../core/context'; import { repeat } from 'lit/directives/repeat.js'; @@ -52,11 +52,11 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl `, ]; - @state() - private _columns: Array = []; + @property() + public users: Array = []; @state() - private _items: Array = []; + private _columns: Array = []; @state() private _selectionMode = false; @@ -72,7 +72,7 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl private _selectAllHandler(event: Event) { const checkboxElement = event.target as HTMLInputElement; - this._selection = checkboxElement.checked ? this._items.map((item: TableItem) => item.key) : []; + this._selection = checkboxElement.checked ? this.users.map((item: TableItem) => item.key) : []; this._selectionMode = this._selection.length > 0; } @@ -95,7 +95,7 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl private _sortingHandler(column: TableColumn) { this._sortingDesc = this._sortingColumn === column.name ? !this._sortingDesc : false; this._sortingColumn = column.name; - this._items = column.sort(this._items, this._sortingDesc); + this.users = column.sort(this.users, this._sortingDesc); } private _isSelected(key: string) { @@ -143,41 +143,6 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl }, }, ]; - - this._items = [ - { - key: 'a9b18a00-58f2-420e-bf60-48d33ab156db', - name: 'Cecílie Bryon', - userGroup: 'Translators', - lastLogin: 'Fri, 23 April 2021', - status: 'Invited', - }, - { - key: '3179d0b2-eec2-4045-b86a-149e13b93e14', - name: 'Kathleen G. Smith', - userGroup: 'Editors', - lastLogin: 'Tue, 6 June 2021', // random date - status: 'Invited', - }, - { - key: '1b1c9733-b845-4d9a-9ed2-b2f46c05fd72', - name: 'Adrian Andresen', - userGroup: 'Administrators', - lastLogin: 'Mon, 15 November 2021', - }, - { - key: 'b75af81a-b994-4e65-9330-b66c336d0207', - name: 'Lorenza Trentino', - userGroup: 'Editors', - lastLogin: 'Fri, 13 April 2022', - }, - { - key: 'b75af81a-b994-4e65-9330-b66c336d0202', - name: 'John Doe', - userGroup: 'Translators', - lastLogin: 'Tue, 11 December 2021', - }, - ]; } renderHeaderCellTemplate(column: TableColumn) { @@ -217,7 +182,6 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl render() { return html` -
Selected ${this._selection.length} of ${this._items.length}
@@ -225,11 +189,11 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl + ?checked="${this._selection.length === this.users.length}"> ${this._columns.map((column) => this.renderHeaderCellTemplate(column))} - ${repeat(this._items, (item) => item.key, this.renderRowTemplate)} + ${repeat(this.users, (item) => item.key, this.renderRowTemplate)} `; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts index f5f84d1611..1a2c942a7c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts @@ -5,6 +5,9 @@ import { UmbContextConsumerMixin } from '../../../../../core/context'; import type { DocumentTypeEntity } from '../../../../../mocks/data/document-type.data'; import { Subscription, distinctUntilChanged } from 'rxjs'; import './editor-view-users-list.element'; +import './editor-view-users-grid.element'; + +export type UsersViewType = 'list' | 'grid'; @customElement('umb-editor-view-users') export class UmbEditorViewUsersElement extends UmbContextConsumerMixin(LitElement) { @@ -21,31 +24,71 @@ export class UmbEditorViewUsersElement extends UmbContextConsumerMixin(LitElemen margin-top: var(--uui-size-layout-2); font-size: 1rem; } - - #user-grid { - display: none; //TODO Remove - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: var(--uui-size-space-4); - margin-top: var(--uui-size-space-4); - } - - uui-card-user { - width: 100%; - height: 180px; - } - - .user-login-time { - margin-top: auto; - } `, ]; + @state() + private _viewType: UsersViewType = 'grid'; + + @state() + private _users = [ + { + key: 'a9b18a00-58f2-420e-bf60-48d33ab156db', + name: 'Cecílie Bryon', + userGroup: 'Translators', + lastLogin: 'Fri, 23 April 2021', + status: 'Invited', + }, + { + key: '3179d0b2-eec2-4045-b86a-149e13b93e14', + name: 'Kathleen G. Smith', + userGroup: 'Editors', + lastLogin: 'Tue, 6 June 2021', // random date + status: 'Invited', + }, + { + key: '1b1c9733-b845-4d9a-9ed2-b2f46c05fd72', + name: 'Adrian Andresen', + userGroup: 'Administrators', + lastLogin: 'Mon, 15 November 2021', + }, + { + key: 'b75af81a-b994-4e65-9330-b66c336d0207', + name: 'Lorenza Trentino', + userGroup: 'Editors', + lastLogin: 'Fri, 13 April 2022', + }, + { + key: 'b75af81a-b994-4e65-9330-b66c336d0202', + name: 'John Doe', + userGroup: 'Translators', + lastLogin: 'Tue, 11 December 2021', + }, + ]; + + private _renderViewType() { + switch (this._viewType) { + case 'list': + return html``; + case 'grid': + return html``; + default: + return html``; + } + } + + private _toggleViewType() { + this._viewType = this._viewType === 'list' ? 'grid' : 'list'; + } + render() { return html`
- + @@ -63,25 +106,8 @@ export class UmbEditorViewUsersElement extends UmbContextConsumerMixin(LitElemen Order by: Name (A-Z)
-
- - Invited -
Editor
- - - -
Admin
- - - - -
Translator
- - -
- - + ${this._renderViewType()} `; } }