refactor: move data source selector in the sidebar

EzzalddeenAli · Jan 31, 2024 · 9056ccc · 9056ccc
1 parent 35f54a8
commit 9056ccc
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 48 deletions.
diff --git a/frontend/src/query/QueryDataSourceSelector.vue b/frontend/src/query/QueryDataSourceSelector.vue
@@ -0,0 +1,49 @@
+<script setup>
+import useDataSourceStore from '@/stores/dataSourceStore'
+import { ChevronDown, Database } from 'lucide-vue-next'
+import { computed, inject } from 'vue'
+
+const $notify = inject('$notify')
+const query = inject('query')
+
+const sources = useDataSourceStore()
+
+const currentSource = computed(() => {
+	return sources.list.find((source) => source.name === query.doc.data_source)
+})
+const dataSourceOptions = computed(() => {
+	return sources.list.map((source) => ({
+		label: source.title,
+		value: source.name,
+	}))
+})
+
+function changeDataSource(sourceName) {
+	query.changeDataSource(sourceName).then(() => {
+		$notify({
+			title: 'Data source updated',
+			variant: 'success',
+		})
+	})
+}
+</script>
+
+<template>
+	<Autocomplete
+		:options="dataSourceOptions"
+		:modelValue="query.doc.data_source"
+		@update:modelValue="changeDataSource($event.value)"
+	>
+		<template #target="{ togglePopover }">
+			<Button variant="outline" @click="togglePopover">
+				<div class="flex items-center gap-2">
+					<Database class="h-4 w-4 text-gray-600" />
+					<span class="truncate">
+						{{ currentSource?.title || 'Select data source' }}
+					</span>
+					<ChevronDown class="h-4 w-4 text-gray-600" />
+				</div>
+			</Button>
+		</template>
+	</Autocomplete>
+</template>
diff --git a/frontend/src/query/QueryHeader.vue b/frontend/src/query/QueryHeader.vue
@@ -1,59 +1,16 @@
 <script setup lang="jsx">
-import useDataSourceStore from '@/stores/dataSourceStore'
-import { watchDebounced } from '@vueuse/core'
-import { ChevronDown, Database, Play } from 'lucide-vue-next'
-import { computed, inject, ref } from 'vue'
+import { Play } from 'lucide-vue-next'
+import { inject } from 'vue'
+import QueryDataSourceSelector from './QueryDataSourceSelector.vue'
 import QueryMenu from './QueryMenu.vue'
 
-const $notify = inject('$notify')
 const query = inject('query')
-
-const sources = useDataSourceStore()
-
-const currentSource = computed(() => {
-	return sources.list.find((source) => source.name === query.doc.data_source)
-})
-const dataSourceOptions = computed(() => {
-	return sources.list.map((source) => ({
-		label: source.title,
-		value: source.name,
-	}))
-})
-
-function changeDataSource(sourceName) {
-	query.changeDataSource(sourceName).then(() => {
-		$notify({
-			title: 'Data source updated',
-			variant: 'success',
-		})
-	})
-}
 </script>
 
 <template>
 	<div class="flex items-center gap-2">
 		<QueryMenu></QueryMenu>
-		<Autocomplete
-			:options="dataSourceOptions"
-			:modelValue="query.doc.data_source"
-			@update:modelValue="changeDataSource($event.value)"
-		>
-			<template #target="{ togglePopover }">
-				<Button
-					:variant="currentSource?.title ? 'outline' : 'solid'"
-					@click="togglePopover"
-				>
-					<div class="flex items-center gap-2">
-						<Database class="h-4 w-4" />
-						<span class="truncate">
-							{{ currentSource?.title || 'Select data source' }}
-						</span>
-						<ChevronDown class="h-4 w-4" />
-					</div>
-				</Button>
-			</template>
-		</Autocomplete>
-
+		<QueryDataSourceSelector v-if="!query.doc.is_assisted_query"></QueryDataSourceSelector>
 		<Button
 			v-if="!query.doc.is_script_query && !query.doc.is_native_query"
 			variant="solid"

diff --git a/frontend/src/query/visual/VisualQueryBuilder.vue b/frontend/src/query/visual/VisualQueryBuilder.vue
@@ -1,6 +1,6 @@
 <script setup>
 import Tabs from '@/components/Tabs.vue'
-import { LoadingIndicator } from 'frappe-ui'
+import { ChevronDown, Database } from 'lucide-vue-next'
 import { inject, provide, ref } from 'vue'
 import ChartOptions from '../ChartOptions.vue'
 import ChartSection from '../ChartSection.vue'
@@ -12,6 +12,7 @@ import ResultFooter from './ResultFooter.vue'
 import TableSection from './TableSection.vue'
 import TransformSection from './TransformSection.vue'
 import useAssistedQuery from './useAssistedQuery'
+import QueryDataSourceSelector from '../QueryDataSourceSelector.vue'
 
 const activeTab = ref('Build')
 const tabs = ['Build', 'Visualize']
@@ -61,6 +62,14 @@ const hideChart = ref(false)
 			</div>
 			<div class="space-y-4">
 				<template v-if="activeTab === 'Build'">
+					<div class="flex items-center justify-between">
+						<div class="flex items-center space-x-1.5">
+							<Database class="h-4 w-4 text-gray-600" />
+							<p class="font-medium">Data Source</p>
+						</div>
+						<QueryDataSourceSelector></QueryDataSourceSelector>
+					</div>
+					<hr class="border-gray-200" />
 					<TableSection></TableSection>
 					<hr class="border-gray-200" />
 					<FilterSection></FilterSection>