Skip to content

Commit 691ae0f

Browse files
josechirivellajosechirivella
authored
Merge branch 'next' into FOUR-8782-2
2 parents 9e39de0 + ad11691 commit 691ae0f

13 files changed

Lines changed: 267 additions & 106 deletions

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@processmaker/screen-builder",
3-
"version": "2.83.3",
3+
"version": "2.83.8",
44
"scripts": {
55
"dev": "VITE_COVERAGE=true vite",
66
"build": "vite build",

‎src/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import ScreenRenderer from "./screen-renderer.vue";
1616
import AddLoopRow from "./renderer/add-loop-row.vue";
1717
import FormRecordList from "./renderer/form-record-list.vue";
1818
import FormImage from "./renderer/form-image.vue";
19+
import FormAvatar from "./renderer/form-avatar.vue";
1920
import "@processmaker/vue-form-elements/dist/vue-form-elements.css";
2021
import FormButton from "./renderer/form-button.vue";
2122
import FileUpload from "./renderer/file-upload.vue";
@@ -136,6 +137,7 @@ export default {
136137
// Register the builder and renderer
137138
Vue.component("AddLoopRow", AddLoopRow);
138139
Vue.component("FormImage", FormImage);
140+
Vue.component("FormAvatar", FormAvatar);
139141
Vue.component("FormLoop", FormLoop);
140142
Vue.component("FormMultiColumn", FormMultiColumn);
141143
Vue.component("FormNestedScreen", FormNestedScreen);

‎src/components/renderer/card.vue‎

Lines changed: 105 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,49 @@
11
<template>
2-
<div class="m-3 card-request">
3-
<div v-for="event in emptyStartEvents" :key="event.id" class="card">
4-
<div class="card-body">
5-
<div class="d-flex justify-content-between">
6-
<div style="width: 80%">
7-
<span v-uni-id="event.id.toString()">{{ transformedName }}</span>
8-
<span v-if="process.startEvents.length > 1">
9-
: {{ event.name }}
10-
</span>
11-
<a
12-
href="#"
13-
:aria-expanded="ariaExpanded"
14-
:aria-controls="getComputedId(process)"
15-
@click="showRequestDetails"
16-
>
17-
...
18-
</a>
2+
<div>
3+
<template v-for="event in emptyStartEvents">
4+
<div :key="event.id" class="mb-3 card-request">
5+
<div class="card-body">
6+
<div class="d-flex justify-content-between">
7+
<div>
8+
<span v-uni-id="event.id.toString()" class="card-info card-title">
9+
{{ transformedName }}
10+
</span>
11+
<span class="card-info">
12+
{{ event.name }}
13+
</span>
14+
</div>
15+
<div class="d-flex align-items-center">
16+
<button
17+
:aria-expanded="ariaExpanded"
18+
:aria-controls="getComputedId(process, event)"
19+
class="btn btn-ellipsis btn-sm mr-1"
20+
@click="showRequestDetails(process, event)"
21+
>
22+
<i class="fas fa-ellipsis-v"></i>
23+
</button>
24+
<button
25+
v-uni-aria-describedby="event.id.toString()"
26+
:href="getNewRequestLinkHref(process, event)"
27+
class="btn btn-custom btn-sm"
28+
@click.prevent="newRequestLink(process, event)"
29+
>
30+
{{ $t("Start") }}
31+
<i class="fas fa-play mr-1 card-icon"></i>
32+
</button>
33+
</div>
1934
</div>
20-
<div class="text-right">
21-
<button
22-
v-uni-aria-describedby="event.id.toString()"
23-
:href="getNewRequestLinkHref(process, event)"
24-
class="btn btn-primary btn-sm"
25-
@click.prevent="newRequestLink(process, event)"
26-
>
27-
<i class="fas fa-caret-square-right mr-1"></i> {{ $t("Start") }}
28-
</button>
29-
</div>
30-
</div>
31-
<div
32-
v-if="showdetail"
33-
:id="getComputedId(process)"
34-
:aria-hidden="ariaHidden"
35-
>
36-
<hr />
37-
<p class="card-text text-muted">{{ process.description }}</p>
35+
<b-collapse
36+
:id="getComputedId(process, event)"
37+
:aria-hidden="ariaHidden"
38+
>
39+
<hr />
40+
<p class="card-text text-muted card-description">
41+
{{ process.description }}
42+
</p>
43+
</b-collapse>
3844
</div>
3945
</div>
40-
</div>
46+
</template>
4147
</div>
4248
</template>
4349

@@ -116,7 +122,7 @@ export default {
116122
this.spin = 0;
117123
const instance = response.data;
118124
this.$cookies.set("fromTriggerStartEvent", true, "1min");
119-
window.location = `/requests/${instance.id}?fromRedirect=true`;
125+
window.location = `/requests/${instance.id}?fromTriggerStartEvent=`;
120126
})
121127
.catch((err) => {
122128
this.disabled = false;
@@ -126,29 +132,85 @@ export default {
126132
}
127133
});
128134
},
129-
showRequestDetails(id) {
135+
showRequestDetails(process, event) {
130136
if (this.showdetail === false) {
131137
this.showdetail = true;
132138
} else {
133139
this.showdetail = false;
134140
}
141+
this.$root.$emit(
142+
"bv::toggle::collapse",
143+
this.getComputedId(process, event)
144+
);
135145
},
136146
getNewRequestLinkHref(process, event) {
137147
const { id } = process;
138148
const startEventId = event.id;
139149
return `/process_events/${id}?event=${startEventId}`;
140150
},
141-
getComputedId(process) {
142-
return `process-${process.id}`;
151+
getComputedId(process, event) {
152+
return `process-${process.id}-${event.id}`;
143153
}
144154
}
145155
};
146156
</script>
147157

