Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update report editing workflow #297

Merged
merged 5 commits into from
Oct 13, 2023
Merged

feat: update report editing workflow #297

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
011b0bb
feature: update report editing workflow
cabreraalex Oct 11, 2023
12544ed
merge main
cabreraalex Oct 12, 2023
66dfedd
styling
cabreraalex Oct 12, 2023
75613a3
print
cabreraalex Oct 12, 2023
0e97537
fixes
cabreraalex Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions backend/zeno_backend/database/insert.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,12 @@ def report_element(report_id: int, element: ReportElement) -> int | None:
" VALUES (%s,%s,%s,%s) RETURNING id;",
[report_id, element.type, element.data, element.position],
)
# update position of all elements after insert
db.connect_execute(
"UPDATE report_elements SET position = position + 1 WHERE report_id = %s "
"AND position >= %s;",
[report_id, element.position],
)
if len(id) > 0:
return id[0][0]

Expand Down
18 changes: 11 additions & 7 deletions frontend/src/lib/components/popups/Confirm.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,25 @@
</script>

<div
class="absolute inset-0 z-20 flex justify-center items-baseline p-12 bg-grey bg-opacity-60"
class="fixed inset-0 z-20 flex justify-center items-baseline p-12 bg-grey bg-opacity-60"
cabreraalex marked this conversation as resolved.
Show resolved Hide resolved
transition:fade={{ duration: 200 }}
bind:clientHeight={paperHeight}
>
<Paper class="pt-3 flex flex-col" elevation={7}>
<Paper class="p-6 flex flex-col" elevation={7}>
<Content>
<span>{message}</span>
<div class="mb-4">{message}</div>
<slot />
<div class="flex flex-row-reverse">
<Button style="margin-right: 10px" variant="outlined" on:click={() => dispatch('confirm')}>
{confirmText}
</Button>
<div class="flex m-auto justify-center">
cabreraalex marked this conversation as resolved.
Show resolved Hide resolved
<Button style="margin-right: 10px" variant="outlined" on:click={() => dispatch('cancel')}>
{cancelText}
</Button>
<Button
style="margin-right: 10px"
variant="unelevated"
cabreraalex marked this conversation as resolved.
Show resolved Hide resolved
on:click={() => dispatch('confirm')}
>
{confirmText}
</Button>
</div>
</Content>
</Paper>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/report/Element.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</script>

