* Change buttons to the new BaseButton component inside document list * Create DocumentEntry component to show the icon of a document entry, depending on the type of entry (folder, file) it will show icons appropriately * Change name of resourceFileIcon to resource file to accommodate folder icons * Add small size to base button and icon * Change case in tailwind config for consistencypull/4715/head
Daniel Gayoso González
2 years ago
parent
641d4cae65
commit
c513b8a6ea
@ -0,0 +1,49 @@ |
||||
<template> |
||||
<div v-if="data && data.resourceNode && data.resourceNode.resourceFile"> |
||||
<a |
||||
data-fancybox="gallery" |
||||
class="flex align-center" |
||||
:href="data.contentUrl" |
||||
:data-type="dataType" |
||||
> |
||||
<ResourceIcon class="mr-2" :file-type="data.filetype" /> |
||||
{{ data.title }} |
||||
</a> |
||||
</div> |
||||
<div v-else> |
||||
<RouterLink |
||||
class="flex align-center" |
||||
:to="{ |
||||
name: 'DocumentsList', |
||||
params: { node: data.resourceNode.id }, |
||||
query: folderParams, |
||||
}" |
||||
> |
||||
<ResourceIcon class="mr-2" file-type="folder"/> |
||||
<b>{{ data.resourceNode.title }}</b> |
||||
</RouterLink> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import ResourceIcon from "./ResourceIcon.vue"; |
||||
import {computed} from "vue"; |
||||
|
||||
const props = defineProps({ |
||||
data: { |
||||
type: Object, |
||||
required: true, |
||||
}, |
||||
}); |
||||
|
||||
const dataType = computed(() => { |
||||
if (props.data.resourceNode.resourceFile.image) { |
||||
return 'image'; |
||||
} |
||||
if (props.data.resourceNode.resourceFile.video) { |
||||
return 'video'; |
||||
} |
||||
|
||||
return 'iframe'; |
||||
}); |
||||
</script> |
||||
@ -1,36 +0,0 @@ |
||||
<template> |
||||
<span> |
||||
<v-icon |
||||
v-if="file.image" |
||||
icon="mdi-file-image" |
||||
medium |
||||
/> |
||||
|
||||
<v-icon |
||||
v-else-if="file.video" |
||||
icon="mdi-file-video" |
||||
medium |
||||
/> |
||||
|
||||
<v-icon |
||||
v-else-if="'application/pdf' === file.mimeType" |
||||
icon="mdi-file-pdf-box" |
||||
medium |
||||
/> |
||||
|
||||
<v-icon |
||||
v-else |
||||
icon="mdi-file" |
||||
medium |
||||
/> |
||||
</span> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'ResourceFileIcon', |
||||
props: { |
||||
file: Object |
||||
}, |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,33 @@ |
||||
<template> |
||||
<BaseIcon |
||||
v-if="fileType === 'image'" |
||||
icon="file-image" |
||||
/> |
||||
<BaseIcon |
||||
v-else-if="fileType === 'video'" |
||||
icon="file-video" |
||||
/> |
||||
<BaseIcon |
||||
v-else-if="fileType === 'folder'" |
||||
icon="folder-generic" |
||||
/> |
||||
<BaseIcon |
||||
v-else-if="'application/pdf' === fileType.mimeType" |
||||
icon="file-pdf" |
||||
/> |
||||
<BaseIcon |
||||
v-else |
||||
icon="file-generic" |
||||
/> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import BaseIcon from "../basecomponents/BaseIcon.vue"; |
||||
|
||||
defineProps({ |
||||
fileType: { |
||||
type: Object, |
||||
required: true, |
||||
}, |
||||
}); |
||||
</script> |
||||
Loading…
Reference in new issue