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> </template>
<script> <script>
import Modal from '@/components/Modal'; import Modal from '@/components/Modal.vue';
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText'; import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText.vue';
import { PROJECT_ENTRY_TEMPLATE } from '@/consts/strings.consts'; import { PROJECT_ENTRY_TEMPLATE } from '@/consts/strings.consts';
import { defineAsyncComponent } from 'vue'; 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 { export default {
props: { props: {

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

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

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

@ -19,9 +19,9 @@
<script> <script>
import { defineAsyncComponent } from 'vue'; 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(() => const DocumentBlock = defineAsyncComponent(() =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock') import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock.vue')
); );
export default { export default {

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

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

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

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