yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added grid and toggle between views

Browse Source
This commit is contained in:
Jesper Møller Jensen
2022-09-20 09:59:37 +02:00
parent f2244b6cf3
commit 52e34398a3
3 changed files with 141 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts Normal file
View File

@@ -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<TableItem> = [];
render() {
return html`
<div id="user-grid">
${repeat(
this.users,
(user) => user.key,
(user) => html`
<uui-card-user .name=${user.name}>
${user.status ? html`<uui-tag slot="tag" size="s">${user.status}</uui-tag>` : nothing}
<div>${user.userGroup}</div>
<div class="user-login-time">${user.lastLogin}</div>
</uui-card-user>
`
)}
</div>
`;
}
}
export default UmbEditorViewUsersGridElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-users-grid': UmbEditorViewUsersGridElement;
}
}

52
src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts
View File

@@ -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<TableColumn> = [];
@property()
public users: Array<TableItem> = [];
@state()
private _items: Array<TableItem> = [];
private _columns: Array<TableColumn> = [];
@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`
<div style="margin-bottom: 20px;">Selected ${this._selection.length} of ${this._items.length}</div>
<uui-table class="uui-text">
<uui-table-column style="width: 60px;"></uui-table-column>
<uui-table-head>
@@ -225,11 +189,11 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl
<uui-checkbox
style="padding: var(--uui-size-4) var(--uui-size-5);"
@change="${this._selectAllHandler}"
?checked="${this._selection.length === this._items.length}"></uui-checkbox>
?checked="${this._selection.length === this.users.length}"></uui-checkbox>
</uui-table-head-cell>
${this._columns.map((column) => this.renderHeaderCellTemplate(column))}
</uui-table-head>
${repeat(this._items, (item) => item.key, this.renderRowTemplate)}
${repeat(this.users, (item) => item.key, this.renderRowTemplate)}
</uui-table>
`;
}

98
src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts
View File

@@ -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`<umb-editor-view-users-list .users=${this._users}></umb-editor-view-users-list>`;
case 'grid':
return html`<umb-editor-view-users-grid .users=${this._users}></umb-editor-view-users-grid>`;
default:
return html`<umb-editor-view-users-grid .users=${this._users}></umb-editor-view-users-grid>`;
}
}
private _toggleViewType() {
this._viewType = this._viewType === 'list' ? 'grid' : 'list';
}
render() {
return html`<div id="top-bar">
<uui-button label="Invite user" look="outline"></uui-button>
<div>
<uui-button look="outline" compact>
<uui-button
@click=${this._toggleViewType}
look="${this._viewType === 'grid' ? 'outline' : 'primary'}"
compact>
<uui-icon name="settings"></uui-icon>
</uui-button>
<uui-button look="outline" compact>
@@ -63,25 +106,8 @@ export class UmbEditorViewUsersElement extends UmbContextConsumerMixin(LitElemen
<uui-button> Order by: <b>Name (A-Z)</b> </uui-button>
</div>
</div>
<div id="user-grid">
<uui-card-user name="John Rabbit">
<uui-tag slot="tag" size="s">Invited</uui-tag>
<div>Editor</div>
<div class="user-login-time">Has not logged in yet</div>
</uui-card-user>
<uui-card-user name="Prince Fox">
<div>Admin</div>
<div class="user-login-time">Has not logged in yet</div>
</uui-card-user>
<uui-card-user name="Lisa Strong">
<div>Translator</div>
<div class="user-login-time">Has not logged in yet</div>
</uui-card-user>
</div>
<umb-editor-view-users-list></umb-editor-view-users-list>
${this._renderViewType()}
</div> `;
}
}