initial v0.8 pre-release
This commit is contained in:
Gani Georgiev
@@ -1,52 +1,18 @@
|
||||
<script>
|
||||
import { onMount, tick } from "svelte";
|
||||
import { slide } from "svelte/transition";
|
||||
import { Collection } from "pocketbase";
|
||||
import tooltip from "@/actions/tooltip";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
import RuleField from "@/components/collections/RuleField.svelte";
|
||||
|
||||
export let collection = new Collection();
|
||||
|
||||
let tempValues = {};
|
||||
let showFiltersInfo = false;
|
||||
let editorRefs = {};
|
||||
let ruleInputComponent;
|
||||
let isRuleComponentLoading = false;
|
||||
|
||||
// all supported collection rules in "collection_rule_prop: label" format
|
||||
const ruleProps = {
|
||||
listRule: "List Action",
|
||||
viewRule: "View Action",
|
||||
createRule: "Create Action",
|
||||
updateRule: "Update Action",
|
||||
deleteRule: "Delete Action",
|
||||
};
|
||||
|
||||
function isAdminOnly(propVal) {
|
||||
return propVal === null;
|
||||
}
|
||||
|
||||
async function loadEditorComponent() {
|
||||
isRuleComponentLoading = true;
|
||||
try {
|
||||
ruleInputComponent = (await import("@/components/base/FilterAutocompleteInput.svelte")).default;
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
ruleInputComponent = null;
|
||||
}
|
||||
isRuleComponentLoading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadEditorComponent();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="block m-b-base">
|
||||
<div class="flex">
|
||||
<div class="flex txt-sm m-b-5">
|
||||
<p>
|
||||
All rules follow the
|
||||
<a href={import.meta.env.PB_RULES_SYNTAX_DOCS} target="_blank" rel="noopener">
|
||||
<a href={import.meta.env.PB_RULES_SYNTAX_DOCS} target="_blank" rel="noopener noreferrer">
|
||||
PocketBase filter syntax and operators
|
||||
</a>.
|
||||
</p>
|
||||
@@ -85,7 +51,7 @@
|
||||
<code>@request.method</code>
|
||||
<code>@request.query.*</code>
|
||||
<code>@request.data.*</code>
|
||||
<code>@request.user.*</code>
|
||||
<code>@request.auth.*</code>
|
||||
</div>
|
||||
|
||||
<hr class="m-t-10 m-b-5" />
|
||||
@@ -104,7 +70,7 @@
|
||||
<p>
|
||||
Example rule:
|
||||
<br />
|
||||
<code>@request.user.id!="" && created>"2022-01-01 00:00:00"</code>
|
||||
<code>@request.auth.id != "" && created > "2022-01-01 00:00:00"</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,78 +78,37 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if isRuleComponentLoading}
|
||||
<div class="txt-center">
|
||||
<span class="loader" />
|
||||
</div>
|
||||
{:else}
|
||||
{#each Object.entries(ruleProps) as [prop, label] (prop)}
|
||||
<hr class="m-t-sm m-b-sm" />
|
||||
<div class="rule-block">
|
||||
{#if isAdminOnly(collection[prop])}
|
||||
<button
|
||||
type="button"
|
||||
class="rule-toggle-btn btn btn-circle btn-outline btn-success"
|
||||
use:tooltip={"Unlock and set custom rule"}
|
||||
on:click={async () => {
|
||||
collection[prop] = tempValues[prop] || "";
|
||||
await tick();
|
||||
editorRefs[prop]?.focus();
|
||||
}}
|
||||
>
|
||||
<i class="ri-lock-unlock-line" />
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="rule-toggle-btn btn btn-circle btn-outline"
|
||||
use:tooltip={"Lock and set to Admins only"}
|
||||
on:click={() => {
|
||||
tempValues[prop] = collection[prop];
|
||||
collection[prop] = null;
|
||||
}}
|
||||
>
|
||||
<i class="ri-lock-line" />
|
||||
</button>
|
||||
{/if}
|
||||
<RuleField label="List/Search action" formKey="listRule" {collection} bind:rule={collection.listRule} />
|
||||
|
||||
<Field
|
||||
class="form-field rule-field m-0 {isAdminOnly(collection[prop]) ? 'disabled' : ''}"
|
||||
name={prop}
|
||||
let:uniqueId
|
||||
>
|
||||
<label for={uniqueId}>
|
||||
{label} - {isAdminOnly(collection[prop]) ? "Admins only" : "Custom rule"}
|
||||
</label>
|
||||
<hr class="m-t-sm m-b-sm" />
|
||||
<RuleField label="View action" formKey="viewRule" {collection} bind:rule={collection.viewRule} />
|
||||
|
||||
<svelte:component
|
||||
this={ruleInputComponent}
|
||||
id={uniqueId}
|
||||
bind:this={editorRefs[prop]}
|
||||
bind:value={collection[prop]}
|
||||
baseCollection={collection}
|
||||
disabled={isAdminOnly(collection[prop])}
|
||||
/>
|
||||
<hr class="m-t-sm m-b-sm" />
|
||||
<RuleField label="Create action" formKey="createRule" {collection} bind:rule={collection.createRule} />
|
||||
|
||||
<div class="help-block">
|
||||
{#if isAdminOnly(collection[prop])}
|
||||
Only admins will be able to access (unlock to change)
|
||||
{:else}
|
||||
Leave empty to grant everyone access
|
||||
{/if}
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
{/each}
|
||||
<hr class="m-t-sm m-b-sm" />
|
||||
<RuleField label="Update action" formKey="updateRule" {collection} bind:rule={collection.updateRule} />
|
||||
|
||||
<hr class="m-t-sm m-b-sm" />
|
||||
<RuleField label="Delete action" formKey="deleteRule" {collection} bind:rule={collection.deleteRule} />
|
||||
|
||||
{#if collection?.isAuth}
|
||||
<hr class="m-t-sm m-b-sm" />
|
||||
<RuleField
|
||||
label="Manage action"
|
||||
formKey="options.manageRule"
|
||||
{collection}
|
||||
bind:rule={collection.options.manageRule}
|
||||
>
|
||||
<svelte:fragment>
|
||||
<p>
|
||||
This API rule gives admin-like permissions to allow fully managing the auth record(s), eg.
|
||||
changing the password without requiring to enter the old one, directly updating the verified
|
||||
state or email, etc.
|
||||
</p>
|
||||
<p>
|
||||
This rule is executed in addition to the <code>create</code> and <code>update</code> API rules.
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
</RuleField>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.rule-block {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--xsSpacing);
|
||||
}
|
||||
.rule-toggle-btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user