2023-03-17 15:13:37 +00:00
|
|
|
<script setup lang="ts">
|
2023-03-03 15:54:28 +00:00
|
|
|
import { Head } from '@inertiajs/vue3';
|
|
|
|
|
import { computed, ref, onMounted } from 'vue';
|
|
|
|
|
import { MainService } from '@/Stores/main';
|
2023-03-17 15:13:37 +00:00
|
|
|
// import { Inertia } from '@inertiajs/inertia';
|
2023-03-03 15:54:28 +00:00
|
|
|
import {
|
|
|
|
|
mdiAccountMultiple,
|
|
|
|
|
mdiDatabaseOutline,
|
|
|
|
|
mdiChartTimelineVariant,
|
|
|
|
|
mdiFinance,
|
|
|
|
|
mdiMonitorCellphone,
|
|
|
|
|
mdiReload,
|
|
|
|
|
mdiGithub,
|
|
|
|
|
mdiChartPie,
|
|
|
|
|
} from '@mdi/js';
|
2023-03-17 15:13:37 +00:00
|
|
|
// import { containerMaxW } from '@/config.js'; // "xl:max-w-6xl xl:mx-auto"
|
2023-03-03 15:54:28 +00:00
|
|
|
import * as chartConfig from '@/Components/Charts/chart.config.js';
|
|
|
|
|
import LineChart from '@/Components/Charts/LineChart.vue';
|
|
|
|
|
import SectionMain from '@/Components/SectionMain.vue';
|
|
|
|
|
import CardBoxWidget from '@/Components/CardBoxWidget.vue';
|
|
|
|
|
import CardBox from '@/Components/CardBox.vue';
|
|
|
|
|
import TableSampleClients from '@/Components/TableSampleClients.vue';
|
|
|
|
|
import NotificationBar from '@/Components/NotificationBar.vue';
|
|
|
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
|
|
|
import CardBoxTransaction from '@/Components/CardBoxTransaction.vue';
|
|
|
|
|
import CardBoxClient from '@/Components/CardBoxClient.vue';
|
|
|
|
|
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
|
|
|
|
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
|
|
|
|
import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
|
2023-03-17 15:13:37 +00:00
|
|
|
const chartData = ref();
|
2023-03-03 15:54:28 +00:00
|
|
|
const fillChartData = () => {
|
|
|
|
|
chartData.value = chartConfig.sampleChartData();
|
|
|
|
|
};
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
fillChartData();
|
|
|
|
|
});
|
|
|
|
|
const mainService = MainService();
|
|
|
|
|
/* Fetch sample data */
|
|
|
|
|
mainService.fetch('clients');
|
|
|
|
|
mainService.fetch('history');
|
|
|
|
|
|
|
|
|
|
mainService.fetchApi('authors');
|
|
|
|
|
mainService.fetchApi('datasets');
|
|
|
|
|
|
2023-03-17 15:13:37 +00:00
|
|
|
// const clientBarItems = computed(() => mainService.clients.slice(0, 4));
|
2023-03-03 15:54:28 +00:00
|
|
|
const transactionBarItems = computed(() => mainService.history);
|
|
|
|
|
|
|
|
|
|
const authorBarItems = computed(() => mainService.authors.slice(0, 4));
|
|
|
|
|
const authors = computed(() => mainService.authors);
|
|
|
|
|
const datasets = computed(() => mainService.datasets);
|
|
|
|
|
// const props = defineProps({
|
|
|
|
|
// user: {
|
|
|
|
|
// type: Object,
|
|
|
|
|
// default: () => ({}),
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<LayoutAuthenticated>
|
|
|
|
|
|
|
|
|
|
<Head title="Dashboard" />
|
|
|
|
|
|
|
|
|
|
<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
|
|
|
|
|
<SectionMain>
|
|
|
|
|
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
|
|
|
|
|
<BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
|
|
|
|
|
label="Star on Gitea" color="contrast" rounded-full small />
|
|
|
|
|
</SectionTitleLineWithButton>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
|
|
|
|
|
<CardBoxWidget trend="12%" trend-type="up" color="text-emerald-500" :icon="mdiAccountMultiple"
|
|
|
|
|
:number="authors.length" label="Authors" />
|
|
|
|
|
<CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiDatabaseOutline" :number="datasets.length"
|
|
|
|
|
label="Publications" />
|
|
|
|
|
<!-- <CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiCartOutline" :number="datasets.length"
|
|
|
|
|
prefix="$" label="Publications" /> -->
|
|
|
|
|
<CardBoxWidget trend="Overflow" trend-type="alert" color="text-red-500" :icon="mdiChartTimelineVariant"
|
|
|
|
|
:number="256" suffix="%" label="Performance" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
|
|
|
<div class="flex flex-col justify-between">
|
|
|
|
|
<CardBoxClient
|
|
|
|
|
v-for="client in authorBarItems"
|
|
|
|
|
:key="client.id"
|
|
|
|
|
:name="client.name"
|
|
|
|
|
:email="client.email"
|
|
|
|
|
:date="client.created_at"
|
|
|
|
|
:text="client.datasetCount"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-col justify-between">
|
|
|
|
|
<CardBoxTransaction v-for="(transaction, index) in transactionBarItems" :key="index"
|
|
|
|
|
:amount="transaction.amount" :date="transaction.date" :business="transaction.business"
|
|
|
|
|
:type="transaction.type" :name="transaction.name" :account="transaction.account" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<SectionBannerStarOnGitHub />
|
|
|
|
|
|
|
|
|
|
<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview (to do publications per year)" />
|
|
|
|
|
<CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6"
|
|
|
|
|
@header-icon-click="fillChartData">
|
|
|
|
|
<div v-if="chartData">
|
|
|
|
|
<line-chart :data="chartData" class="h-96" />
|
|
|
|
|
</div>
|
|
|
|
|
</CardBox>
|
|
|
|
|
|
|
|
|
|
<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters (to do)" />
|
|
|
|
|
|
2023-03-17 15:13:37 +00:00
|
|
|
<NotificationBar color="info" :icon="mdiMonitorCellphone">
|
2023-03-03 15:54:28 +00:00
|
|
|
<b>Responsive table.</b> Collapses on mobile
|
2023-03-17 15:13:37 +00:00
|
|
|
</NotificationBar>
|
2023-03-03 15:54:28 +00:00
|
|
|
|
|
|
|
|
<CardBox :icon="mdiMonitorCellphone" title="Responsive table" has-table>
|
|
|
|
|
<TableSampleClients />
|
|
|
|
|
</CardBox>
|
|
|
|
|
</SectionMain>
|
|
|
|
|
<!-- </section> -->
|
|
|
|
|
|
|
|
|
|
</LayoutAuthenticated>
|
|
|
|
|
</template>
|
