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

add loader state to search results

Browse Source
This commit is contained in:
Jacob Overgaard
2022-11-24 17:01:53 +01:00
parent e8df5fff09
commit c0532c4497
1 changed files with 61 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/views/section-view-examine-searchers.ts
View File

@@ -1,5 +1,5 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import {css, html, LitElement, nothing} from 'lit';
import { customElement, state, query, property } from 'lit/decorators.js';
import { UmbModalService, UmbNotificationService, UmbNotificationDefaultData } from '@umbraco-cms/services';
@@ -10,6 +10,7 @@ import { ApiError, ProblemDetails, SearchResult, SearcherResource, Field } from
import './modal-views/fields-viewer.element';
import './modal-views/fields-settings.element';
import {UUIButtonState} from "@umbraco-ui/uui";
interface ExposedSearchResultField {
name?: string | null;
@@ -113,6 +114,9 @@ export class UmbDashboardExamineSearcherElement extends UmbContextConsumerMixin(
@state()
private _exposedFields?: ExposedSearchResultField[];
@state()
private _searchLoading = false;
@query('#search-input')
private _searchInput!: HTMLInputElement;
@@ -135,11 +139,12 @@ export class UmbDashboardExamineSearcherElement extends UmbContextConsumerMixin(
private async _onSearch() {
if (!this._searchInput.value.length) return;
this._searchLoading = true;
try {
const res = await SearcherResource.getSearcherBySearcherNameQuery({
searcherName: this.searcherName,
term: this._searchInput.value,
take: 9999,
take: 100,
skip: 0,
});
this._searchResults = res.items;
@@ -151,6 +156,7 @@ export class UmbDashboardExamineSearcherElement extends UmbContextConsumerMixin(
this._notificationService?.peek('danger', { data });
}
}
this._searchLoading = false;
}
private _updateFieldFilter() {
@@ -205,58 +211,60 @@ export class UmbDashboardExamineSearcherElement extends UmbContextConsumerMixin(
}
private renderSearchResults() {
if (this._searchResults?.length) {
return html`<div class="table-container">
<uui-scroll-container>
<uui-table class="search">
<uui-table-head>
<uui-table-head-cell style="width:0">Score</uui-table-head-cell>
<uui-table-head-cell style="width:0">Id</uui-table-head-cell>
<uui-table-head-cell>Name</uui-table-head-cell>
<uui-table-head-cell>Fields</uui-table-head-cell>
${this.renderHeadCells()}
</uui-table-head>
${this._searchResults?.map((rowData) => {
return html`<uui-table-row>
<uui-table-cell> ${rowData.score} </uui-table-cell>
<uui-table-cell> ${rowData.id} </uui-table-cell>
<uui-table-cell>
<uui-button look="secondary" label="Open editor for this document" @click="${this._onNameClick}">
${rowData.fields?.find((field) => {
if (field.name?.toUpperCase() === 'NODENAME') return field.values;
else return;
})?.values}
</uui-button>
</uui-table-cell>
<uui-table-cell>
<uui-button
class="bright"
look="secondary"
label="Open sidebar to see all fields"
@click="${() =>
this._modalService?.open('umb-modal-layout-fields-viewer', {
type: 'sidebar',
size: 'medium',
data: { ...rowData },
})}">
${rowData.fields ? Object.keys(rowData.fields).length : ''} fields
</uui-button>
</uui-table-cell>
${rowData.fields ? this.renderBodyCells(rowData.fields) : ''}
</uui-table-row>`;
})}
</uui-table>
</uui-scroll-container>
<button class="field-adder" @click="${this._onFieldFilterClick}">
<uui-icon-registry-essential>
<uui-tag look="secondary">
<uui-icon name="add"></uui-icon>
</uui-tag>
</uui-icon-registry-essential>
</button>
</div>`;
if (this._searchLoading) return html`<uui-loader></uui-loader>`;
if (!this._searchResults) return nothing;
if (!this._searchResults.length) {
return html`<p>No results found</p>`;
}
return;
return html`<div class="table-container">
<uui-scroll-container>
<uui-table class="search">
<uui-table-head>
<uui-table-head-cell style="width:0">Score</uui-table-head-cell>
<uui-table-head-cell style="width:0">Id</uui-table-head-cell>
<uui-table-head-cell>Name</uui-table-head-cell>
<uui-table-head-cell>Fields</uui-table-head-cell>
${this.renderHeadCells()}
</uui-table-head>
${this._searchResults?.map((rowData) => {
return html`<uui-table-row>
<uui-table-cell> ${rowData.score} </uui-table-cell>
<uui-table-cell> ${rowData.id} </uui-table-cell>
<uui-table-cell>
<uui-button look="secondary" label="Open editor for this document" @click="${this._onNameClick}">
${rowData.fields?.find((field) => {
if (field.name?.toUpperCase() === 'NODENAME') return field.values;
else return;
})?.values}
</uui-button>
</uui-table-cell>
<uui-table-cell>
<uui-button
class="bright"
look="secondary"
label="Open sidebar to see all fields"
@click="${() =>
this._modalService?.open('umb-modal-layout-fields-viewer', {
type: 'sidebar',
size: 'medium',
data: { ...rowData },
})}">
${rowData.fields ? Object.keys(rowData.fields).length : ''} fields
</uui-button>
</uui-table-cell>
${rowData.fields ? this.renderBodyCells(rowData.fields) : ''}
</uui-table-row>`;
})}
</uui-table>
</uui-scroll-container>
<button class="field-adder" @click="${this._onFieldFilterClick}">
<uui-icon-registry-essential>
<uui-tag look="secondary">
<uui-icon name="add"></uui-icon>
</uui-tag>
</uui-icon-registry-essential>
</button>
</div>`;
}
renderHeadCells() {