feat: Adjust z-index values for map components, enhance ISBN validation message, and add dynamic placeholders for reference inputs, add additional mimetypes

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

@@ -10,7 +10,6 @@ import BaseDivider from '@/Components/BaseDivider.vue';
 import BaseButton from '@/Components/BaseButton.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
-import mime from 'mime';
 import FormField from '@/Components/FormField.vue';
 import FormControl from '@/Components/FormControl.vue';
 import standardTypes from 'mime/types/standard.js';
@@ -24,10 +23,30 @@ defineProps({
     ctrlKFocus: Boolean,
 });
 
+const customTypes: { [key: string]: string[] } = {
+  'application/vnd.opengeospatial.geopackage+sqlite3': ['gpkg'],
+  'text/plain': ['txt', 'asc', 'c', 'cc', 'h', 'srt'],
+};
+
 const isReadOnly: boolean = true;
-const standardMimeTypes = Object.keys(standardTypes);
-const otherMimeTypes = Object.keys(otherTypes);
-const mimeTypes = [...standardMimeTypes, ...otherMimeTypes];
+// const standardMimeTypes = Object.keys(standardTypes);
+// const otherMimeTypes = Object.keys(otherTypes);
+// const customMimeTypes = Object.keys(customTypes);
+const mimeTypesMap = new Map<string, string[]>();
+
+Object.entries(standardTypes).forEach(([mimeType, extensions]) => {
+    mimeTypesMap.set(mimeType, extensions);
+});
+
+Object.entries(otherTypes).forEach(([mimeType, extensions]) => {
+    mimeTypesMap.set(mimeType, extensions);
+});
+
+Object.entries(customTypes).forEach(([mimeType, extensions]) => {
+    mimeTypesMap.set(mimeType, extensions);
+});
+
+const mimeTypes = Array.from(mimeTypesMap.keys());
 
 const file_extensions = reactive<Record<string, string>>({});
 interface FormData {
@@ -44,16 +63,8 @@ const form = useForm<FormData>({
     enabled: true,
 });
 
-
 const mimetypeError = ref<string | null>(null);
 
-// const newExtension = ref<string>('');
-// const addFileExtension = () => {
-//     if (newExtension.value && !file_extensions[newExtension.value]) {
-//         file_extensions[newExtension.value] = newExtension.value;
-//         newExtension.value = '';
-//     }
-// };
 const addAlternateMimetype = () => {
     form.alternate_mimetype.push("");
 };
@@ -68,7 +79,7 @@ function resetFileExtensions() {
 }
 
 const isValidMimeType = (mimeType: string): boolean => {
-    let extensions = mime.getExtension(mimeType)
+    let extensions = mimeTypesMap.get(mimeType) || null;
     return extensions !== null;
 };
 
@@ -87,8 +98,9 @@ const selectResult = (mimeType: string) => {
     // selectedIndex.value = -1;
 
     if (form.name && isValidMimeType(form.name)) {
-        const extensions = mime.getAllExtensions(form.name) as Set<string>;
-        Array.from(extensions).forEach(extension => {
+        // const extensions = mime.getAllExtensions(form.name) as Set<string>;
+        const extensions = mimeTypesMap.get(mimeType);
+        extensions?.forEach(extension => {
             file_extensions[extension] = extension;
         });
     } else {
@@ -96,8 +108,6 @@ const selectResult = (mimeType: string) => {
     }
 };
 
-
-
 const submit = async () => {
     if (isValidForm()) {
         await form.post(stardust.route('settings.mimetype.store'), {
@@ -131,7 +141,7 @@ const isValidForm = (): boolean => {
                 <BaseButton :route-name="stardust.route('settings.mimetype.index')" :icon="mdiArrowLeftBoldOutline"
                     label="Back" color="white" rounded-full small />
             </SectionTitleLineWithButton>
-            <CardBox form @submit.prevent="submit()">
+            <CardBox form>
                 <MimetypeInput @on-select-result="selectResult" @on-clear-input="clearInput" :transparent="transparent"
                     :borderless="borderless" :mimeTypes="mimeTypes" :isValidMimeType="isValidMimeType" />
                 <div v-if="mimetypeError" class="text-red-400 text-sm mt-1">
@@ -162,18 +172,13 @@ const isValidForm = (): boolean => {
                         <BaseButton color="info" @click="addFileExtension" label="Add" />
                     </div> -->
                     <FormCheckRadioGroup v-model="form.file_extension" :options="file_extensions" name="file_extensions"
-                        is-column allow-manual-adding manual-adding-placeholder="Enter file extension manually"/>
-                   
+                        is-column allow-manual-adding manual-adding-placeholder="Enter additional file extension manually" />
+
                 </FormField>
                 <div class="text-red-400 text-sm" v-if="form.errors.file_extension">
                     {{ form.errors.file_extension }}
                 </div>
 
-                <!-- <FormField label="Add File Extension" wrap-body>
-                    <FormControl v-model="newExtension" placeholder="Enter file extension" />
-                    <BaseButton color="info" @click="addFileExtension" label="Add" />
-                </FormField> -->
-
                 <BaseDivider v-if="Object.keys(file_extensions).length > 0" />
 
                 <CardBox v-if="form.name" class="mb-6 shadow" has-table :icon="mdiImageText" title="Alternate Mimetypes"
@@ -190,15 +195,6 @@ const isValidForm = (): boolean => {
                             'application/x-sqlite3'. Therefore, 'application/x-sqlite3' must be added as an alternate
                             mimetype.
                         </p>
-                        <!-- <FormField label="Alias Mimetype" wrap-body>
-                    <FormControl v-model="aliasMimetype" name="alias_mimetype" :error="form.errors.alias_mimetype"
-                        :is-read-only=isReadOnly>
-                        <div class="text-red-400 text-sm" v-if="form.errors.alias_mimetype">
-                            {{ form.errors.alias_mimetype }}
-                        </div>
-                    </FormControl>
-                    <BaseButton color="info" :icon="mdiEarthPlus" small @click.prevent="addAliasMimetype" />
-                </FormField> -->
                     </div>
                     <table class="table-fixed border-green-900" v-if="form.alternate_mimetype.length > 0">
                         <thead>
@@ -234,7 +230,7 @@ const isValidForm = (): boolean => {
                 <template #footer>
                     <BaseButtons>
                         <BaseButton type="submit" color="info" label="Create" :class="{ 'opacity-25': form.processing }"
-                            :disabled="form.processing" />
+                            :disabled="form.processing" @click.prevent="submit()" />
                     </BaseButtons>
                 </template>
             </CardBox>

resources/js/Pages/Submitter/Dataset/Create.vue

@@ -96,6 +96,27 @@ const flash: ComputedRef<any> = computed(() => {
     return usePage().props.flash;
 });
 
+// Computed property to determine the placeholder based on the selected option
+const getPlaceholder = computed(() => (type: string) => {
+    
+    switch (type) {
+            case 'DOI':
+                return 'https://doi.org/10.24341/tethys.236';
+            case 'Handle':
+                return '20.500.12345/67890';
+            case 'ISBN':
+                return '978-3-85316-076-3';
+            case 'ISSN':
+                return '1234-5678';
+            case 'URL':
+                return 'https://example.com';
+            case 'URN':
+                return 'urn:nbn:de:1234-5678';
+            default:
+                return '[VALUE]';
+        }   
+});
+
 const mainService = MainService();
 
 // let serrors = reactive([]);
@@ -1050,7 +1071,7 @@ Removes a selected keyword
                                             <!-- <input name="Reference Value" class="form-control"
                                                 placeholder="[VALUE]" v-model="item.value" /> -->
                                             <FormControl required v-model="item.value" :type="'text'"
-                                                placeholder="[VALUE]" :errors="form.errors.embargo_date">
+                                                :placeholder="getPlaceholder(form.references[index].type)" :errors="form.errors.embargo_date">
                                                 <div class="text-red-400 text-sm"
                                                     v-if="form.errors[`references.${index}.value`] && Array.isArray(form.errors[`references.${index}.value`])">
                                                     {{ form.errors[`references.${index}.value`].join(', ') }}