Create a common view component for management lists

front/src/router/routes/manage.ts

@@ -32,8 +32,8 @@ export default [
       {
         path: 'artists',
         name: 'manage.library.artists',
-        component: () => import('~/views/admin/library/ArtistsList.vue'),
+        component: () => import('~/views/admin/CommonList.vue'),
-        props: route => ({ defaultQuery: route.query.q })
+        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'),
+        component: () => import('~/views/admin/CommonList.vue'),
-        props: route => ({ defaultQuery: route.query.q })
+        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'),
+        component: () => import('~/views/admin/CommonList.vue'),
-        props: route => ({ defaultQuery: route.query.q })
+        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'),
+        component: () => import('~/views/admin/CommonList.vue'),
-        props: route => ({ defaultQuery: route.query.q })
+        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'),
+        component: () => import('~/views/admin/CommonList.vue'),
-        props: route => ({ defaultQuery: route.query.q })
+        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'),
+        component: () => import('~/views/admin/CommonList.vue'),
-        props: route => ({ defaultQuery: route.query.q })
+        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'),
+        component: () => import('~/views/admin/CommonList.vue'),
-        props: route => ({ defaultQuery: route.query.q })
+        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'),
+        component: () => import('~/views/admin/CommonList.vue'),
-        props: route => ({ defaultQuery: route.query.q })
+        props: route => ({ defaultQuery: route.query.q, type: 'accounts' })
       },
       {
         path: 'accounts/:id',

front/src/views/admin/ChannelsList.vue

@@ -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>

front/src/views/admin/CommonList.vue

@@ -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>

front/src/views/admin/library/AlbumsList.vue

@@ -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>

front/src/views/admin/library/ArtistsList.vue

@@ -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>

front/src/views/admin/library/LibrariesList.vue

@@ -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>

front/src/views/admin/library/TagsList.vue

@@ -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>

front/src/views/admin/library/TracksList.vue

@@ -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>

front/src/views/admin/library/UploadsList.vue

@@ -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>

front/src/views/admin/moderation/AccountsList.vue

@@ -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>

front/src/views/admin/users/InvitationsList.vue

@@ -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>

front/src/views/admin/users/UsersList.vue

@@ -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>