ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor moderators report list

Browse Source
This commit is contained in:
Wolfgang Huß 2019-10-18 15:41:18 +02:00
parent 227239cc8b
commit 965882885a
5 changed files with 71 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<div class="user" v-if="displayAnonymous">
<hc-avatar class="avatar" />
<hc-avatar v-if="showAvatar" class="avatar" />
<div>
<b class="username">{{ $t('profile.userAnonym') }}</b>
</div>
@ -9,11 +9,12 @@
<template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
<nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
<div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
<hc-avatar class="avatar" :user="user" />
<hc-avatar v-if="showAvatar" class="avatar" :user="user" />
<div>
<ds-text>
<b class="username">{{ userName | truncate(18) }}</b>
<ds-text v-if="dateTime" size="small" color="soft">
<b class="username">{{ userName | truncate(trunc) }}</b>
<!-- dateTime: kind of same as underneath: make own component? -->
<ds-text v-if="positionDatetime === 'sideward' && dateTime" size="small" color="soft">
<ds-icon name="clock" />
<client-only>
<hc-relative-date-time :date-time="dateTime" />
@ -22,9 +23,17 @@
</ds-text>
</ds-text>
</div>
<ds-text align="left" size="small" color="soft">
<ds-text class="user-slug" align="left" size="small" color="soft">
{{ userSlug }}
</ds-text>
<!-- dateTime: kind of same as above: make own component? -->
<ds-text v-if="positionDatetime === 'below' && dateTime" size="small" color="soft">
<ds-icon name="clock" />
<client-only>
<hc-relative-date-time :date-time="dateTime" />
</client-only>
<slot name="dateTime"></slot>
</ds-text>
</div>
</nuxt-link>
</template>
@ -110,8 +119,10 @@ export default {
},
props: {
user: { type: Object, default: null },
trunc: { type: Number, default: null },
showAvatar: { type: Boolean, default: true },
trunc: { type: Number, default: 18 }, // "-1" is no trunc
dateTime: { type: [Date, String], default: null },
positionDatetime: { type: String, default: 'sideward' }, // 'below' is the otherone
},
computed: {
...mapGetters({
@ -172,4 +183,8 @@ export default {
z-index: 999;
}
}
.user-slug {
margin-bottom: $space-xx-small;
}
</style>

12
webapp/graphql/Moderation.js
View File

@ -15,6 +15,9 @@ export const reportListQuery = () => {
name
disabled
deleted
followedByCount
contributionsCount
commentedCount
}
user {
id
@ -29,6 +32,9 @@ export const reportListQuery = () => {
disabled
deleted
}
followedByCount
contributionsCount
commentedCount
}
comment {
id
@ -39,6 +45,9 @@ export const reportListQuery = () => {
name
disabled
deleted
followedByCount
contributionsCount
commentedCount
}
post {
id
@ -67,6 +76,9 @@ export const reportListQuery = () => {
name
disabled
deleted
followedByCount
contributionsCount
commentedCount
}
disabledBy {
id

2
webapp/locales/de.json
View File

@ -435,7 +435,7 @@
"reasonCategory": "Kategorie",
"reasonDescription": "Beschreibung",
"createdAt": "Datum",
"submitter": "Gemeldet von",
"submitter": "Gemeldet von / am",
"disabledBy": "Deaktiviert von"
}
},

2
webapp/locales/en.json
View File

@ -436,7 +436,7 @@
"reasonCategory": "Category",
"reasonDescription": "Description",
"createdAt": "Date",
"submitter": "Reported by",
"submitter": "Reported by / at",
"disabledBy": "Disabled by"
}
},

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

@ -33,8 +33,19 @@
>
<b>{{ scope.row.post.title | truncate(50) }}</b>
</nuxt-link>
<br />
<ds-text size="small" color="soft">{{ scope.row.post.author.name }}</ds-text>
<!-- author: Same as author of comment underneath. Maybe dry the code … -->
<ds-space margin="x-small" />
<ds-flex>
<ds-flex-item width="20px">
<ds-icon
v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
name="user"
/>
</ds-flex-item>
<ds-flex-item>
<hc-user :user="scope.row.post.author" :showAvatar="false" :trunc="25" />
</ds-flex-item>
</ds-flex>
</div>
<div v-else-if="scope.row.type === 'Comment'">
<nuxt-link
@ -49,18 +60,22 @@
>
<b>{{ scope.row.comment.contentExcerpt | removeHtml | truncate(50) }}</b>
</nuxt-link>
<br />
<ds-text size="small" color="soft">{{ scope.row.comment.author.name }}</ds-text>
<!-- author: Same as author of post above. Maybe dry the code … -->
<ds-space margin="x-small" />
<ds-flex>
<ds-flex-item width="20px">
<ds-icon
v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
name="user"
/>
</ds-flex-item>
<ds-flex-item>
<hc-user :user="scope.row.comment.author" :showAvatar="false" :trunc="25" />
</ds-flex-item>
</ds-flex>
</div>
<div v-else>
<nuxt-link
:to="{
name: 'profile-id-slug',
params: { id: scope.row.user.id, slug: scope.row.user.slug },
}"
>
<b>{{ scope.row.user.name | truncate(50) }}</b>
</nuxt-link>
<hc-user :user="scope.row.user" :showAvatar="false" :trunc="30" />
</div>
</template>
<!-- reasonCategory -->
@ -73,14 +88,13 @@
</template>
<!-- submitter -->
<template slot="submitter" slot-scope="scope">
<nuxt-link
:to="{
name: 'profile-id-slug',
params: { id: scope.row.submitter.id, slug: scope.row.submitter.slug },
}"
>
{{ scope.row.submitter.name }}
</nuxt-link>
<hc-user
:user="scope.row.submitter"
:showAvatar="false"
:trunc="30"
:date-time="scope.row.createdAt"
:positionDatetime="'below'"
/>
</template>
<!-- createdAt -->
<template slot="createdAt" slot-scope="scope">
@ -132,11 +146,13 @@
<script>
import HcEmpty from '~/components/Empty.vue'
import HcRelativeDateTime from '~/components/RelativeDateTime'
import HcUser from '~/components/User/User'
import { reportListQuery } from '~/graphql/Moderation.js'
export default {
components: {
HcEmpty,
HcUser,
HcRelativeDateTime,
},
data() {