From 70b4540dd1af83599f7a5d648016fde363063fb4 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 26 May 2021 11:53:09 -0400
Subject: [PATCH] Add edit existing

---
 .../interfaces/select-color/select-color.vue  |  2 +-
 app/src/modules/insights/routes/dashboard.vue | 81 ++++++++++++++--
 .../insights/routes/panel-configuration.vue   | 94 ++++++++++---------
 app/src/types/insights.ts                     |  1 +
 4 files changed, 126 insertions(+), 52 deletions(-)

diff --git a/app/src/interfaces/select-color/select-color.vue b/app/src/interfaces/select-color/select-color.vue
index 2d7fd8c3ff..bc54ca9033 100644
--- a/app/src/interfaces/select-color/select-color.vue
+++ b/app/src/interfaces/select-color/select-color.vue
@@ -3,7 +3,7 @@
 		<template #activator>
 			<v-input
 				:disabled="disabled"
-				:placeholder="$t('interfaces.color.placeholder')"
+				:placeholder="$t('interfaces.select-color.placeholder')"
 				v-model="hex"
 				:pattern="/#([a-f\d]{2}){3}/i"
 				class="color-input"
diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index d3f592c77f..b4fd87a620 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/app/src/modules/insights/routes/dashboard.vue
@@ -8,7 +8,7 @@
 		</template>
 
 		<template #actions>
-			<v-button v-if="editMode" rounded icon outlined :to="`/insights/${currentDashboard.id}/panel/+`">
+			<v-button v-if="editMode" rounded icon outlined :to="`/insights/${currentDashboard.id}/+`">
 				<v-icon name="add" />
 			</v-button>
 
@@ -22,18 +22,34 @@
 		</template>
 
 		<div class="workspace" :class="{ editing: editMode }">
-			<!-- <div class="dummy" /> -->
+			<router-link
+				v-for="panel in panels"
+				:to="`/insights/${currentDashboard.id}/${panel.id || panel.$tempID}`"
+				:key="panel.id || panel.$tempID"
+			>
+				{{ panel.id || panel.$tempID }}
+			</router-link>
 		</div>
 
-		<router-view name="detail" :dashboard-key="primaryKey" />
+		<router-view
+			name="detail"
+			:dashboard-key="primaryKey"
+			:panel="panels.find((panel) => panel.id === panelKey || panel.$tempID === panelKey)"
+			@save="stagePanelEdits"
+			@cancel="$router.push(`/insights/${primaryKey}`)"
+		/>
 	</private-view>
 </template>
 
-<script>
+<script lang="ts">
 import InsightsNavigation from '../components/navigation.vue';
 import { defineComponent, computed, ref } from '@vue/composition-api';
 import { useInsightsStore } from '@/stores';
 import InsightsNotFound from './not-found.vue';
+import { Panel } from '@/types';
+import { nanoid } from 'nanoid';
+import { merge } from 'lodash';
+import router from '@/router';
 
 export default defineComponent({
 	name: 'InsightsDashboard',
@@ -43,6 +59,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		panelKey: {
+			type: String,
+			required: true,
+		},
 	},
 	setup(props) {
 		const editMode = ref(false);
@@ -52,13 +72,60 @@ export default defineComponent({
 			insightsStore.state.dashboards.find((dashboard) => dashboard.id === props.primaryKey)
 		);
 
-		const stagedPanels = ref([]);
+		const stagedPanels = ref<Partial<Panel & { $tempID?: string }>[]>([]);
 
 		const panels = computed(() => {
-			return currentDashboard.value?.panels || [];
+			const savedPanels = currentDashboard.value?.panels || [];
+
+			return [
+				...savedPanels.map((panel) => {
+					const updates = stagedPanels.value.find((updatedPanel) => updatedPanel.id === panel.id);
+
+					if (updates) {
+						return merge({}, panel, updates);
+					}
+
+					return panel;
+				}),
+				...stagedPanels.value.filter((panel) => '$tempID' in panel),
+			];
 		});
 
-		return { currentDashboard, editMode, panels };
+		return { currentDashboard, editMode, panels, stagePanelEdits, stagedPanels };
+
+		function stagePanelEdits(edits: Partial<Panel>) {
+			if (props.panelKey === '+') {
+				stagedPanels.value = [
+					...stagedPanels.value,
+					{
+						$tempID: nanoid(),
+						...edits,
+					},
+				];
+			} else {
+				if (stagedPanels.value.some((panel) => panel.id === props.panelKey || panel.$tempID === props.panelKey)) {
+					stagedPanels.value = stagedPanels.value.map((panel) => {
+						if (panel.id === props.panelKey) {
+							return {
+								id: props.panelKey,
+								...edits,
+							};
+						}
+
+						if (panel.$tempID === props.panelKey) {
+							return {
+								$tempID: props.panelKey,
+								...edits,
+							};
+						}
+
+						return panel;
+					});
+				}
+			}
+
+			router.push(`/insights/${props.primaryKey}`);
+		}
 	},
 });
 </script>
diff --git a/app/src/modules/insights/routes/panel-configuration.vue b/app/src/modules/insights/routes/panel-configuration.vue
index c681a747c0..08b6645b71 100644
--- a/app/src/modules/insights/routes/panel-configuration.vue
+++ b/app/src/modules/insights/routes/panel-configuration.vue
@@ -1,11 +1,17 @@
 <template>
