feat: add YListItem to display common list fields

This commit is contained in:
axolotle 2024-08-21 18:21:29 +02:00
parent 8b16a3e0e2
commit 4542ae0672
6 changed files with 70 additions and 72 deletions

View file

@ -0,0 +1,40 @@
<script setup lang="ts">
const props = withDefaults(
defineProps<{
label: string
sublabel?: string
description?: string
}>(),
{
sublabel: undefined,
},
)
const slots = defineSlots<{
default?: any
}>()
</script>
<template>
<BListGroupItem
class="d-flex justify-content-between align-items-center pe-0"
>
<div>
<h5>
<strong class="fw-bold">{{ label }}</strong>
<small v-if="sublabel" class="ms-1 text-secondary">
{{ sublabel }}
</small>
</h5>
<p v-if="description || slots.default" class="m-0">
<slot name="default">
{{ description }}
</slot>
</p>
</div>
<YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
</BListGroupItem>
</template>
<style lang="scss" scoped></style>

View file

@ -34,24 +34,14 @@ const [search, filteredApps] = useSearch(apps, (s, app) =>
</template>
<BListGroup>
<BListGroupItem
<YListItem
v-for="{ id, description, label } in filteredApps"
:key="id"
:to="{ name: 'app-info', params: { id } }"
class="d-flex justify-content-between align-items-center pe-0"
>
<div>
<h5>
<strong class="me-1 fw-bold">{{ label }}</strong>
<small class="text-secondary">{{ id }}</small>
</h5>
<p class="m-0">
{{ description }}
</p>
</div>
<YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
</BListGroupItem>
:label="label"
:sublabel="id"
:description="description"
/>
</BListGroup>
</ViewSearch>
</template>

View file

@ -168,9 +168,9 @@ function downloadBackup() {
class="d-flex justify-content-between align-items-center pe-0"
>
<div class="me-2">
<h5 class="fw-bold">
{{ item.name }}
<small v-if="item.size" class="text-secondary">
<h5>
<span class="fw-bold">{{ item.name }}</span>
<small v-if="item.size" class="ms-1 text-secondary">
({{ humanSize(item.size) }})
</small>
</h5>
@ -189,9 +189,9 @@ function downloadBackup() {
class="d-flex justify-content-between align-items-center pe-0"
>
<div class="me-2">
<h5 class="fw-bold">
{{ item.name }}
<small class="text-secondary">
<h5>
<span class="fw-bold">{{ item.name }}</span>
<small class="ms-1 text-secondary">
{{ appName }} ({{ humanSize(item.size) }})
</small>
</h5>

View file

@ -38,26 +38,15 @@ const archives = await api
</YAlert>
<BListGroup v-else>
<BListGroupItem
<YListItem
v-for="{ name, created_at, path, size } in archives"
:key="name"
:to="{ name: 'backup-info', params: { name, id } }"
:title="readableDate(created_at)"
class="d-flex justify-content-between align-items-center pe-0"
>
<div>
<h5 class="fw-bold">
{{ distanceToNow(created_at) }}
<small class="text-secondary"
>{{ name }} ({{ humanSize(size) }})</small
>
</h5>
<p class="mb-0">
{{ path }}
</p>
</div>
<YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
</BListGroupItem>
:label="distanceToNow(created_at)"
:sublabel="`${name} (${humanSize(size)})`"
:description="path"
/>
</BListGroup>
</div>
</template>

View file

@ -39,7 +39,7 @@ const [search, filteredServices] = useSearch(services, (s, service) => {
items-name="services"
>
<BListGroup>
<BListGroupItem
<YListItem
v-for="{
name,
description,
@ -48,27 +48,15 @@ const [search, filteredServices] = useSearch(services, (s, service) => {
} in filteredServices"
:key="name"
:to="{ name: 'service-info', params: { name } }"
class="d-flex justify-content-between align-items-center pe-0"
:label="name"
:sublabel="description"
>
<div>
<h5>
<span class="fw-bold me-1">{{ name }}</span>
<small class="text-secondary">{{ description }}</small>
</h5>
<p class="m-0">
<!-- FIXME +`-emphasis`? + rework emphasis color or text colors -->
<span
:class="`text-${status === 'running' ? 'success' : 'danger'}`"
>
<YIcon :iname="status === 'running' ? 'check-circle' : 'times'" />
{{ $t(status) }}
</span>
{{ $t('since') }} {{ last_state_change }}
</p>
</div>
<YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
</BListGroupItem>
<span :class="`text-${status === 'running' ? 'success' : 'danger'}`">
<YIcon :iname="status === 'running' ? 'check-circle' : 'times'" />
{{ $t(status) }}
</span>
{{ $t('since') }} {{ last_state_change }}
</YListItem>
</BListGroup>
</ViewSearch>
</template>

View file

@ -49,23 +49,14 @@ function downloadExport() {
</template>
<BListGroup>
<BListGroupItem
<YListItem
v-for="user in filteredUsers"
:key="user.username"
:to="{ name: 'user-info', params: { name: user.username } }"
class="d-flex justify-content-between align-items-center pe-0"
>
<div>
<h5 class="fw-bold">
{{ user.username }}
<small class="text-secondary">{{ user.fullname }}</small>
</h5>
<p class="m-0">
{{ user.mail }}
</p>
</div>
<YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
</BListGroupItem>
:label="user.username"
:sublabel="user.fullname"
:description="user.mail"
/>
</BListGroup>
</ViewSearch>
</template>