Create a common view component for management lists
This commit is contained in:
wvffle
Georg Krause
parent
03e29b3fbc
commit
7d55d33067
|
|
@ -32,8 +32,8 @@ export default [
|
|||
{
|
||||
path: 'artists',
|
||||
name: 'manage.library.artists',
|
||||
component: () => import('~/views/admin/library/ArtistsList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q })
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q, type: 'artists' })
|
||||
},
|
||||
{
|
||||
path: 'artists/:id',
|
||||
|
|
@ -44,8 +44,8 @@ export default [
|
|||
{
|
||||
path: 'channels',
|
||||
name: 'manage.channels',
|
||||
component: () => import('~/views/admin/ChannelsList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q })
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q, type: 'channels' })
|
||||
},
|
||||
{
|
||||
path: 'channels/:id',
|
||||
|
|
@ -56,8 +56,8 @@ export default [
|
|||
{
|
||||
path: 'albums',
|
||||
name: 'manage.library.albums',
|
||||
component: () => import('~/views/admin/library/AlbumsList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q })
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q, type: 'albums' })
|
||||
},
|
||||
{
|
||||
path: 'albums/:id',
|
||||
|
|
@ -68,8 +68,8 @@ export default [
|
|||
{
|
||||
path: 'tracks',
|
||||
name: 'manage.library.tracks',
|
||||
component: () => import('~/views/admin/library/TracksList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q })
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q, type: 'tracks' })
|
||||
},
|
||||
{
|
||||
path: 'tracks/:id',
|
||||
|
|
@ -80,8 +80,8 @@ export default [
|
|||
{
|
||||
path: 'libraries',
|
||||
name: 'manage.library.libraries',
|
||||
component: () => import('~/views/admin/library/LibrariesList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q })
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q, type: 'libraries' })
|
||||
},
|
||||
{
|
||||
path: 'libraries/:id',
|
||||
|
|
@ -92,8 +92,8 @@ export default [
|
|||
{
|
||||
path: 'uploads',
|
||||
name: 'manage.library.uploads',
|
||||
component: () => import('~/views/admin/library/UploadsList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q })
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q, type: 'uploads' })
|
||||
},
|
||||
{
|
||||
path: 'uploads/:id',
|
||||
|
|
@ -104,8 +104,8 @@ export default [
|
|||
{
|
||||
path: 'tags',
|
||||
name: 'manage.library.tags',
|
||||
component: () => import('~/views/admin/library/TagsList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q })
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q, type: 'tags' })
|
||||
},
|
||||
{
|
||||
path: 'tags/:id',
|
||||
|
|
@ -123,12 +123,14 @@ export default [
|
|||
{
|
||||
path: 'users',
|
||||
name: 'manage.users.users.list',
|
||||
component: () => import('~/views/admin/users/UsersList.vue')
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ type: 'users' })
|
||||
},
|
||||
{
|
||||
path: 'invitations',
|
||||
name: 'manage.users.invitations.list',
|
||||
component: () => import('~/views/admin/users/InvitationsList.vue')
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ type: 'invitations' })
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -151,8 +153,8 @@ export default [
|
|||
{
|
||||
path: 'accounts',
|
||||
name: 'manage.moderation.accounts.list',
|
||||
component: () => import('~/views/admin/moderation/AccountsList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q })
|
||||
component: () => import('~/views/admin/CommonList.vue'),
|
||||
props: route => ({ defaultQuery: route.query.q, type: 'accounts' })
|
||||
},
|
||||
{
|
||||
path: 'accounts/:id',
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ labels.title }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
<channels-table
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChannelsTable from '~/components/manage/ChannelsTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChannelsTable
|
||||
},
|
||||
props: {
|
||||
defaultQuery: { type: String, required: false, default: '' }
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
title: this.$pgettext('*/*/*', 'Channels')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<script setup lang="ts">
|
||||
import AccountsTable from '~/components/manage/moderation/AccountsTable.vue'
|
||||
import ArtistsTable from '~/components/manage/library/ArtistsTable.vue'
|
||||
import AlbumsTable from '~/components/manage/library/AlbumsTable.vue'
|
||||
import ChannelsTable from '~/components/manage/ChannelsTable.vue'
|
||||
import InvitationForm from '~/components/manage/users/InvitationForm.vue'
|
||||
import InvitationsTable from '~/components/manage/users/InvitationsTable.vue'
|
||||
import LibrariesTable from '~/components/manage/library/LibrariesTable.vue'
|
||||
import TagsTable from '~/components/manage/library/TagsTable.vue'
|
||||
import TracksTable from '~/components/manage/library/TracksTable.vue'
|
||||
import UploadsTable from '~/components/manage/library/UploadsTable.vue'
|
||||
import UsersTable from '~/components/manage/users/UsersTable.vue'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
|
||||
type ViewType = 'accounts' | 'albums' | 'artists' | 'channels' | 'invitations' | 'libraries' | 'tags' | 'tracks' | 'uploads' | 'users'
|
||||
|
||||
interface Props {
|
||||
defaultQuery?: string,
|
||||
type: ViewType
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
defaultQuery: ''
|
||||
})
|
||||
|
||||
const { $pgettext } = useGettext()
|
||||
const labels = computed(() => ({
|
||||
accounts: $pgettext('*/Moderation/Title', 'Accounts'),
|
||||
albums: $pgettext('*/*/*', 'Albums'),
|
||||
artists: $pgettext('*/*/*/Noun', 'Artists'),
|
||||
channels: $pgettext('*/*/*', 'Channels'),
|
||||
invitations: $pgettext('*/Admin/*/Noun', 'Invitations'),
|
||||
libraries: $pgettext('*/*/*/Noun', 'Libraries'),
|
||||
tags: $pgettext('*/*/*/Noun', 'Tags'),
|
||||
tracks: $pgettext('*/*/*', 'Tracks'),
|
||||
uploads: $pgettext('*/*/*', 'Uploads'),
|
||||
users: $pgettext('*/*/*/Noun', 'Users')
|
||||
}))
|
||||
|
||||
const title = computed(() => labels.value[props.type])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main v-title="title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<invitation-form v-if="type === 'invitations'" />
|
||||
<div class="ui hidden divider" />
|
||||
<accounts-table
|
||||
v-if="type === 'accounts'"
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
<albums-table
|
||||
v-else-if="type === 'albums'"
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
<artists-table
|
||||
v-else-if="type === 'artists'"
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
<channels-table
|
||||
v-else-if="type === 'channels'"
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
<invitations-table
|
||||
v-else-if="type === 'invitations'"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
<libraries-table
|
||||
v-else-if="type === 'libraries'"
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
<tags-table
|
||||
v-else-if="type === 'tags'"
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
<tracks-table
|
||||
v-else-if="type === 'tracks'"
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
<uploads-table
|
||||
v-else-if="type === 'uploads'"
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
<users-table
|
||||
v-else-if="type === 'users'"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ labels.title }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
<albums-table
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlbumsTable from '~/components/manage/library/AlbumsTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AlbumsTable
|
||||
},
|
||||
props: {
|
||||
defaultQuery: { type: String, required: false, default: '' }
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
title: this.$pgettext('*/*/*', 'Albums')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import ArtistsTable from '~/components/manage/library/ArtistsTable.vue'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
defaultQuery?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
defaultQuery: ''
|
||||
})
|
||||
|
||||
const { $pgettext } = useGettext()
|
||||
const labels = computed(() => ({
|
||||
title: $pgettext('*/*/*/Noun', 'Artists')
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ labels.title }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
|
||||
<artists-table
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
:ordering-config-name="null"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ labels.title }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
<libraries-table
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LibrariesTable from '~/components/manage/library/LibrariesTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LibrariesTable
|
||||
},
|
||||
props: {
|
||||
defaultQuery: { type: String, required: false, default: '' }
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
title: this.$pgettext('*/*/*/Noun', 'Libraries')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ labels.title }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
<tags-table
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TagsTable from '~/components/manage/library/TagsTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TagsTable
|
||||
},
|
||||
props: {
|
||||
defaultQuery: { type: String, required: false, default: '' }
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
title: this.$pgettext('*/*/*/Noun', 'Tags')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ labels.title }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
<tracks-table
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TracksTable from '~/components/manage/library/TracksTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TracksTable
|
||||
},
|
||||
props: {
|
||||
defaultQuery: { type: String, required: false, default: '' }
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
title: this.$pgettext('*/*/*', 'Tracks')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ labels.title }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
<uploads-table
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadsTable from '~/components/manage/library/UploadsTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UploadsTable
|
||||
},
|
||||
props: {
|
||||
defaultQuery: { type: String, required: false, default: '' }
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
title: this.$pgettext('*/*/*', 'Uploads')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<template>
|
||||
<main v-title="labels.accounts">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
<translate translate-context="*/Moderation/Title">
|
||||
Accounts
|
||||
</translate>
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
<accounts-table
|
||||
:update-url="true"
|
||||
:default-query="defaultQuery"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccountsTable from '~/components/manage/moderation/AccountsTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AccountsTable
|
||||
},
|
||||
props: {
|
||||
defaultQuery: { type: String, required: false, default: '' }
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
accounts: this.$pgettext('*/Moderation/Title', 'Accounts')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<template>
|
||||
<main v-title="labels.invitations">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ labels.invitations }}
|
||||
</h2>
|
||||
<invitation-form />
|
||||
<div class="ui hidden divider" />
|
||||
<invitations-table />
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InvitationForm from '~/components/manage/users/InvitationForm.vue'
|
||||
import InvitationsTable from '~/components/manage/users/InvitationsTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InvitationForm,
|
||||
InvitationsTable
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
invitations: this.$pgettext('*/Admin/*/Noun', 'Invitations')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<main v-title="labels.users">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ labels.users }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
<users-table />
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UsersTable from '~/components/manage/users/UsersTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UsersTable
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
users: this.$pgettext('*/*/*/Noun', 'Users')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue