From 8aec0697935ecd75688e10eb7c6a59ff48e00887 Mon Sep 17 00:00:00 2001
From: Seth Ladygo <alx-git@apparentinc.com>
Date: Thu, 25 Apr 2019 16:53:46 -0700
Subject: [PATCH] CatalogList.vue: add cat details

---
 cateditor/src/components/CatalogList.vue | 74 +++++++++++++++++++++---
 1 file changed, 67 insertions(+), 7 deletions(-)

diff --git a/cateditor/src/components/CatalogList.vue b/cateditor/src/components/CatalogList.vue
index e8af1b4..9f06ea5 100644
--- a/cateditor/src/components/CatalogList.vue
+++ b/cateditor/src/components/CatalogList.vue
@@ -9,10 +9,10 @@
     </v-layout>
 
     <v-layout row>
-      <v-flex xs7>
+      <v-flex xs8>
 
-        <v-card class="pa-2">
-          <v-tabs v-model="activeTab">
+        <v-card class="pa-0">
+          <v-tabs v-model="activeTab" color="keen_light_grey" slider-color="keen_dark_grey">
             <v-tab key="mine">My Catalogs</v-tab>
             <v-tab key="public">Public Catalogs</v-tab>
 
@@ -68,9 +68,63 @@
 
       </v-flex>
 
-      <v-flex xs5>
-        <v-card>
-          <v-card-text>{{ getSelectedCatalog }} </v-card-text>
+      <v-flex xs4>
+        <v-card v-if="selectedCatalog">
+          <v-toolbar dense color="keen_light_grey" class="elevation-0">
+            <v-toolbar-title color="primary" class="headline">
+              {{ selectedCatalog.name }}
+            </v-toolbar-title>
+          </v-toolbar>
+          <v-divider></v-divider>
+          <v-list dense>
+            <v-list-tile>
+              <v-list-tile-action class="grey--text">Season</v-list-tile-action>
+              <v-list-tile-content>{{ selectedCatalog.seasonCode }}</v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-action class="grey--text">Region</v-list-tile-action>
+              <v-list-tile-content>{{ selectedCatalog.regionCode }}</v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-action class="grey--text">Owner</v-list-tile-action>
+              <v-list-tile-content>{{ selectedCatalog.ownerName }}</v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-action class="grey--text">Created</v-list-tile-action>
+              <v-list-tile-content>{{ selectedCatalog.createdPretty }}</v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-action class="grey--text">Updated</v-list-tile-action>
+              <v-list-tile-content>{{ selectedCatalog.updatedPretty }}</v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-action class="grey--text"></v-list-tile-action>
+              <v-list-tile-content>{{ selectedCatalog.pages}} {{ selectedCatalog.pages | pluralize('page') }}</v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-action class="grey--text"></v-list-tile-action>
+              <v-list-tile-content>{{ selectedCatalog.sections}} {{ selectedCatalog.sections | pluralize('section') }}</v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-action class="grey--text"></v-list-tile-action>
+              <v-list-tile-content>{{ selectedCatalog.materials}} {{ selectedCatalog.materials | pluralize('material') }}</v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-action class="grey--text"></v-list-tile-action>
+              <v-list-tile-content v-if="selectedCatalog.public">Public</v-list-tile-content>
+              <v-list-tile-content v-else>Private</v-list-tile-content>
+            </v-list-tile>
+          </v-list>
+
+          <v-divider></v-divider>
+          <v-text>
+            <v-btn small flat>Edit</v-btn>
+            <v-btn small flat :href="selectedCatalog.pdf" target="_blank">Download</v-btn>
+            <v-btn small flat>Share</v-btn>
+          </v-text>
+        </v-card>
+        <v-card v-else>
+          <v-card-text class="text--grey">No catalog selected</v-card-text>
         </v-card>
       </v-flex>
     </v-layout>
@@ -116,7 +170,7 @@ export default {
     loadingPublicCatalogs() {
       return this.$store.getters.getLoadingPublicCatalogs
     },
-    getSelectedCatalog() {
+    selectedCatalog() {
       return this.$store.getters.getSelectedCatalog
     },
   },
@@ -137,3 +191,9 @@ export default {
   overflow-y: auto;
 }
 </style>
+
+<style>
+.theme--light.application {
+  background-color: #e1e1e1;
+}
+</style>