{#if element.data !== null && element.data !== undefined}
<div class="flex items-center my-2" bind:clientWidth={width}>
<div class="flex items-center my-2 ml-2" bind:clientWidth={width}>
{#if element.type === ReportElementType.TEXT}
<TextElement {element} />
{:else if element.type === ReportElementType.CHART}
Expand Down
77 changes: 77 additions & 0 deletions frontend/src/lib/components/report/ElementContainer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<script lang="ts">
import type { Chart, Report, ReportElement, Slice } from '$lib/zenoapi';
import { mdiDrag, mdiPlusCircle } from '@mdi/js';
import { Icon } from '@smui/button';
import Element from './Element.svelte';
import ElementEdit from './ElementEdit.svelte';

export let element: ReportElement;
export let report: Report;
export let chartOptions: Promise<Chart[]>;
export let sliceOptions: Promise<Slice[]>;
export let editId: number;
export let showConfirmDelete: number;
export let dragEnabled: boolean;
export let addElement: (elementIndex: number) => void;
</script>

<div>
<div
class="border-2 relative
{editId === element.id ? 'border-primary-mid' : ''}
{report.editor ? 'group/edit hover:border-primary-mid rounded p-4' : 'py-2'}
{dragEnabled ? 'border-primary-mid border-2' : 'border-white'}"
>
<button
class="group-hover/edit:block hidden px-4 py-1 border-primary-mid border-2 absolute bg-white -top-4 rounded-md"
on:click={() =>
editId === element.id || element.id === null || element.id === undefined
? (editId = -1)
: (editId = element.id)}
>
{editId === element.id ? 'done' : 'edit'}
</button>
<button
class="group-hover/edit:block hidden px-4 py-1 border-primary-mid border-2 absolute bg-white -top-4 right-4 rounded-md"
on:click={() => (showConfirmDelete = element.id ?? -1)}
>
{'delete'}
</button>
<div
class="group-hover/edit:flex hidden mr-2 cursor-move absolute -left-3 bg-white border-primary-mid border-2 rounded-md"
>
<Icon
style="outline:none; width: 24px; height: 24px"
tag="svg"
viewBox="0 0 24 24"
on:mousedown={() => (dragEnabled = true)}
>
<path fill="black" d={mdiDrag} />
</Icon>
</div>
{#if editId === element.id}
<ElementEdit bind:element {chartOptions} {sliceOptions} reportId={report.id} />
{:else}
<Element {element} {chartOptions} />
{/if}
</div>
{#if report.editor}
<button
class="w-full flex justify-center items-center h-6 group"
on:click={() => addElement(element.position + 1)}
>
<div class="flex justify-center items-center h-1 w-full group-hover:bg-primary-dark">
<div class="bg-white group-hover:flex hidden">
<Icon
style="outline:none; width: 24px; height: 24px"
tag="svg"
viewBox="0 0 24 24"
on:mousedown={() => (dragEnabled = true)}
>
<path class="fill-primary-dark" d={mdiPlusCircle} />
</Icon>
</div>
</div>
</button>
{/if}
</div>
42 changes: 4 additions & 38 deletions frontend/src/lib/components/report/ElementEdit.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,21 @@
type Slice,
type SliceElementSpec
} from '$lib/zenoapi';
import { mdiClose, mdiDrag } from '@mdi/js';
import { Icon } from '@smui/button';
import IconButton from '@smui/icon-button';
import Svelecte from 'svelecte';
import { createEventDispatcher, getContext } from 'svelte';
import Confirm from '../popups/Confirm.svelte';
import { getContext } from 'svelte';

export let element: ReportElement;
export let chartOptions: Promise<Chart[]>;
export let sliceOptions: Promise<Slice[]>;
export let dragEnabled = false;
export let reportId: number;

const zenoClient = getContext('zenoClient') as ZenoService;
const dispatch = createEventDispatcher();

let timer: ReturnType<typeof setTimeout>;
let projectUuid: string | null = null;
let sliceElementSpec: SliceElementSpec | null = null;
let chartId: number | null = null;
let models: string[] = [];
let showConfirmDelete = false;

updateTypeObjects(element);

Expand Down Expand Up @@ -119,29 +113,7 @@
}
</script>

{#if showConfirmDelete}
<Confirm
message="Are you sure you want to delete this element?"
on:cancel={() => {
showConfirmDelete = false;
}}
on:confirm={() => {
dispatch('delete');
showConfirmDelete = false;
}}
/>
{/if}
<div class="flex items-center my-2 border border-grey-light rounded p-4">
<div class="flex mr-2 cursor-move">
<Icon
style="outline:none; width: 24px; height: 24px"
tag="svg"
viewBox="0 0 24 24"
on:mousedown={() => (dragEnabled = true)}
>
<path fill="black" d={mdiDrag} />
</Icon>
</div>
<div class="flex items-center p-3">
<div class="w-full">
<Svelecte
style="margin-bottom: 10px;"
Expand All @@ -165,6 +137,7 @@
{#await sliceOptions then options}
<Svelecte value={sliceElementSpec.sliceId} {options} on:change={updateSliceId} />
{#if models.length > 0}
<div class="mt-3" />
<Svelecte
bind:value={sliceElementSpec.modelName}
labelAsValue={true}
Expand All @@ -175,11 +148,4 @@
{/await}
{/if}
</div>
<div class="flex">
<IconButton on:click={() => (showConfirmDelete = true)}>
<Icon tag="svg" viewBox="0 0 24 24">
<path fill="black" d={mdiClose} />
</Icon>
</IconButton>
</div>
</div>
101 changes: 47 additions & 54 deletions frontend/src/routes/(app)/report/[owner]/[report]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import Element from '$lib/components/report/Element.svelte';
import ElementEdit from '$lib/components/report/ElementEdit.svelte';
import Confirm from '$lib/components/popups/Confirm.svelte';
import ElementContainer from '$lib/components/report/ElementContainer.svelte';
import {
ReportElementType,
ZenoService,
Expand All @@ -10,7 +9,6 @@
type ReportElement,
type Slice
} from '$lib/zenoapi';
import Button, { Label } from '@smui/button';
import Svelecte from 'svelecte';
import { getContext } from 'svelte';
import { dndzone } from 'svelte-dnd-action';
Expand All @@ -19,7 +17,8 @@

let elements = data.reportElements.sort((a, b) => a.position - b.position);
let selectedProjects = data.report.linkedProjects ?? [];
let isEdit = false;
let editId = -1;
let showConfirmDelete = -1;
let dragEnabled = false;
let chartOptions: Promise<Chart[]> = new Promise(() => []);
let sliceOptions: Promise<Slice[]> = new Promise(() => []);
Expand Down Expand Up @@ -48,26 +47,16 @@
data: 'new element',
position: elementIndex
})
.then(
(res) =>
(elements = [
...elements,
{
id: res,
type: ReportElementType.TEXT,
data: 'new element',
position: elementIndex
}
])
);
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function updateReportName(e: any) {
const name = e.target?.textContent.replaceAll(/[/]/g, '');
zenoClient.updateReport({ ...data.report, name: name }).then(() => {
goto('/report/' + data.report.ownerName + '/' + encodeURIComponent(name));
});
.then((res) => {
elements.filter((d) => d.position >= elementIndex).forEach((d) => d.position++);
elements.push({
id: res,
type: ReportElementType.TEXT,
data: 'new element',
position: elementIndex
});
elements = elements.sort((a, b) => a.position - b.position);
});
}

function updateReportProjects(e: CustomEvent) {
Expand All @@ -94,27 +83,31 @@
}
</script>

{#if showConfirmDelete !== -1}
<Confirm
message="Are you sure you want to delete this element?"
on:cancel={() => {
showConfirmDelete = -1;
}}
on:confirm={() => {
deleteElement(showConfirmDelete);
showConfirmDelete = -1;
}}
/>
{/if}
<div class="w-full h-full bg-yellowish overflow-scroll">
<div
class="flex flex-col max-w-4xl m-auto bg-background px-10 pb-20 md:mt-6 md:mb-6 sm:mt-0 sm:mb-0 rounded shadow"
>
<div class="flex items-center mt-12 justify-between">
<h1
class="text-5xl mr-6 text-grey-darkest"
contenteditable={isEdit ? true : false}
on:blur={(e) => updateReportName(e)}
>
<h1 class="text-5xl mr-6 text-grey-darkest">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How can one update the name of a report now?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the settings!

{data.report.name}
</h1>
{#if data.report.editor}
<Button variant="raised" on:click={() => (isEdit = !isEdit)}>
<Label>{isEdit ? 'View' : 'Edit'}</Label>
</Button>
{/if}
</div>
<h5 class="mt-4 ml-1 text-lg">Author: {data.report.ownerName}</h5>
<hr class="mt-4 bg-grey-dark" />

{#if isEdit}
{#if data.report.editor}
<p class="mt-4 mb-2">Associated Projects</p>
{#await zenoClient.getProjects() then projects}
<Svelecte
Expand All @@ -127,31 +120,31 @@
options={projects}
/>
{/await}
<hr class="mt-4 bg-grey-dark" />
{/if}
<hr class="mt-6 mb-2 text-grey-light" />
<div
class="flex flex-col"
use:dndzone={{ items: elements, dragDisabled: !dragEnabled }}
class="flex flex-col mt-2"
use:dndzone={{
items: elements,
dragDisabled: !dragEnabled,
dropTargetStyle: {},
flipDurationMs: 0
}}
on:consider={handleMoved}
on:finalize={handleDropped}
>
{#each elements as element (element.id)}
{#if isEdit}
<ElementEdit
bind:element
bind:dragEnabled
{chartOptions}
{sliceOptions}
reportId={data.report.id}
on:delete={() => deleteElement(element.id ?? -1)}
/>
{:else}
<Element {element} {chartOptions} />
{/if}
<ElementContainer
bind:element
bind:editId
bind:dragEnabled
bind:showConfirmDelete
{addElement}
{chartOptions}
{sliceOptions}
report={data.report}
/>
{/each}
{#if isEdit}
<Button variant="raised" on:click={() => addElement(elements.length)}>Add Element</Button>
{/if}
Comment on lines -152 to -154
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there is no way for me to add an element if there is no element in the report already now.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LOL good catch

</div>
</div>
</div>