refactor SharedItems.vue component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue

@@ -141,6 +141,7 @@ export default {
 
 .wide {
 	max-width: 400px;
+	width: 100%;
 	margin: 4px auto;
 }
 

src/components/RightSidebar/SharedItems/SharedItems.vue

@@ -20,47 +20,40 @@
 -->
 
 <template>
-	<div class="shared-items" :class="{'shared-items__list' : isList}">
+	<div class="shared-items" :class="{'shared-items__list' : hasListLayout}">
 		<template v-for="item in itemsToDisplay">
-			<div v-if="type === 'location'"
-				:key="item.id"
-				class="shared-items__location"
-				:class="{ 'shared-items__location--nolimit': limit === 0 }">
-				<Location :wide="true"
-					v-bind="item.messageParameters.object" />
+			<div v-if="isLocation" :key="item.id" class="shared-items__location">
+				<Location wide v-bind="item.messageParameters.object" />
 			</div>
-			<div v-else-if="type === 'deckcard'"
+
+			<DeckCard v-else-if="isDeckCard"
 				:key="item.id"
-				class="shared-items__deckcard"
-				:class="{ 'shared-items__deckcard--nolimit': limit === 0 }">
-				<DeckCard :wide="true"
-					v-bind="item.messageParameters.object" />
-			</div>
-			<div v-else-if="type === 'poll'"
+				wide
+				v-bind="item.messageParameters.object" />
+
+			<Poll v-else-if="isPoll"
 				:key="item.id"
-				class="shared-items__poll"
-				:class="{ 'shared-items__poll--nolimit': limit === 0 }">
-				<Poll v-bind="item.messageParameters.object"
-					:token="$store.getters.getToken()"
-					:poll-name="item.messageParameters.object.name" />
+				:token="token"
+				v-bind="item.messageParameters.object"
+				:poll-name="item.messageParameters.object.name" />
+
+			<div v-else-if="isOther"
+				:key="item.id"
+				class="shared-items__other">
+				<a v-if="item.messageParameters.object.link"
+					:href="item.messageParameters.object.link"
+					target="_blank">
+					{{ item.messageParameters.object.name }}
+				</a>
+				<p v-else>
+					{{ item.messageParameters.object.name }}
+				</p>
 			</div>
-			<template v-else-if="type === 'other'">
-				<div :key="item.id"
-					class="shared-items__other">
-					<a v-if="item.messageParameters.object.link"
-						:href="item.messageParameters.object.link"
-						target="_blank">
-						{{ item.messageParameters.object.name }}
-					</a>
-					<p v-else>
-						{{ item.messageParameters.object.name }}
-					</p>
-				</div>
-			</template>
+
 			<FilePreview v-else
 				:key="item.id"
-				:small-preview="isList"
-				:row-layout="isList"
+				:small-preview="!isMedia"
+				:row-layout="!isMedia"
 				:shared-items-type="type"
 				:is-shared-items-tab="true"
 				v-bind="item.messageParameters.file" />
@@ -87,6 +80,11 @@ export default {
 	},
 
 	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+
 		type: {
 			type: String,
 			required: true,
@@ -100,25 +98,37 @@ export default {
 		// Limits the amount of items displayed
 		limit: {
 			type: Number,
-			default: 0,
+			default: undefined,
+		},
+
+		// Whether items are shown directly in SharedItemsTab
+		tabView: {
+			type: Boolean,
+			default: false,
 		},
 	},
 
 	computed: {
 		itemsToDisplay() {
-			if (this.limit === 0) {
-				return Object.values(this.items).reverse()
-			} else {
-				return Object.values(this.items).reverse().slice(0, this.limit)
-			}
+			return Object.values(this.items).reverse().slice(0, this.limit)
 		},
-
-		isList() {
-			if (this.type === SHARED_ITEM.TYPES.MEDIA) {
-				return false
-			} else {
-				return true
-			}
+		isLocation() {
+			return this.type === SHARED_ITEM.TYPES.LOCATION
+		},
+		isDeckCard() {
+			return this.type === SHARED_ITEM.TYPES.DECK_CARD
+		},
+		isPoll() {
+			return this.type === SHARED_ITEM.TYPES.POLL
+		},
+		isOther() {
+			return this.type === SHARED_ITEM.TYPES.OTHER
+		},
+		isMedia() {
+			return this.type === SHARED_ITEM.TYPES.MEDIA
+		},
+		hasListLayout() {
+			return !this.isMedia && (this.tabView || (!this.isLocation && !this.isDeckCard && !this.isPoll))
 		},
 	},
 }
@@ -133,27 +143,12 @@ export default {
 	margin: auto;
 
 	&__list {
-		display: flex;
-		flex-wrap: wrap;
+		grid-template-columns: 1fr;
 	}
 
 	&__location {
-		width: 100%;
 		height: 150px;
 		margin: 4px 0;
-
-		&--nolimit {
-			width: 33%;
-		}
-	}
-
-	&__poll,
-	&__deckcard {
-		width: 100%;
-
-		&--nolimit {
-			width: 33%;
-		}
 	}
 
 	&__other {

src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue

@@ -35,6 +35,7 @@
 			</div>
 			<div ref="scroller" class="shared-items-browser__content" @scroll="debounceHandleScroll">
 				<SharedItems :type="activeTab"
+					:token="token"
 					:items="sharedItems[activeTab]" />
 			</div>
 		</div>
@@ -61,6 +62,11 @@ export default {
 	},
 
 	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+
 		sharedItems: {
 			type: Object,
 			required: true,
@@ -94,10 +100,6 @@ export default {
 			return this.$refs.scroller
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		container() {
 			return this.$store.getters.getMainContainerSelector()
 		},

src/components/RightSidebar/SharedItems/SharedItemsTab.vue

@@ -25,6 +25,8 @@
 			<div v-if="sharedItems[type]" :key="type">
 				<NcAppNavigationCaption :title="sharedItemTitle[type] || sharedItemTitle.default" />
 				<SharedItems :type="type"
+					:token="token"
+					tab-view
 					:limit="limit(type)"
 					:items="sharedItems[type]" />
 				<NcButton v-if="hasMore(type, sharedItems[type])"
@@ -58,6 +60,7 @@
 			</template>
 		</NcEmptyContent>
 		<SharedItemsBrowser v-if="showSharedItemsBrowser"
+			:token="token"
 			:shared-items="sharedItems"
 			:active-tab.sync="browserActiveTab"
 			@close="showSharedItemsBrowser = false" />