feat: add loaded progress for list/hash/set/zset/stream

This commit is contained in:
Lykin 2023-12-02 02:43:37 +08:00
parent 7934fc275a
commit 52490cb304
6 changed files with 76 additions and 1 deletions

View File

@ -280,6 +280,11 @@ const entries = computed(() => {
return `${len} / ${Math.max(len, props.length)}` return `${len} / ${Math.max(len, props.length)}`
}) })
const loadProgress = computed(() => {
const len = size(props.value)
return (len * 100) / Math.max(len, props.length)
})
const onAddRow = () => { const onAddRow = () => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.HASH) dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.HASH)
} }
@ -355,6 +360,16 @@ defineExpose({
{{ $t('interface.add_row') }} {{ $t('interface.add_row') }}
</n-button> </n-button>
</div> </div>
<!-- loaded progress -->
<n-progress
:border-radius="0"
:color="props.end ? '#0000' : themeVars.primaryColor"
:height="2"
:percentage="loadProgress"
:processing="props.loading"
:show-indicator="false"
status="success"
type="line" />
<div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand"> <div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand">
<!-- table --> <!-- table -->
<n-data-table <n-data-table

View File

@ -257,6 +257,11 @@ const entries = computed(() => {
return `${len} / ${Math.max(len, props.length)}` return `${len} / ${Math.max(len, props.length)}`
}) })
const loadProgress = computed(() => {
const len = size(props.value)
return (len * 100) / Math.max(len, props.length)
})
const onAddValue = (value) => { const onAddValue = (value) => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.LIST) dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.LIST)
} }
@ -332,6 +337,16 @@ defineExpose({
{{ $t('interface.add_row') }} {{ $t('interface.add_row') }}
</n-button> </n-button>
</div> </div>
<!-- loaded progress -->
<n-progress
:border-radius="0"
:color="props.end ? '#0000' : themeVars.primaryColor"
:height="2"
:percentage="loadProgress"
:processing="props.loading"
:show-indicator="false"
status="success"
type="line" />
<div class="value-wrapper value-item-part flex-box-h flex-item-expand"> <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
<!-- table --> <!-- table -->
<n-data-table <n-data-table

View File

@ -254,6 +254,11 @@ const entries = computed(() => {
return `${len} / ${Math.max(len, props.length)}` return `${len} / ${Math.max(len, props.length)}`
}) })
const loadProgress = computed(() => {
const len = size(props.value)
return (len * 100) / Math.max(len, props.length)
})
const onAddValue = (value) => { const onAddValue = (value) => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.SET) dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.SET)
} }
@ -329,6 +334,16 @@ defineExpose({
{{ $t('interface.add_row') }} {{ $t('interface.add_row') }}
</n-button> </n-button>
</div> </div>
<!-- loaded progress -->
<n-progress
:border-radius="0"
:color="props.end ? '#0000' : themeVars.primaryColor"
:height="2"
:percentage="loadProgress"
:processing="props.loading"
:show-indicator="false"
status="success"
type="line" />
<div class="value-wrapper value-item-part flex-box-h flex-item-expand"> <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
<!-- table --> <!-- table -->
<n-data-table <n-data-table

View File

@ -145,6 +145,11 @@ const entries = computed(() => {
return `${len} / ${Math.max(len, props.length)}` return `${len} / ${Math.max(len, props.length)}`
}) })
const loadProgress = computed(() => {
const len = size(props.value)
return (len * 100) / Math.max(len, props.length)
})
const onAddRow = () => { const onAddRow = () => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.STREAM) dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.STREAM)
} }
@ -215,6 +220,16 @@ defineExpose({
{{ $t('interface.add_row') }} {{ $t('interface.add_row') }}
</n-button> </n-button>
</div> </div>
<!-- loaded progress -->
<n-progress
:border-radius="0"
:color="props.end ? '#0000' : themeVars.primaryColor"
:height="2"
:percentage="loadProgress"
:processing="props.loading"
:show-indicator="false"
status="success"
type="line" />
<div class="value-wrapper value-item-part flex-box-v flex-item-expand"> <div class="value-wrapper value-item-part flex-box-v flex-item-expand">
<n-data-table <n-data-table
:bordered="false" :bordered="false"

View File

@ -291,6 +291,11 @@ const entries = computed(() => {
return `${len} / ${Math.max(len, props.length)}` return `${len} / ${Math.max(len, props.length)}`
}) })
const loadProgress = computed(() => {
const len = size(props.value)
return (len * 100) / Math.max(len, props.length)
})
const onAddRow = () => { const onAddRow = () => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.ZSET) dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.ZSET)
} }
@ -366,6 +371,16 @@ defineExpose({
{{ $t('interface.add_row') }} {{ $t('interface.add_row') }}
</n-button> </n-button>
</div> </div>
<!-- loaded progress -->
<n-progress
:border-radius="0"
:color="props.end ? '#0000' : themeVars.primaryColor"
:height="2"
:percentage="loadProgress"
:processing="props.loading"
:show-indicator="false"
status="success"
type="line" />
<div class="value-wrapper value-item-part flex-box-h flex-item-expand"> <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
<!-- table --> <!-- table -->
<n-data-table <n-data-table

View File

@ -59,7 +59,7 @@ const loadProgress = computed(() => {
if (db.maxKeys <= 0) { if (db.maxKeys <= 0) {
return 100 return 100
} }
return (db.keys * 100) / db.maxKeys return (db.keys * 100) / Math.max(db.keys, db.maxKeys)
}) })
const onReload = async () => { const onReload = async () => {