forked from tsai/budibase
Dean
5 years ago
16 changed files with 37 additions and 211 deletions
@ -1,171 +0,0 @@ |
|||||
<script> |
|
||||
import analytics from "analytics" |
|
||||
import { createEventDispatcher } from "svelte" |
|
||||
import { fade, fly } from "svelte/transition" |
|
||||
import { |
|
||||
ActionButton, |
|
||||
ClearButton, |
|
||||
RadioGroup, |
|
||||
TextArea, |
|
||||
ButtonGroup, |
|
||||
Button, |
|
||||
Heading, |
|
||||
Detail, |
|
||||
Divider, |
|
||||
Layout, |
|
||||
notifications, |
|
||||
} from "@budibase/bbui" |
|
||||
import { auth } from "stores/portal" |
|
||||
|
|
||||
let step = 0 |
|
||||
let ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
|
||||
let options = [ |
|
||||
"Importing / managing data", |
|
||||
"Designing", |
|
||||
"Automations", |
|
||||
"Managing users / groups", |
|
||||
"Deployment / hosting", |
|
||||
"Documentation", |
|
||||
] |
|
||||
|
|
||||
const dispatch = createEventDispatcher() |
|
||||
|
|
||||
// Data to send off |
|
||||
let rating |
|
||||
let improvements = "" |
|
||||
let comment = "" |
|
||||
|
|
||||
function selectNumber(n) { |
|
||||
rating = n |
|
||||
step = 1 |
|
||||
} |
|
||||
|
|
||||
function submitFeedback() { |
|
||||
analytics.submitFeedback({ |
|
||||
rating, |
|
||||
improvements, |
|
||||
comment, |
|
||||
}) |
|
||||
try { |
|
||||
auth.updateSelf({ |
|
||||
flags: { |
|
||||
feedbackSubmitted: true, |
|
||||
}, |
|
||||
}) |
|
||||
} catch (error) { |
|
||||
notifications.error("Error updating user") |
|
||||
} |
|
||||
dispatch("complete") |
|
||||
} |
|
||||
|
|
||||
function cancelFeedback() { |
|
||||
try { |
|
||||
auth.updateSelf({ |
|
||||
flags: { |
|
||||
feedbackSubmitted: true, |
|
||||
}, |
|
||||
}) |
|
||||
} catch (error) { |
|
||||
notifications.error("Error updating user") |
|
||||
} |
|
||||
dispatch("complete") |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div |
|
||||
class="position" |
|
||||
in:fade={{ duration: 200 }} |
|
||||
out:fade|local={{ duration: 200 }} |
|
||||
> |
|
||||
<div |
|
||||
class="feedback-frame" |
|
||||
in:fly={{ y: 30, duration: 200 }} |
|
||||
out:fly|local={{ y: 30, duration: 200 }} |
|
||||
> |
|
||||
<div class="close"> |
|
||||
<ClearButton on:click={cancelFeedback} /> |
|
||||
</div> |
|
||||
<Layout gap="XS"> |
|
||||
{#if step === 0} |
|
||||
<Heading size="XS" |
|
||||
>How likely are you to recommend Budibase to a colleague?</Heading |
|
||||
> |
|
||||
<Divider /> |
|
||||
<div class="ratings"> |
|
||||
{#each ratings as number} |
|
||||
<ActionButton |
|
||||
size="L" |
|
||||
emphasized |
|
||||
selected={number === rating} |
|
||||
on:click={() => selectNumber(number)} |
|
||||
> |
|
||||
{number} |
|
||||
</ActionButton> |
|
||||
{/each} |
|
||||
</div> |
|
||||
<div class="footer"> |
|
||||
<Detail size="S">NOT LIKELY</Detail> |
|
||||
<Detail size="S">EXTREMELY LIKELY</Detail> |
|
||||
</div> |
|
||||
{:else if step === 1} |
|
||||
<Heading size="XS">What could be improved most in Budibase?</Heading> |
|
||||
<Divider /> |
|
||||
<RadioGroup bind:value={improvements} {options} /> |
|
||||
<div class="footer"> |
|
||||
<Detail size="S">STEP 2 OF 3</Detail> |
|
||||
<ButtonGroup> |
|
||||
<Button secondary on:click={() => (step -= 1)}>Previous</Button> |
|
||||
<Button primary on:click={() => (step += 1)}>Next</Button> |
|
||||
</ButtonGroup> |
|
||||
</div> |
|
||||
{:else} |
|
||||
<Heading size="XS">How can we improve your experience?</Heading> |
|
||||
<Divider /> |
|
||||
<TextArea bind:value={comment} placeholder="Add comments" /> |
|
||||
<div class="footer"> |
|
||||
<Detail size="S">STEP 3 OF 3</Detail> |
|
||||
<ButtonGroup> |
|
||||
<Button secondary on:click={() => (step -= 1)}>Previous</Button> |
|
||||
<Button cta on:click={submitFeedback}>Complete</Button> |
|
||||
</ButtonGroup> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</Layout> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.feedback-frame :global(textarea) { |
|
||||
min-height: 180px !important; |
|
||||
} |
|
||||
|
|
||||
.position { |
|
||||
position: absolute; |
|
||||
right: var(--spacing-l); |
|
||||
bottom: calc(5 * var(--spacing-xl)); |
|
||||
} |
|
||||
.feedback-frame { |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
right: 0; |
|
||||
min-width: 510px; |
|
||||
background: var(--background); |
|
||||
border-radius: var(--spectrum-global-dimension-size-50); |
|
||||
border: 2px solid var(--spectrum-global-color-blue-400); |
|
||||
padding: var(--spacing-xl); |
|
||||
} |
|
||||
.ratings { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.close { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
} |
|
||||
.footer { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue