78 lines
1.9 KiB
Vue
78 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { Radio } from '~/types'
|
|
|
|
import { ref, computed } from 'vue'
|
|
import { useStore } from '~/store'
|
|
|
|
import RadioButton from './Button.vue'
|
|
|
|
interface Props {
|
|
type: string
|
|
customRadio?: Radio | null
|
|
objectId?: string | null
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
customRadio: null,
|
|
objectId: null
|
|
})
|
|
|
|
const store = useStore()
|
|
|
|
const isDescriptionExpanded = ref(false)
|
|
|
|
const radio = computed(() => props.customRadio
|
|
? props.customRadio
|
|
: store.getters['radios/types'][props.type]
|
|
)
|
|
|
|
const customRadioId = computed(() => props.customRadio?.id ?? null)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ui card">
|
|
<div class="content">
|
|
<h4 class="header">
|
|
<router-link
|
|
v-if="radio.id"
|
|
class="discrete link"
|
|
:to="{name: 'library.radios.detail', params: {id: radio.id}}"
|
|
>
|
|
{{ radio.name }}
|
|
</router-link>
|
|
<template v-else>
|
|
{{ radio.name }}
|
|
</template>
|
|
</h4>
|
|
<div
|
|
class="description"
|
|
:class="{expanded: isDescriptionExpanded}"
|
|
@click="isDescriptionExpanded = !isDescriptionExpanded"
|
|
>
|
|
{{ radio.description }}
|
|
</div>
|
|
</div>
|
|
<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 }}"
|
|
>
|
|
{{ $t('components.radios.Card.button.edit') }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|