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:
  add and remove users to/from lists from their profile
  edit mode
  fix anon user issues
This commit is contained in:
Henry Jameson 2022-08-15 23:20:03 +03:00
commit 6ad00a239b
14 changed files with 158 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/boot/routes.js
View file

@ -80,7 +80,7 @@ export default (store) => {
{ name: 'lists', path: '/lists', component: Lists },
{ name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
{ name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
{ name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true }), beforeEnter: validateAuthenticatedRoute }
{ name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
]
if (store.state.instance.pleromaChatMessagesAvailable) {

4
src/components/account_actions/account_actions.js
View file

@ -1,6 +1,7 @@
import { mapState } from 'vuex'
import ProgressButton from '../progress_button/progress_button.vue'
import Popover from '../popover/popover.vue'
import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEllipsisV
@ -19,7 +20,8 @@ const AccountActions = {
},
components: {
ProgressButton,
Popover
Popover,
UserListMenu
},
methods: {
showRepeats () {

1
src/components/account_actions/account_actions.vue
View file

@ -28,6 +28,7 @@
class="dropdown-divider"
/>
</template>
<UserListMenu :user="user" />
<button
v-if="relationship.blocking"
class="btn button-default btn-block dropdown-item"

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

@ -27,9 +27,9 @@ const ListsNew = {
}
},
created () {
this.$store.dispatch('fetchList', { id: this.id })
this.$store.dispatch('fetchList', { listId: this.id })
.then(() => { this.title = this.findListTitle(this.id) })
this.$store.dispatch('fetchListAccounts', { id: this.id })
this.$store.dispatch('fetchListAccounts', { listId: this.id })
.then(() => {
this.selectedUserIds = this.findListAccounts(this.id)
this.selectedUserIds.forEach(userId => {
@ -76,13 +76,13 @@ const ListsNew = {
this.userIds = results
},
updateList () {
this.$store.dispatch('setList', { id: this.id, title: this.title })
this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
this.$store.dispatch('setList', { listId: this.id, title: this.title })
this.$store.dispatch('setListAccounts', { listId: this.id, accountIds: this.selectedUserIds })
this.$router.push({ name: 'lists-timeline', params: { id: this.id } })
},
deleteList () {
this.$store.dispatch('deleteList', { id: this.id })
this.$store.dispatch('deleteList', { listId: this.id })
this.$router.push({ name: 'lists' })
}
}

4
src/components/lists_new/lists_new.js
View file

@ -69,8 +69,8 @@ const ListsNew = {
// and "updating the accounts on the list".
this.$store.dispatch('createList', { title: this.title })
.then((list) => {
this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
this.$router.push({ name: 'lists-timeline', params: { id: list.id } })
this.$store.dispatch('setListAccounts', { listId: list.id, accountIds: this.selectedUserIds })
this.$router.push({ name: 'lists-timeline', params: { listId: list.id } })
})
}
}

10
src/components/nav_panel/nav_panel.js
View file

@ -4,6 +4,7 @@ import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
import NavigationPins from 'src/components/navigation/navigation_pins.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@ -34,16 +35,18 @@ library.add(
faList
)
const NavPanel = {
props: ['forceExpand'],
props: ['forceExpand', 'forceEditMode'],
created () {
},
components: {
ListsMenuContent,
NavigationEntry,
NavigationPins
NavigationPins,
Checkbox
},
data () {
return {
editMode: false,
showTimelines: false,
showLists: false,
timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
@ -57,6 +60,9 @@ const NavPanel = {
toggleLists () {
this.showLists = !this.showLists
},
toggleEditMode () {
this.editMode = !this.editMode
},
toggleCollapse () {
this.$store.commit('setPreference', { path: 'simple.collapseNav', value: !this.collapsed })
this.$store.dispatch('pushServerSideStorage')

14
src/components/nav_panel/nav_panel.vue
View file

@ -46,7 +46,7 @@
<NavigationEntry
v-for="item in timelinesItems"
:key="item.name"
:show-pin="true"
:show-pin="editMode"
:item="item"
/>
</ul>
@ -83,7 +83,7 @@
class="timelines-background"
>
<ListsMenuContent
:show-pin="true"
:show-pin="editMode"
class="timelines"
/>
</div>
@ -91,9 +91,17 @@
<NavigationEntry
v-for="item in rootItems"
:key="item.name"
:show-pin="true"
:show-pin="editMode || forceEditMode"
:item="item"
/>
<div
v-if="!forceEditMode"
class="panel-footer"
>
<Checkbox v-model="editMode">
{{ $t('nav.edit_pinned') }}
</Checkbox>
</div>
</ul>
</div>
</div>

25
src/components/popover/popover.js
View file

@ -4,7 +4,7 @@ const Popover = {
// Action to trigger popover: either 'hover' or 'click'
trigger: String,
// Either 'top' or 'bottom'
// 'top', 'bottom', 'left', 'right'
placement: String,
// Takes object with properties 'x' and 'y', values of these can be
@ -84,6 +84,8 @@ const Popover = {
const anchorStyle = getComputedStyle(anchorEl)
const topPadding = parseFloat(anchorStyle.paddingTop)
const bottomPadding = parseFloat(anchorStyle.paddingBottom)
const rightPadding = parseFloat(anchorStyle.paddingRight)
const leftPadding = parseFloat(anchorStyle.paddingLeft)
// Screen position of the origin point for popover = center of the anchor
const origin = {
@ -170,7 +172,7 @@ const Popover = {
if (overlayCenter) {
translateX = origin.x + horizOffset
translateY = origin.y + vertOffset
} else {
} else if (this.placement !== 'right' && this.placement !== 'left') {
// Default to whatever user wished with placement prop
let usingTop = this.placement !== 'bottom'
@ -189,6 +191,25 @@ const Popover = {
const xOffset = (this.offset && this.offset.x) || 0
translateX = origin.x + horizOffset + xOffset
} else {
// Default to whatever user wished with placement prop
let usingRight = this.placement !== 'left'
// Handle special cases, first force to displaying on top if there's not space on bottom,
// regardless of what placement value was. Then check if there's not space on top, and
// force to bottom, again regardless of what placement value was.
const rightBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? rightPadding : 0)
const leftBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? leftPadding : 0)
if (leftBoundary + content.offsetWidth > xBounds.max) usingRight = true
if (rightBoundary - content.offsetWidth < xBounds.min) usingRight = false
const xOffset = (this.offset && this.offset.x) || 0
translateX = usingRight
? rightBoundary - xOffset - content.offsetWidth
: leftBoundary + xOffset
const yOffset = (this.offset && this.offset.y) || 0
translateY = origin.y + vertOffset + yOffset
}
this.styles = {

6
src/i18n/en.json
View file

@ -150,7 +150,8 @@
"timelines": "Timelines",
"chats": "Chats",
"lists": "Lists",
"edit_nav_mobile": "Customize navigation bar"
"edit_nav_mobile": "Customize navigation bar",
"edit_pinned": "Edit pinned items"
},
"notifications": {
"broken_favorite": "Unknown status, searching for it…",
@ -979,7 +980,8 @@
"create": "Create",
"save": "Save changes",
"delete": "Delete list",
"following_only": "Limit to Following"
"following_only": "Limit to Following",
"manage_lists": "Manage lists"
},
"file_type": {
"audio": "Audio",

97
src/modules/lists.js
View file

@ -9,27 +9,42 @@ export const mutations = {
setLists (state, value) {
state.allLists = value
},
setList (state, { id, title }) {
if (!state.allListsObject[id]) {
state.allListsObject[id] = {}
setList (state, { listId, title }) {
if (!state.allListsObject[listId]) {
state.allListsObject[listId] = { accountIds: [] }
}
state.allListsObject[id].title = title
state.allListsObject[listId].title = title
if (!find(state.allLists, { id })) {
state.allLists.push({ id, title })
if (!find(state.allLists, { listId })) {
state.allLists.push({ listId, title })
} else {
find(state.allLists, { id }).title = title
find(state.allLists, { listId }).title = title
}
},
setListAccounts (state, { id, accountIds }) {
if (!state.allListsObject[id]) {
state.allListsObject[id] = {}
setListAccounts (state, { listId, accountIds }) {
if (!state.allListsObject[listId]) {
state.allListsObject[listId] = { accountIds: [] }
}
state.allListsObject[id].accountIds = accountIds
state.allListsObject[listId].accountIds = accountIds
},
deleteList (state, { id }) {
delete state.allListsObject[id]
remove(state.allLists, list => list.id === id)
addListAccount (state, { listId, accountId }) {
if (!state.allListsObject[listId]) {
state.allListsObject[listId] = { accountIds: [] }
}
state.allListsObject[listId].accountIds.push(accountId)
},
removeListAccount (state, { listId, accountId }) {
if (!state.allListsObject[listId]) {
state.allListsObject[listId] = { accountIds: [] }
}
const { accountIds } = state.allListsObject[listId]
const set = new Set(accountIds)
set.delete(accountId)
state.allListsObject[listId].accountIds = [...set]
},
deleteList (state, { listId }) {
delete state.allListsObject[listId]
remove(state.allLists, list => list.id === listId)
}
}
@ -40,37 +55,57 @@ const actions = {
createList ({ rootState, commit }, { title }) {
return rootState.api.backendInteractor.createList({ title })
.then((list) => {
commit('setList', { id: list.id, title })
commit('setList', { listId: list.id, title })
return list
})
},
fetchList ({ rootState, commit }, { id }) {
return rootState.api.backendInteractor.getList({ id })
fetchList ({ rootState, commit }, { listId }) {
return rootState.api.backendInteractor.getList({ listId })
.then((list) => commit('setList', { id: list.id, title: list.title }))
},
fetchListAccounts ({ rootState, commit }, { id }) {
return rootState.api.backendInteractor.getListAccounts({ id })
.then((accountIds) => commit('setListAccounts', { id, accountIds }))
fetchListAccounts ({ rootState, commit }, { listId }) {
return rootState.api.backendInteractor.getListAccounts({ listId })
.then((accountIds) => commit('setListAccounts', { listId, accountIds }))
},
setList ({ rootState, commit }, { id, title }) {
rootState.api.backendInteractor.updateList({ id, title })
commit('setList', { id, title })
setList ({ rootState, commit }, { listId, title }) {
rootState.api.backendInteractor.updateList({ listId, title })
commit('setList', { listId, title })
},
setListAccounts ({ rootState, commit }, { id, accountIds }) {
const saved = rootState.lists.allListsObject[id].accountIds || []
setListAccounts ({ rootState, commit }, { listId, accountIds }) {
const saved = rootState.lists.allListsObject[listId].accountIds || []
const added = accountIds.filter(id => !saved.includes(id))
const removed = saved.filter(id => !accountIds.includes(id))
commit('setListAccounts', { id, accountIds })
commit('setListAccounts', { listId, accountIds })
if (added.length > 0) {
rootState.api.backendInteractor.addAccountsToList({ id, accountIds: added })
rootState.api.backendInteractor.addAccountsToList({ listId, accountIds: added })
}
if (removed.length > 0) {
rootState.api.backendInteractor.removeAccountsFromList({ id, accountIds: removed })
rootState.api.backendInteractor.removeAccountsFromList({ listId, accountIds: removed })
}
},
deleteList ({ rootState, commit }, { id }) {
rootState.api.backendInteractor.deleteList({ id })
commit('deleteList', { id })
addListAccount ({ rootState, commit }, { listId, accountId }) {
return rootState
.api
.backendInteractor
.addAccountsToList({ listId, accountIds: [accountId] })
.then((result) => {
commit('addListAccount', { listId, accountId })
return result
})
},
removeListAccount ({ rootState, commit }, { listId, accountId }) {
return rootState
.api
.backendInteractor
.removeAccountsFromList({ listId, accountIds: [accountId] })
.then((result) => {
commit('removeListAccount', { listId, accountId })
return result
})
},
deleteList ({ rootState, commit }, { listId }) {
rootState.api.backendInteractor.deleteList({ listId })
commit('deleteList', { listId })
}
}

4
src/modules/serverSideStorage.js
View file

@ -26,7 +26,7 @@ export const defaultState = {
collapseNav: false
},
collections: {
pinnedNavItems: ['home', 'dms', 'chats', 'about']
pinnedNavItems: ['home', 'dms', 'chats']
}
},
// raw data
@ -262,7 +262,7 @@ export const mutations = {
const live = userData.storage
state.raw = live
let cache = state.cache
if (cache._user !== userData.fqn) {
if (cache && cache._user !== userData.fqn) {
console.warn('cache belongs to another user! reinitializing local cache!')
cache = null
}

9
src/modules/users.js
View file

@ -170,6 +170,9 @@ export const mutations = {
state.relationships[relationship.id] = relationship
})
},
updateUserInLists (state, { id, inLists }) {
state.usersObject[id].inLists = inLists
},
saveBlockIds (state, blockIds) {
state.currentUser.blockIds = blockIds
},
@ -291,6 +294,12 @@ const users = {
.then((relationships) => store.commit('updateUserRelationship', relationships))
}
},
fetchUserInLists (store, id) {
if (store.state.currentUser) {
store.rootState.api.backendInteractor.fetchUserInLists({ id })
.then((inLists) => store.commit('updateUserInLists', { id, inLists }))
}
},
fetchBlocks (store) {
return store.rootState.api.backendInteractor.fetchBlocks()
.then((blocks) => {

35
src/services/api/api.service.js
View file

@ -52,6 +52,7 @@ const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
const MASTODON_USER_URL = '/api/v1/accounts'
const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
const MASTODON_USER_IN_LISTS = id => `/api/v1/accounts/${id}/lists`
const MASTODON_LIST_URL = id => `/api/v1/lists/${id}`
const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
const MASTODON_LIST_ACCOUNTS_URL = id => `/api/v1/lists/${id}/accounts`
@ -262,6 +263,13 @@ const unfollowUser = ({ id, credentials }) => {
}).then((data) => data.json())
}
const fetchUserInLists = ({ id, credentials }) => {
const url = MASTODON_USER_IN_LISTS(id)
return fetch(url, {
headers: authHeaders(credentials)
}).then((data) => data.json())
}
const pinOwnStatus = ({ id, credentials }) => {
return promisedRequest({ url: MASTODON_PIN_OWN_STATUS(id), credentials, method: 'POST' })
.then((data) => parseStatus(data))
@ -408,14 +416,14 @@ const createList = ({ title, credentials }) => {
}).then((data) => data.json())
}
const getList = ({ id, credentials }) => {
const url = MASTODON_LIST_URL(id)
const getList = ({ listId, credentials }) => {
const url = MASTODON_LIST_URL(listId)
return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json())
}
const updateList = ({ id, title, credentials }) => {
const url = MASTODON_LIST_URL(id)
const updateList = ({ listId, title, credentials }) => {
const url = MASTODON_LIST_URL(listId)
const headers = authHeaders(credentials)
headers['Content-Type'] = 'application/json'
@ -426,15 +434,15 @@ const updateList = ({ id, title, credentials }) => {
})
}
const getListAccounts = ({ id, credentials }) => {
const url = MASTODON_LIST_ACCOUNTS_URL(id)
const getListAccounts = ({ listId, credentials }) => {
const url = MASTODON_LIST_ACCOUNTS_URL(listId)
return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json())
.then((data) => data.map(({ id }) => id))
}
const addAccountsToList = ({ id, accountIds, credentials }) => {
const url = MASTODON_LIST_ACCOUNTS_URL(id)
const addAccountsToList = ({ listId, accountIds, credentials }) => {
const url = MASTODON_LIST_ACCOUNTS_URL(listId)
const headers = authHeaders(credentials)
headers['Content-Type'] = 'application/json'
@ -445,8 +453,8 @@ const addAccountsToList = ({ id, accountIds, credentials }) => {
})
}
const removeAccountsFromList = ({ id, accountIds, credentials }) => {
const url = MASTODON_LIST_ACCOUNTS_URL(id)
const removeAccountsFromList = ({ listId, accountIds, credentials }) => {
const url = MASTODON_LIST_ACCOUNTS_URL(listId)
const headers = authHeaders(credentials)
headers['Content-Type'] = 'application/json'
@ -457,8 +465,8 @@ const removeAccountsFromList = ({ id, accountIds, credentials }) => {
})
}
const deleteList = ({ id, credentials }) => {
const url = MASTODON_LIST_URL(id)
const deleteList = ({ listId, credentials }) => {
const url = MASTODON_LIST_URL(listId)
return fetch(url, {
method: 'DELETE',
headers: authHeaders(credentials)
@ -1563,7 +1571,8 @@ const apiService = {
sendChatMessage,
readChat,
deleteChatMessage,
setReportState
setReportState,
fetchUserInLists
}
export default apiService

1
src/services/entity_normalizer/entity_normalizer.service.js
View file

@ -43,6 +43,7 @@ export const parseUser = (data) => {
// case for users in "mentions" property for statuses in MastoAPI
const mastoShort = masto && !Object.prototype.hasOwnProperty.call(data, 'avatar')
output.inLists = null
output.id = String(data.id)
output._original = data // used for server-side settings