From 45edb85b36d61bae5731061842684c2d434c4b67 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 1 Sep 2019 17:31:00 +0100
Subject: [PATCH] Creates prop for setting the collapse state of panels

---
 src/components/Collapsable.vue |  7 ++++++-
 src/components/FilterTile.vue  | 10 +++++++---
 src/components/ItemGroup.vue   |  3 ++-
 src/data/item-data.json        | 25 +++++++++++++++++++++++++
 src/views/Home.vue             |  1 +
 5 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
index 15074893..e45e4173 100644
--- a/src/components/Collapsable.vue
+++ b/src/components/Collapsable.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="collapsable">
-        <input :id="`collapsible-${uniqueKey}`" class="toggle" type="checkbox" checked>
+        <input
+            :id="`collapsible-${uniqueKey}`"
+            class="toggle"
+            type="checkbox"
+            :checked="!collapsed">
         <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="0">
             <h2>{{ title }}</h2>
         </label>
@@ -18,6 +22,7 @@ export default {
   props: {
     uniqueKey: String,
     title: String,
+    collapsed: Boolean,
   },
 };
 </script>
diff --git a/src/components/FilterTile.vue b/src/components/FilterTile.vue
index 35398d73..0352b895 100644
--- a/src/components/FilterTile.vue
+++ b/src/components/FilterTile.vue
@@ -41,9 +41,13 @@ export default {
     window.addEventListener('keyup', (event) => {
       const { key } = event;
       if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
-        this.input += key;
-        this.$refs.filter.focus();
-        this.userIsTypingSomething();
+        try {
+          this.input += key;
+          this.$refs.filter.focus();
+          this.userIsTypingSomething();
+        } catch (e) {
+          // Do nothing
+        }
       }
     });
   },
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 4ae444ad..2caf1ebc 100644
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -1,5 +1,5 @@
 <template>
-   <Collapsable :title="title" :uniqueKey="groupId">
+   <Collapsable :title="title" :uniqueKey="groupId" :collapsed="collapsed">
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
     </div>
@@ -25,6 +25,7 @@ export default {
   props: {
     groupId: String,
     title: String,
+    collapsed: Boolean,
     items: Array,
   },
   components: {
diff --git a/src/data/item-data.json b/src/data/item-data.json
index 5a66510d..f4cd8fa6 100644
--- a/src/data/item-data.json
+++ b/src/data/item-data.json
@@ -2,6 +2,7 @@
     {
         "id": "0",
         "name": "Server Management | External",
+        "collapsed": false,
         "items": [
             {
                 "id":"001",
@@ -32,6 +33,7 @@
     {
         "id": "1",
         "name": "Server Management | Hosted",
+        "collapsed": false,
         "items": [
             {
                 "id":"001",
@@ -98,5 +100,28 @@
                 "url": ""
             }
         ]
+    },
+    {
+        "id": "2",
+        "name": "Dev Tools",
+        "collapsed": true,
+        "items": [
+            {
+                "id":"001",
+                "title": "DNS Management",
+                "description": "Configure Server Gateways",
+                "provider": "CloudFlare",
+                "icon": "009-cloud",
+                "url": "https://dash.cloudflare.com"
+            },
+            {
+                "id":"002",
+                "title": "Servers",
+                "description": "Manage scaling, power and credentials",
+                "provider": "Digital Ocean",
+                "icon": "021-folder",
+                "url": "https://cloud.digitalocean.com"
+            }
+        ]
     }
 ]
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6987ffea..13354a43 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -9,6 +9,7 @@
         :key="item.id"
         :groupId="item.id"
         :title="item.name"
+        :collapsed="item.collapsed"
         :items="filterTiles(item.items)"
       />
     </div>