Show correct icon per type of file in document tool

pull/4715/head
Daniel Gayoso González 2 years ago
parent c513b8a6ea
commit c7bf437b2c
  1. 1
      assets/vue/components/basecomponents/ChamiloIcons.js
  2. 12
      assets/vue/components/documents/DocumentEntry.vue
  3. 7
      assets/vue/components/documents/ResourceFileLink.vue
  4. 16
      assets/vue/components/documents/ResourceIcon.vue

@ -54,6 +54,7 @@ export const chamiloIconToClass = {
"file-image": "mdi mdi-file-image", "file-image": "mdi mdi-file-image",
"file-video": "mdi mdi-file-video", "file-video": "mdi mdi-file-video",
"file-pdf": "mdi mdi-file-pdf-box", "file-pdf": "mdi mdi-file-pdf-box",
"file-text": "mdi mdi-file-document",
"folder-generic": "mdi mdi-folder", "folder-generic": "mdi mdi-folder",
"folder-multiple-plus": "mdi mdi-folder-multiple-plus", "folder-multiple-plus": "mdi mdi-folder-multiple-plus",
"folder-plus": "mdi mdi-folder-plus", "folder-plus": "mdi mdi-folder-plus",

@ -6,7 +6,7 @@
:href="data.contentUrl" :href="data.contentUrl"
:data-type="dataType" :data-type="dataType"
> >
<ResourceIcon class="mr-2" :file-type="data.filetype" /> <ResourceIcon class="mr-2" :resource-data="data" />
{{ data.title }} {{ data.title }}
</a> </a>
</div> </div>
@ -19,7 +19,7 @@
query: folderParams, query: folderParams,
}" }"
> >
<ResourceIcon class="mr-2" file-type="folder"/> <ResourceIcon class="mr-2" :resource-data="data"/>
<b>{{ data.resourceNode.title }}</b> <b>{{ data.resourceNode.title }}</b>
</RouterLink> </RouterLink>
</div> </div>
@ -37,10 +37,14 @@ const props = defineProps({
}); });
const dataType = computed(() => { const dataType = computed(() => {
if (props.data.resourceNode.resourceFile.image) { let resourceFile = props.data.resourceNode.resourceFile;
if (resourceFile === null) {
return '';
}
if (resourceFile.image) {
return 'image'; return 'image';
} }
if (props.data.resourceNode.resourceFile.video) { if (resourceFile.video) {
return 'video'; return 'video';
} }

@ -4,7 +4,7 @@
:href="resource.contentUrl" :href="resource.contentUrl"
:data-type="getDataType" :data-type="getDataType"
> >
<ResourceIcon :file="resource.resourceNode.resourceFile" /> <ResourceIcon :resource-data="resource" />
{{ resource.title }} {{ resource.title }}
</a> </a>
</template> </template>
@ -29,7 +29,10 @@ export default {
} }
}, },
props: { props: {
resource: Object resource: {
type: Object,
required: true,
}
}, },
}; };
</script> </script>

@ -1,18 +1,22 @@
<template> <template>
<BaseIcon <BaseIcon
v-if="fileType === 'image'" v-if="resourceData.filetype === 'folder'"
icon="folder-generic"
/>
<BaseIcon
v-else-if="resourceData.resourceNode.resourceFile.image"
icon="file-image" icon="file-image"
/> />
<BaseIcon <BaseIcon
v-else-if="fileType === 'video'" v-else-if="resourceData.resourceNode.resourceFile.video"
icon="file-video" icon="file-video"
/> />
<BaseIcon <BaseIcon
v-else-if="fileType === 'folder'" v-else-if="resourceData.resourceNode.resourceFile.text"
icon="folder-generic" icon="file-text"
/> />
<BaseIcon <BaseIcon
v-else-if="'application/pdf' === fileType.mimeType" v-else-if="'application/pdf' === resourceData.resourceNode.resourceFile.mimeType"
icon="file-pdf" icon="file-pdf"
/> />
<BaseIcon <BaseIcon
@ -25,7 +29,7 @@
import BaseIcon from "../basecomponents/BaseIcon.vue"; import BaseIcon from "../basecomponents/BaseIcon.vue";
defineProps({ defineProps({
fileType: { resourceData: {
type: Object, type: Object,
required: true, required: true,
}, },

Loading…
Cancel
Save