Widget.vue 2.25 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
<template>
  <div>
    <h2 class="ui center aligned header">
      Research
      <div class="sub header">Purchase research to further increase your throughput.</div>
    </h2>
    <div class="ui secondary pointing menu">
      <a :class="[{'active': currentTab === 'available'}, 'item']" @click="currentTab = 'available'">
        Available
        <div class="ui teal left label">{{ availableResearches.length }}</div>
      </a>
      <a :class="[{'active': currentTab === 'purchased'}, 'item']" @click="currentTab = 'purchased'">
        Purchased
        <div class="ui left label">{{ purchasedResearches.length }}</div>
      </a>
    </div>
    <div class="ui hidden divider"></div>
    <div class="ui three stackable cards">
      <template v-if="currentTab === 'available'">
        <research-detail
          :key="research.id"
          v-for="research in availableResearches"
          v-if="research.visible"
          :research="research">
          <slot name="post-content">
            <div
              @click="$store.dispatch('research/purchase', research.id)"
              :class="['ui', 'bottom', 'attached', {'teal': research.price <= information}, 'button']">
              Purchase for ${{ research.price|idleNumber }}
            </div>
          </slot>
        </research-detail>
      </template>
      <template v-else="currentTab === 'purchased'">
        <research-detail
          :key="research.id"
          v-for="research in purchasedResearches"
          v-if="research.visible"
          :research="research">
        </research-detail>
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import ResearchDetail from './Detail'

// import Popup from '@/components/semantic/Popup'
// import PopupWrapper from '@/components/semantic/PopupWrapper'

export default {
  components: {
    ResearchDetail
    // PopupWrapper,
    // Popup
  },
  data: function () {
    return {
      currentTab: 'available'
    }
  },
  computed: {
    ...mapState({
      information: state => state.exchange.dollars
    }),
    ...mapGetters({
      availableResearches: 'research/availableResearches',
      purchasedResearches: 'research/purchasedResearches',
      allResearches: 'research/allResearches'
    })
  }
}
</script>