134 lines
3.5 KiB
Vue
134 lines
3.5 KiB
Vue
<!--
|
|
- SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
|
|
- SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
|
|
<template>
|
|
<tr :class="{'files-list__row--active': isActive, 'files-list__row--dragover': dragover, 'files-list__row--loading': isLoading}"
|
|
data-cy-files-list-row
|
|
:data-cy-files-list-row-fileid="fileid"
|
|
:data-cy-files-list-row-name="source.basename"
|
|
:draggable="canDrag"
|
|
class="files-list__row"
|
|
@contextmenu="onRightClick"
|
|
@dragover="onDragOver"
|
|
@dragleave="onDragLeave"
|
|
@dragstart="onDragStart"
|
|
@dragend="onDragEnd"
|
|
@drop="onDrop">
|
|
<!-- Failed indicator -->
|
|
<span v-if="isFailedSource" class="files-list__row--failed" />
|
|
|
|
<!-- Checkbox -->
|
|
<FileEntryCheckbox :fileid="fileid"
|
|
:is-loading="isLoading"
|
|
:nodes="nodes"
|
|
:source="source" />
|
|
|
|
<!-- Link to file -->
|
|
<td class="files-list__row-name" data-cy-files-list-row-name>
|
|
<!-- Icon or preview -->
|
|
<FileEntryPreview ref="preview"
|
|
:dragover="dragover"
|
|
:grid-mode="true"
|
|
:source="source"
|
|
@auxclick.native="execDefaultAction"
|
|
@click.native="execDefaultAction" />
|
|
|
|
<FileEntryName ref="name"
|
|
:basename="basename"
|
|
:extension="extension"
|
|
:grid-mode="true"
|
|
:nodes="nodes"
|
|
:source="source"
|
|
@auxclick.native="execDefaultAction"
|
|
@click.native="execDefaultAction" />
|
|
</td>
|
|
|
|
<!-- Mtime -->
|
|
<td v-if="!compact && isMtimeAvailable"
|
|
:style="mtimeOpacity"
|
|
class="files-list__row-mtime"
|
|
data-cy-files-list-row-mtime
|
|
@click="openDetailsIfAvailable">
|
|
<NcDateTime v-if="source.mtime" :timestamp="source.mtime" :ignore-seconds="true" />
|
|
</td>
|
|
|
|
<!-- Actions -->
|
|
<FileEntryActions ref="actions"
|
|
:class="`files-list__row-actions-${uniqueId}`"
|
|
:grid-mode="true"
|
|
:opened.sync="openedMenu"
|
|
:source="source" />
|
|
</tr>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
|
|
import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
|
|
|
|
import { useNavigation } from '../composables/useNavigation.ts'
|
|
import { useRouteParameters } from '../composables/useRouteParameters.ts'
|
|
import { useActionsMenuStore } from '../store/actionsmenu.ts'
|
|
import { useDragAndDropStore } from '../store/dragging.ts'
|
|
import { useFilesStore } from '../store/files.ts'
|
|
import { useRenamingStore } from '../store/renaming.ts'
|
|
import { useSelectionStore } from '../store/selection.ts'
|
|
import FileEntryMixin from './FileEntryMixin.ts'
|
|
import FileEntryActions from './FileEntry/FileEntryActions.vue'
|
|
import FileEntryCheckbox from './FileEntry/FileEntryCheckbox.vue'
|
|
import FileEntryName from './FileEntry/FileEntryName.vue'
|
|
import FileEntryPreview from './FileEntry/FileEntryPreview.vue'
|
|
|
|
export default defineComponent({
|
|
name: 'FileEntryGrid',
|
|
|
|
components: {
|
|
FileEntryActions,
|
|
FileEntryCheckbox,
|
|
FileEntryName,
|
|
FileEntryPreview,
|
|
NcDateTime,
|
|
},
|
|
|
|
mixins: [
|
|
FileEntryMixin,
|
|
],
|
|
|
|
inheritAttrs: false,
|
|
|
|
setup() {
|
|
const actionsMenuStore = useActionsMenuStore()
|
|
const draggingStore = useDragAndDropStore()
|
|
const filesStore = useFilesStore()
|
|
const renamingStore = useRenamingStore()
|
|
const selectionStore = useSelectionStore()
|
|
// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
|
|
const { currentView } = useNavigation(true)
|
|
const {
|
|
directory: currentDir,
|
|
fileId: currentFileId,
|
|
} = useRouteParameters()
|
|
|
|
return {
|
|
actionsMenuStore,
|
|
draggingStore,
|
|
filesStore,
|
|
renamingStore,
|
|
selectionStore,
|
|
|
|
currentDir,
|
|
currentFileId,
|
|
currentView,
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
gridMode: true,
|
|
}
|
|
},
|
|
})
|
|
</script>
|