148158
<style scoped>
159+
.btn-custom {
160+
border-radius: 4px;
161+
border: 1px solid #eceff3;
162+
background: #e8f0f9;
163+
display: flex;
164+
height: 28px;
165+
padding: 4px 9px;
166+
justify-content: center;
167+
align-items: inherit;
168+
gap: 6px;
169+
color: #1572c2;
170+
font-size: 14px;
171+
font-weight: 600;
172+
}
173+
.btn-ellipsis {
174+
background: #fff;
175+
height: 28px;
176+
justify-content: center;
177+
align-items: center;
178+
color: #1572c2;
179+
font-size: 14px;
180+
}
181+
.btn-ellipsis:hover {
182+
border-radius: 4px;
183+
background: #e8f0f9;
184+
}
149185
.card-request {
150-
width: 45%;
151-
min-width: 40%;
152-
max-width: 50%;
186+
display: flex;
187+
justify-content: space-between;
188+
align-items: center;
189+
border-radius: 8px;
190+
border: 1px solid #cdddee;
191+
background: #fff;
192+
}
193+
.card-info {
194+
-webkit-line-clamp: 1;
195+
display: -webkit-box;
196+
-webkit-box-orient: vertical;
197+
overflow: hidden;
198+
}
199+
.card-description {
200+
-webkit-line-clamp: 2;
201+
display: -webkit-box;
202+
-webkit-box-orient: vertical;
203+
overflow: hidden;
204+
}
205+
.card-title {
206+
font-weight: 700;
207+
}
208+
.card-icon {
209+
display: flex;
210+
padding: 2px 1px 0px 0px;
211+
justify-content: center;
212+
align-items: center;
213+
gap: 10px;
214+
font-size: 7px;
153215
}
154216
</style>

‎src/components/renderer/form-avatar.vue‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<span>
3+
<b-button
4+
:variant="variant()"
5+
class="avatar-button rounded-circle overflow-hidden p-0 m-0 d-inline-flex border-0"
6+
:style="styleAvatar()"
7+
disabled
8+
>
9+
<img
10+
v-if="user.avatar"
11+
:src="user.avatar"
12+
:width="width"
13+
:height="height"
14+
:class="image"
15+
:alt="user.fullname"
16+
/>
17+
<span
18+
v-else
19+
class="border-0 d-inline-flex align-items-center justify-content-center text-white text-uppercase text-nowrap font-weight-normal"
20+
:style="styleAvatar()"
21+
>
22+
<span v-if="getInitials()">{{ getInitials() }}</span>
23+
<span v-else>PM</span>
24+
</span>
25+
</b-button>
26+
</span>
27+
</template>
28+
29+
<script>
30+
export default {
31+
props: {
32+
width: {
33+
default: 64,
34+
},
35+
height: {
36+
default: 64,
37+
},
38+
},
39+
40+
data() {
41+
return {
42+
user: window.Processmaker.user,
43+
};
44+
},
45+
mounted() {
46+
this.getInitials();
47+
},
48+
methods: {
49+
getInitials() {
50+
return this.user.firstname && this.user.lastname
51+
? this.user.firstname.match(/./u)[0] + this.user.lastname.match(/./u)[0]
52+
: "";
53+
},
54+
variant() {
55+
return this.user.avatar ? 'secondary' : 'info';
56+
},
57+
styleAvatar() {
58+
return "width: " +
59+
this.width +
60+
"px; height: " +
61+
this.height +
62+
"px; font-size:" +
63+
this.height / 2.5 +
64+
"px; padding:0;";
65+
}
66+
}
67+
};
68+
</script>
69+
70+
<style lang="scss" scoped>
71+
.avatar-button:disabled {
72+
opacity: 1;
73+
pointer-events: none;
74+
}
75+
.empty-image {
76+
font-size: 2em;
77+
}
78+
</style>
79+

‎src/components/renderer/form-empty-table.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{{ $t(title) }}
66
</span>
77
<b-link v-if="url !== ''" @click="openLink()">
8-
{{ linkText }}
8+
{{ $t(linkText) }}
99
</b-link>
1010
</div>
1111
</template>
@@ -21,7 +21,7 @@ export default {
2121
},
2222
methods: {
2323
openLink() {
24-
window.open(this.link, "_blank");
24+
window.open(this.url, "_blank");
2525
}
2626
}
2727
};

‎src/components/renderer/form-list-table.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
class="avatar-text"
1212
></b-avatar>
1313
<p class="control-text mb-0" :style="dataControl.colorText">
14-
{{ title }}
14+
{{ $t(title) }}
1515
</p>
1616
<template v-if="dataControl.dropdownShow === 'requests'">
1717
<b-dropdown variant="outline-secondary" no-caret>
@@ -321,6 +321,7 @@ export default {
321321
.list-table {
322322
height: 300px;
323323
overflow: auto;
324+
background-color: #f9f9f9;
324325
}
325326
326327
.btn-outline-secondary {

0 commit comments

Comments
 (0)