From fec1798301f0dbe6986c775e4596b07ce27145d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 30 May 2021 12:29:40 +0200 Subject: Fix mobile details toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- src/components/AppContent/AppDetailsToggle.vue | 70 ++++++++++++++++++++++++++ src/components/AppContent/CircleContent.vue | 15 +++++- src/components/EntityPicker/ContactsPicker.vue | 2 +- src/components/MemberList.vue | 60 +++++++++++++++------- src/models/member.d.ts | 2 +- src/models/member.ts | 9 ++-- src/views/Contacts.vue | 33 ++---------- 7 files changed, 137 insertions(+), 54 deletions(-) create mode 100644 src/components/AppContent/AppDetailsToggle.vue diff --git a/src/components/AppContent/AppDetailsToggle.vue b/src/components/AppContent/AppDetailsToggle.vue new file mode 100644 index 00000000..f9c86b60 --- /dev/null +++ b/src/components/AppContent/AppDetailsToggle.vue @@ -0,0 +1,70 @@ + + + + + + + diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue index f49f76cf..d5e22f15 100644 --- a/src/components/AppContent/CircleContent.vue +++ b/src/components/AppContent/CircleContent.vue @@ -35,8 +35,10 @@
+ + - + @@ -73,9 +75,11 @@ diff --git a/src/components/EntityPicker/ContactsPicker.vue b/src/components/EntityPicker/ContactsPicker.vue index 35b842f1..ef6f0f3f 100644 --- a/src/components/EntityPicker/ContactsPicker.vue +++ b/src/components/EntityPicker/ContactsPicker.vue @@ -9,7 +9,7 @@ - +
+
import AppContentList from '@nextcloud/vue/dist/Components/AppContentList' import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent' +import isMobile from '@nextcloud/vue/dist/Mixins/isMobile' import VirtualList from 'vue-virtual-scroll-list' import MembersListItem from './MembersList/MembersListItem' @@ -72,7 +78,7 @@ import RouterMixin from '../mixins/RouterMixin' import { getRecommendations, getSuggestions } from '../services/collaborationAutocompletion' import { showError, showWarning } from '@nextcloud/dialogs' import { subscribe } from '@nextcloud/event-bus' -import { SHARES_TYPES_MEMBER_MAP, CIRCLES_MEMBER_GROUPING, MemberTypes } from '../models/constants.ts' +import { SHARES_TYPES_MEMBER_MAP, CIRCLES_MEMBER_GROUPING } from '../models/constants.ts' export default { name: 'MemberList', @@ -83,7 +89,7 @@ export default { EntityPicker, EmptyContent, }, - mixins: [RouterMixin], + mixins: [isMobile, RouterMixin], props: { list: { @@ -95,11 +101,17 @@ export default { type: Boolean, default: false, }, + + showDetails: { + type: Boolean, + default: false, + }, }, data() { return { MembersListItem, + pickerLoading: false, showPicker: false, showPickerIntro: true, @@ -121,20 +133,18 @@ export default { return this.$store.getters.getCircle(this.selectedCircle) }, - filteredList() { + groupedList() { // Group per userType - const groupedList = this.list.reduce(function(r, a) { - // If the user type is a circle, this could originate from multiple sources - const userType = a.userType !== MemberTypes.CIRCLE - ? a.userType - : a.basedOn.source - - r[userType] = r[userType] || [] - r[userType].push(a) - return r + return this.list.reduce(function(list, member) { + const userType = member.userType + list[userType] = list[userType] || [] + list[userType].push(member) + return list }, Object.create(null)) + }, - return Object.keys(groupedList) + filteredList() { + return Object.keys(this.groupedList) // Object.keys returns string .map(type => parseInt(type, 10)) // Map populated types to the group entry @@ -143,7 +153,7 @@ export default { .map(group => [{ heading: true, ...group, - }, ...(groupedList[group.type] || [])]) + }, ...(this.groupedList[group.type] || [])]) // Merging sub-arrays .flat() }, @@ -151,6 +161,18 @@ export default { hasMembers() { return this.filteredList.length > 0 }, + + filteredPickerData() { + return this.pickerData.filter(entity => { + const type = SHARES_TYPES_MEMBER_MAP[entity.shareType] + const list = this.groupedList[type] + if (list) { + return list.find(member => member.userId === entity.shareWith) === undefined + } + // If the type doesn't exists, there is no member of this type + return true + }) + }, }, mounted() { @@ -249,6 +271,10 @@ export default { this.pickerData = [] this.pickerSelection = {} }, + + showCircleDetails() { + this.$emit('update:showDetails', true) + }, }, } diff --git a/src/models/member.d.ts b/src/models/member.d.ts index b779c194..ea3a75e9 100644 --- a/src/models/member.d.ts +++ b/src/models/member.d.ts @@ -59,7 +59,7 @@ export default class Member { /** * Member based on source */ - get basedOn(): Object; + get basedOn(): any; /** * Member level * diff --git a/src/models/member.ts b/src/models/member.ts index b62e6aad..4707a65a 100644 --- a/src/models/member.ts +++ b/src/models/member.ts @@ -21,7 +21,7 @@ */ import Circle from './circle' -import { MemberLevel, MemberLevels, MemberType } from './constants' +import { MemberLevel, MemberLevels, MemberType, MemberTypes } from './constants' export default class Member { @@ -95,13 +95,16 @@ export default class Member { * Member type */ get userType(): MemberType { - return this._data.userType + // If the user type is a circle, this could originate from multiple sources + return this._data.userType !== MemberTypes.CIRCLE + ? this._data.userType + : this.basedOn.source } /** * Member based on source */ - get basedOn(): Object { + get basedOn(): any { return this._data.basedOn } diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue index c336115f..a616377b 100644 --- a/src/views/Contacts.vue +++ b/src/views/Contacts.vue @@ -24,10 +24,7 @@