-	<v-drawer active :title="values.name || $t('panel')">
+	<v-drawer active :title="(panel && panel.name) || $t('panel')" @cancel="$emit('cancel')">
+		<template #actions>
+			<v-button :disabled="!edits.type" @click="emitSave" icon rounded v-tooltip.bottom="$t('done')">
+				<v-icon name="check" />
+			</v-button>
+		</template>
+
 		<div class="content">
 			<p class="type-label panel-type-label">{{ $t('type') }}</p>
 
-			<v-fancy-select class="select" :items="selectItems" v-model="values.type" />
+			<v-fancy-select class="select" :items="selectItems" v-model="edits.type" />
 
-			<template v-if="values.type && selectedPanel">
+			<template v-if="edits.type && selectedPanel">
 				<v-notice v-if="!selectedPanel.options || selectedPanel.options.length === 0">
 					{{ $t('no_options_available') }}
 				</v-notice>
@@ -14,10 +20,10 @@
 					v-else-if="Array.isArray(selectedPanel.options)"
 					:fields="selectedPanel.options"
 					primary-key="+"
-					v-model="values.options"
+					v-model="edits.options"
 				/>
 
-				<component v-model="values.options" :collection="collection" :is="`panel-options-${selectedPanel.id}`" v-else />
+				<component v-model="edits.options" :collection="collection" :is="`panel-options-${selectedPanel.id}`" v-else />
 			</template>
 
 			<v-divider />
@@ -25,22 +31,22 @@
 			<div class="form-grid">
 				<div class="field half-left">
 					<p class="type-label">{{ $t('show_header') }}</p>
-					<v-checkbox block v-model="values.show_header" :label="$t('enabled')" />
+					<v-checkbox block v-model="edits.show_header" :label="$t('enabled')" />
 				</div>
 
 				<div class="field half-right">
 					<p class="type-label">{{ $t('name') }}</p>
-					<v-input v-model="values.name" :disabled="values.show_header !== true" />
+					<v-input v-model="edits.name" :disabled="edits.show_header !== true" />
 				</div>
 
 				<div class="field half-left">
 					<p class="type-label">{{ $t('icon') }}</p>
-					<interface-select-icon v-model="values.icon" :disabled="values.show_header !== true" />
+					<interface-select-icon v-model="edits.icon" :disabled="edits.show_header !== true" />
 				</div>
 
 				<div class="field half-right">
 					<p class="type-label">{{ $t('color') }}</p>
-					<interface-select-color v-model="values.color" :disabled="values.show_header !== true" width="half" />
+					<interface-select-color v-model="edits.color" :disabled="edits.show_header !== true" width="half" />
 				</div>
 			</div>
 		</div>
@@ -48,8 +54,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api';
-import { useInsightsStore } from '@/stores';
+import { computed, defineComponent, reactive, watch, PropType } from '@vue/composition-api';
 import { getPanels } from '@/panels';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
 import { Panel } from '@/types';
@@ -57,31 +62,23 @@ import { Panel } from '@/types';
 export default defineComponent({
 	name: 'PanelConfiguration',
 	props: {
-		primaryKey: {
-			type: String,
-			default: '+',
-		},
-		dashboardKey: {
-			type: String,
+		panel: {
+			type: Object as PropType<Partial<Panel>>,
 			required: true,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const { panels } = getPanels();
 
-		const insightsStore = useInsightsStore();
-
-		const existing = computed(() =>
-			insightsStore.state.dashboards
-				.find((dashboard) => dashboard.id === props.dashboardKey)!
-				.panels.find((panel) => panel.id === props.primaryKey)
-		);
-
-		const edits = ref<Partial<Panel>>({});
-
-		const values = computed<Partial<Panel>>(() => {
-			if (existing.value) return { ...existing.value, ...edits.value };
-			return edits.value;
+		const edits = reactive<Partial<Panel>>({
+			show_header: false,
+			type: undefined,
+			name: undefined,
+			icon: undefined,
+			color: undefined,
+			width: undefined,
+			height: undefined,
+			...(props.panel || {}),
 		});
 
 		const selectItems = computed<FancySelectItem[]>(() => {
@@ -98,10 +95,30 @@ export default defineComponent({
 		});
 
 		const selectedPanel = computed(() => {
-			return panels.value.find((panel) => panel.id === values.value.type);
+			return panels.value.find((panel) => panel.id === edits.type);
 		});
 
-		return { existing, values, selectItems, selectedPanel };
+		watch(selectedPanel, (newPanel) => {
+			if (newPanel) {
+				edits.width = newPanel.minWidth;
+				edits.height = newPanel.minHeight;
+			} else {
+				edits.width = undefined;
+				edits.height = undefined;
+			}
+		});
+
+		return {
+			selectItems,
+			selectedPanel,
+			close,
+			emitSave,
+			edits,
+		};
+
+		function emitSave() {
+			emit('save', edits);
+		}
 	},
 });
 </script>
@@ -121,14 +138,3 @@ export default defineComponent({
 	margin: 48px 0;
 }
 </style>
-
-<!--
-
-type
-options
---
-toggle name
-icon   color
-note
-
--->
diff --git a/app/src/types/insights.ts b/app/src/types/insights.ts
index 0fbc0afea7..69a1506c91 100644
--- a/app/src/types/insights.ts
+++ b/app/src/types/insights.ts
@@ -10,6 +10,7 @@ export type Dashboard = {
 export type Panel = {
 	id: string;
 	dashboard: string;
+	show_header: boolean;
 	name: string;
 	icon: string;
 	color: string;