AkkomaGang/admin-fe
5
2
Fork 8
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

Render recent statuses on Status show page

Browse source
This commit is contained in:
Angelina Filippova 2020-05-02 16:59:14 +03:00
parent 5fe5b38c13
commit 7cf2878eb8
1 changed files with 61 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/views/statuses/show.vue
View file

@ -29,6 +29,18 @@
<div class="status-container">
<status :status="status" :account="user" :show-checkbox="false" :godmode="showPrivate"/>
</div>
<div class="recent-statuses-container">
<h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }} by {{ user.display_name }}</h2>
<el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
{{ $t('statuses.showPrivateStatuses') }}
</el-checkbox>
<el-timeline v-if="!statusesLoading" class="statuses">
<el-timeline-item v-for="status in statuses" :key="status.id">
<status :status="status" :account="status.account" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
</el-timeline-item>
<p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
</el-timeline>
</div>
</div>
</template>
@ -42,7 +54,7 @@ export default {
components: { ModerationDropdown, RebootButton, Status },
data() {
return {
showPrivate: true,
showPrivate: false,
resetPasswordDialogOpen: false
}
},
@ -62,6 +74,12 @@ export default {
status() {
return this.$store.state.status.fetchedStatus
},
statuses() {
return this.$store.state.userProfile.statuses
},
statusesLoading() {
return this.$store.state.userProfile.statusesLoading
},
user() {
return this.$store.state.status.fetchedStatus.account
}
@ -70,11 +88,15 @@ export default {
this.$store.dispatch('NeedReboot')
this.$store.dispatch('GetNodeInfo')
this.$store.dispatch('FetchStatus', this.$route.params.id)
this.$store.dispatch('FetchUserStatuses', { userId: this.user.id, godmode: this.showPrivate })
},
methods: {
accountExists(account, key) {
return account[key]
},
onTogglePrivate() {
this.$store.dispatch('FetchUserStatuses', { userId: this.user.id, godmode: this.showPrivate })
},
openResetPasswordDialog() {
this.resetPasswordDialogOpen = true
}
@ -87,13 +109,31 @@ export default {
display: flex;
align-items: center;
}
.no-statuses {
margin-left: 28px;
color: #606266;
}
.reboot-button {
padding: 10px;
margin-left: 6px;
}
.recent-statuses {
margin-left: 28px;
}
.recent-statuses-container {
display: flex;
flex-direction: column;
}
.show-private-statuses {
margin-left: 28px;
margin-bottom: 20px;
}
.status-container {
margin: 0 15px 0 20px;
}
.statuses {
padding: 0 20px 0 0;
}
.user-page-header {
display: flex;
justify-content: space-between;
@ -113,6 +153,16 @@ export default {
display: flex;
justify-content: space-between;
}
.recent-statuses {
margin: 20px 10px 15px 10px;
}
.recent-statuses-container {
width: 100%;
margin: 0 10px;
}
.show-private-statuses {
margin: 0 10px 20px 10px;
}
.user-page-header {
padding: 0;
margin: 7px 15px 15px 10px;
@ -125,6 +175,16 @@ export default {
}
}
@media only screen and (max-width:801px) and (min-width: 481px) {
.recent-statuses {
margin: 20px 10px 15px 0;
}
.recent-statuses-container {
width: 97%;
margin: 0 20px;
}
.show-private-statuses {
margin: 0 10px 20px 0;
}
.user-page-header {
padding: 0;
margin: 7px 15px 20px 20px;