Skip to content

Commit

Permalink
Merge branch 'release-2024-fall' into observation/FOUR-19662
Browse files Browse the repository at this point in the history
  • Loading branch information
eiresendez committed Oct 22, 2024
2 parents 3ccd63e + 9ec89bd commit 2605fcd
Show file tree
Hide file tree
Showing 21 changed files with 784 additions and 49 deletions.
4 changes: 4 additions & 0 deletions .eslintrc.js
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
3 changes: 3 additions & 0 deletions src/assets/Shape.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/pencil-square.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 30 additions & 9 deletions src/components/ScreenTemplateCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<b-card
img-top
class="mb-2 screenbuilder-template-card"
@click="showDetails"
@click="toggleDetails"
>
<div
v-if="thumbnail"
Expand All @@ -29,7 +29,7 @@
truncateText(template.description, 100)
}}</span>
</div>
<b-collapse v-model="showApplyOptions">
<b-collapse v-model="isApplyOptionsActive">
<b-form-checkbox-group
v-model="selected"
class="apply-options-group p-2"
Expand Down Expand Up @@ -93,10 +93,27 @@ export default {
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" },
Expand All @@ -119,10 +136,14 @@ export default {
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
Expand All @@ -131,7 +152,7 @@ export default {
templateOptions: this.selected,
currentScreenPage: this.currentScreenPage
})
.then((response) => {
.then(() => {
ProcessMaker.alert(
this.$t("The template options have been applied."),
"success"
Expand All @@ -147,7 +168,7 @@ export default {
});
},
onCancel() {
this.showApplyOptions = false;
this.isApplyOptionsActive = false;
this.selected = [];
},
toggleOption(value) {
Expand Down
11 changes: 11 additions & 0 deletions src/components/ScreenTemplates.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@
:template="template"
:screen-id="screenId"
:current-screen-page="currentScreenPage"
:active-template-id="activeTemplateId"
@toggle-active="setActiveTemplate"
/>
</b-card-group>
</div>
Expand All @@ -76,6 +78,8 @@
:template="template"
:screen-id="screenId"
:current-screen-page="currentScreenPage"
:active-template-id="activeTemplateId"
@toggle-active="setActiveTemplate"
/>
</b-card-group>
</div>
Expand Down Expand Up @@ -112,16 +116,22 @@ export default {
sharedTemplatesSelected: false,
noMyTemplatesFound: false,
noSharedTemplatesFound: false,
activeTemplateId: null,
loading: false
};
},
mounted() {
this.showMyTemplates();
},
methods: {
setActiveTemplate(id) {
// If the same template that is already active is clicked, it deactivates it.
this.activeTemplateId = this.activeTemplateId === id ? null : id;
},
showMyTemplates() {
this.myTemplatesSelected = true;
this.sharedTemplatesSelected = false;
this.activeTemplateId = null;
this.fetchMyTemplates();
},
fetchMyTemplates() {
Expand Down Expand Up @@ -167,6 +177,7 @@ export default {
showSharedTemplates() {
this.myTemplatesSelected = false;
this.sharedTemplatesSelected = true;
this.activeTemplateId = null;
this.fetchSharedTemplates();
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/accordions.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default [
},
{
name: 'Design',
fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width'],
fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width', 'designerMode', 'bgcolormodern'],
open: false,
},
{
Expand Down
1 change: 0 additions & 1 deletion src/components/inspector/collection-data-source.vue
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@
"variableStore",
"dataSelectionOptions",
"singleField"
];
export default {
components: {
Expand Down
65 changes: 65 additions & 0 deletions src/components/inspector/collection-designer-mode.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<template>
<div>
<div>
<label for="collectiondesigner">{{ $t("Table Style") }}</label>
<b-form-select
id="collectiondesigner"
v-model="designerOptions"
:options="designerListOptions"
data-cy="inspector-collection-designer-model"
/>
</div>
</div>
</template>
<script>
import { cloneDeep } from "lodash";
const CONFIG_FIELDS = [
"designerOptions"
];
export default {
props: ["value", "screenType"],
data() {
return {
fields: [],
designerOptions: "Classic",
designerListOptions: [
{
text: this.$t('Classic'),
value: 'Classic',
},
{
text: this.$t('Modern'),
value: 'Modern',
},
],
};
},
computed: {
options() {
return Object.fromEntries(
CONFIG_FIELDS.map((field) => [field, this[field]])
);
}
},
watch: {
value: {
handler(value) {
if (!value) {
return;
}
CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
},
immediate: true
},
options: {
handler() {
this.$emit("input", this.options);
this.$root.$emit("style-mode", this.options.designerOptions);
},
deep: true
},
},
};
</script>
101 changes: 101 additions & 0 deletions src/components/inspector/color-select-modern.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<template>
<div class="form-group">
<div>
<b-button-toolbar>
<b-button-group size="lg">
<b-button
v-for="option in options"
:key="option.value"
size="sm"
variant="outline-light"
class="color-option"
:class="['bg-' + parsedColor(option.value)]"
:title="option.content"
>
<i
class="fas fa-check"
:class="[
option.value === value
? 'text-light'
: 'text-' + parsedColor(option.value)
]"
@click="selectColor(option.value)"
/>
</b-button>
</b-button-group>
</b-button-toolbar>
</div>
</div>
</template>

<script>
export default {
components: {},
props: {
/**
* The label for the color select
*/
label: {},
/**
* The value of the color select. eg. `alert alert-success`
*/
value: {},
/**
* The helper text for the color select (not visible yet)
*/
helper: {},
/**
* The options for the color select
*/
options: {},
},
data() {
return {
newColor: ""
};
},
computed: {
hasColor() {
return Boolean(this.value);
}
},
methods: {
emitChanges(value) {
this.$emit("input", value);
this.$emit("update-state");
},
checkColor() {
if (this.hasColor) {
this.emitChanges("");
}
},
selectColor(color) {
this.emitChanges(color);
},
parsedColor(color) {
return color.split("-")[1];
}
}
};
</script>

<style lang="scss" scoped>
.image-preview {
border: 1px solid #ced4da;
border-radius: 4px;
height: 4em;
text-align: center;
overflow: hidden;
}
.color-option {
left: -8px;
border-radius: 4px;
width: 48px;
height: 48px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
</style>
3 changes: 3 additions & 0 deletions src/components/inspector/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ export { default as CollectionSelectList } from "./collection-select-list.vue";
export { default as CollectionRecordsList } from "./collection-records-list.vue";
export { default as collectionDataSource } from "./collection-data-source.vue";
export { default as CollectionDisplayMode } from "./collection-display-mode.vue";
export { default as CollectionDesignerMode } from "./collection-designer-mode.vue";
export { default as ColorSelect } from "./color-select.vue";
export { default as ColorSelectRecord } from "./color-select.vue";
export { default as ColorSelectModern } from "./color-select-modern.vue";
export { default as ColumnSetup } from "./column-setup.vue";
export { default as ContainerColumns } from "./container-columns.vue";
export { default as DataMapping } from "./data-mapping.vue";
Expand Down
Loading

0 comments on commit 2605fcd

Please sign in to comment.