hotfix: enhance editor dataset management and UI improvements

- Implemented dataset editing functionality for editor roles, including fetching, updating, and categorizing datasets.
- Added routes and controller actions for editing, updating, and categorizing datasets within the editor interface.
- Integrated UI components for managing dataset metadata, subjects, references, and files.
- Enhanced keyword management with features for adding, editing, and deleting keywords, including handling keywords used by multiple datasets.
- Improved reference management with features for adding, editing, and deleting dataset references.
- Added validation for dataset updates using the `updateEditorDatasetValidator`.
- Updated the dataset edit form to include components for managing titles, descriptions, authors, contributors, licenses, coverage, subjects, references, and files.
- Implemented transaction management for dataset updates to ensure data consistency.
- Added a download route for files associated with datasets.
- Improved the UI for displaying and interacting with datasets in the editor index view, including adding edit and categorize buttons.
- Fixed an issue where the file size was not correctly calculated.
- Added a tooltip to the keyword value column in the TableKeywords component to explain the editability of keywords.
- Added a section to display keywords that are marked for deletion.
- Added a section to display references that are marked for deletion.
- Added a restore button to the references to delete section to restore references.
- Updated the SearchCategoryAutocomplete component to support read-only mode.
- Updated the FormControl component to support read-only mode.
- Added icons and styling improvements to various components.
- Added a default value for subjectsToDelete and referencesToDelete in the dataset model.
- Updated the FooterBar component to use the JustboilLogo component.
- Updated the app.ts file to fetch chart data without a year parameter.
- Updated the Login.vue file to invert the logo in dark mode.
- Updated the AccountInfo.vue file to add a Head component.

resources/js/Components/SearchCategoryAutocomplete.vue

@@ -5,7 +5,7 @@
             <div class="relative" data-te-dropdown-ref>
                 <button id="states-button" data-dropdown-toggle="dropdown-states"
                     class="whitespace-nowrap h-12 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600"
-                    type="button" @click.prevent="showStates">
+                    type="button" :disabled="isReadOnly" @click.prevent="showStates">
                     <!-- <svg aria-hidden="true" class="h-3 mr-2" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <rect x="0.5" width="14" height="12" rx="2" fill="white" />
                 <mask id="mask0_12694_49953" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="12">
@@ -65,7 +65,7 @@
             </svg> -->
                     <!-- eng -->
                     {{ language }}
-                    <svg aria-hidden="true" class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20"
+                    <svg aria-hidden="true" class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20" v-if="!isReadOnly"
                         xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd"
                             d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
@@ -93,7 +93,7 @@
                 <!-- :class="inputElClass" -->
                 <!-- class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-r-lg border-l-gray-50 border-l-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-l-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" -->
                 <input v-model="computedValue" type="text" :name="props.name" autocomplete="off" :class="inputElClass"
-                    placeholder="Search Keywords..." required @input="handleInput" />
+                    placeholder="Search Keywords..." required @input="handleInput" :readonly="isReadOnly" />
                 <!-- v-model="data.search" -->
                 <svg class="w-4 h-4 absolute left-2.5 top-3.5" v-show="computedValue.length < 2"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -101,12 +101,12 @@
                         d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
 
-                <svg class="w-4 h-4 absolute left-2.5 top-3.5" v-show="computedValue.length >= 2"
+                <svg class="w-4 h-4 absolute left-2.5 top-3.5" v-show="computedValue.length >= 2 && !isReadOnly"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" @click="() => {
                         computedValue = '';
                         data.isOpen = false;
                     }
-                        ">
+                    ">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                 </svg>
             </div>
@@ -166,6 +166,10 @@ let props = defineProps({
         type: String,
         default: '',
     },
+    isReadOnly: {
+        type: Boolean,
+        default: false,
+    },
     required: Boolean,
     borderless: Boolean,
     transparent: Boolean,
@@ -190,11 +194,18 @@ const inputElClass = computed(() => {
         'dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500',
         'h-12',
         props.borderless ? 'border-0' : 'border',
-        props.transparent ? 'bg-transparent' : 'bg-white dark:bg-slate-800',
+        props.transparent && 'bg-transparent',
         // props.isReadOnly ? 'bg-gray-50 dark:bg-slate-600' : 'bg-white dark:bg-slate-800',
     ];
     // if (props.icon) {
     base.push('pl-10');
+    if (props.isReadOnly) {
+        // Read-only: no focus ring, grayed-out text and border, and disabled cursor.
+        base.push('bg-gray-50', 'dark:bg-slate-600', 'border', 'border-gray-300', 'dark:border-slate-600', 'text-gray-500', 'cursor-not-allowed', 'focus:outline-none', 'focus:ring-0', 'focus:border-gray-300');
+    } else {
+        // Actionable field: focus ring, white/dark background, and darker border.
+        base.push('bg-white dark:bg-slate-800', 'focus:ring focus:outline-none', 'border', 'border-gray-700');
+    }
     // }
     return base;
 });