feat(files_trashbin): migrate to vue

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

1 files changed, 122 insertions, 0 deletions

diff --git a/apps/files/src/components/FilesListHeader.vue b/apps/files/src/components/FilesListHeader.vue
new file mode 100644
index 00000000000..588d86709da
--- /dev/null
+++ b/apps/files/src/components/FilesListHeader.vue
@@ -0,0 +1,122 @@
+<!--
+  - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
+  -
+  - @author Gary Kim <gary@garykim.dev>
+  -
+  - @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>
+	<tr>
+		<th class="files-list__row-checkbox">
+			<NcCheckboxRadioSwitch v-bind="selectAllBind" @update:checked="onToggleAll" />
+		</th>
+
+		<!-- Icon or preview -->
+		<th class="files-list__row-icon" />
+
+		<!-- Link to file and -->
+		<th class="files-list__row-name">
+			{{ t('files', 'Name') }}
+		</th>
+	</tr>
+</template>
+
+<script lang="ts">
+import { translate } from '@nextcloud/l10n'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+
+import logger from '../logger'
+import { File, Folder } from '@nextcloud/files'
+
+export default {
+	name: 'FilesListHeader',
+
+	components: {
+		NcCheckboxRadioSwitch,
+	},
+
+	props: {
+		nodes: {
+			type: [File, Folder],
+			required: true,
+		},
+	},
+
+	computed: {
+		dir() {
+			// Remove any trailing slash but leave root slash
+			return (this.$route?.query?.dir || '/').replace(/^(.+)\/$/, '$1')
+		},
+
+		selectAllBind() {
+			return {
+				ariaLabel: this.isNoneSelected || this.isSomeSelected
+					? this.t('files', 'Select all')
+					: this.t('files', 'Unselect all'),
+				checked: this.isAllSelected,
+				indeterminate: this.isSomeSelected,
+			}
+		},
+
+		isAllSelected() {
+			return this.selectedFiles.length === this.nodes.length
+		},
+
+		isNoneSelected() {
+			return this.selectedFiles.length === 0
+		},
+
+		isSomeSelected() {
+			return !this.isAllSelected && !this.isNoneSelected
+		},
+
+		selectedFiles() {
+			return this.$store.state.selection.selected
+		},
+	},
+
+	methods: {
+		/**
+		 * Get a cached note from the store
+		 *
+		 * @param {number} fileId the file id to get
+		 * @return {Folder|File}
+		 */
+		getNode(fileId) {
+			return this.$store.getters['files/getNode'](fileId)
+		},
+
+		onToggleAll(selected) {
+			if (selected) {
+				const selection = this.nodes.map(node => node.attributes.fileid.toString())
+				logger.debug('Added all nodes to selection', { selection })
+				this.$store.dispatch('selection/set', selection)
+			} else {
+				logger.debug('Cleared selection')
+				this.$store.dispatch('selection/reset')
+			}
+		},
+
+		t: translate,
+	},
+}
+</script>
+
+<style scoped lang="scss">
+@import '../mixins/fileslist-row.scss'
+
+</style>