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

FOUR-19178: Add functionality so that only one Template can be selected at a time in the Panel #1743

Merged
merged 6 commits into from
Oct 22, 2024
Merged

FOUR-19178: Add functionality so that only one Template can be selected at a time in the Panel #1743

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9a30f14
Apply ESlint in ScreenTemplates.vue component
eiresendez Oct 16, 2024
6bd20b4
Apply ESlint configuration changes
eiresendez Oct 17, 2024
6a24cc5
add ProcessMaker to globals in ESLint config
eiresendez Oct 17, 2024
1d65a07
feat: add toggle-active event to handle template selection
eiresendez Oct 17, 2024
75c6753
Reset active template when switching template selection
eiresendez Oct 17, 2024
9eb3eb9
Merge branch 'release-2024-fall' into observation/FOUR-19178
eiresendez Oct 22, 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
4 changes: 4 additions & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ module.exports = {
node: true
},

globals: {
ProcessMaker: "readonly"
},

extends: [
"plugin:vue/recommended",
"airbnb-base",
Expand Down
176 changes: 104 additions & 72 deletions src/components/ScreenTemplateCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,38 @@
<b-card
img-top
class="mb-2 screenbuilder-template-card"
@click="showDetails"
@click="toggleDetails"
>
<div
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-collapse v-model="isApplyOptionsActive">
<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"
Expand All @@ -43,126 +49,153 @@
<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="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-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: {
type: Object,
required: true
},
screenId: {
type: Number,
required: true
},
currentScreenPage: {
type: Number,
default: 0
},
activeTemplateId: {
type: Number,
default: 0
}
},
data() {
return {
showApplyOptions: false,
isApplyOptionsActive: 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
}
if (this.template?.template_media?.thumbnail?.url) {
return this.template?.template_media.thumbnail.url;
}
return null;
},
}
},
mounted() {
watch: {
activeTemplateId(newVal) {
this.isApplyOptionsActive = newVal === this.template.id;
}
},
methods: {
showDetails() {
this.showApplyOptions = !this.showApplyOptions;
toggleDetails() {
this.$emit("toggle-active", this.template.id);
},
applyTemplate() {
ProcessMaker.apiClient
.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");
.then(() => {
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.isApplyOptionsActive = false;
this.selected = [];
}
},
}
};
</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 +213,7 @@ export default {
}

.thumbnail-icon {
color: #CDDDEE;
color: #cdddee;
font-size: 59px;
}

Expand All @@ -192,14 +225,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 +247,7 @@ export default {
}

.apply-options-container {
padding: 5px;
padding: 5px;
}

.apply-options-group i {
Expand All @@ -228,7 +261,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 +272,7 @@ export default {

.bottom-card-divider {
width: 90%;
background-color: #E9ECF1;
background-color: #e9ecf1;
margin-top: 0px;
}

Expand All @@ -253,5 +286,4 @@ export default {
border-radius: 8px;
padding: 5px 10px;
}

</style>
</style>
Loading
Loading