feat: update report editing workflow

backend/zeno_backend/database/insert.py

@@ -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]
 

frontend/src/lib/components/popups/Confirm.svelte

@@ -9,26 +9,23 @@
 	export let cancelText = 'Cancel';
 
 	const dispatch = createEventDispatcher();
-
-	let paperHeight;
 </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"
 	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-end">
 				<Button style="margin-right: 10px" variant="outlined" on:click={() => dispatch('cancel')}>
 					{cancelText}
 				</Button>
+				<Button style="margin-right: 10px" variant="outlined" on:click={() => dispatch('confirm')}>
+					{confirmText}
+				</Button>
 			</div>
 		</Content>
 	</Paper>

frontend/src/lib/components/popups/ReportPopup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import type { Organization, Report, User, ZenoService } from '$lib/zenoapi';
 	import { mdiClose } from '@mdi/js';
@@ -32,10 +33,10 @@
 		input.getElement().focus();
 	}
 
-	function updateReport() {
-		zenoClient.updateReport(report).then(() => {
-			dispatch('close');
-		});
+	async function updateReport() {
+		await zenoClient.updateReport(report);
+		goto(`/report/${report.ownerName}/${encodeURI(report.name)}`);
+		dispatch('close');
 	}
 
 	function submit(e: KeyboardEvent) {

frontend/src/lib/components/report/AddElementButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { mdiPlusCircle } from '@mdi/js';
+	import { Icon } from '@smui/button';
+
+	export let position: number;
+	export let addElement: (elementIndex: number) => void;
+	export let alwaysShow = false;
+</script>
+
+<button
+	class="transition w-full h-6 justify-center items-center group"
+	on:click={() => addElement(position)}
+>
+	<div
+		class="justify-center items-center h-1 w-full bg-primary-dark
+        {!alwaysShow ? 'group-hover:flex hidden' : 'flex'}
+    "
+	>
+		<div class="bg-white">
+			<Icon style="outline:none; width: 24px; height: 24px" tag="svg" viewBox="0 0 24 24">
+				<path class="fill-primary-dark" d={mdiPlusCircle} />
+			</Icon>
+		</div>
+	</div>
+</button>

frontend/src/lib/components/report/Element.svelte

@@ -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}

frontend/src/lib/components/report/ElementContainer.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Chart, Report, ReportElement, Slice } from '$lib/zenoapi';
+	import { mdiDrag } from '@mdi/js';
+	import { Icon } from '@smui/button';
+	import AddElementButton from './AddElementButton.svelte';
+	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' : 'border-white'}
+			{report.editor ? 'group/edit hover:border-primary-mid rounded p-4' : 'py-2'}
+			{dragEnabled ? 'border-primary-mid border-2' : ''} transition"
+	>
+		<button
+			class="group-hover/edit:block hidden px-4 py-1 border-primary-mid border-2 absolute bg-white -top-4 rounded-md hover:bg-primary-light transition"
+			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 hover:bg-primary-light transition"
+			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}
+		<AddElementButton position={element.position + 1} {addElement} />
+	{/if}
+</div>

frontend/src/lib/components/report/ElementEdit.svelte

@@ -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);
 
@@ -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;"
@@ -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}
@@ -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>