Skip to content

Commit

Permalink
Merge branch 'release-2024-fall' into epic/FOUR-18012
Browse files Browse the repository at this point in the history
  • Loading branch information
@sanjacornelius
sanjacornelius committed Oct 8, 2024
2 parents 80278c9 + f168912 commit 334408e
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 3 deletions.
139 changes: 136 additions & 3 deletions src/components/renderer/file-upload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
>
<uploader-unsupport/>

<uploader-drop v-if="uploaderLoaded" class="form-control-file">
<uploader-drop v-if="uploaderLoaded && !isConversationalForm" class="form-control-file">
<p>{{ $t('Drop a file here to upload or') }}</p>
<uploader-btn
:attrs="nativeButtonAttrs"
Expand All @@ -33,7 +33,64 @@
</uploader-btn>
<span v-if="validation === 'required' && !value" class="required">{{ $t('Required') }}</span>
</uploader-drop>
<uploader-list>

<!-- Render the conversational form file upload UI when the screen type is conversational forms -->
<uploader-list v-if="isConversationalForm" class="cf-uploader-list">
<template v-slot="{fileList}">
<ul v-if="uploading" class="cf-upload-progress">
<li v-for="file in fileList" :key="file.id || file.name">
<uploader-file :file="file" list />
</li>
</ul>
<ul v-else>
<li v-for="(file, i) in files" :key="file.id || i" :data-cy="file.id" class="cf-file-upload-list">
<span class="cf-filename text-truncate">
<i :class="getFileIconClass(file)" class="mr-2"></i>
{{ nativeFiles[file.id].name }}
</span>
<b-btn
variant="outline"
@click="removeFile(file)"
v-b-tooltip.hover :title="$t('Delete')"
class="pr-0"
:aria-label="$t('Delete file {{ nativeFiles[file.id].name }}')"
>
<i class="fas fa-trash-alt"></i>
</b-btn>
</li>
</ul>
</template>
</uploader-list>
<uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file">
<b-button
v-if="!required"
@click="cfSkipFileUpload"
class="btn cf-skip-btn mb-3"
>
<i class="fas fa-arrow-left mr-2"></i> {{ $t('Skip Uploading') }}
</b-button>

<uploader-btn
:attrs="nativeButtonAttrs"
:class="[
{ disabled: disabled },
'btn',
showSingleUploadButton ? 'cf-single-upload-btn' : (showMultiUploadButton ? 'cf-multi-upload-btn' : '')
]"
tabindex="0"
v-on:keyup.native="browse"
:aria-label="$attrs['aria-label']"
>
<span v-if="showSingleUploadButton"><i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}</span>
<span v-else-if="showMultiUploadButton"><i class="fas fa-plus mr-2"></i> {{ $t('Add another') }}</span>
</uploader-btn>

<b-button v-if="files.length !== 0" class="cf-file-upload-submit" variant="primary" @click="emitConversationalFormSubmit" :aria-label="$t('Submit')">
<i class="fas fa-paper-plane"></i> <span v-if="files.length !== 0 && showMultiUploadButton">{{ $t('Send All') }}</span>
</b-button>
</uploader-drop>

<uploader-list v-else>
<template slot-scope = "{ fileList }">
<ul v-if="uploading">
<li v-for="file in fileList" :key="file.id">
Expand Down Expand Up @@ -94,7 +151,7 @@ const ignoreErrors = [
export default {
components: { ...uploader, RequiredAsterisk },
mixins: [uniqIdsMixin],
props: ['label', 'error', 'helper', 'name', 'value', 'controlClass', 'endpoint', 'accept', 'validation', 'parent', 'config', 'multipleUpload'],
props: ['label', 'error', 'helper', 'name', 'value', 'controlClass', 'endpoint', 'accept', 'validation', 'parent', 'config', 'multipleUpload', 'screenType'],
updated() {
this.removeDefaultClasses();
},
Expand Down Expand Up @@ -209,6 +266,15 @@ export default {
fileDataName() {
return this.prefix + this.name + (this.row_id ? '.' + this.row_id : '');
},
isConversationalForm() {
return this.screenType === 'conversational-forms';
},
showSingleUploadButton() {
return this.files.length === 0 || !this.multipleUpload;
},
showMultiUploadButton() {
return this.files.length !== 0 && this.multipleUpload;
},
},
watch: {
filesData: {
Expand Down Expand Up @@ -336,6 +402,7 @@ export default {
},
setRequestFiles() {
_.set(window, `PM4ConfigOverrides.requestFiles["${this.fileDataName}"]`, this.files);
console.log("!!!!!! SET REQUEST FILES", this.valueToSend());
this.$emit('input', this.valueToSend());
},
valueToSend() {
Expand Down Expand Up @@ -545,6 +612,7 @@ export default {
this.$set(this.nativeFiles, id, rootFile);
this.addToFiles(fileInfo);
} else {
console.log("!!!!!! FILE UPLOADED", name);
this.$emit('input', name);
}
},
Expand Down Expand Up @@ -608,6 +676,17 @@ export default {
: null;
}
},
getFileIconClass(file) {
return this.nativeFiles[file.id].fileType.includes('image/')
? 'far fa-image'
: 'far fa-file';
},
emitConversationalFormSubmit($event) {
this.$emit('cf-submit', $event);
},
cfSkipFileUpload() {
this.$emit('cf-skip-file-upload');
}
},
};
</script>
Expand All @@ -617,4 +696,58 @@ export default {
color: red;
font-size: 0.8em;
}
/* Conversational Forms Styling */
.cf-single-upload-btn {
background-color: #EAF2FF;
border: 1px solid #81AFFF;
color: #81AFFF;
width: 100%;
padding: 12px 10px;
text-transform: capitalize;
margin: 0;
}
.cf-multi-upload-btn {
background: #fff;
color: #20242A;
border: 1px solid #D7DDE5;
font-size: 12px;
width: 57%;
padding: 7px;
border-radius: 8px;
margin: 0;
text-transform: capitalize;
margin-right: 30px;
}
.cf-file-upload-submit {
border-radius: 8px;
color: #fff;
font-size: 12px;
text-transform: capitalize;
padding: 7px;
}
.cf-filename {
width: 88%;
display: inline-block;
vertical-align: middle;
}
.cf-uploader-list {
margin-bottom: 14px;
max-height: 75px;
overflow:auto;
}
.cf-file-upload-list {
color: #20242A;
margin-bottom: 3px;
border-bottom: 1px solid #F3F5F7;
}
.cf-skip-btn {
background-color: #FFF;
border: 1px solid #D7DDE5;
color: #20242A;
width: 100%;
padding: 12px 10px;
box-shadow: 0px 12px 24px -12px #0000001F;
}
</style>
1 change: 1 addition & 0 deletions src/components/task.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
:watchers="screen.watchers"
:data="requestData"
:type="screen.type"
@update="onUpdate"
@after-submit="afterSubmit"
@submit="submit"
/>
Expand Down

0 comments on commit 334408e

Please sign in to comment.