tethys.backend/resources/js/Components/CardBoxClient.vue
Arno Kaimbacher b540547e4c
All checks were successful
CI / container-job (push) Successful in 49s
feat: update API controllers, validations, and Vue components
- Modified Api/Authors.Controller.ts to use only personal types and sort by dataset_count.
- Completely rewritten AvatarController.ts.
- Added new Api/CollectionsController.ts for querying collections and collection_roles.
- Modified Api/DatasetController.ts to preload titles, identifier and order by server_date_published.
- Modified FileController.ts to serve files from /storage/app/data/ instead of /storage/app/public.
- Added new Api/UserController for requesting submitters (getSubmitters).
- Improved OaiController.ts with performant DB queries for better ResumptionToken handling.
- Modified Submitter/DatasetController.ts by adding a categorize method for library classification.
- Rewritten ResumptionToken.ts.
- Improved TokenWorkerService.ts to utilize browser fingerprint.
- Edited dataset.ts by adding the doiIdentifier property.
- Enhanced person.ts to improve the fullName property.
- Completely rewritten AsideMenuItem.vue component.
- Updated CarBoxClient.vue to use TypeScript.
- Added new CardBoxDataset.vue for displaying recent datasets on the dashboard.
- Completely rewritten TableSampleClients.vue for the dashboard.
- Completely rewritten UserAvatar.vue.
- Made small layout changes in Dashboard.vue.
- Added new Category.vue for browsing scientific collections.
- Adapted the pinia store in main.ts.
- Added additional routes in start/routes.ts and start/api/routes.ts.
- Improved referenceValidation.ts for better ISBN existence checking.
- NPM dependency updates.
2025-03-14 17:39:58 +01:00

103 lines
2.5 KiB
Vue

<script lang="ts" setup>
import { computed } from 'vue';
// import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js';
import CardBox from '@/Components/CardBox.vue';
import BaseLevel from '@/Components/BaseLevel.vue';
import PillTag from '@/Components/PillTag.vue';
import UserAvatar from '@/Components/UserAvatar.vue';
const props = defineProps({
name: {
type: String,
required: true,
},
login: {
type: String,
required: false,
},
email: {
type: String,
required: false,
},
date: {
type: String,
required: false,
},
progress: {
type: Number,
default: 0,
},
count: {
type: Number,
default: 0,
},
text: {
type: String,
default: null,
},
type: {
type: String,
default: null,
},
});
const pillType = computed(() => {
if (props.type) {
return props.type;
}
if (props.count) {
if (props.count >= 20) {
return 'success';
}
if (props.count >= 5) {
return 'warning';
}
return 'danger';
}
return 'info';
});
// const pillIcon = computed(() => {
// return {
// success: mdiTrendingUp,
// warning: mdiTrendingNeutral,
// danger: mdiTrendingDown,
// info: mdiTrendingNeutral,
// }[pillType.value];
// });
// const pillText = computed(() => props.text ?? `${props.progress}%`);
// </script>
<template>
<CardBox class="mb-6 last:mb-0" hoverable>
<BaseLevel>
<BaseLevel type="justify-start">
<UserAvatar class="w-12 h-12 mr-6" :username="props.name" />
<div class="text-center md:text-left overflow-hidden">
<h4 class="text-xl text-ellipsis">
{{ name }}
</h4>
<p class="text-gray-500 dark:text-slate-400">
<!-- {{ date }} @ {{ login }} -->
{{ email }}
</p>
</div>
</BaseLevel>
<!-- <PillTag :type="pillType" :text="text" small :icon="pillIcon" /> -->
<div class="text-center md:text-right space-y-2">
<p class="text-sm text-gray-500">
Count
</p>
<div>
<PillTag :type="pillType" :text="String(count)" small />
</div>
</div>
</BaseLevel>
</CardBox>
</template>