CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-30 00:57:16 +13:00
Code Issues Projects Releases Wiki Activity

Update all table popovers to be modals and fix edit roles modal

Browse source
This commit is contained in:
Andrew Kingston 2021-04-26 15:57:17 +01:00
parent 422707c18a
commit a93a7f8f99
8 changed files with 93 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
View file

@ -1,16 +1,13 @@
<script>
import { Popover, Button } from "@budibase/bbui"
import CreateViewPopover from "../popovers/CreateViewPopover.svelte"
import { Modal, Button } from "@budibase/bbui"
import CreateViewModal from "../modals/CreateViewModal.svelte"
let anchor
let dropdown
let modal
</script>
<div bind:this={anchor}>
<Button icon="CollectionAdd" primary size="S" quiet on:click={dropdown.show}>
Create New View
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<CreateViewPopover onClosed={dropdown.hide} />
</Popover>
<Button icon="CollectionAdd" primary size="S" quiet on:click={modal.show}>
Create New View
</Button>
<Modal bind:this={modal}>
<CreateViewModal />
</Modal>

21
packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
View file

@ -1,18 +1,15 @@
<script>
import { Button, Icon, Popover } from "@budibase/bbui"
import ExportPopover from "../popovers/ExportPopover.svelte"
import { Button, Modal } from "@budibase/bbui"
import ExportModal from "../modals/ExportModal.svelte"
export let view
let anchor
let dropdown
let modal
</script>
<div bind:this={anchor}>
<Button icon="Download" primary size="S" quiet on:click={dropdown.show}>
Export
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<ExportPopover {view} onClosed={dropdown.hide} />
</Popover>
<Button icon="Download" primary size="S" quiet on:click={modal.show}>
Export
</Button>
<Modal bind:this={modal}>
<ExportModal {view} />
</Modal>

26
packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
View file

@ -1,29 +1,25 @@
<script>
import { Button, Popover } from "@budibase/bbui"
import { Button, Modal } from "@budibase/bbui"
import { permissions } from "stores/backend"
import ManageAccessPopover from "../popovers/ManageAccessPopover.svelte"
import ManageAccessModal from "../modals/ManageAccessModal.svelte"
export let resourceId
let anchor
let dropdown
let modal
let resourcePermissions
async function openDropdown() {
resourcePermissions = await permissions.forResource(resourceId)
dropdown.show()
modal.show()
}
</script>
<div bind:this={anchor}>
<Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
Manage Access
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<ManageAccessPopover
<Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
Manage Access
</Button>
<Modal bind:this={modal}>
<ManageAccessModal
{resourceId}
levels={$permissions}
permissions={resourcePermissions}
onClosed={dropdown.hide} />
</Popover>
permissions={resourcePermissions} />
</Modal>

35
packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte → packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
View file

@ -1,5 +1,5 @@
<script>
import { Button, Input, notifications, Heading } from "@budibase/bbui"
import { Input, notifications, ModalContent } from "@budibase/bbui"
import { goto } from "@roxi/routify"
import { views as viewsStore } from "stores/backend"
import { tables } from "stores/backend"
@ -23,37 +23,14 @@
field,
})
notifications.success(`View ${name} created`)
onClosed()
analytics.captureEvent("View Created", { name })
$goto(`../../view/${name}`)
}
</script>
<div class="actions">
<Heading s>Create View</Heading>
<ModalContent
title="Create View"
confirmText="Create View"
onConfirm={saveView}>
<Input label="View Name" thin bind:value={name} />
<div class="footer">
<Button secondary on:click={onClosed}>Cancel</Button>
<Button cta on:click={saveView}>Save View</Button>
</div>
</div>
<style>
h5 {
margin: 0;
font-weight: 500;
}
.actions {
display: grid;
grid-gap: var(--spacing-xl);
padding: var(--spacing-xl);
width: 240px;
}
.footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-m);
}
</style>
</ModalContent>

42
packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte
View file

