137 lines
3.0 KiB
Vue
137 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import type { Radio } from '~/types'
|
|
|
|
import { ref, computed } from 'vue'
|
|
import { useStore } from '~/store'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import RadioButton from './Button.vue'
|
|
import Card from '~/components/ui/Card.vue'
|
|
import Button from '~/components/ui/Button.vue'
|
|
import Spacer from '~/components/ui/Spacer.vue'
|
|
|
|
interface Props {
|
|
type: string
|
|
customRadio?: Radio | null
|
|
objectId?: string | null
|
|
}
|
|
|
|
const { t } = useI18n()
|
|
|
|
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>
|
|
<Card
|
|
v-if="radio.id"
|
|
small
|
|
blue
|
|
:title="radio.name"
|
|
:to="{name: 'library.radios.detail', params: {id: radio.id}}"
|
|
>
|
|
<template #topright>
|
|
<radio-button
|
|
:type="type"
|
|
:custom-radio-id="customRadioId"
|
|
:object-id="objectId"
|
|
playOnly
|
|
/>
|
|
</template>
|
|
|
|
<template #default>
|
|
<user-link
|
|
v-if="radio.user"
|
|
:user="radio.user"
|
|
:avatar="false"
|
|
discrete
|
|
/>
|
|
<Spacer />
|
|
<div
|
|
class="description"
|
|
:class="{expanded: isDescriptionExpanded}"
|
|
@click="isDescriptionExpanded = !isDescriptionExpanded"
|
|
>
|
|
{{ radio.description }}
|
|
</div>
|
|
</template>
|
|
|
|
<template #action>
|
|
<Button
|
|
v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
|
|
primary
|
|
full
|
|
:to="{name: 'library.radios.edit', params: {id: customRadioId }}"
|
|
>
|
|
{{ t('components.radios.Card.button.edit') }}
|
|
</Button>
|
|
</template>
|
|
</Card>
|
|
<Card
|
|
v-else
|
|
small
|
|
solid
|
|
blue
|
|
icon="bi-boombox-fill"
|
|
:title="radio.name"
|
|
>
|
|
|
|
<template #default>
|
|
<user-link
|
|
v-if="radio.user"
|
|
discrete
|
|
:user="radio.user"
|
|
:avatar="false"
|
|
/>
|
|
<Spacer v-if="radio.user" />
|
|
<div
|
|
class="description"
|
|
:class="{expanded: isDescriptionExpanded}"
|
|
@click="isDescriptionExpanded = !isDescriptionExpanded"
|
|
>
|
|
{{ radio.description }}
|
|
</div>
|
|
</template>
|
|
|
|
<template #action>
|
|
<radio-button
|
|
:type="type"
|
|
:custom-radio-id="customRadioId"
|
|
:object-id="objectId"
|
|
full
|
|
/>
|
|
<Button
|
|
v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
|
|
secondary
|
|
:to="{name: 'library.radios.edit', params: {id: customRadioId }}"
|
|
>
|
|
{{ t('components.radios.Card.button.edit') }}
|
|
</Button>
|
|
</template>
|
|
</Card>
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.play-button.is-icon-only {
|
|
top: 16px;
|
|
right: 16px;
|
|
}
|
|
h6.title {
|
|
font-size: 3em;
|
|
}
|
|
</style>
|