Table.vue

<!--
  - @copyright Copyright (c) 2020 Jonas Heinrich
  -
  - @author Jonas Heinrich <onny@project-insanity.org>
  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
  - License, or (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  - GNU Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
  -
  -->

<template>
	<table>
		<thead>
			<tr>
				<th class="iconColumn" />
				<th class="nameColumn">
					{{ t('podcast', 'Name') }}
				</th>
				<th class="actionColumn" />
				<th style="width: 90px">
					{{ t('podcast', 'Duration') }}
				</th>
				<th style="width: 130px">
					{{ t('podcast', 'Date') }}
				</th>
			</tr>
		</thead>
		<tbody>
			<tr
				v-for="(episode, idx) in stationData"
				:key="idx"
				:class="{ selected: idx === activeItem}">
				<td class="iconColumn" @click="doPlay(idx, episode)">
					<blur-hash-image
						width="64"
						height="64"
						hash="L1TSUA?bj[?b~qfQfQj[ayfQfQfQ"
						:src="episode.imgURL" />
				</td>
				<td class="nameColumn" @click="doPlay(idx, episode)">
					<b>{{ episode.title }}</b>
					<span>{{ episode.description }}</span>
				</td>
				<td class="actionColumn">
					<Actions>
						<ActionButton
							v-if="!favorites.flat().includes(episode.stationuuid)"
							icon="icon-star"
							:close-after-click="true"
							@click="doFavor(idx, episode)">
							{{ t('podcast', 'Add to favorites') }}
						</ActionButton>
						<ActionButton
							v-if="favorites.flat().includes(episode.stationuuid)"
							icon="icon-star"
							:close-after-click="true"
							@click="doFavor(idx, episode)">
							{{ t('podcast', 'Remove from favorites') }}
						</ActionButton>
						<ActionButton
							icon="icon-info"
							:close-after-click="true"
							@click="toggleSidebar(episoe)">
							{{ t('podcast', 'Details') }}
						</ActionButton>
					</Actions>
				</td>
				<td>
					{{ episode.duration_string }}
				</td>
				<td>
					<TimeAgo :datetime="episode.inserted" />
				</td>
			</tr>
		</tbody>
	</table>
</template>

<script>
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import TimeAgo from 'vue2-timeago'

export default {
	name: 'Table',
	components: {
		Actions,
		ActionButton,
		TimeAgo,
	},
	props: {
		favorites: {
			type: Array,
			default() { return [] },
		},
		stationData: {
			type: Array,
			default() { return [] },
		},
	},
	data: () => ({
		activeItem: null,
	}),
	computed: {
		isFolder() {
			if (this.stationData[0]) {
				if (this.stationData[0].type === 'folder') {
					return true
				}
			}
			return false
		},
	},
	methods: {
		doPlay(idx, station) {
			this.activeItem = idx
			this.$emit('doPlay', station)
		},
		doFavor(idx, station) {
			this.$emit('doFavor', station)
		},
		toggleSidebar(station) {
			this.$emit('toggleSidebar', station)
		},
		changeRoute(path) {
			this.$router.push({ path })
		},
	},
}
</script>

<style lang="scss">

/* Workaround wrong positioning
   actions popover menu
	  https://github.com/nextcloud/nextcloud-vue/issues/1384 */
body {
	min-height: 100%;
	height: auto;
}

table {
	width: 100%;
	min-width: 250px;
	table-layout:fixed;
	position: relative;

	thead {
		background-color: var(--color-main-background-translucent);
		z-index: 60;
		position: sticky;
		top: 50px;

		th {
			border-bottom: 1px solid var(--color-border);
			padding: 15px;
			height: 50px;
		}

		th, th a {
			color: var(--color-text-maxcontrast);
		}

		th.iconColumn {
			padding: 0px;
			width: 115px;
		}

		th.nameColumn {
			width: 100%;
		}

		th.actionColumn {
			width: 72px;
		}

	}

	tbody {

		td {
			padding: 0 15px;
			font-style: normal;
			background-position: 8px center;
			background-repeat: no-repeat;
			border-bottom: 1px solid var(--color-border);
			cursor: pointer;
		}

		tr {
			height: 91px;
			background-color: var(--color-background-light);
			transition: opacity 500ms ease 0s;

			tr:hover, tr:focus, tr.mouseOver td {
				background-color: var(--color-background-hover);
			}

		}

		tr td * {
			cursor: pointer;
		}

		tr.selected {
			background-color: var(--color-primary-light);
		}

		td.iconColumn {
			padding-right: 0px;
			padding-left: 40px;
		}

		td.nameColumn {
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right: 0px;
		}

		td.nameColumn b {
			color: var(--color-main-text);
			user-select: none;
			cursor: pointer;
			font-size: 1.1em;
		}

		td.nameColumn span {
			display: block;
			max-height: 45px;
			background: red;
			white-space: normal;
			text-overflow: ellipsis;
			overflow: hidden;
			color: #657786;
		}
	}

}

</style>