Card.vue 2.04 KB
Newer Older
1
<template>
Georg Krause's avatar
Georg Krause committed
2
3
4
  <div class="ui card">
    <div class="content">
      <h4 class="header">
Eliot Berriot's avatar
Eliot Berriot committed
5
        <router-link
Georg Krause's avatar
Georg Krause committed
6
7
8
9
10
          v-if="radio.id"
          class="discrete link"
          :to="{name: 'library.radios.detail', params: {id: radio.id}}"
        >
          {{ radio.name }}
Eliot Berriot's avatar
Eliot Berriot committed
11
        </router-link>
Georg Krause's avatar
Georg Krause committed
12
13
14
15
        <template v-else>
          {{ radio.name }}
        </template>
      </h4>
16
17
18
19
20
      <div
        class="description"
        :class="{expanded: isDescriptionExpanded}"
        @click="isDescriptionExpanded = !isDescriptionExpanded"
      >
Georg Krause's avatar
Georg Krause committed
21
        {{ radio.description }}
22
23
      </div>
    </div>
Georg Krause's avatar
Georg Krause committed
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
    <div class="extra content">
      <user-link
        v-if="radio.user"
        :user="radio.user"
        class="left floated"
      />
      <div class="ui hidden divider" />
      <radio-button
        class="right floated button"
        :type="type"
        :custom-radio-id="customRadioId"
        :object-id="objectId"
      />
      <router-link
        v-if="$store.state.auth.authenticated && type === 'custom' && radio.user.id === $store.state.auth.profile.id"
        class="ui success button right floated"
        :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
      >
        <translate translate-context="Content/*/Button.Label/Verb">
          Edit
        </translate>
      </router-link>
    </div>
  </div>
48
49
50
51
52
53
54
55
56
</template>

<script>
import RadioButton from './Button'

export default {
  components: {
    RadioButton
  },
Georg Krause's avatar
Georg Krause committed
57
58
  props: {
    type: { type: String, required: true, default: '' },
Georg Krause's avatar
Georg Krause committed
59
    customRadio: { type: Object, required: false, default: () => { return {} } },
Georg Krause's avatar
Georg Krause committed
60
    objectId: { type: String, required: false, default: null }
Georg Krause's avatar
Georg Krause committed
61
  },
62
63
64
65
66
  data () {
    return {
      isDescriptionExpanded: false
    }
  },
67
68
  computed: {
    radio () {
Georg Krause's avatar
Georg Krause committed
69
      if (Object.keys(this.customRadio).length > 0) {
Eliot Berriot's avatar
Eliot Berriot committed
70
71
        return this.customRadio
      }
72
      return this.$store.getters['radios/types'][this.type]
Eliot Berriot's avatar
Eliot Berriot committed
73
74
75
76
77
78
    },
    customRadioId: function () {
      if (this.customRadio) {
        return this.customRadio.id
      }
      return null
79
80
81
82
    }
  }
}
</script>