hotfix-feat(dataset): implement file upload with validation and error handling
- Implemented file upload functionality for datasets using multipart requests. - Added file size and type validation using VineJS. - Added file name length validation. - Added file scan to remove infected files. - Implemented aggregated upload limit to prevent exceeding the server's capacity. - Added error handling for file upload failures, including temporary file cleanup. - Updated the `DatasetController` to handle file uploads, validation, and database transactions. - Updated the `bodyparser.ts` config to process the file upload manually. - Updated the `api.ts` routes to fetch the statistic data. - Updated the `main.ts` store to fetch the statistic data. - Updated the `Dashboard.vue` to display the submitters only for administrator role. - Updated the `CardBoxWidget.vue` to display the submitters. - Updated the `ServerError.vue` to use the LayoutGuest.vue. - Updated the `AuthController.ts` and `start/routes.ts` to handle the database connection errors. - Updated the `app/exceptions/handler.ts` to handle the database connection errors. - Updated the `package.json` to use the correct version of the `@adonisjs/bodyparser`.
This commit is contained in:
parent
a25f8bf6f7
commit
b93e46207f
15 changed files with 637 additions and 200 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<script setup>
|
||||
<script lang="ts" setup>
|
||||
import { mdiCog } from '@mdi/js';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import NumberDynamic from '@/Components/NumberDynamic.vue';
|
||||
|
|
@ -49,6 +49,9 @@ defineProps({
|
|||
<PillTagTrend :trend="trend" :trend-type="trendType" small />
|
||||
<BaseButton :icon="mdiCog" icon-w="w-4" icon-h="h-4" color="white" small />
|
||||
</BaseLevel>
|
||||
<BaseLevel v-else class="mb-3" mobile>
|
||||
<BaseIcon v-if="icon" :path="icon" size="48" w="w-4" h="h-4" :class="color" />
|
||||
</BaseLevel>
|
||||
<BaseLevel mobile>
|
||||
<div>
|
||||
<h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { Head, usePage } from '@inertiajs/vue3';
|
||||
import { computed } from 'vue';
|
||||
import { MainService } from '@/Stores/main';
|
||||
import {
|
||||
mdiAccountMultiple,
|
||||
|
|
@ -9,7 +9,6 @@ import {
|
|||
mdiFinance,
|
||||
mdiMonitorCellphone,
|
||||
mdiReload,
|
||||
mdiGithub,
|
||||
mdiChartPie,
|
||||
} from '@mdi/js';
|
||||
import LineChart from '@/Components/Charts/LineChart.vue';
|
||||
|
|
@ -23,14 +22,15 @@ import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
|||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
// import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
|
||||
import CardBoxDataset from '@/Components/CardBoxDataset.vue';
|
||||
import type { User } from '@/Dataset';
|
||||
const mainService = MainService()
|
||||
|
||||
// const chartData = ref();
|
||||
// const fillChartData = async () => {
|
||||
// await mainService.fetchChartData("2022");
|
||||
// // chartData.value = chartConfig.sampleChartData();
|
||||
// // chartData.value = mainService.graphData;
|
||||
// };
|
||||
const fillChartData = async () => {
|
||||
await mainService.fetchChartData();
|
||||
// chartData.value = chartConfig.sampleChartData();
|
||||
// chartData.value = mainService.graphData;
|
||||
};
|
||||
const chartData = computed(() => mainService.graphData);
|
||||
// onMounted(async () => {
|
||||
// await mainService.fetchChartData("2022");
|
||||
|
|
@ -49,9 +49,14 @@ const authorBarItems = computed(() => mainService.authors.slice(0, 5));
|
|||
const authors = computed(() => mainService.authors);
|
||||
const datasets = computed(() => mainService.datasets);
|
||||
const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
|
||||
// let test = datasets.value;
|
||||
// console.log(test);
|
||||
const submitters = computed(() => mainService.clients);
|
||||
const user = computed(() => {
|
||||
return usePage().props.authUser as User;
|
||||
});
|
||||
|
||||
const userHasRoles = (roleNames: Array<string>): boolean => {
|
||||
return user.value.roles.some(role => roleNames.includes(role.name));
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -80,21 +85,21 @@ const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
|
|||
:number="authors.length"
|
||||
label="Authors"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
trend="193"
|
||||
<!-- trend="193" -->
|
||||
<CardBoxWidget
|
||||
trend-type="info"
|
||||
color="text-blue-500"
|
||||
:icon="mdiDatabaseOutline"
|
||||
:number="datasets.length"
|
||||
label="Publications"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
trend="+25%"
|
||||
<!-- trend="+25%" -->
|
||||
<CardBoxWidget
|
||||
trend-type="up"
|
||||
color="text-purple-500"
|
||||
:icon="mdiChartTimelineVariant"
|
||||
:number="52"
|
||||
label="Citations"
|
||||
:number="submitters.length"
|
||||
label="Submitters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -128,11 +133,9 @@ const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
|
|||
</div>
|
||||
</CardBox>
|
||||
|
||||
<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters" />
|
||||
|
||||
<SectionTitleLineWithButton v-if="userHasRoles(['administrator'])" :icon="mdiAccountMultiple" title="Submitters" />
|
||||
<!-- <NotificationBar color="info" :icon="mdiMonitorCellphone"> <b>Responsive table.</b> Collapses on mobile </NotificationBar> -->
|
||||
|
||||
<CardBox :icon="mdiMonitorCellphone" title="Responsive table" has-table>
|
||||
<CardBox v-if="userHasRoles(['administrator'])" :icon="mdiMonitorCellphone" title="Responsive table" has-table>
|
||||
<TableSampleClients />
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
|
|
|
|||
|
|
@ -20,11 +20,13 @@ import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.
|
|||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import { mdiLightbulbAlert, mdiArrowLeftBoldOutline } from '@mdi/js';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
@Component({
|
||||
// options: {
|
||||
// layout: DefaultLayout,
|
||||
// },
|
||||
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
|
||||
|
||||
|
||||
@Component({
|
||||
options: {
|
||||
layout: LayoutGuest,
|
||||
},
|
||||
name: 'AppComponent',
|
||||
|
||||
components: {
|
||||
|
|
|
|||
71
resources/js/Pages/Errors/postgres_error.vue
Normal file
71
resources/js/Pages/Errors/postgres_error.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div class="max-w-md w-full p-6 bg-white rounded-md shadow-md">
|
||||
<h1 class="text-2xl font-bold text-red-500 mb-4">{{ status }}</h1>
|
||||
<p class="text-gray-700 mb-4">{{ message }}</p>
|
||||
<div class="text-sm text-gray-500 mb-4">
|
||||
<p>Error Code: {{ details.code }}</p>
|
||||
<p>Type: {{ details.type }}</p>
|
||||
<div v-for="(port, index) in details.ports" :key="index">
|
||||
<p>Connection attempt {{ index + 1 }}: {{ port.address }}:{{ port.port }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<SectionTitleLineWithButton :icon="mdiLightbulbAlert" :title="'Database Error'" :main="true">
|
||||
<BaseButton @click.prevent="handleAction" :icon="mdiArrowLeftBoldOutline" label="Dashboard"
|
||||
color="white" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from 'vue-facing-decorator';
|
||||
import { Link, router } from '@inertiajs/vue3';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import { mdiLightbulbAlert, mdiArrowLeftBoldOutline } from '@mdi/js';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
|
||||
|
||||
@Component({
|
||||
options: {
|
||||
layout: LayoutGuest,
|
||||
},
|
||||
name: 'PostgresError',
|
||||
components: {
|
||||
Link,
|
||||
BaseButton,
|
||||
SectionTitleLineWithButton,
|
||||
},
|
||||
})
|
||||
export default class AppComponent extends Vue {
|
||||
@Prop({
|
||||
type: String,
|
||||
default: '',
|
||||
})
|
||||
status: string;
|
||||
|
||||
@Prop({
|
||||
type: String,
|
||||
default: '',
|
||||
})
|
||||
message: string;
|
||||
|
||||
@Prop({
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
})
|
||||
details: {
|
||||
code: string;
|
||||
type: string;
|
||||
ports: Array<{ port: number; address: string }>;
|
||||
};
|
||||
|
||||
mdiLightbulbAlert = mdiLightbulbAlert;
|
||||
mdiArrowLeftBoldOutline = mdiArrowLeftBoldOutline;
|
||||
|
||||
public async handleAction() {
|
||||
await router.get(stardust.route('dashboard'));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -198,7 +198,8 @@ export const MainService = defineStore('main', {
|
|||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error.message);
|
||||
// alert(error.message);
|
||||
throw error;
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -236,17 +237,18 @@ export const MainService = defineStore('main', {
|
|||
this.totpState = state;
|
||||
},
|
||||
|
||||
fetchChartData(year: string) {
|
||||
fetchChartData() {
|
||||
// sampleDataKey= authors or datasets
|
||||
axios
|
||||
.get(`/api/statistic/${year}`)
|
||||
.get(`/api/statistic`)
|
||||
.then((r) => {
|
||||
if (r.data) {
|
||||
this.graphData = r.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error.message);
|
||||
// alert(error.message);
|
||||
throw error;
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue