IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Get frontend working with data from backend

Browse Source
This commit is contained in:
mattwr18 2019-11-28 16:13:48 +01:00
parent 89daa3356c
commit 3d8435dde1
3 changed files with 74 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/User/User.vue
View File

@ -13,7 +13,7 @@
<div> <div>
<ds-text class="userinfo"> <ds-text class="userinfo">
<b class="username">{{ userName | truncate(18) }}</b> <b class="username">{{ userName | truncate(18) }}</b>
<ds-text v-if="dateTime" size="small" color="soft"> <ds-text v-if="positionDatetime === 'sideward' && dateTime" size="small" color="soft">
<base-icon name="clock" /> <base-icon name="clock" />
<client-only> <client-only>
<hc-relative-date-time :date-time="dateTime" /> <hc-relative-date-time :date-time="dateTime" />

15
webapp/graphql/Moderation.js
View File

@ -10,6 +10,17 @@ export const reportListQuery = () => {
updatedAt updatedAt
disable disable
closed closed
reviewed {
disable
moderator {
id
slug
name
followedByCount
contributionsCount
commentedCount
}
}
resource { resource {
__typename __typename
... on User { ... on User {
@ -63,7 +74,7 @@ export const reportListQuery = () => {
} }
} }
} }
reportsFiled { filed {
submitter { submitter {
id id
slug slug
@ -91,7 +102,7 @@ export const reportMutation = () => {
reasonCategory: $reasonCategory reasonCategory: $reasonCategory
reasonDescription: $reasonDescription reasonDescription: $reasonDescription
) { ) {
type id
} }
} }
` `

201
webapp/pages/moderation/index.vue
View File

@ -2,21 +2,21 @@
<ds-card space="small"> <ds-card space="small">
<ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading> <ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading>
<table <table
v-if="resourcesClaims && resourcesClaims.length" v-if="reports && reports.length"
class="ds-table ds-table-condensed ds-table-bordered" class="ds-table ds-table-condensed ds-table-bordered"
cellspacing="0" cellspacing="0"
cellpadding="0" cellpadding="0"
> >
<colgroup><col width="" /></colgroup> <colgroup><col width="" /></colgroup>
<template v-for="resourceClaims in resourcesClaims"> <template v-for="report in reports">
<thead <thead
:class="[ :class="[
resourceClaims.latestClaim.closed ? 'decision' : 'no-decision', report.closed ? 'decision' : 'no-decision',
'ds-table-col', 'ds-table-col',
'ds-table-head-col', 'ds-table-head-col',
'ds-table-head-col-border', 'ds-table-head-col-border',
]" ]"
:key="'thead-' + resourceClaims.resource.id" :key="'thead-' + report.resource.id"
> >
<tr valign="top"> <tr valign="top">
<th> <th>
@ -33,69 +33,70 @@
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody :key="'tbody-' + resourceClaims.resource.id"> <tbody :key="'tbody-' + report.resource.id">
<tr valign="top"> <tr valign="top">
<td class="ds-table-col ds-table-head-col ds-table-head-col-border"> <td class="ds-table-col ds-table-head-col ds-table-head-col-border">
<!-- Icon --> <!-- Icon -->
<ds-text color="soft"> <ds-text color="soft">
<ds-icon <ds-icon
v-if="resourceClaims.type === 'Post'" v-if="report.resource.__typename === 'Post'"
v-tooltip="{ resourceClaims: $t('report.contribution.type'), placement: 'right' }" v-tooltip="{ report: $t('report.contribution.type'), placement: 'right' }"
name="bookmark" name="bookmark"
/> />
<ds-icon <ds-icon
v-else-if="resourceClaims.type === 'Comment'" v-else-if="report.resource.__typename === 'Comment'"
v-tooltip="{ resourceClaims: $t('report.comment.type'), placement: 'right' }" v-tooltip="{ report: $t('report.comment.type'), placement: 'right' }"
name="comments" name="comments"
/> />
<ds-icon <ds-icon
v-else-if="resourceClaims.type === 'User'" v-else-if="report.resource.__typename === 'User'"
v-tooltip="{ resourceClaims: $t('report.user.type'), placement: 'right' }" v-tooltip="{ report: $t('report.user.type'), placement: 'right' }"
name="user" name="user"
/> />
<ds-icon v-if="resourceClaims.resource.disabled" name="eye-slash" class="ban" /> <ds-icon v-if="report.resource.disabled" name="eye-slash" class="ban" />
<ds-icon v-else name="eye" class="no-ban" /> <ds-icon v-else name="eye" class="no-ban" />
</ds-text> </ds-text>
</td> </td>
<td class="ds-table-col ds-table-head-col-border"> <td class="ds-table-col ds-table-head-col-border">
<!-- reported user or other resource --> <!-- reported user or other resource -->
<div v-if="resourceClaims.type === 'Post' || resourceClaims.type === 'Comment'"> <div
v-if="
report.resource.__typename === 'Post' || report.resource.__typename === 'Comment'
"
>
<nuxt-link <nuxt-link
:to="{ :to="{
name: 'post-id-slug', name: 'post-id-slug',
params: { params: {
id: id: report.resource.id,
resourceClaims.type === 'Post'
? resourceClaims.post.id
: resourceClaims.comment.post.id,
slug: slug:
resourceClaims.type === 'Post' report.resource.__typename === 'Post'
? resourceClaims.post.slug ? report.resource.slug
: resourceClaims.comment.post.slug, : report.resource.post.slug,
}, },
hash: hash:
resourceClaims.type === 'Comment' report.resource.__typename === 'Comment'
? `#commentId-${resourceClaims.comment.id}` ? `#commentId-${report.resource.id}`
: undefined, : undefined,
}" }"
> >
<b v-if="resourceClaims.type === 'Post'"> <b v-if="report.resource.__typename === 'Post'">
{{ resourceClaims.post.title | truncate(100) }} {{ report.resource.title | truncate(100) }}
</b> </b>
<b v-else> <b v-else>
{{ resourceClaims.comment.contentExcerpt | removeHtml | truncate(100) }} {{ report.resource.contentExcerpt | removeHtml | truncate(100) }}
</b> </b>
</nuxt-link> </nuxt-link>
</div> </div>
<div v-else> <div v-else>
<hc-user :user="resourceClaims.user" :showAvatar="false" :trunc="30" /> <hc-user :user="report.resource" :showAvatar="false" :trunc="30" />
</div> </div>
</td> </td>
<!-- contentBelongsToUser --> <!-- contentBelongsToUser -->
<td class="ds-table-col ds-table-head-col-border"> <td class="ds-table-col ds-table-head-col-border">
<hc-user <hc-user
v-if="resourceClaims.contentBelongsToUser" v-if="report.resource.__typename !== 'User'"
:user="resourceClaims.contentBelongsToUser" :user="report.resource.author"
:showAvatar="false" :showAvatar="false"
:trunc="30" :trunc="30"
/> />
@ -103,22 +104,22 @@
</td> </td>
<td class="ds-table-col ds-table-head-col-border"> <td class="ds-table-col ds-table-head-col-border">
<!-- latestClaim.closed --> <!-- latestClaim.closed -->
<b v-if="resourceClaims.latestClaim.closed"> <b v-if="report.closed">
{{ $t('moderation.reports.decided') }} {{ $t('moderation.reports.decided') }}
</b> </b>
<ds-button <ds-button
v-else v-else
danger danger
class="confirm" class="confirm"
:icon="resourceClaims.resource.disabled ? 'eye-slash' : 'eye'" :icon="report.resource.disabled ? 'eye-slash' : 'eye'"
@click="confirm(resourceClaims)" @click="confirm(report)"
> >
{{ $t('moderation.reports.decideButton') }} {{ $t('moderation.reports.decideButton') }}
</ds-button> </ds-button>
<!-- reviewedByModerator --> <!-- reviewed -->
<div v-if="resourceClaims.resource.reviewedByModerator"> <div v-if="report.reviewed">
<br /> <br />
<div v-if="resourceClaims.latestClaim.disable"> <div v-if="report.resource.disabled">
<ds-icon name="eye-slash" class="ban" /> <ds-icon name="eye-slash" class="ban" />
{{ $t('moderation.reports.disabledBy') }} {{ $t('moderation.reports.disabledBy') }}
</div> </div>
@ -127,16 +128,16 @@
{{ $t('moderation.reports.enabledBy') }} {{ $t('moderation.reports.enabledBy') }}
</div> </div>
<hc-user <hc-user
:user="resourceClaims.resource.reviewedByModerator" :user="report.reviewed[0].moderator"
:showAvatar="false" :showAvatar="false"
:trunc="30" :trunc="30"
:date-time="resourceClaims.latestClaim.updatedAt" :date-time="report.updatedAt"
positionDatetime="below" positionDatetime="below"
/> />
</div> </div>
<div v-else> <div v-else>
<br /> <br />
<div v-if="resourceClaims.resource.disabled"> <div v-if="report.resource.disabled">
<ds-icon name="eye-slash" class="ban" /> <ds-icon name="eye-slash" class="ban" />
{{ $t('moderation.reports.disabled') }} {{ $t('moderation.reports.disabled') }}
</div> </div>
@ -150,17 +151,17 @@
<tr> <tr>
<td class="ds-table-col ds-table-head-col-border"></td> <td class="ds-table-col ds-table-head-col-border"></td>
<td class="ds-table-col ds-table-head-col-border" colspan="3"> <td class="ds-table-col ds-table-head-col-border" colspan="3">
<template v-for="(claim, indexClaim) in resourceClaims.claims"> <template>
<div :key="claim.id"> <div :key="report.id">
<!-- previousDecision --> <!-- previousDecision -->
<div v-if="indexClaim > 0"> <div v-if="report.reviewed">
<ds-flex gutter="small"> <ds-flex gutter="small">
<ds-flex-item width="25%"> <ds-flex-item width="25%">
<b>{{ $t('moderation.reports.previousDecision') }}</b> <b>{{ $t('moderation.reports.previousDecision') }}</b>
</ds-flex-item> </ds-flex-item>
<ds-flex-item> <ds-flex-item>
<div> <div>
<span v-if="claim.disable"> <span v-if="report.resource.disabled">
<ds-icon name="eye-slash" class="ban" /> <ds-icon name="eye-slash" class="ban" />
{{ $t('moderation.reports.disabledAt') }} {{ $t('moderation.reports.disabledAt') }}
</span> </span>
@ -171,7 +172,7 @@
<ds-text size="small" color="soft"> <ds-text size="small" color="soft">
<ds-icon name="clock" /> <ds-icon name="clock" />
<client-only> <client-only>
<hc-relative-date-time :date-time="claim.updatedAt" /> <hc-relative-date-time :date-time="report.updatedAt" />
</client-only> </client-only>
</ds-text> </ds-text>
</div> </div>
@ -179,7 +180,7 @@
</ds-flex> </ds-flex>
<ds-space margin-bottom="x-small" /> <ds-space margin-bottom="x-small" />
</div> </div>
<ds-table :data="claim.reports" :fields="reportFields" condensed> <ds-table :data="report.filed" :fields="reportFields" condensed>
<!-- submitter --> <!-- submitter -->
<template slot="submitter" slot-scope="scope"> <template slot="submitter" slot-scope="scope">
<hc-user <hc-user
@ -226,7 +227,6 @@ export default {
data() { data() {
return { return {
reports: [], reports: [],
resourcesClaims: [],
} }
}, },
computed: { computed: {
@ -238,87 +238,9 @@ export default {
} }
}, },
}, },
// watch: {
// reports: {
// immediate: true,
// handler(newReports) {
// const newResourcesClaims = []
// if (!newReports) return null
// newReports.forEach(report => {
// const resource =
// report.type === 'User'
// ? report.user
// : report.type === 'Post'
// ? report.post
// : report.type === 'Comment'
// ? report.comment
// : undefined
// let idxResource = newResourcesClaims.findIndex(
// resourceClaims => resourceClaims.resource.id === resource.id,
// )
// // if resource is not in resource list, then add it
// if (idxResource === -1) {
// idxResource = newResourcesClaims.length
// newResourcesClaims.push({
// type: report.type,
// resource,
// user: report.user,
// post: report.post,
// comment: report.comment,
// contentBelongsToUser: report.type === 'User' ? null : resource.author,
// claims: [],
// })
// }
// let idxClaim = newResourcesClaims[idxResource].claims.findIndex(
// claim => claim.id === report.claim.id,
// )
// // if claim is not in claim list, then add it
// if (idxClaim === -1) {
// idxClaim = newResourcesClaims[idxResource].claims.length
// newResourcesClaims[idxResource].claims.push({
// // it is the same for all reports of a claim
// id: report.claim.id,
// createdAt: report.claim.createdAt,
// updatedAt: report.claim.updatedAt,
// disable: report.claim.disable,
// closed: report.claim.closed,
// reports: [],
// })
// }
// newResourcesClaims[idxResource].claims[idxClaim].reports.push(report)
// })
// // sorting of resource claims and their reports
// newResourcesClaims.forEach(resourceClaims => {
// // latestClaim by updatedAt rules
// resourceClaims.claims.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
// resourceClaims.latestClaim = {
// id: resourceClaims.claims[0].id,
// createdAt: resourceClaims.claims[0].createdAt,
// updatedAt: resourceClaims.claims[0].updatedAt,
// disable: resourceClaims.claims[0].disable,
// closed: resourceClaims.claims[0].closed,
// }
// // display claims always by starting with latest createdAt
// resourceClaims.claims.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
// resourceClaims.claims.forEach(claim => {
// // display reports always by starting with latest createdAt
// claim.reports.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
// })
// })
// // display resources by starting with claims by their latest createdAt
// newResourcesClaims.sort(
// (a, b) => new Date(b.claims[0].createdAt) - new Date(a.claims[0].createdAt),
// )
// this.resourcesClaims = newResourcesClaims
// },
// },
// },
methods: { methods: {
confirm(resourceClaims) { confirm(report) {
this.openModal(resourceClaims) this.openModal(report)
}, },
async confirmCallback(resourceId) { async confirmCallback(resourceId) {
this.$apollo this.$apollo
@ -332,29 +254,29 @@ export default {
}) })
.catch(error => this.$toast.error(error.message)) .catch(error => this.$toast.error(error.message))
}, },
openModal(resourceClaims) { openModal(report) {
const identStart = const identStart =
'moderation.reports.decideModal.' + 'moderation.reports.decideModal.' +
resourceClaims.type + report.resource.__typename +
'.' + '.' +
(resourceClaims.latestClaim.disable ? 'disable' : 'enable') (report.resource.disabled ? 'disable' : 'enable')
this.$store.commit('modal/SET_OPEN', { this.$store.commit('modal/SET_OPEN', {
name: 'confirm', name: 'confirm',
data: { data: {
type: resourceClaims.type, type: report.resource.__typename,
resource: resourceClaims.resource, resource: report.resource,
modalData: { modalData: {
titleIdent: identStart + '.title', titleIdent: identStart + '.title',
messageIdent: identStart + '.message', messageIdent: identStart + '.message',
messageParams: { messageParams: {
name: name:
resourceClaims.type === 'User' report.resource.__typename === 'User'
? resourceClaims.user.name ? report.resource.name
: resourceClaims.type === 'Post' : report.resource.__typename === 'Post'
? this.$filters.truncate(resourceClaims.post.title, 30) ? this.$filters.truncate(report.resource.title, 30)
: resourceClaims.type === 'Comment' : report.resource.__typename === 'Comment'
? this.$filters.truncate( ? this.$filters.truncate(
this.$filters.removeHtml(resourceClaims.comment.contentExcerpt), this.$filters.removeHtml(report.resource.contentExcerpt),
30, 30,
) )
: '', : '',
@ -362,10 +284,10 @@ export default {
buttons: { buttons: {
confirm: { confirm: {
danger: true, danger: true,
icon: resourceClaims.resource.disabled ? 'eye-slash' : 'eye', icon: report.resource.disabled ? 'eye-slash' : 'eye',
textIdent: 'moderation.reports.decideModal.submit', textIdent: 'moderation.reports.decideModal.submit',
callback: () => { callback: () => {
this.confirmCallback(resourceClaims.resource.id) this.confirmCallback(report.resource.id)
}, },
}, },
cancel: { cancel: {
@ -380,11 +302,8 @@ export default {
}, },
}, },
apollo: { apollo: {
reports: { reportsList: {
query: reportListQuery(), query: reportListQuery(),
variables() {
return {}
},
update({ reports }) { update({ reports }) {
this.reports = reports this.reports = reports
}, },