Skip to content

Commit

Permalink
fix(files): Fix Typescript type issues of mixing string and number
Browse files Browse the repository at this point in the history 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
@susnux
susnux committed Dec 1, 2023
1 parent f49550d commit 5858325
Show file tree
Hide file tree
Showing 8 changed files with 143 additions and 103 deletions.
62 changes: 34 additions & 28 deletions apps/files/src/components/FileEntry.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,13 +104,13 @@
import type { PropType } from 'vue'

import { extname, join } from 'path'
import { FileType, formatFileSize, Permission, Folder, File as NcFile, NodeStatus, Node, View } from '@nextcloud/files'
import { FileType, formatFileSize, Permission, Folder, File as NcFile, NodeStatus, Node as NcNode, View, Navigation } from '@nextcloud/files'
import { getUploader } from '@nextcloud/upload'
import { showError } from '@nextcloud/dialogs'
import { translate as t } from '@nextcloud/l10n'
import { vOnClickOutside } from '@vueuse/components'
import moment from '@nextcloud/moment'
import Vue from 'vue'
import Vue, { defineComponent } from 'vue'

import { action as sidebarAction } from '../actions/sidebarAction.ts'
import { getDragAndDropPreview } from '../utils/dragUtils.ts'
Expand All @@ -132,7 +132,7 @@ import logger from '../logger.js'

Vue.directive('onClickOutside', vOnClickOutside)

