#132: Move Toolset content from data to slots

Duke-MatSci · Mar 10, 2022 · ca138eb · ca138eb
1 parent 22ec9a8
commit ca138eb
Showing 1 changed file with 30 additions and 42 deletions.
diff --git a/app/src/pages/nanomine/toolSets/ToolSetTemplate.vue b/app/src/pages/nanomine/toolSets/ToolSetTemplate.vue
@@ -1,70 +1,58 @@
 <template>
-  <div :class="`section_${toolSetName}`" :key="toolSetName">
-    <tool-card class="md-layout-item tool-card" v-if="card" v-bind="cardContent"></tool-card>
-    <div v-else class="wrapper md-layout md-alignment-top-center">
-      <div class="team_header md-layout-item md-size-80">
-        <h1 class="visualize_header-h1 teams_header">{{ pageContent.title }}</h1>
-      </div>
-      <div class="teams_text md-layout-item md-size-80">
-        {{ pageContent.text }}
-      </div>
-
-      <div class="md-layout-item md-size-80 md-layout md-alignment-top-space-around md-gutter">
-        <component class="md-layout-item" v-for="tool of toolCards" v-bind:is="tool" :key="tool" card></component>
-      </div>
+  <tool-card class="md-layout-item tool-card" v-if="card" :name="name">
+    <template v-for="(_, slotName) in $scopedSlots" :slot="slotName">
+      <slot :name="slotName" v-if="cardSlots.includes(name)"></slot>
+    </template>
+  </tool-card>
+  <div v-else :class="`section_${name}`" class="wrapper md-layout md-alignment-top-center">
+    <div class="team_header md-layout-item md-size-80">
+      <h1 class="visualize_header-h1 teams_header">
+        <slot name="title"></slot>
+      </h1>
+    </div>
+    <div class="teams_text md-layout-item md-size-80">
+      <slot name="content"></slot>
+    </div>
+    <div class="md-layout-item md-size-80 md-layout md-alignment-top-space-around md-gutter">
+      <slot name="cards"></slot>
     </div>
   </div>
 </template>
 <script>
 import ToolCard from '@/components/nanomine/ToolCard'
-import ReferenceContainer from '@/components/nanomine/ReferenceContainer'
 import ToolComponents from '../tools'
 import ToolSetComponents from '.'
 
 export default {
   name: 'tool-set-template',
   components: {
     ToolCard,
-    ReferenceContainer,
     ...ToolComponents,
     ...ToolSetComponents
   },
   props: {
-    pageContent: {
-      type: Object,
-      required: true
-    },
     card: {
       type: Boolean,
       required: false,
       default: false
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    header: {
+      type: String,
+      required: false
     }
   },
   data: function () {
-    return {}
-  },
-  created () {
-    this.$store.commit('setAppHeaderInfo', { icon: 'workspaces', name: 'Tools' })
+    return {
+      cardSlots: ['image', 'title', 'content', 'actions']
+    }
   },
-  computed: {
-    toolSetName: function () {
-      return this.pageContent.name || ''
-    },
-    cardContent: function () {
-      return {
-        ...this.pageContent,
-        text: this.pageContent.description
-      }
-    },
-    toolCards: function () {
-      const toolsList = []
-      if (this.pageContent.tools) {
-        toolsList.push(...this.pageContent.tools)
-      }
-      if (this.pageContent.toolSets) {
-        toolsList.push(...this.pageContent.toolSets)
-      }
-      return toolsList
+  mounted () {
+    if (!this.card && this.header) {
+      this.$store.commit('setAppHeaderInfo', { icon: 'workspaces', name: this.header })
     }
   }
 }