Empty state for my queries #8

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"
-}
+[]

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