Skip to content

Commit

Permalink
Update icon selection functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcraeteisha
mcraeteisha committed Oct 21, 2024
1 parent a4339aa commit 30167bb
Showing 1 changed file with 88 additions and 66 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>

0 comments on commit 30167bb

Please sign in to comment.