mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-24 18:00:40 +00:00
File item refactoring
This commit is contained in:
Čarodej
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div :class="{'bg-light-background': isClicked}" class="flex items-center px-2.5 py-2 rounded-lg select-none border-2 border-transparent border-dashed" :draggable="canDrag" spellcheck="false">
|
||||
|
||||
<!--MultiSelecting for the mobile version-->
|
||||
<CheckBox v-if="isMultiSelectMode" :is-clicked="isClicked" class="mr-5"/>
|
||||
|
||||
<!--Item thumbnail-->
|
||||
<div class="w-16 relative">
|
||||
|
||||
<!--Member thumbnail for team folders-->
|
||||
<MemberAvatar
|
||||
v-if="user && canShowAuthor"
|
||||
:size="28"
|
||||
:is-border="true"
|
||||
:member="entry.data.relationships.user"
|
||||
class="absolute right-1.5 -bottom-2 z-10"
|
||||
/>
|
||||
|
||||
<!--Folder Icon-->
|
||||
<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" />
|
||||
|
||||
<!--File Icon-->
|
||||
<div v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" class="flex items-center justify-center">
|
||||
<span class="text-theme dark-text-theme text-xs font-semibold absolute z-10 inline-block mx-auto mt-2 w-7 overflow-ellipsis overflow-hidden text-center">
|
||||
{{ entry.data.attributes.mimetype }}
|
||||
</span>
|
||||
<svg width="38px" height="51px" viewBox="0 0 38 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M22.1666667,13.546875 L22.1666667,3 C22.1666667,1.34314575 20.8235209,-3.04359188e-16 19.1666667,0 L2.375,0 L2.375,0 C1.05885417,0 0,1.06582031 0,2.390625 L0,48.609375 C0,49.9341797 1.05885417,51 2.375,51 L35.625,51 C36.9411458,51 38,49.9341797 38,48.609375 L38,18.9375 C38,17.2806458 36.6568542,15.9375 35,15.9375 L24.5416667,15.9375 L24.5416667,15.9375 C23.2354167,15.9375 22.1666667,14.8617187 22.1666667,13.546875 Z M38,12.1423828 L38,12.75 L28.3333333,12.75 C26.6764791,12.75 25.3333333,11.4068542 25.3333333,9.75 L25.3333333,0 L25.3333333,0 L25.9369792,0 C26.5703125,0 27.1739583,0.249023438 27.6192708,0.697265625 L37.3072917,10.4589844 C37.7526042,10.9072266 38,11.5148437 38,12.1423828 Z" id="file" fill="#F8F9FA" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img v-if="isImage && entry.data.attributes.thumbnail" class="w-12 h-12 rounded" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!--Item Info-->
|
||||
<div class="pl-2">
|
||||
|
||||
<!--Item Title-->
|
||||
<b class="block text-sm mb-0.5 hover:underline" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
|
||||
{{ itemName }}
|
||||
</b>
|
||||
|
||||
<!--Item sub line-->
|
||||
<div class="flex items-center">
|
||||
|
||||
<!--Shared Icon-->
|
||||
<div v-if="$checkPermission('master') && entry.data.relationships.shared">
|
||||
<link-icon size="12" class="mr-1.5 stroke-current text-theme dark-text-theme"/>
|
||||
</div>
|
||||
|
||||
<!--File & Image sub line-->
|
||||
<small v-if="! isFolder" class="block text-xs text-gray-500">
|
||||
{{ entry.data.attributes.filesize }}, {{ timeStamp }}
|
||||
</small>
|
||||
|
||||
<!--Folder sub line-->
|
||||
<small v-if="isFolder" class="block text-xs text-gray-500">
|
||||
{{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile item action button-->
|
||||
<div v-if="! isMultiSelectMode" class="block pr-1 flex-grow text-right md:hidden">
|
||||
<MoreVerticalIcon @mousedown.stop="showItemActions" size="16" class="text-theme dark-text-theme inline-block transform scale-110" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {LinkIcon, MoreVerticalIcon} from 'vue-feather-icons'
|
||||
import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
|
||||
import MemberAvatar from "./MemberAvatar";
|
||||
import CheckBox from "./CheckBox";
|
||||
import {debounce} from "lodash";
|
||||
import {mapGetters} from "vuex";
|
||||
import {events} from "../../bus";
|
||||
|
||||
export default {
|
||||
name: 'ItemList',
|
||||
components: {
|
||||
MoreVerticalIcon,
|
||||
MemberAvatar,
|
||||
FolderIcon,
|
||||
CheckBox,
|
||||
LinkIcon,
|
||||
},
|
||||
props: [
|
||||
'entry',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
mobileMultiSelect: false,
|
||||
itemName: undefined,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isMultiSelectMode',
|
||||
'clipboard',
|
||||
'user',
|
||||
]),
|
||||
isClicked() {
|
||||
return this.clipboard.some(element => element.data.id === this.entry.data.id)
|
||||
},
|
||||
isVideo() {
|
||||
return this.entry.data.type === 'video'
|
||||
},
|
||||
isFile() {
|
||||
return this.entry.data.type === 'file'
|
||||
},
|
||||
isImage() {
|
||||
return this.entry.data.type === 'image'
|
||||
},
|
||||
isFolder() {
|
||||
return this.entry.data.type === 'folder'
|
||||
},
|
||||
timeStamp() {
|
||||
return this.entry.data.attributes.deleted_at
|
||||
? this.$t('entry_thumbnail.deleted_at', {time: this.entry.data.attributes.deleted_at})
|
||||
: this.entry.data.attributes.created_at
|
||||
},
|
||||
canEditName() {
|
||||
return !this.$isMobile()
|
||||
&& !this.$isThisRoute(this.$route, ['Trash'])
|
||||
&& !this.$checkPermission('visitor')
|
||||
&& !(this.sharedDetail && this.sharedDetail.attributes.type === 'file')
|
||||
},
|
||||
folderItems() {
|
||||
return this.entry.data.attributes.deleted_at
|
||||
? this.entry.data.attributes.trashed_items
|
||||
: this.entry.data.attributes.items
|
||||
},
|
||||
canShowAuthor() {
|
||||
return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders'])
|
||||
&& !this.isFolder
|
||||
&& this.user.data.id !== this.entry.data.relationships.user.data.id
|
||||
},
|
||||
canDrag() {
|
||||
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entry)
|
||||
|
||||
events.$emit('mobile-menu:show', 'file-menu')
|
||||
events.$emit('mobile-context-menu:show', this.entry)
|
||||
},
|
||||
renameItem: debounce(function (e) {
|
||||
|
||||
// Prevent submit empty string
|
||||
if (e.target.innerText.trim() === '') return
|
||||
|
||||
this.$store.dispatch('renameItem', {
|
||||
id: this.entry.data.id,
|
||||
type: this.entry.data.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
|
||||
// Set item name to own component variable
|
||||
this.itemName = this.entry.data.attributes.name
|
||||
|
||||
// Change item name
|
||||
events.$on('change:name', item => {
|
||||
if (this.item.data.id === item.id) this.itemName = item.name
|
||||
})
|
||||
|
||||
// Autofocus after newly created folder
|
||||
events.$on('newFolder:focus', id => {
|
||||
|
||||
if ( !this.$isMobile() && this.entry.data.id === id) {
|
||||
this.$refs.name.focus()
|
||||
document.execCommand('selectAll')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user