hotfix: improve mimetype creation and dashboard data loading

- Added a NotificationBar component to display flash messages on the Mimetype creation page.
- Modified FormCheckRadioGroup to handle both numeric and string keys for input values.
- Removed unused code and API calls from Dashboard.vue and moved API calls to the component level where they are used.
- Added authentication middleware to the 'clients' and 'authors' API routes in `start/routes/api.ts`.
- Updated the file download route in `start/routes/api.ts` to include "file" in the path.
- Corrected the validation message key for file extension minLength in MimetypeController.ts.
- Updated favicon path in `resources/views/app.edge`.
- Added argon2 dependency in `package.json`.

app/Controllers/Http/Admin/MimetypeController.ts

@@ -64,7 +64,7 @@ export default class MimetypeController {
         'maxLength': '{{ field }} must be less then {{ max }} characters long',
         'isUnique': '{{ field }} must be unique, and this value is already taken',
         'required': '{{ field }} is required',
-        'file_extension.minLength': 'at least {{ min }} mimetypes must be defined',
+        'file_extension.array.minLength': 'at least {{ min }} mimetypes must be defined',
         'file_extension.*.string': 'Each file extension must be a valid string', // Adjusted to match the type
     };
 

package.json

@@ -97,6 +97,7 @@
     "@phc/format": "^1.0.0",
     "@poppinss/manager": "^5.0.2",
     "@vinejs/vine": "^3.0.0",
+    "argon2": "^0.43.0",
     "axios": "^1.7.9",
     "bcrypt": "^5.1.1",
     "bcryptjs": "^2.4.3",

resources/js/Components/FormCheckRadioGroup.vue

@@ -108,7 +108,9 @@ const inputElClass = computed(() => {
                     d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-6H5v-2h6V5h2v6h6v2h-6v6z" />
             </svg>
         </div>
+        <!-- <FormCheckRadio v-for="(value, key) in options" :key="key" v-model="computedValue" :type="type"
+            :name="name" :input-value="key" :label="value" :class="componentClass" /> -->
              <FormCheckRadio v-for="(value, key) in options" :key="key" v-model="computedValue" :type="type"
-            :name="name" :input-value="Number(key)" :label="value" :class="componentClass" />
+            :name="name" :input-value="isNaN(Number(key)) ? key : Number(key)" :label="value" :class="componentClass" />
     </div>
 </template>

resources/js/Pages/Admin/Mimetype/Create.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ref, reactive } from 'vue';
-import { Head, useForm } from '@inertiajs/vue3';
+import { computed, ComputedRef } from 'vue';
-import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiTrashCan, mdiImageText, mdiPlus } from '@mdi/js';
+import { Head, useForm, usePage } from '@inertiajs/vue3';
+import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiTrashCan, mdiImageText, mdiPlus, mdiAlertBoxOutline } from '@mdi/js';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
@@ -16,6 +17,7 @@ import standardTypes from 'mime/types/standard.js';
 import otherTypes from 'mime/types/other.js';
 import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
 import MimetypeInput from '@/Components/MimetypeInput.vue';
+import NotificationBar from '@/Components/NotificationBar.vue';
 
 defineProps({
     borderless: Boolean,
@@ -23,6 +25,10 @@ defineProps({
     ctrlKFocus: Boolean,
 });
 
+const flash: ComputedRef<any> = computed(() => {
+    return usePage().props.flash;
+});
+
 const customTypes: { [key: string]: string[] } = {
   'application/vnd.opengeospatial.geopackage+sqlite3': ['gpkg'],
   'text/plain': ['txt', 'asc', 'c', 'cc', 'h', 'srt'],
@@ -141,6 +147,13 @@ const isValidForm = (): boolean => {
                 <BaseButton :route-name="stardust.route('settings.mimetype.index')" :icon="mdiArrowLeftBoldOutline"
                     label="Back" color="white" rounded-full small />
             </SectionTitleLineWithButton>
+
+              <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
+                {{ flash.message }}
+            </NotificationBar>
+            <!-- <FormValidationErrors v-bind:errors="errors" /> -->
+
+
             <CardBox form>
                 <MimetypeInput @on-select-result="selectResult" @on-clear-input="clearInput" :transparent="transparent"
                     :borderless="borderless" :mimeTypes="mimeTypes" :isValidMimeType="isValidMimeType" />

resources/js/Pages/Dashboard.vue

@@ -16,8 +16,6 @@ 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 CardBoxClient from '@/Components/CardBoxClient.vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
 // import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
@@ -45,7 +43,12 @@ const chartData = computed(() => mainService.graphData);
 // const clientBarItems = computed(() => mainService.clients.slice(0, 4));
 // const transactionBarItems = computed(() => mainService.history);
 
-const authorBarItems = computed(() => mainService.authors.slice(0, 5));
+mainService.fetchApi('clients');
+mainService.fetchApi('authors');
+mainService.fetchApi('datasets');
+mainService.fetchChartData();
+
+// 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));

resources/js/app.ts

@@ -81,7 +81,7 @@ const layoutService = LayoutService(pinia);
 const localeService = LocaleStore(pinia);
 
 localeService.initializeLocale();
-const mainService = MainService(pinia);
+// const mainService = MainService(pinia);
 // mainService.setUser(user);
 
 /* App style */
@@ -91,12 +91,11 @@ styleService.setStyle(localStorage[styleKey] ?? 'basic');
 if ((!localStorage[darkModeKey] && window.matchMedia('(prefers-color-scheme: dark)').matches) || localStorage[darkModeKey] === '1') {
     styleService.setDarkMode(true);
 }
-// mainService.fetch('clients');
+
-// mainService.fetch('history');
+// mainService.fetchApi('clients');
-mainService.fetchApi('clients');
+// mainService.fetchApi('authors');
-mainService.fetchApi('authors');
+// mainService.fetchApi('datasets');
-mainService.fetchApi('datasets');
+// mainService.fetchChartData();
-mainService.fetchChartData();
 
 /* Collapse mobile aside menu on route change */
 Inertia.on('navigate', () => {

resources/views/app.edge

@@ -7,7 +7,7 @@
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
 
-  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

start/routes/api.ts

@@ -11,8 +11,8 @@ import { middleware } from '../kernel.js';
 // API
 router
     .group(() => {
-        router.get('clients', [UserController, 'getSubmitters']).as('client.index');
+        router.get('clients', [UserController, 'getSubmitters']).as('client.index').use(middleware.auth());;
-        router.get('authors', [AuthorsController, 'index']).as('author.index');
+        router.get('authors', [AuthorsController, 'index']).as('author.index').use(middleware.auth());;
         router.get('datasets', [DatasetController, 'index']).as('dataset.index');
         router.get('persons', [AuthorsController, 'persons']).as('author.persons');
 
@@ -22,7 +22,7 @@ router
         router.get('/years', [HomeController, 'findYears']);
         router.get('/statistic', [HomeController, 'findPublicationsPerMonth']);
 
-        router.get('/download/:id', [FileController, 'findOne']).as('file.findOne');
+        router.get('/file/download/:id', [FileController, 'findOne']).as('file.findOne');
 
         router.get('/avatar/:name/:background?/:textColor?/:size?', [AvatarController, 'generateAvatar']);