diff --git a/front/src/components/common/CollapseLink.vue b/front/src/components/common/CollapseLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..072a3282bad8bac66383f5d465ce4c8c659ca222 --- /dev/null +++ b/front/src/components/common/CollapseLink.vue @@ -0,0 +1,20 @@ +<template> + <a role="button" class="collapse link" @click.prevent="$emit('input', !value)"> + <translate v-if="isCollapsed" key="1" translate-context="*/*/Button,Label">Expand</translate> + <translate v-else key="2" translate-context="*/*/Button,Label">Collapse</translate> + <i :class="[{down: !isCollapsed}, {right: isCollapsed}, 'angle', 'icon']"></i> + </a> +</template> +<script> + +export default { + props: { + value: {type: Boolean, required: true}, + }, + computed: { + isCollapsed () { + return this.value + } + } +} +</script> diff --git a/front/src/components/globals.js b/front/src/components/globals.js index 4131c5d15980b70ed4bf1f56759e7cd184725900..e22a67a8c0272c7fa202df1a15734d0f5c6c1021 100644 --- a/front/src/components/globals.js +++ b/front/src/components/globals.js @@ -51,4 +51,9 @@ Vue.component('empty-state', EmptyState) import ExpandableDiv from '@/components/common/ExpandableDiv' Vue.component('expandable-div', ExpandableDiv) + +import CollapseLink from '@/components/common/CollapseLink' + +Vue.component('collapse-link', CollapseLink) + export default {} diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue index 32dcea4ccd87e98864fb63f0c507de9e4820400f..99c5712911ba504cb6b6a0ad27b954a4ba8dc782 100644 --- a/front/src/components/manage/moderation/ReportCard.vue +++ b/front/src/components/manage/moderation/ReportCard.vue @@ -5,8 +5,10 @@ <router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}"> <translate translate-context="Content/Moderation/Card/Short" :translate-params="{id: obj.uuid.substring(0, 8)}">Report %{ id }</translate> </router-link> + <collapse-link class="right floated" v-model="isCollapsed"></collapse-link> </div> <div class="content"> + <div class="ui hidden divider"></div> <div class="ui stackable two column grid"> <div class="column"> <table class="ui very basic unstackable table"> @@ -99,7 +101,7 @@ </div> </div> </div> - <div class="main content"> + <div class="main content" v-if="!isCollapsed"> <div class="ui stackable two column grid"> <div class="column"> <h3> @@ -247,6 +249,7 @@ export default { return { markdown: new showdown.Converter(), isLoading: false, + isCollapsed: false, } }, computed: { @@ -354,8 +357,10 @@ export default { axios.patch(url, {is_handled: v}).then((response) => { self.$emit('handled', v) self.isLoading = false + self.obj.is_handled = v let increment if (v) { + self.isCollapsed = true increment = -1 } else { increment = 1 diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue index e8a7e3ed4fd33f4ccdab6d43b25d028a298b2a82..5a3b48c6034ae327d8ae011f88c510ecc382a16b 100644 --- a/front/src/views/admin/moderation/ReportsList.vue +++ b/front/src/views/admin/moderation/ReportsList.vue @@ -55,7 +55,7 @@ <empty-state @refresh="fetchData()" :refresh="true"></empty-state> </div> <div v-else-if="mode === 'card'"> - <report-card :obj="obj" v-for="obj in result.results" :key="obj.uuid" @handled="fetchData()" @deleted="fetchData()" /> + <report-card :obj="obj" v-for="obj in result.results" :key="obj.uuid" /> </div> <action-table v-else-if="mode === 'table'"