diff --git a/frontend/src/components/subscriptions/Subscription.vue b/frontend/src/components/subscriptions/Subscription.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd396ca1750e546281163c23f21ab41e4a427c7a
--- /dev/null
+++ b/frontend/src/components/subscriptions/Subscription.vue
@@ -0,0 +1,45 @@
+<template>
+ <v-list-tile
+ exact
+ :to="{name: 'subscription', params: {pk: subscriptionPk}}"
+ >
+ <v-list-tile-content class="ml-3">
+ {{query_key ? query_key : 'Active'}}
+ </v-list-tile-content>
+ <v-list-tile-action-text>
+ {{stageMap[feedback_stage]}}
+ </v-list-tile-action-text>
+ </v-list-tile>
+</template>
+
+<script>
+ export default {
+ name: 'subscription',
+ props: {
+ subscriptionPk: {
+ types: String,
+ required: true
+ },
+ feedback_stage: {
+ type: String,
+ required: true
+ },
+ query_key: {
+ type: String
+ }
+ },
+ data () {
+ return {
+ stageMap: {
+ 'feedback-creation': 'create',
+ 'feedback-validation': 'validate',
+ 'feedback-conflict-resolution': 'conflict'
+ }
+ }
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/subscriptions/SubscriptionList.vue b/frontend/src/components/subscriptions/SubscriptionList.vue
index bc165e4b7cecc20b5f6543308e3e565112df7d64..f3e44747bd523c4b10d54a06cab3ed303b4b75f5 100644
--- a/frontend/src/components/subscriptions/SubscriptionList.vue
+++ b/frontend/src/components/subscriptions/SubscriptionList.vue
@@ -8,56 +8,22 @@
</v-toolbar>
<v-list :dense="sidebar" v-if="!sidebar || (sidebar && !sideBarCollapsed)">
<div v-for="item in subscriptionTypes" :key="item.type">
- <v-list-tile>
- <v-list-tile-content>
- <v-list-tile-title>
- {{ item.name }}
- </v-list-tile-title>
- <v-list-tile-sub-title>
- {{ item.description }}
- </v-list-tile-sub-title>
- </v-list-tile-content>
- <v-list-tile-action v-if="subscriptions[item.type].length > 0">
- <v-btn icon @click="item.expanded = !item.expanded">
- <v-icon v-if="item.expanded">keyboard_arrow_up</v-icon>
- <v-icon v-else>keyboard_arrow_down</v-icon>
- </v-btn>
- </v-list-tile-action>
- <v-list-tile-action
- v-if="!item.hasOwnProperty('permission') || item.permission()"
- >
- <v-menu
- offset-x
- :min-width="500"
- :close-on-content-click="false"
- :nudge-width="200"
- v-model="subscriptionCreateMenu[item.type]"
- >
- <v-btn small flat icon slot="activator">
- <v-icon>add</v-icon>
- </v-btn>
- <subscription-creation
- :title="item.name"
- :type="item.type"
- :keyItems="possibleKeys[item.type]"
- />
- </v-menu>
- </v-list-tile-action>
- </v-list-tile>
- <v-list-tile
- exact
- v-if="subscriptions[item.type].length > 0 && item.expanded"
- v-for="subscription in subscriptions[item.type]"
- :key="subscription.pk"
- :to="{name: 'subscription', params: {pk: subscription['pk']}}"
+ <subscription-type
+ v-bind="item"
+ :empty-subscription-type="subscriptions[item.type].length === 0"
+ :possible-subscription-keys="possibleKeys[item.type]"
+ @toggleExpand="item.expanded = !item.expanded"
>
- <v-list-tile-content class="ml-3">
- {{subscription.query_key ? subscription.query_key : 'Active'}}
- </v-list-tile-content>
- <v-list-tile-action-text>
- {{stageMap[subscription.feedback_stage]}}
- </v-list-tile-action-text>
- </v-list-tile>
+ <subscription
+ v-for="subscription in subscriptions[item.type]"
+ :key="subscription.pk"
+ :subscription-pk="subscription.pk"
+ :feedback_stage="subscription.feedback_stage"
+ :query_key="subscription.query_key"
+ >
+
+ </subscription>
+ </subscription-type>
</div>
</v-list>
</v-card>
@@ -66,9 +32,14 @@
<script>
import {mapGetters, mapActions, mapState} from 'vuex'
import SubscriptionCreation from '@/components/subscriptions/SubscriptionCreation'
+ import SubscriptionType from '@/components/subscriptions/SubscriptionType'
+ import Subscription from '@/components/subscriptions/Subscription'
export default {
- components: {SubscriptionCreation},
+ components: {
+ Subscription,
+ SubscriptionType,
+ SubscriptionCreation},
name: 'subscription-list',
props: {
sidebar: {
@@ -79,11 +50,6 @@
data () {
return {
subscriptionCreateMenu: {},
- stageMap: {
- 'feedback-creation': 'create',
- 'feedback-validation': 'validate',
- 'feedback-conflict-resolution': 'conflict'
- },
subscriptionTypes: [
{
name: 'Random',
@@ -95,7 +61,13 @@
name: 'Exam',
type: 'exam',
description: 'Just submissions for the specified exam.',
- expanded: true
+ expanded: true,
+ createPermission: () => {
+ return this.$store.getters.isReviewer
+ },
+ viewPermission: () => {
+ return this.$store.getters.isReviewer
+ }
},
{
name: 'Submission Type',
@@ -108,7 +80,10 @@
type: 'student',
description: 'The submissions of a student.',
expanded: true,
- permission: () => {
+ createPermission: () => {
+ return this.$store.getters.isReviewer
+ },
+ viewPermission: () => {
return this.$store.getters.isReviewer
}
}
@@ -150,7 +125,8 @@
if (Object.keys(this.$store.state.submissionTypes).length === 0) {
this.updateSubmissionTypes(['name'])
}
- if (Object.keys(this.$store.state.examTypes).length === 0) {
+ if (Object.keys(this.$store.state.examTypes).length === 0 &&
+ this.$store.getters.isReviewer) {
this.getExamTypes()
}
}
diff --git a/frontend/src/components/subscriptions/SubscriptionType.vue b/frontend/src/components/subscriptions/SubscriptionType.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0b59b87bdbb40294b36fc4c93f05c09d324efbec
--- /dev/null
+++ b/frontend/src/components/subscriptions/SubscriptionType.vue
@@ -0,0 +1,91 @@
+<template>
+ <div>
+ <v-list-tile v-if="viewPermission()">
+ <v-list-tile-content>
+ <v-list-tile-title>
+ {{ name }}
+ </v-list-tile-title>
+ <v-list-tile-sub-title>
+ {{ description }}
+ </v-list-tile-sub-title>
+ </v-list-tile-content>
+ <v-list-tile-action v-if="!emptySubscriptionType">
+ <v-btn icon @click="$emit('toggleExpand')">
+ <v-icon v-if="expanded">keyboard_arrow_up</v-icon>
+ <v-icon v-else>keyboard_arrow_down</v-icon>
+ </v-btn>
+ </v-list-tile-action>
+ <v-list-tile-action
+ v-if="createPermission()"
+ >
+ <v-menu
+ offset-x
+ :min-width="500"
+ :close-on-content-click="false"
+ :nudge-width="200"
+ v-model="subscriptionCreateMenu"
+ >
+ <v-btn small flat icon slot="activator">
+ <v-icon>add</v-icon>
+ </v-btn>
+ <subscription-creation
+ :title="name"
+ :type="type"
+ :keyItems="possibleSubscriptionKeys"
+ />
+ </v-menu>
+ </v-list-tile-action>
+ </v-list-tile>
+ <slot v-if="expanded"></slot>
+ </div>
+</template>
+
+<script>
+ import SubscriptionCreation from '@/components/subscriptions/SubscriptionCreation'
+
+ export default {
+ components: {SubscriptionCreation},
+ name: 'subscription-type',
+ props: {
+ name: {
+ type: String,
+ required: true
+ },
+ type: {
+ type: String,
+ required: true
+ },
+ description: {
+ type: String
+ },
+ expanded: {
+ type: Boolean,
+ default: true
+ },
+ emptySubscriptionType: {
+ type: Boolean,
+ required: true
+ },
+ createPermission: {
+ type: Function,
+ default: () => true
+ },
+ viewPermission: {
+ type: Function,
+ default: () => true
+ },
+ possibleSubscriptionKeys: {
+ type: Array
+ }
+ },
+ data () {
+ return {
+ subscriptionCreateMenu: {}
+ }
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>