mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
render just one thead and tbody for the reports table
This commit is contained in:
Alina Beck
parent
150ffef35a
commit
21a3ff4bc8
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<ds-card>
|
||||
<div class="report-list-header">
|
||||
<div class="reports-header">
|
||||
<h3 class="title">{{ $t('moderation.reports.name') }}</h3>
|
||||
<client-only>
|
||||
<dropdown-filter @filter="filter" :filterOptions="filterOptions" :selected="selected" />
|
||||
@ -132,7 +132,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.report-list-header {
|
||||
.reports-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: $space-small 0;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<table
|
||||
v-if="reports && reports.length"
|
||||
class="ds-table ds-table-condensed"
|
||||
class="ds-table ds-table-condensed ds-table-bordered"
|
||||
cellspacing="0"
|
||||
cellpadding="0"
|
||||
>
|
||||
@ -12,152 +12,149 @@
|
||||
<col width="20%" />
|
||||
<col width="20%" />
|
||||
</colgroup>
|
||||
<thead class="ds-table-col ds-table-head-col">
|
||||
<tr valign="top">
|
||||
<th></th>
|
||||
<th>
|
||||
{{ $t('moderation.reports.contentRowHeadline') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('moderation.reports.authorRowHeadline') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('moderation.reports.typeRowHeadline') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('moderation.reports.decisionRowHeadline') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="report in reports">
|
||||
<thead
|
||||
:class="[report.closed ? 'decision' : 'no-decision', 'ds-table-col', 'ds-table-head-col']"
|
||||
:key="'thead-' + report.resource.id"
|
||||
>
|
||||
<tr valign="top">
|
||||
<th></th>
|
||||
<th>
|
||||
{{ $t('moderation.reports.contentRowHeadline') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('moderation.reports.authorRowHeadline') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('moderation.reports.typeRowHeadline') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('moderation.reports.decisionRowHeadline') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody :key="'tbody-' + report.resource.id">
|
||||
<tr valign="top" :data-test="report.resource.__typename">
|
||||
<td class="ds-table-col">
|
||||
<ds-text color="soft">
|
||||
<base-icon
|
||||
v-if="isPost(report.resource)"
|
||||
v-tooltip="{ report: $t('report.contribution.type'), placement: 'right' }"
|
||||
name="bookmark"
|
||||
/>
|
||||
<base-icon
|
||||
v-else-if="isComment(report.resource)"
|
||||
v-tooltip="{ report: $t('report.comment.type'), placement: 'right' }"
|
||||
name="comments"
|
||||
/>
|
||||
<base-icon
|
||||
v-else-if="isUser(report.resource)"
|
||||
v-tooltip="{ report: $t('report.user.type'), placement: 'right' }"
|
||||
name="user"
|
||||
/>
|
||||
</ds-text>
|
||||
</td>
|
||||
<td class="ds-table-col ">
|
||||
<div v-if="isPost(report.resource) || isComment(report.resource)">
|
||||
<nuxt-link
|
||||
data-test="post-link"
|
||||
:to="{
|
||||
name: 'post-id-slug',
|
||||
params: params(report.resource),
|
||||
hash: hashParam(report.resource),
|
||||
}"
|
||||
>
|
||||
<b>
|
||||
{{
|
||||
report.resource.title ||
|
||||
$filters.removeHtml(report.resource.contentExcerpt) | truncate(50)
|
||||
}}
|
||||
</b>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div v-else>
|
||||
<client-only>
|
||||
<hc-user
|
||||
:user="report.resource"
|
||||
:showAvatar="false"
|
||||
:trunc="30"
|
||||
:data-test="report.resource.slug"
|
||||
/>
|
||||
</client-only>
|
||||
</div>
|
||||
</td>
|
||||
<td class="ds-table-col ">
|
||||
<tr :key="report.resource.id" valign="top" :data-test="report.resource.__typename">
|
||||
<td class="ds-table-col">
|
||||
<ds-text color="soft">
|
||||
<base-icon
|
||||
v-if="isPost(report.resource)"
|
||||
v-tooltip="{ report: $t('report.contribution.type'), placement: 'right' }"
|
||||
name="bookmark"
|
||||
/>
|
||||
<base-icon
|
||||
v-else-if="isComment(report.resource)"
|
||||
v-tooltip="{ report: $t('report.comment.type'), placement: 'right' }"
|
||||
name="comments"
|
||||
/>
|
||||
<base-icon
|
||||
v-else-if="isUser(report.resource)"
|
||||
v-tooltip="{ report: $t('report.user.type'), placement: 'right' }"
|
||||
name="user"
|
||||
/>
|
||||
</ds-text>
|
||||
</td>
|
||||
<td class="ds-table-col ">
|
||||
<div v-if="isPost(report.resource) || isComment(report.resource)">
|
||||
<nuxt-link
|
||||
data-test="post-link"
|
||||
:to="{
|
||||
name: 'post-id-slug',
|
||||
params: params(report.resource),
|
||||
hash: hashParam(report.resource),
|
||||
}"
|
||||
>
|
||||
<b>
|
||||
{{
|
||||
report.resource.title ||
|
||||
$filters.removeHtml(report.resource.contentExcerpt) | truncate(50)
|
||||
}}
|
||||
</b>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div v-else>
|
||||
<client-only>
|
||||
<hc-user
|
||||
v-if="report.resource.__typename !== 'User'"
|
||||
:user="report.resource.author"
|
||||
:user="report.resource"
|
||||
:showAvatar="false"
|
||||
:trunc="30"
|
||||
:data-test="report.resource.author.slug"
|
||||
:data-test="report.resource.slug"
|
||||
/>
|
||||
<span v-else>—</span>
|
||||
</client-only>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="report.reviewed">
|
||||
<br />
|
||||
<div v-if="report.resource.disabled" data-test="disabled">
|
||||
<base-icon name="eye-slash" class="ban" />
|
||||
{{ $t('moderation.reports.disabledBy') }}
|
||||
</div>
|
||||
<div v-else data-test="enabled">
|
||||
<base-icon name="eye" class="no-ban" />
|
||||
{{ $t('moderation.reports.enabledBy') }}
|
||||
</div>
|
||||
<client-only>
|
||||
<hc-user
|
||||
:user="moderatorOfLatestReview(report)"
|
||||
:showAvatar="false"
|
||||
:trunc="30"
|
||||
:date-time="report.updatedAt"
|
||||
positionDatetime="below"
|
||||
:data-test="moderatorOfLatestReview(report).slug"
|
||||
/>
|
||||
</client-only>
|
||||
</div>
|
||||
</td>
|
||||
<td class="ds-table-col ">
|
||||
<client-only>
|
||||
<hc-user
|
||||
v-if="report.resource.__typename !== 'User'"
|
||||
:user="report.resource.author"
|
||||
:showAvatar="false"
|
||||
:trunc="30"
|
||||
:data-test="report.resource.author.slug"
|
||||
/>
|
||||
<span v-else>—</span>
|
||||
</client-only>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="report.reviewed">
|
||||
<br />
|
||||
<div v-if="report.resource.disabled" data-test="disabled">
|
||||
<base-icon name="eye-slash" class="ban" />
|
||||
{{ $t('moderation.reports.disabledBy') }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<br />
|
||||
<div data-test="unreviewed">
|
||||
<base-icon name="eye" class="no-ban" />
|
||||
{{ $t('moderation.reports.enabled') }}
|
||||
</div>
|
||||
<div v-else data-test="enabled">
|
||||
<base-icon name="eye" class="no-ban" />
|
||||
{{ $t('moderation.reports.enabledBy') }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="ds-table-col">
|
||||
<b v-if="report.closed" data-test="closed">
|
||||
{{ $t('moderation.reports.decided') }}
|
||||
</b>
|
||||
<ds-button
|
||||
v-else
|
||||
danger
|
||||
class="confirm"
|
||||
:icon="report.resource.disabled ? 'eye-slash' : 'eye'"
|
||||
@click="confirm(report)"
|
||||
>
|
||||
{{ $t('moderation.reports.decideButton') }}
|
||||
<client-only>
|
||||
<hc-user
|
||||
:user="moderatorOfLatestReview(report)"
|
||||
:showAvatar="false"
|
||||
:trunc="30"
|
||||
:date-time="report.updatedAt"
|
||||
positionDatetime="below"
|
||||
:data-test="moderatorOfLatestReview(report).slug"
|
||||
/>
|
||||
</client-only>
|
||||
</div>
|
||||
<div v-else>
|
||||
<br />
|
||||
<div data-test="unreviewed">
|
||||
<base-icon name="eye" class="no-ban" />
|
||||
{{ $t('moderation.reports.enabled') }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="ds-table-col">
|
||||
<b v-if="report.closed" data-test="closed">
|
||||
{{ $t('moderation.reports.decided') }}
|
||||
</b>
|
||||
<ds-button
|
||||
v-else
|
||||
danger
|
||||
class="confirm"
|
||||
:icon="report.resource.disabled ? 'eye-slash' : 'eye'"
|
||||
@click="confirm(report)"
|
||||
>
|
||||
{{ $t('moderation.reports.decideButton') }}
|
||||
</ds-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<counter-icon icon="flag" :count="report.filed.length">
|
||||
<ds-button ghost primary @click="showFiledReports = !showFiledReports">
|
||||
{{ $t('moderation.reports.moreDetails') }}
|
||||
</ds-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<counter-icon icon="flag" :count="report.filed.length">
|
||||
<ds-button ghost primary @click="showFiledReports = !showFiledReports">
|
||||
{{ $t('moderation.reports.moreDetails') }}
|
||||
</ds-button>
|
||||
</counter-icon>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ds-table-col filed-table" colspan="4">
|
||||
<ds-space margin-bottom="base" />
|
||||
<filed-table :filed="report.filed" v-if="showFiledReports" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</counter-icon>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ds-table-col filed-table" colspan="4">
|
||||
<ds-space margin-bottom="base" />
|
||||
<filed-table :filed="report.filed" v-if="showFiledReports" />
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user