github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Use system instead of directus in asset keys

Browse Source
This commit is contained in:
rijkvanzanten
2020-07-27 18:11:12 -04:00
parent 7dc5669695
commit 2454aeffda
15 changed files with 32 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/displays/file/file.vue
View File

@@ -49,7 +49,7 @@ export default defineComponent({
if (!props.value) return null;
if (props.value.type.includes('svg')) return props.value.data.asset_url;
if (props.value.type.includes('image') === false) return null;
return props.value.data.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')?.url;
return props.value.data.thumbnails?.find((thumb) => thumb.key === 'system-small-crop')?.url;
});
const { height } = useElementSize(previewEl);

5
src/displays/image/image.story.ts
View File

@@ -24,9 +24,8 @@ export const basic = () =>
data: {
thumbnails: [
{
key: 'directus-small-crop',
url:
'https://demo.directus.io/thumper/assets/pnw7s9lqy68048g0?key=directus-small-crop',
key: 'system-small-crop',
url: 'https://demo.directus.io/thumper/assets/pnw7s9lqy68048g0?key=system-small-crop',
},
],
},

2
src/displays/image/image.vue
View File

@@ -33,7 +33,7 @@ export default defineComponent({
setup(props) {
const src = computed(() => {
if (props.value === null) return null;
return props.value?.data?.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')?.url || null;
return props.value?.data?.thumbnails?.find((thumb) => thumb.key === 'system-small-crop')?.url || null;
});
return { src };

5
src/displays/user/user.story.ts
View File

@@ -28,9 +28,8 @@ export const basic = () =>
data: {
thumbnails: [
{
key: 'directus-small-crop',
url:
'https://demo.directus.io/thumper/assets/pnw7s9lqy68048g0?key=directus-small-crop',
key: 'system-small-crop',
url: 'https://demo.directus.io/thumper/assets/pnw7s9lqy68048g0?key=system-small-crop',
},
],
},

2
src/displays/user/user.vue
View File

@@ -56,7 +56,7 @@ export default defineComponent({
const src = computed(() => {
if (props.value === null) return null;
return (
props.value?.avatar?.data?.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')?.url || null
props.value?.avatar?.data?.thumbnails?.find((thumb) => thumb.key === 'system-small-crop')?.url || null
);
});

28
src/interfaces/file/file.vue
View File

@@ -37,7 +37,7 @@
<v-list dense>
<template v-if="file">
<v-list-item :download="file.filename_download" :href="file.data.asset_url">
<v-list-item :download="file.filename_download" :href="assetURL">
<v-list-item-icon><v-icon name="file_download" /></v-list-item-icon>
<v-list-item-content>{{ $t('download_file') }}</v-list-item-content>
</v-list-item>
@@ -110,25 +110,19 @@ import { defineComponent, ref, watch, computed } from '@vue/composition-api';
import ModalBrowse from '@/views/private/components/modal-browse';
import api from '@/api';
import readableMimeType from '@/utils/readable-mime-type';
import getRootPath from '@/utils/get-root-path';
type FileInfo = {
id: number;
title: string;
type: string;
data: {
asset_url: string;
thumbnails?: {
key: string;
url: string;
}[];
};
};
export default defineComponent({
components: { ModalBrowse },
props: {
value: {
type: Number,
type: String,
default: null,
},
disabled: {
@@ -140,18 +134,20 @@ export default defineComponent({
const activeDialog = ref<'upload' | 'choose' | 'url' | null>(null);
const { loading, error, file, fetchFile } = useFile();
watch(() => props.value, fetchFile);
watch(() => props.value, fetchFile, { immediate: true });
const fileExtension = computed(() => {
if (file.value === null) return null;
return readableMimeType(file.value.type, true);
});
const assetURL = computed(() => getRootPath() + `assets/${props.value}`);
const imageThumbnail = computed(() => {
if (file.value === null) return null;
if (file.value.type.includes('svg')) return file.value.data.asset_url;
if (file.value.type.includes('svg')) return assetURL.value;
if (file.value.type.includes('image') === false) return null;
return file.value.data.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')?.url;
return assetURL.value + `?key=system-small-cover`;
});
const { url, isValidURL, loading: urlLoading, error: urlError, importFromURL } = useURLImport();
@@ -170,6 +166,7 @@ export default defineComponent({
urlError,
importFromURL,
isValidURL,
assetURL,
};
function useFile() {
@@ -188,10 +185,11 @@ export default defineComponent({
}
loading.value = true;
try {
const response = await api.get(`/files/${props.value}`, {
params: {
fields: ['title', 'data', 'type', 'filename_download'],
fields: ['title', 'type', 'filename_download'],
},
});
@@ -237,6 +235,10 @@ export default defineComponent({
async function importFromURL() {
loading.value = true;
/**
* @TODO add /files/import endpoint to API + use it here
*/
try {
const response = await api.post(`/files`, {
data: url.value,

2
src/interfaces/image/image.vue
View File

@@ -101,7 +101,7 @@ export default defineComponent({
return image.value.data.full_url;
}
const url = image.value.data.thumbnails.find((thumb) => thumb.key === 'directus-large-crop')?.url;
const url = image.value.data.thumbnails.find((thumb) => thumb.key === 'system-large-crop')?.url;
if (url) {
return `${url}&cache-buster=${cacheBuster.value}`;

2
src/layouts/cards/cards.vue
View File

@@ -371,7 +371,7 @@ export default defineComponent({
fields.push(`${imageSource.value}.type`);
fields.push(`${imageSource.value}.filename_disk`);
fields.push(`${imageSource.value}.storage`);
fields.push(`${imageSource.value}.links`);
fields.push(`${imageSource.value}.id`);
}
const sortField = sort.value.startsWith('-') ? sort.value.substring(1) : sort.value;

4
src/layouts/cards/components/card.vue
View File

@@ -95,10 +95,10 @@ export default defineComponent({
if (props.file.type.startsWith('image') === false) return null;
if (props.file.type.includes('svg')) return null;
let key = 'directus-medium-cover';
let key = 'system-medium-cover';
if (props.crop === false) {
key = 'directus-medium-contain';
key = 'system-medium-contain';
}
return getRootPath() + `assets/${props.file.id}?key=${key}`;

3
src/modules/files/routes/detail/detail.vue
View File

@@ -228,8 +228,7 @@ export default defineComponent({
const previewActive = ref(false);
const fileSrc = computed(() => {
return (
getRootPath() +
`assets/${props.primaryKey}?cache-buster=${cacheBuster.value}&key=directus-large-contain`
getRootPath() + `assets/${props.primaryKey}?cache-buster=${cacheBuster.value}&key=system-large-contain`
);
});

2
src/modules/users/routes/detail/detail.vue
View File

@@ -304,7 +304,7 @@ export default defineComponent({
});
avatarSrc.value = response.data.data.avatar?.data?.thumbnails?.find(
(thumb: any) => thumb.key === 'directus-medium-crop'
(thumb: any) => thumb.key === 'system-medium-crop'
)?.url;
roleName.value = response.data.data.role.name;
} catch (err) {

2
src/views/private/components/comments-drawer-detail/comment-item-header.vue
View File

@@ -112,7 +112,7 @@ export default defineComponent({
const avatarSource = computed(() => {
if (!props.activity.action_by?.avatar) return null;
return getRootPath() + `assets/${props.activity.action_by.avatar.id}?key=directus-small-cover`;
return getRootPath() + `assets/${props.activity.action_by.avatar.id}?key=system-small-cover`;
});
const { confirmDelete, deleting, remove } = useDelete();

2
src/views/private/components/module-bar-avatar/module-bar-avatar.story.ts
View File

@@ -54,7 +54,7 @@ export const withAvatar = () =>
data: {
thumbnails: [
{
key: 'directus-small-crop',
key: 'system-small-crop',
url: 'https://randomuser.me/api/portraits/women/44.jpg',
},
],

2
src/views/private/components/module-bar-avatar/module-bar-avatar.vue
View File

@@ -50,7 +50,7 @@ export default defineComponent({
if (userStore.state.currentUser === null) return null;
if (userStore.state.currentUser.avatar === null) return null;
return getRootPath() + `assets/${userStore.state.currentUser.avatar.id}?key=directus-medium-cover`;
return getRootPath() + `assets/${userStore.state.currentUser.avatar.id}?key=system-medium-cover`;
});
const userProfileLink = computed<string>(() => {

2
src/views/private/components/user-popover/user-popover.vue
View File

@@ -59,7 +59,7 @@ export default defineComponent({
const avatarSrc = computed(() => {
if (data.value === null) return null;
return data.value.avatar?.data?.thumbnails?.find((thumbnail) => thumbnail.key === 'directus-medium-crop')
return data.value.avatar?.data?.thumbnails?.find((thumbnail) => thumbnail.key === 'system-medium-crop')
?.url;
});