MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(front): channel form

This commit is contained in:
ArneBo 2025-02-17 17:32:17 +01:00
parent 76eae47f2f
commit c16eefedfc
3 changed files with 55 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
front/src/components/audio/ChannelForm.vue
View File

@ -165,6 +165,7 @@ defineExpose({
<template> <template>
<Layout form <Layout form
class="ui form"
@submit.prevent.stop="submit" @submit.prevent.stop="submit"
> >
<Alert <Alert
@ -250,52 +251,40 @@ defineExpose({
{{ t('components.audio.ChannelForm.label.image') }} {{ t('components.audio.ChannelForm.label.image') }}
</attachment-input> </attachment-input>
</div> </div>
<div class="ui small hidden divider" /> <Pills
<div class="ui stackable grid row"> v-model="tagList"
<div class="ten wide column"> :label="t('components.audio.ChannelForm.label.tags')"
<div class="ui field"> />
<Pills <div
v-model="tagList" v-if="newValues.content_category === 'podcast'"
:label="t('components.audio.ChannelForm.label.tags')" >
/> <label for="channel-language">
</div> {{ t('components.audio.ChannelForm.label.language') }}
</div> </label>
<div <select
v-if="newValues.content_category === 'podcast'" id="channel-language"
class="six wide column" v-model="newValues.metadata.language"
name="channel-language"
required
class="ui search selection dropdown"
> >
<div class="ui required field"> <option
<label for="channel-language"> v-for="(v, key) in metadataChoices.language"
{{ t('components.audio.ChannelForm.label.language') }} :key="key"
</label> :value="v.value"
<select >
id="channel-language" {{ v.label }}
v-model="newValues.metadata.language" </option>
name="channel-language" </select>
required
class="ui search selection dropdown"
>
<option
v-for="(v, key) in metadataChoices.language"
:key="key"
:value="v.value"
>
{{ v.label }}
</option>
</select>
</div>
</div>
</div> </div>
<div class="ui small hidden divider" />
<div class="ui field"> <div class="ui field">
<label for="channel-name"> <label for="channel-name">
{{ t('components.audio.ChannelForm.label.description') }} {{ t('components.audio.ChannelForm.label.description') }}
</label> </label>
<content-form v-model="newValues.description" /> <content-form v-model="newValues.description" />
</div> </div>
<div <template
v-if="newValues.content_category === 'podcast'" v-if="newValues.content_category === 'podcast'"
class="ui two fields"
> >
<div class="ui required field"> <div class="ui required field">
<label for="channel-itunes-category"> <label for="channel-itunes-category">
@ -337,37 +326,35 @@ defineExpose({
</option> </option>
</select> </select>
</div> </div>
</div> </template>
<div <template
v-if="newValues.content_category === 'podcast'" v-if="newValues.content_category === 'podcast'"
class="ui two fields"
> >
<Alert blue>
<span>
<i class="bi bi-info-circle-fill" />
{{ t('components.audio.ChannelForm.help.podcastFields') }}
</span>
</Alert>
<div class="ui field"> <div class="ui field">
<label for="channel-itunes-email"> <Input
{{ t('components.audio.ChannelForm.label.email') }}
</label>
<input
id="channel-itunes-email" id="channel-itunes-email"
v-model="newValues.metadata.owner_email" v-model="newValues.metadata.owner_email"
name="channel-itunes-email" name="channel-itunes-email"
type="email" type="email"
> :label="t('components.audio.ChannelForm.label.email')"
/>
</div> </div>
<div class="ui field"> <div class="ui field">
<label for="channel-itunes-name"> <Input
{{ t('components.audio.ChannelForm.label.owner') }}
</label>
<input
id="channel-itunes-name" id="channel-itunes-name"
v-model="newValues.metadata.owner_name" v-model="newValues.metadata.owner_name"
name="channel-itunes-name" name="channel-itunes-name"
maxlength="255" maxlength="255"
> :label="t('components.audio.ChannelForm.label.owner')"
/>
</div> </div>
<p> </template>
{{ t('components.audio.ChannelForm.help.podcastFields') }}
</p>
</div>
</template> </template>
</template> </template>
<div <div

12
front/src/views/auth/ProfileOverview.vue
View File

@ -13,6 +13,7 @@ import { useModal } from '~/ui/composables/useModal.ts'
import Modal from '~/components/ui/Modal.vue' import Modal from '~/components/ui/Modal.vue'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
import Link from '~/components/ui/Link.vue' import Link from '~/components/ui/Link.vue'
import Spacer from '~/components/ui/Spacer.vue'
interface Events { interface Events {
(e: 'updated', value: Actor): void (e: 'updated', value: Actor): void
@ -31,7 +32,7 @@ defineProps<Props>()
const step = ref(1) const step = ref(1)
const { isOpen, to } = useModal('createChannel') const { isOpen, to } = useModal('createChannel')
const loading = ref(false) const isLoading = ref(false)
const submittable = ref(false) const submittable = ref(false)
const category = ref('podcast') const category = ref('podcast')
@ -83,7 +84,7 @@ const createForm = ref()
ref="createForm" ref="createForm"
:object="null" :object="null"
:step="step" :step="step"
@loading="loading = $event" @loading="isLoading = $event"
@submittable="submittable = $event" @submittable="submittable = $event"
@category="category = $event" @category="category = $event"
@errored="modalContent.scrollTop = 0" @errored="modalContent.scrollTop = 0"
@ -91,11 +92,12 @@ const createForm = ref()
/> />
<template #actions> <template #actions>
<Button secondary <Button secondary
v-if="step === 1"
autofocus autofocus
@click="isOpen = false"
> >
{{ t('views.auth.ProfileOverview.button.cancel') }} {{ t('views.auth.ProfileOverview.button.cancel') }}
</Button> </Button>
<Spacer grow />
<Button secondary <Button secondary
v-if="step > 1" v-if="step > 1"
@click.stop.prevent="step -= 1" @click.stop.prevent="step -= 1"
@ -111,8 +113,8 @@ const createForm = ref()
<Button primary <Button primary
v-if="step === 2" v-if="step === 2"
type="submit" type="submit"
:disabled="!submittable && !loading" :disabled="!submittable && !isLoading"
:isLoading="loading" :isLoading="isLoading"
@click.prevent.stop="createForm.submit" @click.prevent.stop="createForm.submit"
> >
{{ t('views.auth.ProfileOverview.button.createChannel') }} {{ t('views.auth.ProfileOverview.button.createChannel') }}

8
front/src/views/channels/List.vue
View File

@ -3,15 +3,18 @@ import type { Channel } from '~/types'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios' import axios from 'axios'
import ChannelsWidget from '~/components/audio/ChannelsWidget.vue' import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
import RemoteSearchForm from '~/components/RemoteSearchForm.vue' import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
import ChannelForm from '~/components/audio/ChannelForm.vue'
import Layout from '~/components/ui/Layout.vue' import Layout from '~/components/ui/Layout.vue'
import Header from '~/components/ui/Header.vue' import Header from '~/components/ui/Header.vue'
import Modal from '~/components/ui/Modal.vue' import Modal from '~/components/ui/Modal.vue'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/Spacer.vue'
import useErrorHandler from '~/composables/useErrorHandler' import useErrorHandler from '~/composables/useErrorHandler'
@ -31,6 +34,8 @@ const labels = computed(() => ({
searchPlaceholder: t('views.channels.SubscriptionsList.placeholder.search') searchPlaceholder: t('views.channels.SubscriptionsList.placeholder.search')
})) }))
const router = useRouter()
const step = ref(1) const step = ref(1)
const submittable = ref(false) const submittable = ref(false)
const category = ref('podcast') const category = ref('podcast')
@ -165,11 +170,12 @@ const showCreateModal = ref(false)
/> />
<template #actions> <template #actions>
<Button secondary <Button secondary
v-if="step === 1"
autofocus autofocus
@click="showCreateModal = false"
> >
{{ t('views.auth.ProfileOverview.button.cancel') }} {{ t('views.auth.ProfileOverview.button.cancel') }}
</Button> </Button>
<Spacer grow />
<Button secondary <Button secondary
v-if="step > 1" v-if="step > 1"
@click.stop.prevent="step -= 1" @click.stop.prevent="step -= 1"