catalog list: get 'my catalogs' somewhat working

cateditor/src/components/CatalogList.vue

@@ -1,5 +1,81 @@
 <template>
-  <v-btn color="primary">I am catalog list</v-btn>
+  <v-container fluid grid-list-lg>
+    <v-layout row>
+      <v-flex xs3>
+        <v-btn color="primary">New Catalog</v-btn>
+      </v-flex>
+      <v-flex xs9>
+      </v-flex>
+    </v-layout>
+
+    <v-layout row>
+      <v-flex xs7>
+
+        <v-card class="pa-2">
+          <v-tabs v-model="activeTab">
+            <v-tab key="mine">My Catalogs</v-tab>
+            <v-tab key="public">Public Catalogs</v-tab>
+
+            <v-tab-item key="mine">
+              <v-card flat>
+
+                <v-card-title>
+                  <v-spacer></v-spacer>
+                  <v-text-field
+                    v-model="search"
+                    append-icon="search"
+                    label="Search"
+                    single-line
+                    hide-details
+                  ></v-text-field>
+                </v-card-title>
+
+                <v-data-table
+                  :headers="headers"
+                  :items="myCatalogs"
+                  :search="search"
+                  :loading="loadingMyCatalogs"
+                  disable-initial-sort
+                  class="scroll-area"
+                >
+                  <template v-slot:items="cats">
+                    <tr @click="selectCatalog(cats.item.id)">
+                      <td>{{ cats.item.seasonCode }}</td>
+                      <td>{{ cats.item.name }}</td>
+                      <td>{{ cats.item.updatedPretty }}</td>
+                    </tr>
+                  </template>
+
+                  <template v-slot:no-results>
+                    No catalogs match "{{ search }}"
+                  </template>
+
+                  <template v-slot:no-data>
+                    No Catalogs
+                  </template>
+                </v-data-table>
+
+              </v-card>
+            </v-tab-item>
+
+            <v-tab-item key="public">
+              <v-card flat>
+                <v-card-text>public</v-card-text>
+              </v-card>
+            </v-tab-item>
+          </v-tabs>
+        </v-card>
+
+      </v-flex>
+
+      <v-flex xs5>
+        <v-card>
+          <v-card-text>{{ getSelectedCatalog }} </v-card-text>
+        </v-card>
+      </v-flex>
+    </v-layout>
+
+  </v-container>
 </template>
 
 <script>
@@ -8,10 +84,56 @@ export default {
   components: {
   },
   data: () => ({
-  })
+    activeTab: null,
+    search: '',
+    headers: [
+      {
+        text: 'Season',
+        align: 'left',
+        value: 'seasonCode'
+      },
+      {
+        text: 'Name',
+        align: 'left',
+        value: 'name'
+      },
+      {
+        text: 'Updated',
+        value: 'updated'
+      },
+    ],
+  }),
+  computed: {
+    myCatalogs() {
+      return this.$store.getters.getMyCatalogs
+    },
+    loadingMyCatalogs() {
+      return this.$store.getters.getLoadingMyCatalogs
+    },
+    publicCatalogs() {
+      return this.$store.getters.getPublicCatalogs
+    },
+    loadingPublicCatalogs() {
+      return this.$store.getters.getLoadingPublicCatalogs
+    },
+    getSelectedCatalog() {
+      return this.$store.getters.getSelectedCatalog
+    },
+  },
+  methods: {
+    selectCatalog: function(id) {
+      this.$store.dispatch('setSelectedCatalog', id)
+    }
+  },
+  mounted: function() {
+    this.$store.dispatch('loadMyCatalogs')
+  }
 }
 </script>
 
-<style>
-
+<style scoped>
+.scroll-area {
+  height: 300px;
+  overflow-y: auto;
+}
 </style>