@ -21,7 +21,7 @@
// Changes the selected role
const changeRole = event => {
const id = event?.target?.value
const id = event?.detail
const role = $roles.find(role => role._id === id)
if (role) {
selectedRole = {
@ -94,42 +94,34 @@
secondary
label="Role"
value={selectedRoleId}
on:change={changeRole}>
<option value="">Create new role</option>
{#each $roles as role}
<option value={role._id}>{role.name}</option>
{/each}
</Select>
on:change={changeRole}
options={$roles}
placeholder="Create new role"
getOptionValue={role => role._id}
getOptionLabel={role => role.name} />
{#if selectedRole}
<Input
label="Name"
bind:value={selectedRole.name}
thin
disabled={builtInRoles.includes(selectedRole.name)} />
<Select
thin
secondary
label="Inherits Role"
bind:value={selectedRole.inherits}>
<option value="">None</option>
{#each otherRoles as role}
<option value={role._id}>{role.name}</option>
{/each}
</Select>
bind:value={selectedRole.inherits}
options={otherRoles}
getOptionValue={role => role._id}
getOptionLabel={role => role.name}
placeholder="None" />
<Select
thin
secondary
label="Base Permissions"
bind:value={selectedRole.permissionId}>
<option value="">Choose permissions</option>
{#each basePermissions as basePerm}
<option value={basePerm._id}>{basePerm.name}</option>
{/each}
</Select>
bind:value={selectedRole.permissionId}
options={basePermissions}
getOptionValue={x => x._id}
getOptionLabel={x => x.name}
placeholder="Choose permissions" />
{/if}
<div slot="footer">
{#if !isCreating}
<Button red on:click={deleteRole}>Delete</Button>
<Button warning on:click={deleteRole}>Delete</Button>
{/if}
</div>
</ModalContent>

37
packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte Normal file
View file

@ -0,0 +1,37 @@
<script>
import { Select, ModalContent } from "@budibase/bbui"
import download from "downloadjs"
const FORMATS = [
{
name: "CSV",
key: "csv",
},
{
name: "JSON",
key: "json",
},
]
export let view
let exportFormat = FORMATS[0].key
async function exportView() {
download(
`/api/views/export?view=${encodeURIComponent(
view.name
)}&format=${exportFormat}`
)
}
</script>
<ModalContent title="Export Data" confirmText="Export" onConfirm={exportView}>
<Select
label="Format"
bind:value={exportFormat}
options={FORMATS}
placeholder={null}
getOptionLabel={x => x.name}
getOptionValue={x => x.key} />
</ModalContent>

42
packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte → packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
View file

@ -1,14 +1,13 @@
<script>
import { roles, permissions as permissionsStore } from "stores/backend"
import {
Button,
Label,
Input,
Select,
Spacer,
notifications,
Heading,
Body,
ModalContent,
} from "@budibase/bbui"
import { capitalise } from "../../../../helpers"
@ -31,12 +30,8 @@
}
</script>
<div class="popover">
<Heading s>Who Can Access This Data?</Heading>
<div class="note">
<Body s>Specify the minimum access level role for this data.</Body>
</div>
<Spacer large />
<ModalContent title="Manage Access" showCancelButton={false} confirmText="Done">
<Body s>Specify the minimum access level role for this data.</Body>
<div class="row">
<Label extraSmall grey>Level</Label>
<Label extraSmall grey>Role</Label>
@ -50,41 +45,12 @@
getOptionValue={x => x._id} />
{/each}
</div>
<Spacer large />
<div class="footer">
<Button secondary on:click={onClosed}>Cancel</Button>
</div>
</div>
</ModalContent>
<style>
.popover {
display: grid;
width: 400px;
padding: var(--spacing-xl);
}
h5 {
margin: 0;
font-weight: 500;
}
.footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-m);
margin-top: var(--spacing-l);
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--spacing-s);
}
.note {
margin-top: 10px;
margin-bottom: 0;
}
</style>

63
packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
View file

@ -1,63 +0,0 @@
<script>
import { Button, Select, Heading } from "@budibase/bbui"
import download from "downloadjs"
const FORMATS = [
{
name: "CSV",
key: "csv",
},
{
name: "JSON",
key: "json",
},
]
export let view
export let onClosed
let exportFormat = FORMATS[0].key
async function exportView() {
download(
`/api/views/export?view=${encodeURIComponent(
view.name
)}&format=${exportFormat}`
)
onClosed()
}
</script>
<div class="popover">
<Heading s>Export Data</Heading>
<Select
label="Format"
bind:value={exportFormat}
options={FORMATS}
getOptionLabel={x => x.name}
getOptionValue={x => x.key} />
<div class="footer">
<Button secondary on:click={onClosed}>Cancel</Button>
<Button cta on:click={exportView}>Export</Button>
</div>
</div>
<style>
.popover {
display: grid;
grid-gap: var(--spacing-xl);
padding: var(--spacing-xl);
width: 240px;
}
h5 {
margin: 0;
font-weight: 500;
}
.footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-m);
}
</style>