arcad/edge
15
0
Fork 0
Code Issues 8 Pull Requests Projects Releases 3 Wiki Activity

feat(client): add loader for apps menu
All checks were successful
arcad/edge/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
wpetit
2023-10-25 21:27:41 +02:00
parent 8889694125
commit 02c74b6f8d
7 changed files with 168 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
pkg/sdk/client/src/components/menu.ts
View File

@ -49,6 +49,9 @@ export class Menu extends LitElement {
@property()
_profile: Profile
@property()
_loading: boolean = false
static styles = css`
:host {
position: fixed;
@ -95,6 +98,7 @@ export class Menu extends LitElement {
}
_fetchApps() {
this._loading = true;
return fetch(`${BASE_API_URL}/apps`)
.then(res => res.json())
.then(result => {
@ -130,9 +134,14 @@ export class Menu extends LitElement {
return Promise.all(promises);
})
.then((manifests: Manifest[]) => {
this._loading = false
this._apps = manifests;
})
.catch(err => console.error(err))
.catch(err => {
console.error(err);
this._loading = false;
})
}
_fetchProfile() {
@ -158,19 +167,24 @@ export class Menu extends LitElement {
}
_renderApps() {
const apps = this._apps
.filter(manifest => this._canAccess(manifest))
.map(manifest => {
const iconUrl = ( ( manifest.url || '') + ( manifest.metadata?.paths?.icon || '' ) ) || LinkIcon;
return html`
<edge-menu-sub-item
name='${ manifest.id }'
label='${ manifest.title }'
icon-url='${ iconUrl }'
link-url='${ manifest.url || '#' }'>
</edge-menu-sub-item>
`
});
let apps;
if (this._loading) {
apps = [ html`<edge-loader></edge-loader>` ]
} else {
apps = this._apps
.filter(manifest => this._canAccess(manifest))
.map(manifest => {
const iconUrl = ( ( manifest.url || '') + ( manifest.metadata?.paths?.icon || '' ) ) || LinkIcon;
return html`
<edge-menu-sub-item
name='${ manifest.id }'
label='${ manifest.title }'
icon-url='${ iconUrl }'
link-url='${ manifest.url || '#' }'>
</edge-menu-sub-item>
`
});
}
return html`
<edge-menu-item name='apps' label='Apps' icon-url='${CloudIcon}'>