Skip to content

Commit

Permalink
Merge pull request #753 from nextcloud/sorted
Browse files Browse the repository at this point in the history 
Sort polls in poll list
  • Loading branch information
@dartcafe
dartcafe authored Jan 21, 2020
2 parents 89efe8d + d4d75e0 commit 12c12ee
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 145 deletions.
24 changes: 20 additions & 4 deletions src/js/components/Comments/Comments.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<CommentAdd v-if="acl.allowComment" />
<transition-group v-if="countComments" name="fade" class="comments"
tag="ul">
<li v-for="(comment) in sortedComments" :key="comment.id">
<li v-for="(comment) in sortedList" :key="comment.id">
<div class="comment-item">
<user-div :user-id="comment.userId" />
<div class="date">
Expand All @@ -48,22 +48,38 @@
<script>
import CommentAdd from './CommentAdd'
import { mapState, mapGetters } from 'vuex'
import sortBy from 'lodash/sortBy'

export default {
name: 'Comments',
components: {
CommentAdd
},
data() {
return {
sort: 'timestamp',
reverse: true
}
},

computed: {
...mapState({
comments: state => state.comments,
acl: state => state.acl
}),

...mapGetters([
'countComments',
'sortedComments'
])
'countComments'
]),

sortedList() {
if (this.reverse) {
return sortBy(this.comments.list, this.sort).reverse()
} else {
return sortBy(this.comments.list, this.sort)
}
}

}
}
</script>
Expand Down
230 changes: 104 additions & 126 deletions src/js/components/PollList/PollListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,29 @@

<template>
<div v-if="header" class="pollListItem header">
<div class="title">
<div class="title" @click="$emit('sortList', {sort: 'title'})">
{{ t('polls', 'Title') }}
<span :class="['sort-indicator', { 'hidden': sort !== 'title'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
</div>

<div class="access">
<div class="access" @click="$emit('sortList', {sort: 'access'})">
{{ t('polls', 'Access') }}
<span :class="['sort-indicator', { 'hidden': sort !== 'access'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
</div>

<div class="owner">
<div class="owner" @click="$emit('sortList', {sort: 'owner'})">
{{ t('polls', 'Owner') }}
<span :class="['sort-indicator', { 'hidden': sort !== 'owner'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
</div>

<div class="dates">
<div class="created">
{{ t('polls', 'Created') }}
</div>
<div class="expiry">
{{ t('polls', 'Expires') }}
</div>
<div class="created" @click="$emit('sortList', {sort: 'created'})">
{{ t('polls', 'Created') }}
<span :class="['sort-indicator', { 'hidden': sort !== 'created'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
</div>

<div class="expiry" @click="$emit('sortList', {sort: 'expire'})">
{{ t('polls', 'Expires') }}
<span :class="['sort-indicator', { 'hidden': sort !== 'expire'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
</div>
</div>

Expand All @@ -58,14 +62,19 @@
</div>
</router-link>

<div class="actions">
<div class="toggleUserActions">
<div v-click-outside="hideMenu" class="icon-more" @click="toggleMenu" />
<div class="popovermenu" :class="{ 'open': openedMenu }">
<PopoverMenu :menu="menuItems" />
</div>
</div>
</div>
<Actions>
<ActionButton icon="icon-add" @click="clonePoll()">
{{ t('polls', 'Clone poll') }}
</ActionButton>

<ActionButton v-if="poll.owner === OC.getCurrentUser().uid && !poll.deleted" icon="icon-delete" @click="switchDeleted()">
{{ t('polls', 'Delete poll') }}
</ActionButton>

<ActionButton v-if="poll.owner === OC.getCurrentUser().uid && poll.deleted" icon="icon-history" @click="switchDeleted()">
{{ t('polls', 'Restore poll') }}
</ActionButton>
</Actions>

<div v-tooltip.auto="accessType" class="thumbnail access" :class="poll.access">
{{ accessType }}
Expand All @@ -75,25 +84,24 @@
<user-div :user-id="poll.owner" :display-name="poll.ownerDisplayName" />
</div>

