MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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

17
packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
View File

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

17
packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
View File

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

20
packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
View File

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

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> <script>
import { Button, Input, notifications, Heading } from "@budibase/bbui" import { Input, notifications, ModalContent } from "@budibase/bbui"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { views as viewsStore } from "stores/backend" import { views as viewsStore } from "stores/backend"
import { tables } from "stores/backend" import { tables } from "stores/backend"
@ -23,37 +23,14 @@
field, field,
}) })
notifications.success(`View ${name} created`) notifications.success(`View ${name} created`)
onClosed()
analytics.captureEvent("View Created", { name }) analytics.captureEvent("View Created", { name })
$goto(`../../view/${name}`) $goto(`../../view/${name}`)
} }
</script> </script>
<div class="actions"> <ModalContent
<Heading s>Create View</Heading> title="Create View"
confirmText="Create View"
onConfirm={saveView}>
<Input label="View Name" thin bind:value={name} /> <Input label="View Name" thin bind:value={name} />
<div class="footer"> </ModalContent>
<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>

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

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

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