feat: readonly form

undb-io · Aug 24, 2024 · 2d42b34 · 2d42b34
1 parent 2296860
commit 2d42b34
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 11 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/forms/form-display.svelte b/apps/frontend/src/lib/components/blocks/forms/form-display.svelte
@@ -13,7 +13,6 @@
   import { queryParam } from "sveltekit-search-params"
   import { Input } from "$lib/components/ui/input"
   import { Label } from "$lib/components/ui/label"
-  import ScrollArea from "$lib/components/ui/scroll-area/scroll-area.svelte"
   import autoAnimate from "@formkit/auto-animate"
   import Button from "$lib/components/ui/button/button.svelte"
   import { PlusIcon, GripVerticalIcon } from "lucide-svelte"
@@ -22,6 +21,8 @@
   import { getFormBgColor } from "./form-bg-color"
   import { invalidate } from "$app/navigation"
 
+  export let readonly = false
+
   const selectedFieldId = queryParam("formField")
 
   const table = getTable()
@@ -84,23 +85,31 @@
       <input
         class="block w-full text-4xl font-extrabold tracking-tight"
         bind:value={form.name}
+        {readonly}
         on:change={() => {
           setForm()
           isEditingFormName = false
         }}
       />
     {:else}
-      <h2 class="text-4xl font-extrabold tracking-tight" on:click={() => (isEditingFormName = true)}>
+      <h2
+        class="text-4xl font-extrabold tracking-tight"
+        on:click={() => {
+          if (!readonly) {
+            isEditingFormName = true
+          }
+        }}
+      >
         {form.name}
       </h2>
     {/if}
 
     {#if form.description || isAddingDescription}
       <div class="my-2">
         <Label>Description</Label>
-        <Input class="text-sm" bind:value={form.description} on:change={setForm}></Input>
+        <Input {readonly} class="text-sm" bind:value={form.description} on:change={setForm}></Input>
       </div>
-    {:else}
+    {:else if !readonly}
       <Button variant="link" size="sm" class="-mx-4" on:click={addDescription}>
         <PlusIcon class="mr-2 h-4 w-4" />
         Add description
@@ -111,6 +120,7 @@
       <SortableList
         class="space-y-2 pb-2"
         handle=".handler"
+        disabled={readonly}
         animation={200}
         onEnd={(event) => {
           if (isNumber(event.oldIndex) && isNumber(event.newIndex)) {
@@ -123,7 +133,13 @@
           {#if field}
             {@const isSelected = $selectedFieldId === field.id.value}
             <label class={cn("block")} data-field-id={formField.fieldId}>
-              <input type="radio" class="hidden" bind:group={$selectedFieldId} value={field.id.value} />
+              <input
+                disabled={readonly}
+                type="radio"
+                class="hidden"
+                bind:group={$selectedFieldId}
+                value={field.id.value}
+              />
               <Collapsible.Root
                 open={isSelected}
                 onOpenChange={(open) => {
@@ -137,7 +153,7 @@
                 )}
               >
                 {#if isSelected}
-                  <button type="button" class="handler bg-primary absolute -left-2 top-2 rounded-sm py-2">
+                  <button disabled={readonly} type="button" class="handler bg-primary absolute -left-2 top-2 rounded-sm py-2">
                     <GripVerticalIcon class="h-4 w-4 text-white" />
                   </button>
                 {/if}
@@ -167,6 +183,7 @@
                   </div>
                   <FieldControl
                     {field}
+                    {readonly}
                     tableId={$table.id.value}
                     bind:value={formField.defaultValue}
                     class="bg-background"

diff --git a/apps/frontend/src/lib/components/blocks/forms/form-readonly.svelte b/apps/frontend/src/lib/components/blocks/forms/form-readonly.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { getTable } from "$lib/store/table.store"
+  import { formId } from "$lib/store/tab.store"
+  import FormDisplay from "$lib/components/blocks/forms/form-display.svelte"
+
+  const table = getTable()
+
+  $: form = $formId ? $table.forms?.getFormById($formId) : $table.forms?.forms[0]
+</script>
+
+{#if form}
+  <FormDisplay readonly {form} />
+{/if}
diff --git a/apps/frontend/src/lib/components/blocks/forms/forms-readonly.svelte b/apps/frontend/src/lib/components/blocks/forms/forms-readonly.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { getTable } from "$lib/store/table.store"
+  import * as Resizable from "$lib/components/ui/resizable"
+  import { formId } from "$lib/store/tab.store"
+  import FormReadonly from "./form-readonly.svelte"
+  import { cn } from "$lib/utils"
+  import { ClipboardTypeIcon } from "lucide-svelte"
+  export let table = getTable()
+
+  $: forms = $table.forms?.forms ?? []
+</script>
+
+<main class="h-full w-full">
+  <Resizable.PaneGroup direction="horizontal">
+    <Resizable.Pane defaultSize={25} maxSize={30} minSize={20}>
+      <ul class="h-full w-full space-y-3 px-2 py-4">
+        {#each forms as form}
+          {@const active = $formId === form.id || (!$formId && form.id === forms[0].id)}
+          <button
+            on:click={() => ($formId = form.id)}
+            class={cn(
+              "flex w-full items-center rounded-md border px-4 py-2  shadow-sm ring-offset-current transition-all duration-300 ease-out",
+              active && "ring-primary font-semibold shadow-inner ring-1 ring-offset-1",
+            )}
+          >
+            <ClipboardTypeIcon class="mr-2 h-4 w-4" />
+            {form.name}
+          </button>
+        {/each}
+      </ul>
+    </Resizable.Pane>
+    <Resizable.Handle />
+    <Resizable.Pane defaultSize={75}>
+      <FormReadonly />
+    </Resizable.Pane>
+  </Resizable.PaneGroup>
+</main>
diff --git a/apps/frontend/src/lib/components/blocks/forms/forms.svelte b/apps/frontend/src/lib/components/blocks/forms/forms.svelte
@@ -2,13 +2,19 @@
   import { getTable } from "$lib/store/table.store"
   import EmptyForms from "./empty-forms.svelte"
   import FormEditor from "./form-editor.svelte"
+  import FormsReadonly from "./forms-readonly.svelte"
+  import { hasPermission } from "$lib/store/space-member.store"
 
   const table = getTable()
   $: forms = $table.forms
+
+  export let readonly = false
 </script>
 
 {#if !forms?.value.length}
   <EmptyForms />
+{:else if readonly || !$hasPermission("form:update")}
+  <FormsReadonly />
 {:else}
   <FormEditor />
 {/if}
diff --git a/apps/frontend/src/lib/store/tab.store.ts b/apps/frontend/src/lib/store/tab.store.ts
@@ -3,6 +3,7 @@ import { queryParam, ssp } from "sveltekit-search-params"
 
 export const tab = queryParam("tab", ssp.string())
 
+export const isDataTab = derived(tab, ($tab) => $tab === "data" || !$tab)
 export const isFormTab = derived(tab, ($tab) => $tab === "form")
 export const isAuthTab = derived(tab, ($tab) => $tab === "auth")
 export const isDeveloperTab = derived(tab, ($tab) => $tab === "developer")

diff --git a/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/[[viewId]]/+page.svelte b/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/[[viewId]]/+page.svelte
@@ -7,9 +7,8 @@
   import TableHeader from "$lib/components/blocks/table-header/table-header.svelte"
   import Forms from "$lib/components/blocks/forms/forms.svelte"
   import Auth from "$lib/components/blocks/auth/auth.svelte"
-  import RecordDetailSheet from "$lib/components/blocks/record-detail/record-detail-sheet.svelte"
   import Developer from "$lib/components/blocks/developer/developer.svelte"
-  import { tab } from "$lib/store/tab.store"
+  import { isFormTab, isAuthTab, isDataTab } from "$lib/store/tab.store"
   import { CREATE_RECORD_MODAL, toggleModal } from "$lib/store/modal.store"
   import UpdateViewDialog from "$lib/components/blocks/view/update-view-dialog.svelte"
   import DuplicateViewDialog from "$lib/components/blocks/view/duplicate-view-dialog.svelte"
@@ -36,11 +35,11 @@
 
 {#key $table.id.value}
   <main class="h-full flex-1 overflow-auto">
-    {#if !$tab || $tab === "data"}
+    {#if $isDataTab}
       <GridView {viewId} />
-    {:else if $tab === "form"}
+    {:else if $isFormTab}
       <Forms />
-    {:else if $tab === "auth"}
+    {:else if $isAuthTab}
       <Auth />
     {:else}
       <Developer />

diff --git a/packages/authz/src/space-member/space-action.ts b/packages/authz/src/space-member/space-action.ts
@@ -18,6 +18,12 @@ export const spaceActions = z.enum([
   "table:list",
   "table:delete",
 
+  "form:create",
+  "form:update",
+  "form:list",
+  "form:delete",
+  "form:read",
+
   "field:create",
   "field:update",
   "field:delete",

diff --git a/packages/authz/src/space-member/space-permission.ts b/packages/authz/src/space-member/space-permission.ts
@@ -20,6 +20,12 @@ export const spacePermission: Record<ISpaceMemberRole, Record<ISpaceAction, bool
     "table:delete": true,
     "table:read": true,
 
+    "form:create": true,
+    "form:update": true,
+    "form:list": true,
+    "form:delete": true,
+    "form:read": true,
+
     "field:create": true,
     "field:update": true,
     "field:delete": true,
@@ -64,6 +70,12 @@ export const spacePermission: Record<ISpaceMemberRole, Record<ISpaceAction, bool
     "table:delete": true,
     "table:read": true,
 
+    "form:create": true,
+    "form:update": true,
+    "form:list": true,
+    "form:delete": true,
+    "form:read": true,
+
     "field:create": true,
     "field:update": true,
     "field:delete": true,
@@ -102,6 +114,12 @@ export const spacePermission: Record<ISpaceMemberRole, Record<ISpaceAction, bool
     "base:read": true,
     "base:update": true,
 
+    "form:create": true,
+    "form:update": true,
+    "form:list": true,
+    "form:delete": true,
+    "form:read": true,
+
     "table:create": true,
     "table:update": true,
     "table:list": true,
@@ -152,6 +170,12 @@ export const spacePermission: Record<ISpaceMemberRole, Record<ISpaceAction, bool
     "table:delete": false,
     "table:read": true,
 
+    "form:create": false,
+    "form:update": false,
+    "form:list": true,
+    "form:delete": false,
+    "form:read": true,
+
     "field:create": false,
     "field:update": false,
     "field:delete": false,

diff --git a/packages/table/src/modules/forms/forms.vo.ts b/packages/table/src/modules/forms/forms.vo.ts
@@ -13,6 +13,10 @@ export class FormsVO extends ValueObject<FormVO[]> {
     yield* this.props
   }
 
+  get forms() {
+    return this.props
+  }
+
   $setForm(dto: IFormDTO): WithFormSpecification {
     const previous = this.props.find((form) => form.id === dto.id)?.toJSON()
     return new WithFormSpecification(previous, FormVO.fromJSON(dto))