Skip to content

Commit

Permalink
Merge branch 'release-2024-fall' into FOUR-19630
Browse files Browse the repository at this point in the history
  • Loading branch information
@caleeli
caleeli authored Oct 22, 2024
2 parents f23ab36 + cf40c66 commit b906026
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 77 deletions.
154 changes: 88 additions & 66 deletions src/components/ScreenTemplateCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,108 +9,116 @@
v-if="thumbnail"
class="thumbnail-container thumbnail-image-container"
>
<img class="thumbnail-image" :src="thumbnail" :alt="`${template.name}`"/>
<img
class="thumbnail-image"
:src="thumbnail"
:alt="`${template.name}`"
/>
</div>
<div
v-else
class="thumbnail-container thumbnail-icon-container d-flex align-items-center justify-content-center"
>
<i class="p-4 fas fa-palette thumbnail-icon"></i>
</div>
<hr class="card-divider">
<hr class="card-divider" />
<b-card-body class="p-1">
<div class="template-details">
<span class="template-name d-block pt-1">{{ template.name }}</span>
<span class="template-description d-block">{{ template.description }}</span>
<span class="template-description d-block">{{
template.description
}}</span>
</div>
<b-collapse v-model="showApplyOptions">
<b-form-checkbox-group
class="apply-options-group p-2"
v-model="selected"
name="apply-options"
>
<b-form-checkbox-group
v-model="selected"
class="apply-options-group p-2"
name="apply-options"
>
<div class="row row-cols-3 icons-row">
<div
v-for="option in applyOptions"
:key="option.value"
class="col apply-options-container d-flex align-items-baseline flex-column"
>
<div class="icon-container">
<div
class="icon-container"
:class="{ selected: selected.includes(option.value) }"
@click.stop="toggleOption(option.value)"
>
<div v-if="option.value === 'CSS'">
<css-icon />
</div>
<div v-else>
<i :class="option.icon"></i>
</div>
</div>
<b-form-checkbox
class="option-checkbox"
:value="option.value"
>
<b-form-checkbox class="option-checkbox" :value="option.value">
{{ option.text }}
</b-form-checkbox>
</div>
</div>
</b-form-checkbox-group>
<hr class="bottom-card-divider">
<div class="apply-btn-container d-flex justify-content-end">
<button
type="button"
size="sm"
class="btn btn-outline-secondary card-btn"
@click="onCancel"
>
{{ $t("Cancel") }}
</button>
<button
:disabled="!selected.length"
type="button"
size="sm"
class="btn btn-primary ml-2 card-btn"
@click="applyTemplate"
>
{{ $t("Apply") }}
</button>
</div>
</b-form-checkbox-group>
<hr class="bottom-card-divider" />
<div class="apply-btn-container d-flex justify-content-end">
<button
type="button"
size="sm"
class="btn btn-outline-secondary card-btn"
@click.stop="onCancel"
>
{{ $t("Cancel") }}
</button>
<button
:disabled="!selected.length"
type="button"
size="sm"
class="btn btn-primary ml-2 card-btn"
@click.stop="applyTemplate"
>
{{ $t("Apply") }}
</button>
</div>
</b-collapse>
</b-card-body>
</b-card>

</div>
</template>

<script>
import CssIcon from './CssIcon.vue';
import CssIcon from "./CssIcon.vue";
export default {
components: {
CssIcon,
CssIcon
},
mixins: [],
props: ['template', 'screenId', 'currentScreenPage'],
props: ["template", "screenId", "currentScreenPage"],
data() {
return {
showApplyOptions: false,
selected: [],
applyOptions: [
{ text: 'CSS', value: 'CSS' },
{ text: 'Fields', value: 'Fields', icon: 'fp-fields-icon' },
{ text: 'Layout', value: 'Layout', icon: 'fp-layout-icon' },
],
{ text: "CSS", value: "CSS" },
{ text: "Fields", value: "Fields", icon: "fp-fields-icon" },
{ text: "Layout", value: "Layout", icon: "fp-layout-icon" }
]
};
},
computed: {
thumbnail() {
if (this.template?.template_media && this.template.template_media.length > 0) {
if (
this.template?.template_media &&
this.template.template_media.length > 0
) {
return this.template.template_media[0].url;
} else if (this.template?.template_media?.thumbnail?.url) {
return this.template?.template_media.thumbnail.url
return this.template?.template_media.thumbnail.url;
}
return null;
},
},
mounted() {
}
},
mounted() {},
methods: {
showDetails() {
this.showApplyOptions = !this.showApplyOptions;
Expand All @@ -120,49 +128,64 @@ export default {
.post(`/template/screen/${this.template.id}/apply`, {
screenId: this.screenId,
templateOptions: this.selected,
currentScreenPage: this.currentScreenPage,
currentScreenPage: this.currentScreenPage
})
.then((response) => {
ProcessMaker.alert(this.$t("The template options have been applied."), "success");
ProcessMaker.alert(
this.$t("The template options have been applied."),
"success"
);
window.location.reload();
})
.catch((error) => {
const errorMessage = error.response?.data?.message || error.response?.data?.error || error.message;
const errorMessage =
error.response?.data?.message ||
error.response?.data?.error ||
error.message;
ProcessMaker.alert(errorMessage, "danger");
});
},
onCancel() {
this.showApplyOptions = false;
this.selected = [];
},
toggleOption(value) {
const index = this.selected.indexOf(value);
if (index === -1) {
this.selected.push(value);
} else {
this.selected.splice(index, 1);
}
}
},
}
};
</script>
<style lang="scss" scoped>
.fp-fields-icon, .fp-layout-icon {
color: #EAF2FF;
.fp-fields-icon,
.fp-layout-icon {
color: #eaf2ff;
}
.screenbuilder-template-card {
width: 225px;
margin: 8px;
border: 1px solid #D7DDE5;
border: 1px solid #d7dde5;
border-radius: 8px;
box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
0px 2px 4px -2px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.card-divider {
width: 100%;
margin: 0px;
background-color: #D7DDE5;
background-color: #d7dde5;
}
.thumbnail-container:hover,
.thumbnail-container.active {
border-color: #1572C2;
border-color: #1572c2;
cursor: pointer;
}
Expand All @@ -180,7 +203,7 @@ export default {
}
.thumbnail-icon {
color: #CDDDEE;
color: #cdddee;
font-size: 59px;
}
Expand All @@ -192,14 +215,14 @@ export default {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: #2F343B;
color: #2f343b;
}
.template-description {
font-size: 12.5px;
font-weight: 400;
line-height: 18px;
color: #4E5663;
color: #4e5663;
}
.apply-options-group {
Expand All @@ -214,7 +237,7 @@ export default {
}
.apply-options-container {
padding: 5px;
padding: 5px;
}
.apply-options-group i {
Expand All @@ -228,7 +251,7 @@ export default {
justify-content: center;
width: 66px;
height: 76px;
border: 0.7px solid #D7DDE5;
border: 0.7px solid #d7dde5;
border-radius: 8px;
margin-bottom: 10px;
}
Expand All @@ -239,7 +262,7 @@ export default {
.bottom-card-divider {
width: 90%;
background-color: #E9ECF1;
background-color: #e9ecf1;
margin-top: 0px;
}
Expand All @@ -253,5 +276,4 @@ export default {
border-radius: 8px;
padding: 5px 10px;
}
</style>
</style>
26 changes: 15 additions & 11 deletions src/components/renderer/file-upload.vue
View file
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>

0 comments on commit b906026

Please sign in to comment.