TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-24 05:05:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

(ts) migrate components/AdminDashboardCard.vue to composition API with typescript

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-12-31 00:56:39 +01:00
parent 9280d797ba
commit 77ecbeefcb
1 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
components/AdminDashboardCard.vue
View File

@ -1,3 +1,42 @@
<script setup lang="ts">
interface Count {
name?: string;
count: number;
warning?: number;
danger?: number;
link?: string;
enabled?: boolean;
}
const props = withDefaults(
defineProps<{
baseUrl?: string;
icon: string;
header: string;
link?: string;
counts?: Count[];
}>(),
{
baseUrl: '',
counts: () => [],
},
);
const visibleCounts = computed((): Count[] => {
return props.counts.filter(({ enabled }) => enabled !== false);
});
const counterClass = (count: number, warning: number | undefined, danger: number | undefined): string => {
if (danger && count >= danger) {
return 'text-bg-danger';
}
if (warning && count >= warning) {
return 'text-bg-warning';
}
return 'bg-light text-dark border';
};
</script>
<template> <template>
<div class="col-12 col-lg-3"> <div class="col-12 col-lg-3">
<component :is="link ? 'a' : 'div'" :href="baseUrl + link" class="card mb-3" style="min-height: 128px;"> <component :is="link ? 'a' : 'div'" :href="baseUrl + link" class="card mb-3" style="min-height: 128px;">
@ -8,10 +47,14 @@
{{ header }} {{ header }}
</h4> </h4>
<ul class="list-inline h5"> <ul class="list-inline h5">
<li v-for="{ name, count, warning, danger, link } in visibleCounts" class="list-inline-item"> <li
v-for="{ name, count, warning, danger, link: sublink } in visibleCounts"
:key="name"
class="list-inline-item"
>
<component <component
:is="link ? 'a' : 'span'" :is="sublink ? 'a' : 'span'"
:href="baseUrl + link" :href="baseUrl + sublink"
:class="['badge', counterClass(count, warning, danger)]" :class="['badge', counterClass(count, warning, danger)]"
> >
{{ count }} {{ name || '' }} {{ count }} {{ name || '' }}
@ -24,43 +67,3 @@
</component> </component>
</div> </div>
</template> </template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
interface Count {
name?: string;
count: number;
warning?: number;
danger?: number;
link?: string;
enabled?: boolean;
}
export default defineComponent({
props: {
baseUrl: { default: '', type: String },
icon: { required: true, type: String },
header: { required: true, type: String },
link: { required: false, type: String },
counts: { default: () => [], type: Array as PropType<Count[]> },
},
computed: {
visibleCounts(): Count[] {
return this.counts.filter(({ enabled }) => enabled !== false);
},
},
methods: {
counterClass(count: number, warning: number | undefined, danger: number | undefined): string {
if (danger && count >= danger) {
return 'text-bg-danger';
}
if (warning && count >= warning) {
return 'text-bg-warning';
}
return 'bg-light text-dark border';
},
},
});
</script>