show/hide details according to item selection

Signed-off-by: Paul Tirk <paultirk@paultirk.com>

1 files changed, 22 insertions, 2 deletions

diff --git a/src/components/ContentTemplate.vue b/src/components/ContentTemplate.vue
index ae90318ed..b5c1d8e1e 100644
--- a/src/components/ContentTemplate.vue
+++ b/src/components/ContentTemplate.vue
@@ -1,5 +1,8 @@
 <template>
-  <NcAppContent>
+  <NcAppContent
+    :show-details="showDetails"
+    @update:showDetails="unselectItem()"
+  >
     <template #list>
       <NcAppContentList>
         <div class="header">
@@ -23,7 +26,7 @@
 
 <script setup lang="ts">
 
-  import { PropType, computed } from 'vue';
+  import { PropType, computed, ref, watch } from 'vue';
 
   import itemStore from '../store/item';
 
@@ -54,10 +57,27 @@
     (event: 'load-more'): void
   }>();
 
+  const showDetails = ref(false);
+
   const selectedFeedItem = computed(() => {
     return itemStore.getters.selected(itemStore.state);
   })
 
+  watch(selectedFeedItem, (newSelectedFeedItem) => {
+    if (newSelectedFeedItem) {
+      showDetails.value = true;
+    } else {
+      showDetails.value = false;
+    }
+  })
+
+  function unselectItem() {
+    itemStore.mutations.SET_SELECTED_ITEM(
+      itemStore.state,
+      {id: undefined}
+    );
+	}
+
 </script>
 
 <style scoped>