github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-16 14:45:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add file upload on m2m (#5402)

Browse Source 
* Show upload modal when using m2m to files

Fixes #5246

* Cleanup file check on drawer item
This commit is contained in:
Rijk van Zanten
2021-04-30 16:42:59 -04:00
committed by GitHub
parent f3574deae0
commit 5ee5737ec2
3 changed files with 60 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/src/interfaces/many-to-many/many-to-many.vue
View File

@@ -39,7 +39,7 @@
</v-list>
<div class="actions" v-if="!disabled">
<v-button v-if="enableCreate && createAllowed" @click="editModalActive = true">{{ $t('create_new') }}</v-button>
<v-button v-if="enableCreate && createAllowed" @click="showEditModal">{{ $t('create_new') }}</v-button>
<v-button v-if="enableSelect && selectAllowed" @click="selectModalActive = true">
{{ $t('add_existing') }}
</v-button>
@@ -67,11 +67,21 @@
@input="stageSelection"
multiple
/>
<v-dialog v-if="!disabled" v-model="showUpload">
<v-card>
<v-card-title>{{ $t('upload_file') }}</v-card-title>
<v-card-text><v-upload @input="onUpload" multiple from-url /></v-card-text>
<v-card-actions>
<v-button @click="showUpload = false">{{ $t('done') }}</v-button>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script lang="ts">
import { defineComponent, computed, PropType, toRefs } from '@vue/composition-api';
import { defineComponent, computed, PropType, toRefs, ref } from '@vue/composition-api';
import DrawerItem from '@/views/private/components/drawer-item';
import DrawerCollection from '@/views/private/components/drawer-collection';
import { get } from 'lodash';
@@ -190,6 +200,8 @@ export default defineComponent({
const { createAllowed, selectAllowed } = usePermissions();
const { showUpload, onUpload } = useUpload();
return {
junction,
relation,
@@ -217,6 +229,9 @@ export default defineComponent({
templateWithDefaults,
createAllowed,
selectAllowed,
showEditModal,
onUpload,
showUpload,
};
function emitter(newVal: any[] | null) {
@@ -255,6 +270,33 @@ export default defineComponent({
return { createAllowed, selectAllowed };
}
function showEditModal() {
if (relationCollection.value.collection === 'directus_files') {
showUpload.value = true;
} else {
editModalActive.value = true;
}
}
function useUpload() {
const showUpload = ref(false);
return { showUpload, onUpload };
function onUpload(files: Record<string, any>[]) {
showUpload.value = false;
if (files.length === 0) return;
const { junctionField } = relationInfo.value;
const filesAsJunctionRows = files.map((file) => {
return {
[junctionField]: file.id,
};
});
emit('input', [...(props.value || []), ...filesAsJunctionRows]);
}
}
},
});
</script>