add version list sidebar

frontend/locales/en.ts

@@ -312,6 +312,9 @@ const msgs: LocaleMessageObject = {
             approved: 'Approved',
             userAdminLogs: 'User Admin Logs',
         },
+        channels: 'Channels',
+        editChannels: 'Edit',
+        platforms: 'Platforms',
     },
     channel: {
         new: {

frontend/pages/_author/_slug/versions/index.vue

@@ -3,7 +3,7 @@
         <v-col cols="12" md="9">
             <v-data-iterator :items="versions.result" :server-items-length="versions.pagination.count">
                 <template #item="{ item: version }">
-                    <v-sheet width="100%" color="accent" rounded>
+                    <v-sheet width="100%" color="accent" rounded class="version">
                         <!-- todo fix url, need to get platform -->
                         <NuxtLink :to="`versions/${version.name}`">
                             <v-row>
@@ -49,14 +49,54 @@
                 </template>
             </v-data-iterator>
         </v-col>
-        <v-col cols="12" md="3">
+        <v-col cols="12" md="3" class="sidebar">
             <v-btn v-if="$perms.canCreateVersion" color="primary" block nuxt to="versions/new">
                 {{ $t('version.new.uploadNew') }}
             </v-btn>
 
-            <!-- todo channel filter -->
-            <!-- todo platform filter -->
-            <!-- todo member list -->
+            <!-- todo implement filtering -->
+            <v-card>
+                <v-card-title>
+                    {{ $t('version.channels') }}
+                    <v-checkbox class="flex-right"></v-checkbox>
+                </v-card-title>
+                <v-card-text>
+                    <v-list dense>
+                        <!-- todo channels -->
+                        <v-list-item v-for="platform in platforms" :key="platform.name">
+                            <Tag :name="platform.name" :color="platform.tagColor"></Tag>
+                            <v-checkbox class="flex-right"></v-checkbox>
+                        </v-list-item>
+                    </v-list>
+                </v-card-text>
+                <v-card-actions v-if="$perms.canEditTags">
+                    <v-btn class="flex-right" :to="`/${project.namespace.owner}/${project.namespace.slug}/channels`">
+                        {{ $t('version.editChannels') }}
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+
+            <v-card>
+                <v-card-title>
+                    {{ $t('version.platforms') }}
+                    <v-checkbox class="flex-right"></v-checkbox>
+                </v-card-title>
+                <v-card-text>
+                    <v-list dense>
+                        <v-list-item v-for="platform in platforms" :key="platform.name">
+                            <Tag :name="platform.name" :color="platform.tagColor"></Tag>
+                            <v-checkbox class="flex-right"></v-checkbox>
+                        </v-list-item>
+                    </v-list>
+                </v-card-text>
+                <v-card-actions></v-card-actions>
+            </v-card>
+
+            <MemberList
+                :can-edit="$perms.canManageSubjectMembers"
+                :manage-url="`/${project.namespace.owner}/${project.namespace.slug}/settings`"
+                :members="project.members"
+            ></MemberList>
         </v-col>
     </v-row>
 </template>
@@ -64,13 +104,15 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'nuxt-property-decorator';
 import { PropType } from 'vue';
-import { HangarProject } from 'hangar-internal';
+import { HangarProject, IPlatform } from 'hangar-internal';
 import { Context } from '@nuxt/types';
 import { PaginatedResult, Tag as ApiTag, Version } from 'hangar-api';
 import Tag from '~/components/Tag.vue';
+import MemberList from '~/components/MemberList.vue';
+import { RootState } from '~/store';
 
 @Component({
-    components: { Tag },
+    components: { MemberList, Tag },
 })
 export default class ProjectVersionsPage extends Vue {
     versions!: PaginatedResult<Version>;
@@ -78,6 +120,10 @@ export default class ProjectVersionsPage extends Vue {
     @Prop({ type: Object as PropType<HangarProject>, required: true })
     project!: HangarProject;
 
+    get platforms(): IPlatform[] {
+        return Array.from((this.$store.state as RootState).platforms.values());
+    }
+
     async asyncData({ params, $api, $util }: Context) {
         const versions = await $api
             .request<PaginatedResult<Version>>(`projects/${params.author}/${params.slug}/versions`, false, 'get', {
@@ -104,7 +150,7 @@ export default class ProjectVersionsPage extends Vue {
 </script>
 
 <style lang="scss" scoped>
-.v-sheet {
+.version {
     padding: 10px;
     transition: all 0.2s ease-in-out;
 
@@ -116,4 +162,21 @@ export default class ProjectVersionsPage extends Vue {
         text-decoration: none;
     }
 }
+
+.sidebar {
+    .v-input--selection-controls {
+        margin-top: 0;
+    }
+
+    .v-card__text {
+        padding-bottom: 0;
+    }
+
+    .v-card {
+        margin-top: 20px;
+    }
+    &.v-list .v-card {
+        margin-top: 0;
+    }
+}
 </style>