added predefined mime types list and other minor ui improvements

ui/src/components/collections/FieldAccordion.svelte

@@ -20,7 +20,6 @@
     import JsonOptions from "@/components/collections/schema/JsonOptions.svelte";
     import FileOptions from "@/components/collections/schema/FileOptions.svelte";
     import RelationOptions from "@/components/collections/schema/RelationOptions.svelte";
-    import UserOptions from "@/components/collections/schema/UserOptions.svelte";
 
     const dispatch = createEventDispatcher();
 
@@ -275,8 +274,6 @@
                     <FileOptions {key} bind:options={field.options} />
                 {:else if field.type === "relation"}
                     <RelationOptions {key} bind:options={field.options} />
-                {:else if field.type === "user"}
-                    <UserOptions {key} bind:options={field.options} />
                 {/if}
             </div>
 

ui/src/components/collections/schema/FileOptions.svelte

@@ -3,11 +3,16 @@
     import tooltip from "@/actions/tooltip";
     import Field from "@/components/base/Field.svelte";
     import Toggler from "@/components/base/Toggler.svelte";
+    import ObjectSelect from "@/components/base/ObjectSelect.svelte";
+    import MimeTypeSelectOption from "@/components/base/MimeTypeSelectOption.svelte";
     import MultipleValueInput from "@/components/base/MultipleValueInput.svelte";
+    import baseMimeTypesList from "@/mimes.js";
 
     export let key = "";
     export let options = {};
 
+    let mimeTypesList = baseMimeTypesList.slice();
+
     $: if (CommonHelper.isEmpty(options)) {
         // load defaults
         options = {
@@ -16,6 +21,30 @@
             thumbs: [],
             mimeTypes: [],
         };
+    } else {
+        appendMissingMimeTypes();
+    }
+
+    // append any previously set custom mime types to the predefined
+    // list for backward compatibility
+    function appendMissingMimeTypes() {
+        if (CommonHelper.isEmpty(options.mimeTypes)) {
+            return;
+        }
+
+        const missing = [];
+
+        for (const v of options.mimeTypes) {
+            if (!!mimeTypesList.find((item) => item.mimeType === v)) {
+                continue; // exist
+            }
+
+            missing.push({ mimeType: v });
+        }
+
+        if (missing.length) {
+            mimeTypesList = mimeTypesList.concat(missing);
+        }
     }
 </script>
 
@@ -37,7 +66,7 @@
     <div class="col-sm-12">
         <Field class="form-field" name="schema.{key}.options.mimeTypes" let:uniqueId>
             <label for={uniqueId}>
-                <span class="txt">Mime types</span>
+                <span class="txt">Allowed mime types</span>
                 <i
                     class="ri-information-line link-hint"
                     use:tooltip={{
@@ -46,23 +75,28 @@
                     }}
                 />
             </label>
-            <MultipleValueInput
+            <ObjectSelect
                 id={uniqueId}
-                placeholder="eg. image/png, application/pdf..."
-                bind:value={options.mimeTypes}
+                multiple
+                searchable
+                closable={false}
+                selectionKey="mimeType"
+                selectPlaceholder="No restriction"
+                items={mimeTypesList}
+                labelComponent={MimeTypeSelectOption}
+                optionComponent={MimeTypeSelectOption}
+                bind:keyOfSelected={options.mimeTypes}
             />
             <div class="help-block">
-                <span class="txt">Use comma as separator.</span>
                 <button type="button" class="inline-flex flex-gap-0">
                     <span class="txt link-primary">Choose presets</span>
                     <i class="ri-arrow-drop-down-fill" />
-                    <Toggler class="dropdown dropdown-sm dropdown-nowrap">
+                    <Toggler class="dropdown dropdown-sm dropdown-nowrap dropdown-left">
                         <button
                             type="button"
                             class="dropdown-item closable"
                             on:click={() => {
                                 options.mimeTypes = [
-                                    "image/jpg",
                                     "image/jpeg",
                                     "image/png",
                                     "image/svg+xml",
@@ -115,15 +149,6 @@
                         >
                             <span class="txt">Archives (zip, 7zip, rar)</span>
                         </button>
-                        <a
-                            href="https://github.com/gabriel-vasile/mimetype/blob/master/supported_mimes.md"
-                            class="btn btn-sm btn-hint closable"
-                            target="_blank"
-                            rel="noreferrer noopener"
-                            on:click|stopPropagation
-                        >
-                            List with all supported mimetypes
-                        </a>
                     </Toggler>
                 </button>
             </div>

ui/src/components/collections/schema/UserOptions.svelte

@@ -1,36 +0,0 @@
-<script>
-    import CommonHelper from "@/utils/CommonHelper";
-    import Field from "@/components/base/Field.svelte";
-    import ObjectSelect from "@/components/base/ObjectSelect.svelte";
-
-    const defaultOptions = [
-        { label: "False", value: false },
-        { label: "True", value: true },
-    ];
-
-    export let key = "";
-    export let options = {};
-
-    // load defaults
-    $: if (CommonHelper.isEmpty(options)) {
-        options = {
-            maxSelect: 1,
-            cascadeDelete: false,
-        };
-    }
-</script>
-
-<div class="grid">
-    <div class="col-sm-6">
-        <Field class="form-field required" name="schema.{key}.options.maxSelect" let:uniqueId>
-            <label for={uniqueId}>Max select</label>
-            <input type="number" id={uniqueId} step="1" min="1" required bind:value={options.maxSelect} />
-        </Field>
-    </div>
-    <div class="col-sm-6">
-        <Field class="form-field" name="schema.{key}.options.cascadeDelete" let:uniqueId>
-            <label for={uniqueId}>Delete record on user delete</label>
-            <ObjectSelect id={uniqueId} items={defaultOptions} bind:keyOfSelected={options.cascadeDelete} />
-        </Field>
-    </div>
-</div>