initial public commit
This commit is contained in:
Gani Georgiev
@@ -0,0 +1,6 @@
|
||||
<script>
|
||||
// svelte-ignore unused-export-let
|
||||
export let key = "";
|
||||
// svelte-ignore unused-export-let
|
||||
export let options = {};
|
||||
</script>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script>
|
||||
import Flatpickr from "svelte-flatpickr";
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let options = {};
|
||||
</script>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field" name="schema.{key}.options.min" let:uniqueId>
|
||||
<label for={uniqueId}>Min date (UTC)</label>
|
||||
<Flatpickr
|
||||
id={uniqueId}
|
||||
options={CommonHelper.defaultFlatpickrOptions()}
|
||||
value={options.min}
|
||||
bind:formattedValue={options.min}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field" name="schema.{key}.options.max" let:uniqueId>
|
||||
<label for={uniqueId}>Max date (UTC)</label>
|
||||
<Flatpickr
|
||||
id={uniqueId}
|
||||
options={CommonHelper.defaultFlatpickrOptions()}
|
||||
value={options.max}
|
||||
bind:formattedValue={options.max}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,53 @@
|
||||
<script>
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import tooltip from "@/actions/tooltip";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
import MultipleValueInput from "@/components/base/MultipleValueInput.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let options = {};
|
||||
</script>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field" name="schema.{key}.options.exceptDomains" let:uniqueId>
|
||||
<label for={uniqueId}>
|
||||
<span class="txt">Except domains</span>
|
||||
<i
|
||||
class="ri-information-line link-hint"
|
||||
use:tooltip={{
|
||||
text: 'Domains that are NOT allowed as value. \n This field is disabled if "Only domains" is set.',
|
||||
position: "top",
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<MultipleValueInput
|
||||
id={uniqueId}
|
||||
disabled={!CommonHelper.isEmpty(options.onlyDomains)}
|
||||
bind:value={options.exceptDomains}
|
||||
/>
|
||||
<div class="help-block">Use comma as separator.</div>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field" name="schema.{key}.options.onlyDomains" let:uniqueId>
|
||||
<label for="{uniqueId}.options.onlyDomains">
|
||||
<span class="txt">Only domains</span>
|
||||
<i
|
||||
class="ri-information-line link-hint"
|
||||
use:tooltip={{
|
||||
text: 'Domains that are ONLY allowed as value. \n This field is disabled if "Except domains" is set.',
|
||||
position: "top",
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<MultipleValueInput
|
||||
id="{uniqueId}.options.onlyDomains"
|
||||
disabled={!CommonHelper.isEmpty(options.exceptDomains)}
|
||||
bind:value={options.onlyDomains}
|
||||
/>
|
||||
<div class="help-block">Use comma as separator.</div>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,75 @@
|
||||
<script>
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import ObjectSelect from "@/components/base/ObjectSelect.svelte";
|
||||
|
||||
export let value = "text";
|
||||
|
||||
let classes = "";
|
||||
export { classes as class }; // export reserved keyword
|
||||
|
||||
const types = [
|
||||
{
|
||||
label: "Text",
|
||||
value: "text",
|
||||
icon: CommonHelper.getFieldTypeIcon("text"),
|
||||
},
|
||||
{
|
||||
label: "Number",
|
||||
value: "number",
|
||||
icon: CommonHelper.getFieldTypeIcon("number"),
|
||||
},
|
||||
{
|
||||
label: "Bool",
|
||||
value: "bool",
|
||||
icon: CommonHelper.getFieldTypeIcon("bool"),
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
value: "email",
|
||||
icon: CommonHelper.getFieldTypeIcon("email"),
|
||||
},
|
||||
{
|
||||
label: "Url",
|
||||
value: "url",
|
||||
icon: CommonHelper.getFieldTypeIcon("url"),
|
||||
},
|
||||
{
|
||||
label: "DateTime",
|
||||
value: "date",
|
||||
icon: CommonHelper.getFieldTypeIcon("date"),
|
||||
},
|
||||
{
|
||||
label: "Multiple choices",
|
||||
value: "select",
|
||||
icon: CommonHelper.getFieldTypeIcon("select"),
|
||||
},
|
||||
{
|
||||
label: "JSON",
|
||||
value: "json",
|
||||
icon: CommonHelper.getFieldTypeIcon("json"),
|
||||
},
|
||||
{
|
||||
label: "File",
|
||||
value: "file",
|
||||
icon: CommonHelper.getFieldTypeIcon("file"),
|
||||
},
|
||||
{
|
||||
label: "Relation",
|
||||
value: "relation",
|
||||
icon: CommonHelper.getFieldTypeIcon("relation"),
|
||||
},
|
||||
{
|
||||
label: "User",
|
||||
value: "user",
|
||||
icon: CommonHelper.getFieldTypeIcon("user"),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<ObjectSelect
|
||||
class="field-type-select {classes}"
|
||||
searchable
|
||||
items={types}
|
||||
bind:keyOfSelected={value}
|
||||
{...$$restProps}
|
||||
/>
|
||||
@@ -0,0 +1,124 @@
|
||||
<script>
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import tooltip from "@/actions/tooltip";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
import Toggler from "@/components/base/Toggler.svelte";
|
||||
import MultipleValueInput from "@/components/base/MultipleValueInput.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let options = {};
|
||||
|
||||
$: if (CommonHelper.isEmpty(options)) {
|
||||
// load defaults
|
||||
options = {
|
||||
maxSelect: 1,
|
||||
maxSize: 5242880,
|
||||
thumbs: [],
|
||||
mimeTypes: [],
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field required" name="schema.{key}.options.maxSize" let:uniqueId>
|
||||
<label for={uniqueId}>Max file size (bytes)</label>
|
||||
<input type="number" id={uniqueId} step="1" min="0" bind:value={options.maxSize} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field required" name="schema.{key}.options.maxSelect" let:uniqueId>
|
||||
<label for={uniqueId}>Max files</label>
|
||||
<input type="number" id={uniqueId} step="1" min="" required bind:value={options.maxSelect} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<i
|
||||
class="ri-information-line link-hint"
|
||||
use:tooltip={{
|
||||
text: "Allow uploading files ONLY with the listed mime types. \n Leave empty for no restriction.",
|
||||
position: "top",
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<MultipleValueInput
|
||||
id={uniqueId}
|
||||
placeholder="eg. image/png, application/pdf..."
|
||||
bind:value={options.mimeTypes}
|
||||
/>
|
||||
<div class="help-block">
|
||||
Use comma as separator.
|
||||
<span class="inline-flex">
|
||||
<span class="txt link-primary">Choose presets</span>
|
||||
<Toggler class="dropdown dropdown-sm dropdown-nowrap">
|
||||
<div
|
||||
tabindex="0"
|
||||
class="dropdown-item closable"
|
||||
on:click={() => {
|
||||
options.mimeTypes = [
|
||||
"image/jpg",
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"image/svg+xml",
|
||||
"image/gif",
|
||||
];
|
||||
}}
|
||||
>
|
||||
<span class="txt">Images (jpg, png, svg, gif)</span>
|
||||
</div>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="dropdown-item closable"
|
||||
on:click={() => {
|
||||
options.mimeTypes = [
|
||||
"application/pdf",
|
||||
"application/msword",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
"application/vnd.ms-excel",
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
];
|
||||
}}
|
||||
>
|
||||
<span class="txt">Documents (pdf, doc/docx, xls/xlsx)</span>
|
||||
</div>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="dropdown-item closable"
|
||||
on:click={() => {
|
||||
options.mimeTypes = [
|
||||
"application/zip",
|
||||
"application/x-7z-compressed",
|
||||
"application/x-rar-compressed",
|
||||
];
|
||||
}}
|
||||
>
|
||||
<span class="txt">Archives (zip, 7zip, rar)</span>
|
||||
</div>
|
||||
</Toggler>
|
||||
</span>
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<Field class="form-field" name="schema.{key}.options.thumbs" let:uniqueId>
|
||||
<label for={uniqueId}>
|
||||
<span class="txt">Thumb sizes</span>
|
||||
<i
|
||||
class="ri-information-line link-hint"
|
||||
use:tooltip={{
|
||||
text: "List of thumb sizes for image files. The thumbs will be generated lazily on first access.",
|
||||
position: "top",
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<MultipleValueInput id={uniqueId} placeholder="eg. 50x50, 480x720" bind:value={options.thumbs} />
|
||||
<div class="help-block">Use comma as separator.</div>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<script>
|
||||
// svelte-ignore unused-export-let
|
||||
export const key = "";
|
||||
// svelte-ignore unused-export-let
|
||||
export const options = {};
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let options = {};
|
||||
</script>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field" name="schema.{key}.options.min" let:uniqueId>
|
||||
<label for={uniqueId}>Min</label>
|
||||
<input type="number" id={uniqueId} bind:value={options.min} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field" name="schema.{key}.options.max" let:uniqueId>
|
||||
<label for={uniqueId}>Max</label>
|
||||
<input type="number" id={uniqueId} min={options.min} bind:value={options.max} />
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script>
|
||||
import ApiClient from "@/utils/ApiClient";
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
import ObjectSelect from "@/components/base/ObjectSelect.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let options = {};
|
||||
|
||||
const defaultOptions = [
|
||||
{ label: "False", value: false },
|
||||
{ label: "True", value: true },
|
||||
];
|
||||
|
||||
let isLoading = false;
|
||||
let collections = [];
|
||||
|
||||
// load defaults
|
||||
$: if (CommonHelper.isEmpty(options)) {
|
||||
options = {
|
||||
maxSelect: 1,
|
||||
collectionId: null,
|
||||
cascadeDelete: false,
|
||||
};
|
||||
}
|
||||
|
||||
loadCollections();
|
||||
|
||||
function loadCollections() {
|
||||
isLoading = true;
|
||||
|
||||
ApiClient.Collections.getFullList(200, { sort: "-created" })
|
||||
.then((items) => {
|
||||
collections = items;
|
||||
})
|
||||
.catch((err) => {
|
||||
ApiClient.errorResponseHandler(err);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-sm-9">
|
||||
<Field class="form-field required" name="schema.{key}.options.collectionId" let:uniqueId>
|
||||
<label for={uniqueId}>Collection</label>
|
||||
<ObjectSelect
|
||||
searchable={collections.length > 5}
|
||||
selectPlaceholder={isLoading ? "Loading..." : "Select collection"}
|
||||
noOptionsText="No collections found"
|
||||
selectionKey="id"
|
||||
items={collections}
|
||||
bind:keyOfSelected={options.collectionId}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<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-12">
|
||||
<Field class="form-field" name="schema.{key}.options.cascadeDelete" let:uniqueId>
|
||||
<label for={uniqueId}>Delete record on relation delete</label>
|
||||
<ObjectSelect id={uniqueId} items={defaultOptions} bind:keyOfSelected={options.cascadeDelete} />
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script>
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
import MultipleValueInput from "@/components/base/MultipleValueInput.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let options = {};
|
||||
|
||||
$: if (CommonHelper.isEmpty(options)) {
|
||||
// load defaults
|
||||
options = {
|
||||
maxSelect: 1,
|
||||
values: [],
|
||||
};
|
||||
}
|
||||
|
||||
// leave the validation to the api
|
||||
// $: if (!CommonHelper.isEmpty(options.values) && options.maxSelect > options.values.length) {
|
||||
// options.maxSelect = options.values.length;
|
||||
// }
|
||||
</script>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-sm-9">
|
||||
<Field class="form-field required" name="schema.{key}.options.values" let:uniqueId>
|
||||
<label for={uniqueId}>Choices</label>
|
||||
<MultipleValueInput
|
||||
id={uniqueId}
|
||||
placeholder="eg. optionA, optionB"
|
||||
required
|
||||
bind:value={options.values}
|
||||
/>
|
||||
<div class="help-block">Use comma as separator.</div>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<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>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script>
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let options = {};
|
||||
</script>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field" name="schema.{key}.options.min" let:uniqueId>
|
||||
<label for={uniqueId}>Min length</label>
|
||||
<input type="number" id={uniqueId} step="1" min="0" bind:value={options.min} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<Field class="form-field" name="schema.{key}.options.max" let:uniqueId>
|
||||
<label for={uniqueId}>Max length</label>
|
||||
<input type="number" id={uniqueId} step="1" min={options.min || 0} bind:value={options.max} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<Field class="form-field" name="schema.{key}.options.pattern" let:uniqueId>
|
||||
<label for={uniqueId}>Regex pattern</label>
|
||||
<input type="text" id={uniqueId} bind:value={options.pattern} />
|
||||
<div class="help-block">Valid Go regular expression, eg. <code>^\w+$</code>.</div>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import EmailOptions from "./EmailOptions.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let options = {};
|
||||
</script>
|
||||
|
||||
<!-- shares the same options with the email field -->
|
||||
<EmailOptions bind:key bind:options />
|
||||
@@ -0,0 +1,36 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user