Add Collapse Expand All Buttons

src/components/Road.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- more on expansion panels (and more examples): https://vuetifyjs.com/en/components/expansion-panels -->
-  <!-- this is the example I copied: https://vuetifyjs.com/en/components/expansion-panels#expand -->
+  <!-- this is the example I copied: https://v15.vuetifyjs.com/en/components/expansion-panels#expand -->
   <v-expansion-panel
     v-model="visibleList"
     expand
@@ -11,10 +11,10 @@
       v-for="index in numSems"
       :key="index-1"
       :index="index-1"
+      :is-open="visibleList[index-1]"
       :selected-subjects="selectedSubjects"
       :semester-subjects="selectedSubjects[index-1]"
       :road-i-d="roadID"
-      :is-open="visibleList[index-1]"
       :adding-from-card="addingFromCard"
       :dragging-over="dragSemesterNum===index-1"
       :hide-iap="hideIAP"
@@ -60,6 +60,9 @@
 import Semester from './Semester.vue';
 
 export default {
+  created () {
+    this.$root.$refs.Road = this;
+  },
   name: 'Semester',
   components: {
     'semester': Semester
@@ -116,6 +119,14 @@ export default {
       }
     }
   },
+  methods: {
+    all: function () {
+      this.visibleList = [...Array(this.numSems).keys()].map(_ => false);
+    },
+    none: function () {
+      this.visibleList = [...Array(this.numSems).keys()].map(_ => true);
+    }
+  },
   mounted () {
     const visibleList = JSON.parse(this.$cookies.get('visibleList' + this.roadID));
     if (this.$store.state.cookiesAllowed && visibleList) {

src/components/RoadTabs.vue

@@ -121,6 +121,30 @@
         <v-icon>add</v-icon>
       </v-btn>
     </v-flex>
+    <v-flex style="border-left: 1px solid rgba(0,0,0,.42);">
+      <v-btn
+          type="submit"
+          icon
+          flat
+          color="secondary"
+          data-cy="addRoadButton"
+          @click="all"
+      >
+        <v-icon>keyboard_arrow_down</v-icon>
+      </v-btn>
+    </v-flex>
+    <v-flex>
+      <v-btn
+          type="submit"
+          icon
+          flat
+          color="secondary"
+          data-cy="addRoadButton"
+          @click="none"
+      >
+        <v-icon>keyboard_arrow_up</v-icon>
+      </v-btn>
+    </v-flex>
   </v-layout>
 </template>
 
@@ -195,6 +219,14 @@ export default {
       this.$store.commit('setRoadName', { id: this.tabRoad, name: this.newRoadName });
       this.editDialog = false;
       this.newRoadName = '';
+    },
+    all: function () {
+      console.log('all');
+      this.$root.$refs.Road.all();
+    },
+    none: function () {
+      console.log('none');
+      this.$root.$refs.Road.none();
     }
   }
 };

src/pages/MainPage.vue

@@ -527,4 +527,8 @@ export default {
   .expanded-search {
     max-width: 22em;
   }
+
+  /deep/ div.v-toolbar__extension {
+    padding: 0 12px 0 24px !important;
+  }
 </style>