init

2023-10-02 23:10:49 +03:00
commit c6cb488379
255 changed files with 18731 additions and 0 deletions
@@ -0,0 +1,133 @@
+<script>
+    import Icon from "../../common/Icon.svelte";
+    import {createEventDispatcher} from "svelte";
+
+    const dispatch = createEventDispatcher();
+    export let schema;
+    export let sort;
+    export let inModal;
+    export let modalUrl;
+    export let systemFields = [];
+
+    $: activeField = [...schema.fields, ...systemFields].find(
+        (f) => f.name === sort || "-" + f.name === sort || "data." + f.name === sort || "-data." + f.name === sort
+    );
+
+    $: sortableFields = schema.fields.filter(
+        (f) => !["reference", "file", "json", "id", "tab"].includes(f.ui)
+    );
+    $: systemFieldsFiltered = systemFields;
+    $: if (schema.type === "collection") {
+        systemFieldsFiltered = systemFields.filter((f) => f.files === false);
+    }
+
+    function sortField(fieldSort) {
+        const url = new URL(modalUrl ?? window.location.href);
+        url.searchParams.set("sort", fieldSort);
+        if (inModal) {
+            dispatch("refresh", url);
+        } else {
+            window.location = url;
+        }
+    }
+
+    function sortAsc(e, field) {
+        e.preventDefault();
+        let prefix = systemFields.includes(el => el.name === field.name) ? "" : "data.";
+        return sortField(prefix + field.name);
+    }
+
+    function sortDesc(e, field) {
+        e.preventDefault();
+        let prefix = systemFields.includes(el => el.name === field.name) ? "" : "data.";
+        return sortField("-" + prefix + field.name);
+    }
+</script>
+
+<div class=" ">
+    <button
+        class="btn btn-sm btn-outline-primary dropdown-toggle d-flex align-items-center"
+        type="button"
+        data-bs-toggle="dropdown"
+        data-bs-auto-close="outside"
+        aria-expanded="false"
+    >
+        {#if sort.startsWith("-")}
+            <Icon icon="arrow-down-wide-short"/>
+        {:else}
+            <Icon icon="arrow-up-short-wide"/>
+        {/if}
+        <span class="ms-1">{activeField.label}</span>
+    </button>
+    <div class="dropdown-menu" style="width:auto;max-width:800px;">
+        <div class="row">
+            {#each sortableFields as field}
+                <div class="col-4 px-3 py-1 d-flex align-items-center">
+                    <div class="btn-group w-100">
+                        <button
+                            on:click={(e) => sortAsc(e, field)}
+                            title="Sort Ascending"
+                            class="btn btn-sm {field.name == sort
+                                ? 'btn-primary'
+                                : 'btn-outline-primary'} "
+                        >
+                            <Icon icon="arrow-up-short-wide"/>
+                        </button>
+                        <button
+                            on:click={(e) => sortDesc(e, field)}
+                            title="Sort Descending"
+                            class="btn btn-sm {'-' + field.name == sort
+                                ? 'btn-primary'
+                                : 'btn-outline-primary'} "
+                        >
+                            <Icon icon="arrow-down-wide-short"/>
+                        </button>
+                        <button
+                            title="Sort Ascending"
+                            on:click={(e) => sortAsc(e, field)}
+                            class="btn btn-sm btn-outline-primary w-100 text-nowrap"
+                            style="overflow: hidden;"
+                        >
+                            {field.label}
+                        </button>
+                    </div>
+                </div>
+            {/each}
+        </div>
+        <h6 class="dropdown-header px-0">System</h6>
+        <div class="row">
+            {#each systemFieldsFiltered as field}
+                <div class="col-4 px-3 py-1 d-flex align-items-center">
+                    <div class="btn-group w-100">
+                        <button
+                            on:click={(e) => sortAsc(e, field)}
+                            title="Sort Ascending"
+                            class="btn btn-sm {field.name == sort
+                                ? 'btn-primary'
+                                : 'btn-outline-primary'} "
+                        >
+                            <Icon icon="arrow-up-short-wide"/>
+                        </button>
+                        <button
+                            on:click={(e) => sortDesc(e, field)}
+                            title="Sort Descending"
+                            class="btn btn-sm {'-' + field.name == sort
+                                ? 'btn-primary'
+                                : 'btn-outline-primary'} "
+                        >
+                            <Icon icon="arrow-down-wide-short"/>
+                        </button>
+                        <button
+                            title="Sort Ascending"
+                            on:click={(e) => sortAsc(e, field)}
+                            class="btn btn-sm btn-outline-primary w-100 text-nowrap"
+                            style="overflow: hidden;"
+                        >
+                            {field.label}
+                        </button>
+                    </div>
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>