nextcloud/apps/files/src/components/FilesListHeader.vue

<!--
  - @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>