hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'navigation-update' into shigusegubu-vue3

Browse source 
* navigation-update:
  lint
  List edit UI overhaul
  fix journal test
  fix list tests
  ignore invalid journal entries
  proper journal trimming + remove some old workaround to my local bad data
This commit is contained in:
Henry Jameson 2022-08-17 00:50:03 +03:00
commit 64526db60e
14 changed files with 300 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.js
View file

@ -85,8 +85,12 @@ export default {
isChats () { isChats () {
return this.$route.name === 'chat' || this.$route.name === 'chats' return this.$route.name === 'chat' || this.$route.name === 'chats'
}, },
isListEdit () {
return this.$route.name === 'lists-edit'
},
newPostButtonShown () { newPostButtonShown () {
if (this.isChats) return false if (this.isChats) return false
if (this.isListEdit) return false
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile' return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
}, },
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },

2
src/App.vue
View file

@ -33,7 +33,7 @@
<div <div
id="main-scroller" id="main-scroller"
class="column main" class="column main"
:class="{ '-full-height': isChats }" :class="{ '-full-height': isChats || isListEdit }"
> >
<div <div
v-if="!currentUser" v-if="!currentUser"

84
src/components/lists_edit/lists_edit.js
View file

@ -1,7 +1,9 @@
import { mapState, mapGetters } from 'vuex' import { mapState, mapGetters } from 'vuex'
import BasicUserCard from '../basic_user_card/basic_user_card.vue' import BasicUserCard from '../basic_user_card/basic_user_card.vue'
import ListsUserSearch from '../lists_user_search/lists_user_search.vue' import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
import UserAvatar from '../user_avatar/user_avatar.vue' import UserAvatar from '../user_avatar/user_avatar.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faSearch, faSearch,
@ -17,22 +19,32 @@ const ListsNew = {
components: { components: {
BasicUserCard, BasicUserCard,
UserAvatar, UserAvatar,
ListsUserSearch ListsUserSearch,
TabSwitcher,
PanelLoading
}, },
data () { data () {
return { return {
title: '', title: '',
userIds: [], titleDraft: '',
selectedUserIds: [] membersUserIds: [],
removedUserIds: new Set([]), // users we added for members, to undo
searchUserIds: [],
addedUserIds: new Set([]), // users we added from search, to undo
searchLoading: false,
reallyDelete: false
} }
}, },
created () { created () {
this.$store.dispatch('fetchList', { listId: this.id }) this.$store.dispatch('fetchList', { listId: this.id })
.then(() => { this.title = this.findListTitle(this.id) }) .then(() => {
this.title = this.findListTitle(this.id)
this.titleDraft = this.title
})
this.$store.dispatch('fetchListAccounts', { listId: this.id }) this.$store.dispatch('fetchListAccounts', { listId: this.id })
.then(() => { .then(() => {
this.selectedUserIds = this.findListAccounts(this.id) this.membersUserIds = this.findListAccounts(this.id)
this.selectedUserIds.forEach(userId => { this.membersUserIds.forEach(userId => {
this.$store.dispatch('fetchUserIfMissing', userId) this.$store.dispatch('fetchUserIfMissing', userId)
}) })
}) })
@ -41,11 +53,12 @@ const ListsNew = {
id () { id () {
return this.$route.params.id return this.$route.params.id
}, },
users () { membersUsers () {
return this.userIds.map(userId => this.findUser(userId)) return [...this.membersUserIds, ...this.addedUserIds]
.map(userId => this.findUser(userId)).filter(user => user)
}, },
selectedUsers () { searchUsers () {
return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user) return this.searchUserIds.map(userId => this.findUser(userId)).filter(user => user)
}, },
...mapState({ ...mapState({
currentUser: state => state.users.currentUser currentUser: state => state.users.currentUser
@ -56,30 +69,51 @@ const ListsNew = {
onInput () { onInput () {
this.search(this.query) this.search(this.query)
}, },
selectUser (user) { toggleRemoveMember (user) {
if (this.selectedUserIds.includes(user.id)) { if (this.removedUserIds.has(user.id)) {
this.removeUser(user.id)
} else {
this.addUser(user) this.addUser(user)
this.removedUserIds.delete(user.id)
} else {
this.removeUser(user.id)
this.removedUserIds.add(user.id)
} }
}, },
isSelected (user) { toggleAddFromSearch (user) {
return this.selectedUserIds.includes(user.id) if (this.addedUserIds.has(user.id)) {
this.removeUser(user.id)
this.addedUserIds.delete(user.id)
} else {
this.addUser(user)
this.addedUserIds.add(user.id)
}
},
isRemoved (user) {
return this.removedUserIds.has(user.id)
},
isAdded (user) {
return this.addedUserIds.has(user.id)
}, },
addUser (user) { addUser (user) {
this.selectedUserIds.push(user.id) // this.selectedUserIds.push(user.id)
}, },
removeUser (userId) { removeUser (userId) {
this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId) // this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
}, },
onResults (results) { onSearchLoading (results) {
this.userIds = results this.searchLoading = true
}, },
updateList () { onSearchLoadingDone (results) {
this.$store.dispatch('setList', { listId: this.id, title: this.title }) this.searchLoading = false
this.$store.dispatch('setListAccounts', { listId: this.id, accountIds: this.selectedUserIds }) },
onSearchResults (results) {
this.$router.push({ name: 'lists-timeline', params: { id: this.id } }) this.searchLoading = false
this.searchUserIds = results
},
updateListTitle () {
this.$store.dispatch('setList', { listId: this.id, title: this.titleDraft })
.then(() => {
this.title = this.findListTitle(this.id)
})
}, },
deleteList () { deleteList () {
this.$store.dispatch('deleteList', { listId: this.id }) this.$store.dispatch('deleteList', { listId: this.id })

224
src/components/lists_edit/lists_edit.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div class="panel-default panel list-edit"> <div class="panel-default panel ListEdit">
<div <div
ref="header" ref="header"
class="panel-heading" class="panel-heading list-edit-heading"
> >
<button <button
class="button-unstyled go-back-button" class="button-unstyled go-back-button"
@ -13,54 +13,137 @@
icon="chevron-left" icon="chevron-left"
/> />
</button> </button>
</div> <div class="title">
<div class="input-wrap"> <i18n-t
<input keypath="lists.editing_list"
ref="title" >
v-model="title" <template #listTitle>
:placeholder="$t('lists.title')" {{ title }}
> </template>
</div> </i18n-t>
<div class="member-list">
<div
v-for="user in selectedUsers"
:key="user.id"
class="member"
>
<BasicUserCard
:user="user"
:class="isSelected(user) ? 'selected' : ''"
@click.capture.prevent="selectUser(user)"
/>
</div> </div>
</div> </div>
<ListsUserSearch @results="onResults" /> <div class="panel-body">
<div class="member-list"> <div class="input-wrap">
<div <label for="list-edit-title">{{ $t('lists.title') }}</label>
v-for="user in users" {{ ' ' }}
:key="user.id" <input
class="member" id="list-edit-title"
> ref="title"
<BasicUserCard v-model="titleDraft"
:user="user" >
:class="isSelected(user) ? 'selected' : ''" <button
@click.capture.prevent="selectUser(user)" class="btn button-default follow-button"
/> @click="updateListTitle"
>
{{ $t('lists.update_title') }}
</button>
</div> </div>
<tab-switcher
class="list-member-management"
:scrollable-tabs="true"
>
<div
:label="$t('lists.manage_members')"
class="members-list"
>
<div class="users-list">
<div
v-for="user in membersUsers"
:key="user.id"
class="member"
>
<BasicUserCard
:user="user"
>
<button
class="btn button-default follow-button"
@click="toggleRemoveMember(user)"
>
{{ isRemoved(user) ? $t('general.undo') : $t('lists.remove_from_list') }}
</button>
</BasicUserCard>
</div>
</div>
</div>
<div
class="search-list"
:label="$t('lists.add_members')"
>
<ListsUserSearch
@results="onSearchResults"
@loading="onSearchLoading"
@loadingDone="onSearchLoadingDone"
/>
<div
v-if="searchLoading"
class="loading"
>
<PanelLoading />
</div>
<div
v-else
class="users-list"
>
<div
v-for="user in searchUsers"
:key="user.id"
class="member"
>
<BasicUserCard
:user="user"
>
<span
v-if="membersUserIds.includes(user.id)"
>
{{ $t('lists.is_in_list') }}
</span>
<button
v-if="!membersUserIds.includes(user.id)"
class="btn button-default follow-button"
@click="toggleAddFromSearch(user)"
>
{{ isAdded(user) ? $t('general.undo') : $t('lists.add_to_list') }}
</button>
<button
v-else
class="btn button-default follow-button"
@click="toggleRemoveMember(user)"
>
{{ isRemoved(user) ? $t('general.undo') : $t('lists.remove_from_list') }}
</button>
</BasicUserCard>
</div>
</div>
</div>
</tab-switcher>
</div>
<div class="panel-footer">
<span class="spacer" />
<button
v-if="!reallyDelete"
class="btn button-default delete-button"
@click="reallyDelete = true"
>
{{ $t('lists.delete') }}
</button>
<template v-else>
{{ $t('lists.really_delete') }}
<button
class="btn button-default delete-button"
@click="deleteList"
>
{{ $t('general.yes') }}
</button>
<button
class="btn button-default delete-button"
@click="reallyDelete = false"
>
{{ $t('general.no') }}
</button>
</template>
</div> </div>
<button
:disabled="title && title.length === 0"
class="btn button-default"
@click="updateList"
>
{{ $t('lists.save') }}
</button>
<button
class="btn button-default"
@click="deleteList"
>
{{ $t('lists.delete') }}
</button>
</div> </div>
</template> </template>
@ -69,28 +152,43 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.list-edit { .ListEdit {
.input-wrap { --panel-body-padding: 0.5em;
display: flex;
margin: 0.7em 0.5em 0.7em 0.5em;
input { height: calc(100vh - var(--navbar-height));
width: 100%; overflow: hidden;
} display: flex;
flex-direction: column;
.list-edit-heading {
grid-template-columns: auto minmax(50%, 1fr);
}
.panel-body {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
.list-member-management {
flex: 1 0 auto;
} }
.search-icon { .search-icon {
margin-right: 0.3em; margin-right: 0.3em;
} }
.member-list { .users-list {
padding-bottom: 0.7rem; padding-bottom: 0.7rem;
overflow-y: auto;
} }
.basic-user-card:hover, & .search-list,
.basic-user-card.selected { & .members-list {
cursor: pointer; overflow: hidden;
background-color: var(--selectedPost, $fallback--lightBg); flex-direction: column;
min-height: 0;
} }
.go-back-button { .go-back-button {
@ -102,7 +200,15 @@
} }
.btn { .btn {
margin: 0.5em; margin: 0 0.5em;
}
.panel-footer {
grid-template-columns: minmax(10%, 1fr);
.delete-button {
min-width: 9em;
}
} }
} }
</style> </style>

7
src/components/lists_user_search/lists_user_search.js
View file

@ -15,6 +15,7 @@ const ListsUserSearch = {
components: { components: {
Checkbox Checkbox
}, },
emits: ['loading', 'loadingDone', 'results'],
data () { data () {
return { return {
loading: false, loading: false,
@ -33,12 +34,16 @@ const ListsUserSearch = {
} }
this.loading = true this.loading = true
this.$emit('loading')
this.userIds = [] this.userIds = []
this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly }) this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly })
.then(data => { .then(data => {
this.loading = false
this.$emit('results', data.accounts.map(a => a.id)) this.$emit('results', data.accounts.map(a => a.id))
}) })
.finally(() => {
this.loading = false
this.$emit('loadingDone')
})
} }
} }
} }

22
src/components/lists_user_search/lists_user_search.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="ListsUserSearch">
<div class="input-wrap"> <div class="input-wrap">
<div class="input-search"> <div class="input-search">
<FAIcon <FAIcon
@ -29,17 +29,19 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.input-wrap { .ListsUserSearch {
display: flex; .input-wrap {
margin: 0.7em 0.5em 0.7em 0.5em; display: flex;
margin: 0.7em 0.5em 0.7em 0.5em;
input { input {
width: 100%; width: 100%;
}
}
.search-icon {
margin-right: 0.3em;
} }
} }
.search-icon {
margin-right: 0.3em;
}
</style> </style>

3
src/components/mobile_post_status_button/mobile_post_status_button.js
View file

@ -10,7 +10,8 @@ library.add(
const HIDDEN_FOR_PAGES = new Set([ const HIDDEN_FOR_PAGES = new Set([
'chats', 'chats',
'chat' 'chat',
'lists-edit'
]) ])
const MobilePostStatusButton = { const MobilePostStatusButton = {

1
src/components/tab_switcher/tab_switcher.scss
View file

@ -17,6 +17,7 @@
overflow-x: auto; overflow-x: auto;
padding-top: 5px; padding-top: 5px;
flex-direction: row; flex-direction: row;
flex: 0 0 auto;
&::after, &::before { &::after, &::before {
content: ''; content: '';

24
src/components/user_list_menu/user_list_menu.vue
View file

@ -7,18 +7,18 @@
> >
<template #content> <template #content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-for="list in lists" v-for="list in lists"
:key="list.id" :key="list.id"
class="button-default dropdown-item" class="button-default dropdown-item"
@click="toggleList(list.id)" @click="toggleList(list.id)"
> >
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': list.inList }" :class="{ 'menu-checkbox-checked': list.inList }"
/> />
{{ list.title }} {{ list.title }}
</button> </button>
</div> </div>
</template> </template>
<template #trigger> <template #trigger>

13
src/i18n/en.json
View file

@ -80,6 +80,9 @@
"confirm": "Confirm", "confirm": "Confirm",
"verify": "Verify", "verify": "Verify",
"close": "Close", "close": "Close",
"undo": "Undo",
"yes": "Yes",
"no": "No",
"peek": "Peek", "peek": "Peek",
"role": { "role": {
"admin": "Admin", "admin": "Admin",
@ -981,7 +984,15 @@
"save": "Save changes", "save": "Save changes",
"delete": "Delete list", "delete": "Delete list",
"following_only": "Limit to Following", "following_only": "Limit to Following",
"manage_lists": "Manage lists" "manage_lists": "Manage lists",
"manage_members": "Manage list members",
"add_members": "Search for more users",
"remove_from_list": "Remove from list",
"add_to_list": "Add to list",
"is_in_list": "Already in list",
"editing_list": "Editing list {listTitle}",
"update_title": "Save Title",
"really_delete": "Really delete list?"
}, },
"file_type": { "file_type": {
"audio": "Audio", "audio": "Audio",

5
src/modules/lists.js
View file

@ -15,10 +15,11 @@ export const mutations = {
} }
state.allListsObject[listId].title = title state.allListsObject[listId].title = title
if (!find(state.allLists, { id: listId })) { const entry = find(state.allLists, { id: listId })
if (!entry) {
state.allLists.push({ id: listId, title }) state.allLists.push({ id: listId, title })
} else { } else {
find(state.allLists, { id: listId }).title = title entry.title = title
} }
}, },
setListAccounts (state, { listId, accountIds }) { setListAccounts (state, { listId, accountIds }) {

10
src/modules/serverSideStorage.js
View file

@ -132,7 +132,15 @@ export const _mergeFlags = (recent, stale, allFlagKeys) => {
} }
const _mergeJournal = (...journals) => { const _mergeJournal = (...journals) => {
const allJournals = flatten(journals.map(j => Array.isArray(j) ? j : [])) // Ignore invalid journal entries
const allJournals = flatten(
journals.map(j => Array.isArray(j) ? j : [])
).filter(entry =>
Object.prototype.hasOwnProperty.call(entry, 'path') &&
Object.prototype.hasOwnProperty.call(entry, 'operation') &&
Object.prototype.hasOwnProperty.call(entry, 'args') &&
Object.prototype.hasOwnProperty.call(entry, 'timestamp')
)
const grouped = groupBy(allJournals, 'path') const grouped = groupBy(allJournals, 'path')
const trimmedGrouped = Object.entries(grouped).map(([path, journal]) => { const trimmedGrouped = Object.entries(grouped).map(([path, journal]) => {
// side effect // side effect

16
test/unit/specs/modules/lists.spec.js
View file

@ -17,13 +17,13 @@ describe('The lists module', () => {
const list = { id: '1', title: 'testList' } const list = { id: '1', title: 'testList' }
const modList = { id: '1', title: 'anotherTestTitle' } const modList = { id: '1', title: 'anotherTestTitle' }
mutations.setList(state, list) mutations.setList(state, { listId: list.id, title: list.title })
expect(state.allListsObject[list.id]).to.eql({ title: list.title }) expect(state.allListsObject[list.id]).to.eql({ title: list.title, accountIds: [] })
expect(state.allLists).to.have.length(1) expect(state.allLists).to.have.length(1)
expect(state.allLists[0]).to.eql(list) expect(state.allLists[0]).to.eql(list)
mutations.setList(state, modList) mutations.setList(state, { listId: modList.id, title: modList.title })
expect(state.allListsObject[modList.id]).to.eql({ title: modList.title }) expect(state.allListsObject[modList.id]).to.eql({ title: modList.title, accountIds: [] })
expect(state.allLists).to.have.length(1) expect(state.allLists).to.have.length(1)
expect(state.allLists[0]).to.eql(modList) expect(state.allLists[0]).to.eql(modList)
}) })
@ -33,10 +33,10 @@ describe('The lists module', () => {
const list = { id: '1', accountIds: ['1', '2', '3'] } const list = { id: '1', accountIds: ['1', '2', '3'] }
const modList = { id: '1', accountIds: ['3', '4', '5'] } const modList = { id: '1', accountIds: ['3', '4', '5'] }
mutations.setListAccounts(state, list) mutations.setListAccounts(state, { listId: list.id, accountIds: list.accountIds })
expect(state.allListsObject[list.id]).to.eql({ accountIds: list.accountIds }) expect(state.allListsObject[list.id]).to.eql({ accountIds: list.accountIds })
mutations.setListAccounts(state, modList) mutations.setListAccounts(state, { listId: modList.id, accountIds: modList.accountIds })
expect(state.allListsObject[modList.id]).to.eql({ accountIds: modList.accountIds }) expect(state.allListsObject[modList.id]).to.eql({ accountIds: modList.accountIds })
}) })
@ -47,9 +47,9 @@ describe('The lists module', () => {
1: { title: 'testList', accountIds: ['1', '2', '3'] } 1: { title: 'testList', accountIds: ['1', '2', '3'] }
} }
} }
const id = '1' const listId = '1'
mutations.deleteList(state, { id }) mutations.deleteList(state, { listId })
expect(state.allLists).to.have.length(0) expect(state.allLists).to.have.length(0)
expect(state.allListsObject).to.eql({}) expect(state.allListsObject).to.eql({})
}) })

13
test/unit/specs/modules/serverSideStorage.spec.js
View file

@ -107,7 +107,7 @@ describe('The serverSideStorage module', () => {
}) })
}) })
describe('setPreference', () => { describe('setPreference', () => {
const { setPreference, updateCache, addToCollection, removeFromCollection } = mutations const { setPreference, updateCache, addCollectionPreference, removeCollectionPreference } = mutations
it('should set preference and update journal log accordingly', () => { it('should set preference and update journal log accordingly', () => {
const state = cloneDeep(defaultState) const state = cloneDeep(defaultState)
@ -127,12 +127,12 @@ describe('The serverSideStorage module', () => {
const state = cloneDeep(defaultState) const state = cloneDeep(defaultState)
setPreference(state, { path: 'simple.testing', value: 1 }) setPreference(state, { path: 'simple.testing', value: 1 })
setPreference(state, { path: 'simple.testing', value: 2 }) setPreference(state, { path: 'simple.testing', value: 2 })
addToCollection(state, { path: 'collections.testing', value: 2 }) addCollectionPreference(state, { path: 'collections.testing', value: 2 })
removeFromCollection(state, { path: 'collections.testing', value: 2 }) removeCollectionPreference(state, { path: 'collections.testing', value: 2 })
updateCache(state, { username: 'test' }) updateCache(state, { username: 'test' })
expect(state.prefsStorage.simple.testing).to.eql(2) expect(state.prefsStorage.simple.testing).to.eql(2)
expect(state.prefsStorage.collections.testing).to.eql([]) expect(state.prefsStorage.collections.testing).to.eql([])
expect(state.prefsStorage._journal.length).to.eql(1) expect(state.prefsStorage._journal.length).to.eql(2)
expect(state.prefsStorage._journal[0]).to.eql({ expect(state.prefsStorage._journal[0]).to.eql({
path: 'simple.testing', path: 'simple.testing',
operation: 'set', operation: 'set',
@ -141,14 +141,13 @@ describe('The serverSideStorage module', () => {
timestamp: state.prefsStorage._journal[0].timestamp timestamp: state.prefsStorage._journal[0].timestamp
}) })
expect(state.prefsStorage._journal[1]).to.eql({ expect(state.prefsStorage._journal[1]).to.eql({
path: 'collection.testing', path: 'collections.testing',
operation: 'remove', operation: 'removeFromCollection',
args: [2], args: [2],
// should have A timestamp, we don't really care what it is // should have A timestamp, we don't really care what it is
timestamp: state.prefsStorage._journal[1].timestamp timestamp: state.prefsStorage._journal[1].timestamp
}) })
}) })
})
}) })
}) })