From 39151732cfa3f77e730d76689b90728b3244e919 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Fri, 13 Nov 2020 23:32:37 +0100
Subject: [PATCH] No db in schema sidebar #10

---
 src/assets/styles/messages.css |  6 ++++++
 src/components/Chart.vue       |  6 +-----
 src/components/DbUpload.vue    |  3 +++
 src/main.js                    |  1 +
 src/views/Editor.vue           | 36 ++++++++++++++++++++++++++++++----
 5 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/styles/messages.css

diff --git a/src/assets/styles/messages.css b/src/assets/styles/messages.css
new file mode 100644
index 0000000..dc96847
--- /dev/null
+++ b/src/assets/styles/messages.css
@@ -0,0 +1,6 @@
+.worning {
+  background-color: var(--color-bg-warning);
+  color: var(--color-text-base);
+  font-size: 13px;
+  padding: 0 24px;
+}
\ No newline at end of file
diff --git a/src/components/Chart.vue b/src/components/Chart.vue
index 5c613e2..0a7268e 100644
--- a/src/components/Chart.vue
+++ b/src/components/Chart.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-show="visible" class="chart-container">
-  <div class="chart-worning" v-show="!sqlResult && visible">
+  <div class="worning chart-worning" v-show="!sqlResult && visible">
     There is no data to build a chart. Run your sql query and make sure the result is not empty.
   </div>
   <PlotlyEditor
@@ -96,12 +96,8 @@ export default {
   height: calc(100% - 89px);
 }
 .chart-worning {
-  background-color: var(--color-bg-warning);
   height: 40px;
   line-height: 40px;
-  color: var(--color-text-base);
-  font-size: 13px;
-  padding: 0 24px;
 }
 .chart {
   border-top: 1px solid var(--color-border);
diff --git a/src/components/DbUpload.vue b/src/components/DbUpload.vue
index b87b7cf..fc822e3 100644
--- a/src/components/DbUpload.vue
+++ b/src/components/DbUpload.vue
@@ -56,6 +56,8 @@ label {
   border: 1px dashed var(--color-border);
   padding: 8px;
   border-radius: var(--border-radius-big);
+  height: 100%;
+  box-sizing: border-box;
 }
 .drop-area {
   background-color: var(--color-bg-light-3);
@@ -67,6 +69,7 @@ label {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
 }
 input {
   display: none;
diff --git a/src/main.js b/src/main.js
index 2c8b3aa..27648f7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,7 @@ import '@/assets/styles/buttons.css'
 import '@/assets/styles/tables.css'
 import '@/assets/styles/dialogs.css'
 import '@/assets/styles/tooltips.css'
+import '@/assets/styles/messages.css'
 
 Vue.use(VuePlugin)
 Vue.use(VModal)
diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index 4809acd..cfe1175 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -6,7 +6,13 @@
       :after="{ size: 80, max: 100 }"
     >
       <template #left-pane>
-        <schema />
+        <schema v-if="$store.state.schema"/>
+        <div v-else id="empty-schema-container">
+          <div class="worning">
+            Database is not uploaded. Queries can’t be run without database.
+          </div>
+          <db-upload id="db-uploader"/>
+        </div>
       </template>
       <template #right-pane>
         <tabs />
@@ -19,20 +25,42 @@
 import Splitpanes from '@/components/Splitpanes'
 import Schema from '@/components/Schema'
 import Tabs from '@/components/Tabs'
+import dbUpload from '@/components/DbUpload'
 
 export default {
   name: 'Editor',
   components: {
     Schema,
     Splitpanes,
-    Tabs
+    Tabs,
+    dbUpload
   }
 }
 </script>
 
-<style>
+<style scoped>
 .schema-tabs-splitter {
   height: 100%;
-  margin-left: 6px;
+  background-color: var(--color-white);
+}
+#empty-schema-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 200px;
+  height: 100%;
+}
+
+#db-uploader {
+  flex-grow: 1;
+  margin: 24px;
+}
+
+.worning {
+  padding: 12px 24px;
+}
+
+>>>.drop-area {
+  padding: 0 15px;
 }
 </style>