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

Hide import if create is not allowed (#13126)

Browse Source 
* Hide import if create is not allowed

* Implemented suggestions

* Removed unused import

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
Ankit Chhatbar
2022-05-09 23:06:52 +03:00
committed by GitHub
parent 15d8e86c64
commit 4d406ec165
1 changed files with 51 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/src/views/private/components/export-sidebar-detail.vue
View File

@@ -1,54 +1,56 @@
<template>
<sidebar-detail icon="import_export" :title="t('import_export')">
<div class="fields">
<div class="field full">
<div v-if="uploading || importing" class="uploading">
<div class="type-text">
<span>{{ importing ? t('import_data_indeterminate') : t('upload_file_indeterminate') }}</span>
<span v-if="!importing">{{ progress }}%</span>
<template v-if="createAllowed">
<div class="field full">
<div v-if="uploading || importing" class="uploading">
<div class="type-text">
<span>{{ importing ? t('import_data_indeterminate') : t('upload_file_indeterminate') }}</span>
<span v-if="!importing">{{ progress }}%</span>
</div>
<v-progress-linear :indeterminate="importing" :value="progress" rounded />
</div>
<v-progress-linear :indeterminate="importing" :value="progress" rounded />
</div>
<template v-else>
<p class="type-label">{{ t('label_import') }}</p>
<v-input clickable>
<template #prepend>
<div class="preview" :class="{ 'has-file': file }">
<span v-if="fileExtension" class="extension">{{ fileExtension }}</span>
<v-icon v-else name="folder_open" />
</div>
</template>
<template #input>
<input
id="import-file"
ref="fileInput"
type="file"
accept="text/csv, application/json"
hidden
@change="onChange"
/>
<label for="import-file" class="import-file-label"></label>
<span class="import-file-text" :class="{ 'no-file': !file }">
{{ file ? file.name : t('import_data_input_placeholder') }}
</span>
</template>
<template #append>
<template v-if="file">
<v-icon v-tooltip="t('deselect')" class="deselect" name="close" @click.stop="clearFileInput" />
<template v-else>
<p class="type-label">{{ t('label_import') }}</p>
<v-input clickable>
<template #prepend>
<div class="preview" :class="{ 'has-file': file }">
<span v-if="fileExtension" class="extension">{{ fileExtension }}</span>
<v-icon v-else name="folder_open" />
</div>
</template>
<v-icon v-else name="attach_file" />
</template>
</v-input>
</template>
</div>
<template #input>
<input
id="import-file"
ref="fileInput"
type="file"
accept="text/csv, application/json"
hidden
@change="onChange"
/>
<label for="import-file" class="import-file-label"></label>
<span class="import-file-text" :class="{ 'no-file': !file }">
{{ file ? file.name : t('import_data_input_placeholder') }}
</span>
</template>
<template #append>
<template v-if="file">
<v-icon v-tooltip="t('deselect')" class="deselect" name="close" @click.stop="clearFileInput" />
</template>
<v-icon v-else name="attach_file" />
</template>
</v-input>
</template>
</div>
<div class="field full">
<v-button small full-width :disabled="!file" :loading="uploading || importing" @click="importData">
{{ t('import_data_button') }}
</v-button>
</div>
<div class="field full">
<v-button small full-width :disabled="!file" :loading="uploading || importing" @click="importData">
{{ t('import_data_button') }}
</v-button>
</div>
<v-divider />
<v-divider />
</template>
<div class="field full">
<v-button small full-width @click="exportDialogActive = true">
@@ -230,6 +232,7 @@ import { unexpectedError } from '@/utils/unexpected-error';
import { debounce } from 'lodash';
import { getEndpoint } from '@directus/shared/utils';
import FolderPicker from '@/views/private/components/folder-picker/folder-picker.vue';
import { usePermissionsStore } from '@/stores';
type LayoutQuery = {
fields?: string[];
@@ -506,6 +509,10 @@ async function exportDataFiles() {
exporting.value = false;
}
}
const { hasPermission } = usePermissionsStore();
const createAllowed = computed<boolean>(() => hasPermission(collection.value, 'create'));
</script>
<style lang="scss" scoped>