From 19f3e8b74a13f0f77e9e42a7c75efede0d9f0d44 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Thu, 12 Nov 2020 18:11:36 +0100
Subject: [PATCH] Empty state for my queries #8

---
 public/queries.json     | 48 +----------------------------------------
 src/views/MyQueries.vue | 35 ++++++++++++++++++++++++------
 2 files changed, 29 insertions(+), 54 deletions(-)

diff --git a/public/queries.json b/public/queries.json
index 8d47aab..0637a08 100644
--- a/public/queries.json
+++ b/public/queries.json
@@ -1,47 +1 @@
-{
-    "query": "select * from invoices",
-    "chart": {
-        "data": [
-            {
-                "type": "scatter",
-                "mode": "lines",
-                "x": null,
-                "xsrc": "InvoiceId",
-                "meta": {
-                    "columnNames": {
-                        "x": "InvoiceId",
-                        "y": "Total"
-                    }
-                },
-                "y": null,
-                "ysrc": "Total"
-            }
-        ],
-        "layout": {
-            "xaxis": {
-                "range": [
-                    1,
-                    412
-                ],
-                "autorange": true,
-                "type": "linear"
-            },
-            "yaxis": {
-                "range": [
-                    -0.39166666666666683,
-                    27.241666666666667
-                ],
-                "autorange": true,
-                "type": "linear"
-            },
-            "autosize": true,
-            "mapbox": {
-                "style": "open-street-map"
-            }
-        },
-        "frames": []
-    },
-    "name": "Invoices",
-    "id": "ieZfcITwDUTADwOmQlYyL",
-    "createdAt": "2020-11-03T14:17:49.524Z"
-}
\ No newline at end of file
+[]
\ No newline at end of file
diff --git a/src/views/MyQueries.vue b/src/views/MyQueries.vue
index db3498e..df0cd51 100644
--- a/src/views/MyQueries.vue
+++ b/src/views/MyQueries.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <div id="my-queries-content">
+    <div id="start-guide" v-if="showedQueries.length === 0">
+      You don't have saved queries so far.
+      <span class="link" @click="create">Create</span>
+      the one from scratch or
+      <label for="import-file" class="link">import</label> from a file.
+    </div>
+    <div id="my-queries-content" v-show="showedQueries.length > 0">
       <div id="my-queries-toolbar">
         <div id="toolbar-buttons">
           <input
@@ -10,11 +16,11 @@
             id="import-file"
             @change="importQueries"
           />
-            <button class="toolbar">
-              <label for="import-file">
-                Import
-              </label>
-            </button>
+          <button class="toolbar">
+            <label for="import-file">
+              Import
+            </label>
+          </button>
           <button
             class="toolbar"
             v-show="selectedQueriesCount > 0"
@@ -244,7 +250,12 @@ export default {
   },
   methods: {
     calcNameWidth () {
-      this.$refs['name-th'].style = `width: ${this.$refs['name-td'][0].offsetWidth}px`
+      const nameWidth = this.$refs['name-td'] ? this.$refs['name-td'][0].offsetWidth : 0
+      this.$refs['name-th'].style = `width: ${nameWidth}px`
+    },
+    create () {
+      this.$root.$emit('createNewQuery')
+      this.$router.push('/editor')
     },
     openQuery (index) {
       const tab = JSON.parse(JSON.stringify(this.showedQueries[index]))
@@ -428,6 +439,16 @@ export default {
 </script>
 
 <style scoped>
+#start-guide {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-text-base);
+  font-size: 14px;
+  text-align: center;
+}
+
 #my-queries-content {
   padding: 52px;
 }