ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Fix document upload on project page

This commit is contained in:
Ramon Wenger 2023-03-16 15:57:09 +01:00
parent 48a390a2bb
commit 67bae3fb17
5 changed files with 39 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/portfolio/ProjectEntryForm.vue
View File

@ -52,13 +52,13 @@
</template>
<script>
import Modal from '@/components/Modal';
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
import Modal from '@/components/Modal.vue';
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText.vue';
import { PROJECT_ENTRY_TEMPLATE } from '@/consts/strings.consts';
import { defineAsyncComponent } from 'vue';
const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload'));
const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload.vue'));
export default {
props: {

1
client/src/components/ui/ButtonWithIconAndText.vue
View File

@ -50,6 +50,7 @@ export default {
cursor: pointer;
border: 0;
width: 100%;
padding: 1px;
&:disabled {
background-color: transparent;

4
client/src/components/ui/file-upload/FileUpload.vue
View File

@ -19,9 +19,9 @@
<script>
import { defineAsyncComponent } from 'vue';
const SimpleFileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUpload'));
const SimpleFileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUpload.vue'));
const DocumentBlock = defineAsyncComponent(() =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock')
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock.vue')
);
export default {

70
client/src/components/ui/file-upload/SimpleFileUpload.vue
View File

@ -8,55 +8,43 @@
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const SimpleFileUploadHiddenInput = defineAsyncComponent(() =>
import('@/components/ui/file-upload/SimpleFileUploadHiddenInput')
<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue';
export interface Props {
value: string;
withText: boolean;
}
const SimpleFileUploadHiddenInput = defineAsyncComponent(
() => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue')
);
const SimpleFileUploadIcon = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIcon'));
const SimpleFileUploadIconAndText = defineAsyncComponent(() =>
import('@/components/ui/file-upload/SimpleFileUploadIconAndText')
);
const DocumentIcon = defineAsyncComponent(() =>
import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
const SimpleFileUploadIcon = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIcon.vue'));
const SimpleFileUploadIconAndText = defineAsyncComponent(
() => import('@/components/ui/file-upload/SimpleFileUploadIconAndText.vue')
);
export default {
props: {
value: {
type: String,
default: '',
},
withText: {
type: Boolean,
default: false,
},
},
const props = withDefaults(defineProps<Props>(), {
value: '',
withText: false,
});
components: {
SimpleFileUploadHiddenInput,
DocumentIcon,
SimpleFileUploadIcon,
SimpleFileUploadIconAndText,
},
const button = computed(() => {
if (props.withText) {
return SimpleFileUploadIconAndText;
}
return SimpleFileUploadIcon;
});
computed: {
button() {
return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
},
},
methods: {
clickUploadCare() {
// workaround for styling the uploadcare widget
let button = this.$el.querySelector('.uploadcare--widget__button');
button.click();
},
},
const clickUploadCare = () => {
// workaround for styling the uploadcare widget
let btn: HTMLElement = document.querySelector('.uploadcare--widget__button') as HTMLElement;
if (btn) {
btn.click();
}
};
</script>
<style scoped lang="scss">
<style lang="scss">
// todo: re-add scoped when we're on vite
@import '~styles/_helpers';
.simple-file-upload {

9
client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue
View File

@ -2,12 +2,11 @@
<button-with-icon-and-text
icon="document-icon"
text="Dokument hochladen"
@click="$emit('click')"
/>
</template>
<script>
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
export default {
components: { ButtonWithIconAndText },
};
<script setup lang="ts">
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText.vue';
defineEmits(['click']);
</script>