Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix UI Styling for Single and Multiple File Uploads in Conversational Forms #1746

Merged
merged 5 commits into from
Oct 21, 2024
Merged

Fix UI Styling for Single and Multiple File Uploads in Conversational Forms #1746

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
166ed66
Handle Changes in Conversational Forms UI for File Uploads and Emit F…
sanjacornelius Oct 18, 2024
857c243
Update vue-form-elements
sanjacornelius Oct 19, 2024
1bc71cc
Update vue-form-elements to 0.60.1
sanjacornelius Oct 21, 2024
374f8f9
Merge branch 'release-2024-fall' into observation/FOUR-19684
sanjacornelius Oct 21, 2024
8ab00a6
Merge branch 'release-2024-fall' into observation/FOUR-19684
sanjacornelius Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions src/components/renderer/file-upload.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,32 +61,34 @@
</ul>
</template>
</uploader-list>
<uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file">
<uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file"
:class="this.files.length > 0 && !this.multipleUpload ? 'cf-single-file-upload' : ''"
>
<b-button
v-if="!required"
@click="cfSkipFileUpload"
class="btn cf-skip-btn mb-3"
class="btn cf-skip-btn"
:class="showMultiUploadButton ? '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' : '')
showSingleUploadButton || files.length === 0 && !showMultiUploadButton ? 'cf-single-upload-btn mt-3' : (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-if="showSingleUploadButton || files.length === 0 && !showMultiUploadButton"><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 v-if="files.length !== 0" class="cf-file-upload-submit" :class="!showMultiUploadButton ? 'w-100 mt-3' : ''" variant="primary" @click="emitConversationalFormSubmit" :aria-label="$t('Submit')">
<i class="fas fa-paper-plane"></i> <span v-if="showMultiUploadButton">{{ $t('Send All') }}</span> <span v-else>{{ $t('Submit File/Photo') }}</span>
</b-button>
</uploader-drop>

Expand Down Expand Up @@ -270,7 +272,7 @@ export default {
return this.screenType === 'conversational-forms';
},
showSingleUploadButton() {
return this.files.length === 0 || !this.multipleUpload;
return this.files.length === 0 && !this.multipleUpload;
},
showMultiUploadButton() {
return this.files.length !== 0 && this.multipleUpload;
Expand Down Expand Up @@ -402,7 +404,6 @@ 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 @@ -491,7 +492,7 @@ export default {
}
this.$delete(this.nativeFiles, id);
}
this.$emit('file-deleted', this.files);
},
addToFiles(fileInfo) {
if (this.multipleUpload) {
Expand Down Expand Up @@ -625,7 +626,6 @@ 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 @@ -763,4 +763,8 @@ export default {
box-shadow: 0px 12px 24px -12px #0000001F;
}
.form-control-file.cf-single-file-upload label {
display: none;
}
</style>
Loading