export default Vue.extend({
export default defineComponent({
name: 'FileEntry',

components: {
Expand All @@ -154,11 +154,11 @@ export default Vue.extend({
default: false,
},
source: {
type: [Folder, NcFile, Node] as PropType<Node>,
type: [Folder, NcFile, NcNode] as PropType<NcNode>,
required: true,
},
nodes: {
type: Array as PropType<Node[]>,
type: Array as PropType<NcNode[]>,
required: true,
},
filesListWidth: {
Expand Down Expand Up @@ -194,8 +194,8 @@ export default Vue.extend({
},

computed: {
currentView(): View {
return this.$navigation.active as View
currentView() {
return (this.$navigation as Navigation).active
},
columns() {
// Hide columns if the list is too small
Expand All @@ -213,7 +213,7 @@ export default Vue.extend({
return this.$route.params?.fileid || this.$route.query?.fileid || null
},
fileid() {
return this.source?.fileid?.toString?.()
return this.source?.fileid
},
uniqueId() {
return hashCode(this.source.source)
Expand All @@ -238,7 +238,7 @@ export default Vue.extend({
},

size() {
const size = parseInt(this.source.size, 10) || 0
const size = this.source.size ?? 0
if (typeof size !== 'number' || size < 0) {
return t('files', 'Pending')
}
Expand All @@ -247,12 +247,12 @@ export default Vue.extend({
sizeOpacity() {
const maxOpacitySize = 10 * 1024 * 1024

const size = parseInt(this.source.size, 10) || 0
const size = this.source.size ?? 0
if (!size || size < 0) {
return {}
}

const ratio = Math.round(Math.min(100, 100 * Math.pow((this.source.size / maxOpacitySize), 2)))
const ratio = Math.round(Math.min(100, 100 * Math.pow(((this.source.size ?? 0) / maxOpacitySize), 2)))
return {
color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
}
Expand Down Expand Up @@ -288,7 +288,7 @@ export default Vue.extend({
return this.selectionStore.selected
},
isSelected() {
return this.selectedFiles.includes(this.fileid)
return this.fileid !== undefined && this.selectedFiles.includes(this.fileid)
},

isRenaming() {
Expand All @@ -303,13 +303,13 @@ export default Vue.extend({
},

canDrag() {
const canDrag = (node: Node): boolean => {
const canDrag = (node: NcNode): boolean => {
return (node?.permissions & Permission.UPDATE) !== 0
}

// If we're dragging a selection, we need to check all files
if (this.selectedFiles.length > 0) {
const nodes = this.selectedFiles.map(fileid => this.filesStore.getNode(fileid)) as Node[]
const nodes = this.selectedFiles.map(fileid => this.filesStore.getNode(fileid)) as NcNode[]
return nodes.every(canDrag)
}
return canDrag(this.source)
Expand All @@ -321,7 +321,7 @@ export default Vue.extend({
}

// If the current folder is also being dragged, we can't drop it on itself
if (this.draggingFiles.includes(this.fileid)) {
if (this.fileid !== undefined && this.draggingFiles.includes(this.fileid)) {
return false
}

Expand Down Expand Up @@ -357,7 +357,7 @@ export default Vue.extend({
// Reset loading state
this.loading = ''

this.$refs.preview.reset()
this.$refs.preview?.reset?.()

// Close menu
this.openedMenu = false
Expand All @@ -380,19 +380,23 @@ export default Vue.extend({
},

execDefaultAction(...args) {
this.$refs.actions.execDefaultAction(...args)
this.$refs.actions?.execDefaultAction?.(...args)
},

openDetailsIfAvailable(event) {
event.preventDefault()
event.stopPropagation()
if (sidebarAction?.enabled?.([this.source], this.currentView)) {
if (this.currentView && sidebarAction?.enabled?.([this.source], this.currentView)) {
sidebarAction.exec(this.source, this.currentView, this.currentDir)
}
},

onDragOver(event: DragEvent) {
this.dragover = this.canDrop
if (!event.dataTransfer) {
return
}

if (!this.canDrop) {
event.dataTransfer.dropEffect = 'none'
return
Expand Down Expand Up @@ -431,14 +435,16 @@ export default Vue.extend({

// Dragging set of files, if we're dragging a file
// that is already selected, we use the entire selection
if (this.selectedFiles.includes(this.fileid)) {
this.draggingStore.set(this.selectedFiles)
} else {
this.draggingStore.set([this.fileid])
if (this.fileid !== undefined) {
if (this.selectedFiles.includes(this.fileid)) {
this.draggingStore.set(this.selectedFiles)
} else {
this.draggingStore.set([this.fileid])
}
}

const nodes = this.draggingStore.dragging
.map(fileid => this.filesStore.getNode(fileid)) as Node[]
.map(fileid => this.filesStore.getNode(fileid)) as NcNode[]

const image = await getDragAndDropPreview(nodes)
event.dataTransfer?.setDragImage(image, -10, -10)
Expand Down Expand Up @@ -474,18 +480,18 @@ export default Vue.extend({
return
}

const nodes = this.draggingFiles.map(fileid => this.filesStore.getNode(fileid)) as Node[]
nodes.forEach(async (node: Node) => {
const nodes = this.draggingFiles.map(fileid => this.filesStore.getNode(fileid)) as NcNode[]
nodes.forEach(async (node: NcNode) => {
Vue.set(node, 'status', NodeStatus.LOADING)
try {
// TODO: resolve potential conflicts prior and force overwrite
await handleCopyMoveNodeTo(node, this.source, isCopy ? MoveCopyAction.COPY : MoveCopyAction.MOVE)
await handleCopyMoveNodeTo(node, this.source as Folder, isCopy ? MoveCopyAction.COPY : MoveCopyAction.MOVE)
} catch (error) {
logger.error('Error while moving file', { error })
if (isCopy) {
showError(t('files', 'Could not copy {file}. {message}', { file: node.basename, message: error.message || '' }))
showError(t('files', 'Could not copy {file}. {message}', { file: node.basename, message: (error as Error).message || '' }))
} else {
showError(t('files', 'Could not move {file}. {message}', { file: node.basename, message: error.message || '' }))
showError(t('files', 'Could not move {file}. {message}', { file: node.basename, message: (error as Error).message || '' }))
}
} finally {
Vue.set(node, 'status', undefined)
Expand Down
20 changes: 14 additions & 6 deletions apps/files/src/components/FileEntry/FileEntryCheckbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,11 @@
</template>

<script lang="ts">
import { Node } from '@nextcloud/files'
import type { Node } from '@nextcloud/files'
import type { PropType } from 'vue'

import { translate as t } from '@nextcloud/l10n'
import Vue, { PropType } from 'vue'
import { defineComponent } from 'vue'

import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
Expand All @@ -41,7 +43,7 @@ import { useKeyboardStore } from '../../store/keyboard.ts'
import { useSelectionStore } from '../../store/selection.ts'
import logger from '../../logger.js'

export default Vue.extend({
export default defineComponent({
name: 'FileEntryCheckbox',

components: {
Expand All @@ -55,7 +57,7 @@ export default Vue.extend({
required: true,
},
fileid: {
type: String,
type: Number,
required: true,
},
isLoading: {
Expand Down Expand Up @@ -85,12 +87,17 @@ export default Vue.extend({
return this.selectedFiles.includes(this.fileid)
},
index() {
return this.nodes.findIndex((node: Node) => node.fileid === parseInt(this.fileid))
return this.nodes.findIndex((node: Node) => node.fileid === this.fileid)
},
},

methods: {
onSelectionChange(selected: boolean) {
// eslint-disable-next-line jsdoc/require-jsdoc
function isNumber(value: unknown): value is number {
return typeof value === 'number'
}

const newSelectedIndex = this.index
const lastSelectedIndex = this.selectionStore.lastSelectedIndex

Expand All @@ -103,8 +110,9 @@ export default Vue.extend({

const lastSelection = this.selectionStore.lastSelection
const filesToSelect = this.nodes
.map(file => file.fileid?.toString?.())
.map(file => file.fileid)
.slice(start, end + 1)
.filter(isNumber)

// If already selected, update the new selection _without_ the current file
const selection = [...lastSelection, ...filesToSelect]
Expand Down
Loading

0 comments on commit 5858325

Please sign in to comment.