swcs/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nested tree with async loading

Browse Source
This commit is contained in:
Tobias Klika
2020-04-06 18:45:23 +02:00
parent 3b0eca2339
commit 9e02bee33e
9 changed files with 242 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Core/Api/PageTreeApi.cs
+5 -2
View File
@@ -3,6 +3,7 @@ using Raven.Client.Documents;
using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using zero.Core.Entities;
namespace zero.Core.Api
@@ -19,8 +20,10 @@ namespace zero.Core.Api
/// <inheritdoc />
public IList<TreeItem> GetChildren(string contentPath, string parent = null) // TODO remove content path as it's only needed to load test data
public async Task<IList<TreeItem>> GetChildren(string contentPath, string parent = null) // TODO remove content path as it's only needed to load test data
{
await Task.Delay(parent != null ? 1200 : 0);
string path = System.IO.Path.Combine(contentPath, "Resources/tree" + (parent != null ? "-" + parent.ToString() : String.Empty) + ".debug.json");
string text = System.IO.File.ReadAllText(path, Encoding.UTF8);
@@ -34,6 +37,6 @@ namespace zero.Core.Api
/// <summary>
/// Get all children for the current parent page (or root if empty)
/// </summary>
IList<TreeItem> GetChildren(string contentPath, string parent = null);
Task<IList<TreeItem>> GetChildren(string contentPath, string parent = null);
}
}
zero.Web/App/Components/tree.vue
+204 -7
View File
@@ -1,6 +1,19 @@
<template>
<div class="ui-tree">
tree
<div class="ui-tree" :style="{ 'padding-left': depth > 0 ? ((depth * 18) + 'px') : null }">
<span v-if="status === 'loading'" class="ui-tree-item-loading"><i></i></span>
<template v-for="item in items">
<div class="ui-tree-item" :class="getClasses(item)">
<button v-if="item.hasChildren" @click="toggle(item)" type="button" class="ui-tree-item-toggle">
<i class="ui-tree-item-arrow" :class="['fth-chevron-' + (item.isOpen ? 'up' : 'down')]"></i>
</button>
<router-link to="/" class="ui-tree-item-link">
<i class="ui-tree-item-icon" :class="item.icon"></i>
<i v-if="item.modifier" :title="item.modifier.name" class="ui-tree-item-modifier" :class="item.modifier.icon"></i>
{{item.name | localize}}
</router-link>
</div>
<ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" />
</template>
</div>
</template>
@@ -10,15 +23,32 @@
name: 'uiTree',
props: {
depth: {
type: Number,
default: 0
},
parent: {
type: String,
default: null
},
get: {
type: Function,
required: true
},
onChange: {
type: Function,
default: () => { }
}
},
data: () => ({
items: [],
status: 'none'
}),
created ()
{
this.load();
this.load(this.parent);
},
methods: {
@@ -26,20 +56,187 @@
// loads children of the given parent id or on root if empty
load(parent)
{
let promise = this.get(parent);
this.setStatus('loading', this.items);
//if (typeof promise !== 'object' || !promise['then'] || typeof promise.then !== 'function')
let promise = this.get(parent);
promise.then(response =>
{
console.info(response);
this.items = response;
this.setStatus('loaded', this.items);
})
.catch(error =>
{
this.setStatus('error', this.items, error);
// TODO handle errors
});
},
// updates the status for the current tree
setStatus(status)
{
this.status = status;
this.onChange(status, this.items);
},
// sets the current status for child tree
setChildTreeStatus(status, items, x)
{
console.info(status, items, x, this);
},
// toggles children of an item
toggle(item)
{
item.isOpen = !item.isOpen;
//if (item.isOpen && !item.items)
//{
// item.children = this.load(item.id, items =>
// {
// item.items = items;
// });
//}
},
// get all classes for a tree item
getClasses(item)
{
return {
'has-children': item.hasChildren,
'is-open': item.isOpen
};
}
}
}
</script>
</script>
<style lang="scss">
.ui-tree
{
position: relative;
}
.ui-tree-item
{
display: grid;
align-items: center;
font-size: var(--font-size);
padding: 0 var(--padding);
height: 50px;
color: var(--color-fg-reverse-mid);
position: relative;
transition: color 0.2s ease;
.ui-tree-item-arrow
{
transition: transform 0.2s ease;
}
&.is-open > .ui-tree-item-toggle .ui-tree-item-arrow
{
transform: rotate(180deg);
}
}
.ui-tree-item-link
{
display: grid;
grid-template-columns: 30px 1fr auto;
grid-gap: 6px;
height: 100%;
align-items: center;
position: relative;
&:hover
{
color: var(--color-fg);
.ui-tree-item-icon
{
color: var(--color-fg);
}
}
}
.ui-tree-item-toggle
{
position: absolute;
color: var(--color-fg-mid);
height: 100%;
top: 0;
left: 0;
width: 30px;
text-align: right;
padding-right: 5px;
outline: none !important;
transition: color 0.2s ease;
&:hover
{
color: var(--color-fg);
}
}
.ui-tree-item-icon
{
font-size: 18px;
line-height: 1;
font-weight: 400;
position: relative;
top: -2px;
color: var(--color-fg-reverse-mid);
transition: color 0.2s ease;
}
.ui-tree-item-loading
{
display: block;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
height: 2px;
i
{
background-color: var(--color-line);
transform: translateX(-100%) scaleX(1);
animation: treeitemloading 1s linear infinite;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
}
@keyframes treeitemloading
{
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.ui-tree-item-modifier
{
position: absolute;
left: 10px;
bottom: 12px;
background: var(--color-bg-light);
border-radius: 50%;
width: 14px;
height: 14px;
color: var(--color-text-mid);
font-size: 11px;
font-style: normal;
text-align: center;
line-height: 14px;
}
</style>
zero.Web/App/Pages/page.vue
+17 -2
View File
@@ -14,11 +14,26 @@
export default {
name: 'app-page',
data: () => ({
cache: {}
}),
methods: {
getItems(parent)
{
return PageTreeApi.getChildren(parent);
const key = !parent ? '__root' : parent;
if (this.cache[key])
{
return Promise.resolve(this.cache[key]);
}
return PageTreeApi.getChildren(parent).then(response =>
{
this.cache[key] = response;
return response;
});
}
}
@@ -39,6 +54,6 @@
{
width: 340px;
background: var(--color-bg-light);
padding: var(--padding);
padding: var(--padding) 0;
}
</style>
zero.Web/Controllers/PageTreeController.cs
+3 -2
View File
@@ -1,6 +1,7 @@
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
using zero.Core;
using zero.Core.Api;
@@ -20,9 +21,9 @@ namespace zero.Web.Controllers
}
public IActionResult GetChildren(string parent = null)
public async Task<IActionResult> GetChildren(string parent = null)
{
return Json(Api.GetChildren(Env.ContentRootPath, parent));
return Json(await Api.GetChildren(Env.ContentRootPath, parent));
}
}
}
zero.Web/Resources/Localization/zero.en-us.json
+5
View File
@@ -11,5 +11,10 @@
"pages": "Pages",
"settings": "Settings"
}
},
"recyclebin": {
"name": "Recycle bin",
"description": "View recently deleted entities"
}
}
zero.Web/Resources/tree.debug.json
+2 -2
View File
@@ -12,8 +12,8 @@
"id": "-99",
"parentId": null,
"sort": 1000,
"name": "@generic.recyclebin.name",
"description": "@generic.recyclebin.description",
"name": "@recyclebin.name",
"description": "@recyclebin.description",
"icon": "fth-trash",
"hasChildren": false
}
zero.Web/Sass/Canvas/_navigation.scss
+1 -1
View File
@@ -60,7 +60,6 @@ a.app-nav-item
&:hover, &.is-active
{
background: rgba(black, 0.1);
color: var(--color-fg-reverse);
.app-nav-item-icon
@@ -71,6 +70,7 @@ a.app-nav-item
&.is-active
{
background: rgba(black, 0.1);
font-weight: 700;
}
zero.Web/Sass/Core/_settings.scss
+4 -1
View File
@@ -20,7 +20,7 @@
--color-bg-light: #242526;
// line colors
--color-line: #eaebec;
--color-line: #2f3233;
--color-line-mid: #d7d8d9;
@@ -28,6 +28,9 @@
--padding: 32px;
--height-top: 74px;
--font-size: 14px;
--font-size-s: 12px;
}
zero.Web/Sass/Modules/Buttons/_button.scss
+1
View File
@@ -3,6 +3,7 @@
button
{
@extend %font;
color: var(--color-fg);
&:focus
{