medlogic
/
olivetin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Entities view shows a nicer view when there are 0 entities (#1031)

This commit is contained in:
James Read 2026-05-21 23:15:44 +01:00 committed by GitHub
parent 61593a8aaf d4ca9c073a
commit 53359a9960
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/resources/vue/views/EntitiesView.vue
View File

@ -1,51 +1,66 @@
<template> <template>
<Section class = "with-header-and-content" v-if="entityDefinitions.length === 0" title="Loading entity definitions..."> <Section v-if="!definitionsLoaded" title="Loading entity definitions..." />
<div class = "section-header"> <Section
<h2 class="loading-message"> v-else-if="totalInstances === 0"
Loading entity definitions... title="There are no entities to show yet."
</h2> >
</div> <p>
When OliveTin has registered entity instances (for example from entity files or your setup), they will be listed here.
</p>
</Section> </Section>
<template v-else> <template v-else>
<Section v-for="def in entityDefinitions" :key="def.title" :title="'Entity: ' + def.title "> <Section v-for="def in entityDefinitions" :key="def.title" :title="'Entity: ' + def.title ">
<div class = "section-content"> <p>{{ def.instances.length }} instances.</p>
<p>{{ def.instances.length }} instances.</p>
<ul> <ul>
<li v-for="inst in def.instances" :key="inst.uniqueKey"> <li v-for="inst in def.instances" :key="inst.uniqueKey">
<router-link :to="{ name: 'EntityDetails', params: { entityType: inst.type, entityKey: inst.uniqueKey } }"> <router-link :to="{ name: 'EntityDetails', params: { entityType: inst.type, entityKey: inst.uniqueKey } }">
{{ inst.title }} {{ inst.title }}
</router-link> </router-link>
</li> </li>
</ul> </ul>
<h3>Used on Dashboards:</h3> <h3>Used on Dashboards:</h3>
<ul> <ul>
<li v-for="dash in filteredDashboards(def.usedOnDashboards)" :key="dash"> <li v-for="dash in filteredDashboards(def.usedOnDashboards)" :key="dash">
<template v-if="isEntityDirectory(dash)"> <template v-if="isEntityDirectory(dash)">
{{ getDashboardTitle(dash) }} <span class="entity-directory-label">[Entity Directory]</span> {{ getDashboardTitle(dash) }} <span class="entity-directory-label">[Entity Directory]</span>
</template> </template>
<router-link v-else-if="!dash.includes('entity:')" :to="{ name: 'Dashboard', params: { title: getDashboardTitle(dash) } }"> <router-link v-else-if="!dash.includes('entity:')" :to="{ name: 'Dashboard', params: { title: getDashboardTitle(dash) } }">
{{ getDashboardTitle(dash) }} {{ getDashboardTitle(dash) }}
</router-link> </router-link>
<span v-else>{{ dash }}</span> <span v-else>{{ dash }}</span>
</li> </li>
</ul> </ul>
</div>
</Section> </Section>
</template> </template>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import Section from 'picocrank/vue/components/Section.vue' import Section from 'picocrank/vue/components/Section.vue'
const definitionsLoaded = ref(false)
const entityDefinitions = ref([]) const entityDefinitions = ref([])
async function fetchEntities() { const totalInstances = computed(() =>
const ret = await window.client.getEntities() entityDefinitions.value.reduce(
(sum, def) => sum + (def.instances?.length ?? 0),
0,
),
)
entityDefinitions.value = ret.entityDefinitions async function fetchEntities() {
try {
const ret = await window.client.getEntities()
entityDefinitions.value = ret.entityDefinitions ?? []
} catch (err) {
console.error('Failed to fetch entities:', err)
window.showBigError('fetch-entities', 'getting entities', err, false)
entityDefinitions.value = []
} finally {
definitionsLoaded.value = true
}
} }
function filteredDashboards(dashboards) { function filteredDashboards(dashboards) {