start with version page layout

frontend/components/Markdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="markdown">
         <v-sheet :color="color" class="darken-1" rounded elevation="2">
             <!-- eslint-disable-next-line vue/no-v-html -->
             <div v-if="!$fetchState.pending" class="pa-3 page-rendered" :class="innerClass" v-html="renderedMarkdown" />
@@ -46,4 +46,8 @@ export default class Markdown extends Vue {
 
 <style lang="scss">
 @import 'assets/markdown';
+
+.markdown {
+    min-height: 200px;
+}
 </style>

frontend/components/MarkdownEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="position: relative">
+    <div class="markdown-editor">
         <div v-show="isEditing && !preview" class="ml-4">
             <v-textarea v-model="rawEdited" outlined :rows="rawEdited.split(/\r\n|\r|\n/g).length + 3" />
         </div>
@@ -133,6 +133,11 @@ export default class MarkdownEditor extends Vue {
         top: 102px;
     }
 }
+
+.markdown-editor {
+    position: relative;
+    min-height: 200px;
+}
 </style>
 <style lang="scss">
 .v-text-field__slot textarea {

frontend/components/Tag.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="tags" :class="{ 'has-addons': cData }">
+    <div class="tags" :class="{ 'has-addons': cData && !shortForm }">
         <span
             :style="{
                 color: cColor.foreground,
@@ -8,9 +8,9 @@
             }"
             class="tag"
         >
-            {{ cName }}
+            {{ shortForm && cData ? cData : cName }}
         </span>
-        <span v-if="cData" class="tag">{{ cData }}</span>
+        <span v-if="cData && !shortForm" class="tag">{{ cData }}</span>
     </div>
 </template>
 
@@ -32,6 +32,9 @@ export default class DocsPage extends Vue {
     @Prop()
     tag!: Tag;
 
+    @Prop({ default: false })
+    shortForm!: boolean;
+
     get cName() {
         return this.tag ? this.tag.name : this.name;
     }

frontend/locales/en.ts

@@ -262,6 +262,21 @@ const msgs: LocaleMessageObject = {
                 incomplete: 'Plugin file missing {0}',
             },
         },
+        page: {
+            subheader: '{0} released this version on {1}',
+            dependencies: 'Dependencies',
+            required: '(required)',
+            adminMsg: '{0} approved this version on {1}',
+            reviewLogs: 'Review logs',
+            delete: 'Delete',
+            download: 'Download',
+            downloadExternal: 'Download External',
+            adminActions: 'Admin actions',
+            recommended: 'Recommended version',
+            partiallyApproved: 'Partially approved',
+            approved: 'Approved',
+            userAdminLogs: 'User Admin Logs',
+        },
     },
     channel: {
         new: {

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

@@ -1,24 +1,110 @@
 <template>
-    <div>{{ $nuxt.$route.name }}</div>
+    <div>
+        <v-row v-if="version">
+            <div style="float: left">
+                <h1>{{ version.name }}</h1>
+                <TagComponent :tag="channel" :short-form="true" />
+                <v-subheader>{{ $t('version.page.subheader', [version.author, $util.prettyDate(version.createdAt)]) }}</v-subheader>
+            </div>
+            <div style="float: right">
+                <v-subheader>
+                    <!-- todo approver and stuff, perm -->
+                    <i v-if="true">{{ $t('version.page.adminMsg', [version.author, $util.prettyDate(version.createdAt)]) }}</i>
+                    <!-- todo check if recommended -->
+                    <v-icon v-if="true" :title="$t('version.page.recommended')">mdi-diamond-stone</v-icon>
+                    <v-icon v-if="isChecked" :title="approvalTooltip">mdi-check-circle-outline</v-icon>
+                </v-subheader>
+                <!-- todo perms -->
+                <v-btn color="secondary" :to="$route.path + '/reviews'">{{ $t('version.page.reviewLogs') }}</v-btn>
+                <v-btn color="error" @click="deleteVersion">{{ $t('version.page.delete') }}</v-btn>
+                <!-- todo check recommended -->
+                <v-btn v-if="true" color="primary" :to="$route.path + '/download'">{{ $t('version.page.download') }}</v-btn>
+                <v-btn v-else color="primary" :to="$route.path + '/download'">{{ $t('version.page.downloadExternal') }}</v-btn>
+                <!-- todo perms -->
+                <v-menu offset-y>
+                    <template #activator="{ on, attrs }">
+                        <v-btn plain dark v-bind="attrs" v-on="on">{{ $t('version.page.adminActions') }}</v-btn>
+                    </template>
+                    <v-list>
+                        <v-list-item>
+                            <v-list-item-title>
+                                <nuxt-link to="ddd" class="text-decoration-none">
+                                    {{ $t('version.page.userAdminLogs') }}
+                                </nuxt-link>
+                            </v-list-item-title>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+            </div>
+            <v-divider />
+        </v-row>
+        <v-row v-if="version">
+            <v-col cols="12" md="8">
+                <MarkdownEditor v-if="canEdit" ref="editor" :raw="version.description" :editing.sync="editingPage" :deletable="false" @save="save" />
+                <Markdown v-else :raw="version.description" />
+            </v-col>
+            <v-col cols="12" md="4">
+                <v-list>
+                    <v-subheader>{{ $t('version.page.dependencies') }}</v-subheader>
+                </v-list>
+            </v-col>
+        </v-row>
+    </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator';
 import { Context } from '@nuxt/types';
-import { Version } from 'hangar-api';
+import { Project, Tag, Version } from 'hangar-api';
+import { Prop } from 'vue-property-decorator';
+import MarkdownEditor from '~/components/MarkdownEditor.vue';
+import Markdown from '~/components/Markdown.vue';
+import { NamedPermission, ReviewState } from '~/types/enums';
+import TagComponent from '~/components/Tag.vue';
 
 // TODO implement ProjectVersionsVersionPage
-@Component
+@Component({
+    components: { TagComponent, Markdown, MarkdownEditor },
+})
 export default class ProjectVersionsVersionPage extends Vue {
+    @Prop()
+    project!: Project;
+
     versions!: Version[];
 
+    editingPage: boolean = false;
+
+    get version(): Version | null {
+        return this.versions && this.versions.length > 0 ? this.versions[0] : null;
+    }
+
+    get channel(): Tag | null {
+        return this.version?.tags?.find((t) => t.name === 'Channel') || null;
+    }
+
+    get canEdit() {
+        return this.$util.hasPerms(NamedPermission.EDIT_VERSION);
+    }
+
+    get isChecked() {
+        return this.version?.reviewState === ReviewState.PARTIALLY_REVIEWED || this.version?.reviewState === ReviewState.REVIEWED;
+    }
+
+    get approvalTooltip() {
+        return this.version?.reviewState === ReviewState.PARTIALLY_REVIEWED ? this.$t('version.page.partiallyApproved') : this.$t('version.page.approved');
+    }
+
     async asyncData({ $api, $util, params }: Context) {
         const versions = await $api
             .request<Version[]>(`projects/${params.author}/${params.slug}/versions/${params.version}`)
             .catch($util.handlePageRequestError);
-        console.log(versions);
         return { versions };
     }
+
+    // TODO implement all of the below
+    save() {}
+
+    deleteVersion() {}
 }
 </script>