tethys.backend/resources/js/Components/CardBoxDataset.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

107 lines
3.6 KiB
Vue

<script lang="ts" setup>
import { computed, PropType } from 'vue';
import { mdiChartTimelineVariant, mdiFileDocumentOutline, mdiFileOutline, mdiDatabase } from '@mdi/js';
import CardBox from '@/Components/CardBox.vue';
import PillTag from '@/Components/PillTag.vue';
import IconRounded from '@/Components/IconRounded.vue';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
// Extend dayjs to support relative times
dayjs.extend(relativeTime);
interface Dataset {
account_id: number;
created_at: string;
creating_corporation: string;
editor_id: number;
embargo_date: string | null;
id: number;
language: string;
main_abstract: string | null;
main_title: string | null;
preferred_reviewer: string | null;
preferred_reviewer_email: string | null;
project_id: number | null;
publish_id: number;
publisher_name: string;
reject_editor_note: string | null;
reject_reviewer_note: string | null;
remaining_time: number;
reviewer_id: number;
server_date_modified: string;
server_date_published: string;
server_state: string;
type: string;
doi_identifier: string;
}
const props = defineProps({
dataset: {
type: Object as PropType<Dataset>,
required: true
}
});
const icon = computed(() => {
switch (props.dataset.type) {
case 'analysisdata':
return { icon: mdiChartTimelineVariant, type: 'success' };
case 'measurementdata':
return { icon: mdiFileDocumentOutline, type: 'warning' };
case 'monitoring':
return { icon: mdiFileOutline, type: 'info' };
case 'remotesensing':
return { icon: mdiDatabase, type: 'primary' };
case 'gis':
return { icon: mdiDatabase, type: 'info' };
case 'models':
return { icon: mdiChartTimelineVariant, type: 'success' };
case 'mixedtype':
return { icon: mdiFileDocumentOutline, type: 'warning' };
case 'vocabulary':
return { icon: mdiFileOutline, type: 'info' };
default:
return { icon: mdiDatabase, type: 'secondary' };
}
});
const displayTitle = computed(() => props.dataset.main_title || 'Untitled Dataset');
const doiLink = computed(() => {
return `https://doi.tethys.at/10.24341/tethys.${props.dataset.publish_id}`;
});
const relativeDate = computed(() => {
const publishedDate = dayjs(props.dataset.server_date_published);
if (publishedDate.isValid()) {
return publishedDate.fromNow();
}
return props.dataset.server_date_published;
});
// const displayBusiness = computed(() => props.dataset.publisher_name);
</script>
<template>
<CardBox class="mb-6 last:mb-0" hoverable>
<div class="flex items-start justify-between">
<IconRounded :icon="icon.icon" :type="icon.type" class="mr-6" />
<div class="flex-grow space-y-1 text-left" style="width: 70%;">
<h4 class="text-lg truncate" >
{{ displayTitle }}
</h4>
<p class="text-gray-500 dark:text-slate-400">
<b>
<a :href="doiLink" target="_blank">View Publication</a>
</b>
{{ relativeDate }}
</p>
</div>
<div class="flex flex-col items-end gap-2">
<p class="text-sm text-gray-500">{{ props.dataset.type }}</p>
<PillTag :type="icon.type" :text="props.dataset.type" small class="inline-flex" />
</div>
</div>
</CardBox>
</template>