<div class="dates">
<div class="created ">
{{ moment.unix(poll.created).fromNow() }}
</div>
<div class="expiry" :class="{ expired : poll.expired }">
{{ timeSpanExpiration }}
</div>
<div class="created ">
{{ moment.unix(poll.created).fromNow() }}
</div>
<div class="expiry" :class="{ expired : poll.expired }">
{{ timeSpanExpiration }}
</div>
</div>
</template>

<script>
import { PopoverMenu } from '@nextcloud/vue'
import { Actions, ActionButton } from '@nextcloud/vue'

export default {
name: 'PollListItem',

components: {
PopoverMenu
Actions,
ActionButton
},

props: {
Expand All @@ -104,6 +112,14 @@ export default {
poll: {
type: Object,
default: undefined
},
sort: {
type: String,
default: 'created'
},
reverse: {
type: Boolean,
default: true
}
},

Expand Down Expand Up @@ -143,37 +159,6 @@ export default {
} else {
return t('polls', 'never')
}
},

menuItems() {
const items = [
{
key: 'clonePoll',
icon: 'icon-add',
text: t('polls', 'Clone poll'),
action: this.clonePoll
}
]

if (this.poll.owner === OC.getCurrentUser().uid && !this.poll.deleted) {
items.push({
key: 'switchDeleted',
icon: 'icon-delete',
text: t('polls', 'Delete poll'),
action: this.switchDeleted
})
}

if (this.poll.deleted) {
items.push({
key: 'switchDeleted',
icon: 'icon-history',
text: t('polls', 'Restore poll'),
action: this.switchDeleted
})
}

return items
}
},

Expand Down Expand Up @@ -212,19 +197,6 @@ export default {
<style lang="scss" scoped>

.pollListItem {
display: flex;
flex: 1;
padding-left: 8px;
&.header {
opacity: 0.5;
flex: auto;
height: 4em;
align-items: center;
margin-left: 44px;
}
&> div {
padding-right: 8px;
}
}

.icon-more {
Expand All @@ -235,46 +207,77 @@ export default {
width: 44px;
}

.title {
.pollListItem {
display: flex;
flex-direction: column;
align-items: stretch;
width: 210px;
flex: 1 1 auto;
.name,
.description {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
border-bottom: 1px solid var(--color-border-dark);
padding: 4px 8px;

&> div {
padding-right: 8px;
}

.description {
&.header {
opacity: 0.5;
flex: auto;
height: 4em;
align-items: center;
padding-left: 44px;

&> div {
cursor: pointer;
display: flex;
&:hover {
.sort-indicator.hidden {
visibility: visible;
display: block;
}
}
}
}
}

.owner {
flex: 0 0 auto;
width: 130px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&.poll {
.title {
flex-direction: column;
& > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}

.actions {
width: 44px;
align-items: center;
position: relative;
}
.title {
display: flex;
align-items: stretch;
width: 210px;
flex: 1 0 auto;

.dates {
display: flex;
flex-wrap: wrap;
align-items: center;
.description {
opacity: 0.5;
}
}

.owner {
flex: 0 0 auto;
width: 130px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.actions {
width: 44px;
align-items: center;
position: relative;
}

.created, .expiry {
width: 100px;
flex: 1 1;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 110px;
flex: 0 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Expand Down Expand Up @@ -316,29 +319,4 @@ export default {
}
}

@media all and (max-width: (740px)) {
.dates {
flex-direction: column;
}
}

@media all and (max-width: (620px)) {
.owner {
display: none;
}
}

@media all and (max-width: (490px)) {
.dates {
display: none;
}
}

@media all and (max-width: (380px)) {
.thumbnail.access, .access {
width: 140px;
display: none;
}
}

</style>
5 changes: 0 additions & 5 deletions src/js/store/modules/comments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
*/

import axios from '@nextcloud/axios'
import sortBy from 'lodash/sortBy'

const defaultComments = () => {
return {
Expand All @@ -49,10 +48,6 @@ const mutations = {
}

const getters = {
sortedComments: state => {
return sortBy(state.list, 'date').reverse()
},

countComments: state => {
return state.list.length
}
Expand Down
Loading

0 comments on commit 12c12ee

Please sign in to comment.