Skip to content

Commit 2459b64

Browse files
ryancooleyryancooley
authored
Merge pull request #6231 from ProcessMaker/task/FOUR-13480
FOUR-13480 | Implement Template Listing UI Under ‘My Templates’ Tab
2 parents cbdfe54 + a2c8345 commit 2459b64

File tree

10 files changed

+434
-8
lines changed

10 files changed

+434
-8
lines changed

‎ProcessMaker/Http/Controllers/Process/ScreenController.php

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,21 @@ public function index(Request $request)
5656
'countCategories' => ScreenCategory::where(['status' => 'ACTIVE', 'is_system' => false])->count(),
5757
];
5858

59-
return view('processes.screens.index', compact('listConfig', 'catConfig'));
59+
$myScreenTemplates = (object) [
60+
61+
];
62+
63+
$publicScreenTemplates = (object) [
64+
65+
];
66+
67+
return view('processes.screens.index',
68+
compact(
69+
'listConfig',
70+
'catConfig',
71+
'myScreenTemplates',
72+
'publicScreenTemplates',
73+
));
6074
}
6175

6276
/**

‎resources/js/components/shared/EllipsisMenu.vue

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<template v-else-if="lauchpad" #button-content>
2626
<i class="fas fa-ellipsis-h ellipsis-menu-icon p-0" />
2727
</template>
28+
<template v-else-if="screenTemplate" #button-content>
29+
<i class="fas fa-eye ellipsis-menu-icon pr-2" />
30+
<i class="fas fa-ellipsis-h ellipsis-menu-icon" />
31+
</template>
2832
<template v-else #button-content>
2933
<i class="fas fa-ellipsis-h ellipsis-menu-icon" />
3034
</template>
@@ -110,7 +114,22 @@ export default {
110114
components: { PmqlInput },
111115
filters: { },
112116
mixins: [],
113-
props: ["actions", "permission", "data", "isDocumenterInstalled", "divider", "lauchpad", "customButton", "showProgress", "isPackageInstalled", "searchBar", "variant", "redirectTo", "redirectId"],
117+
props: [
118+
"actions",
119+
"permission",
120+
"data",
121+
"isDocumenterInstalled",
122+
"divider",
123+
"lauchpad",
124+
"screenTemplate",
125+
"customButton",
126+
"showProgress",
127+
"isPackageInstalled",
128+
"searchBar",
129+
"variant",
130+
"redirectTo",
131+
"redirectId",
132+
],
114133
data() {
115134
return {
116135
active: false,

‎resources/js/components/shared/ellipsisMenuActions.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,31 @@ export default {
253253
permission: ["delete-decision_tables", "view-additional-asset-actions"]
254254
},
255255
],
256+
myTemplateActions: [
257+
//TODO: Update My Template Ellipsis Menu Actions
258+
{
259+
value: "edit-template",
260+
content: "Edit Template",
261+
link: true,
262+
href: "/designer/screen-builder/{{id}}/edit",
263+
permission: ["edit-screens", "view-additional-asset-actions"],
264+
icon: "fas fa-pen-square",
265+
},
266+
{
267+
value: "make-public",
268+
content: "Make Public",
269+
link: true,
270+
href: "/designer/screens/{{id}}/edit",
271+
permission: ["edit-screens", "view-additional-asset-actions"],
272+
icon: "fas fa-file-export",
273+
},
274+
{
275+
value: "delete-template",
276+
content: "Delete Template",
277+
permission: ["delete-screens", "view-additional-asset-actions"],
278+
icon: "fas fa-trash-alt",
279+
},
280+
],
256281
};
257282
},
258283
};

‎resources/js/processes/screen-templates/components/MyTemplatesListing.vue

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
<template>
2+
<div class="data-table">
3+
<data-loading
4+
:for="/screens/"
5+
v-show="shouldShowLoader"
6+
:empty="$t('No Data Available')"
7+
:empty-desc="$t('')"
8+
empty-icon="noData"
9+
/>
10+
<div v-show="!shouldShowLoader" class="card card-body my-templates-table-card" data-cy="my-templates-table">
11+
<filter-table
12+
:headers="fields"
13+
:data="data"
14+
table-name="my-screen-templates"
15+
style="height: calc(100vh - 355px);"
16+
>
17+
<!-- Slot Table Header filter Button -->
18+
<template
19+
v-for="(column, index) in fields"
20+
#[`filter-${column.field}`]
21+
>
22+
<div
23+
v-if="column.sortable"
24+
:key="index"
25+
@click="handleEllipsisClick(column)"
26+
>
27+
<i
28+
:class="['fas', {
29+
'fa-sort': column.direction === 'none',
30+
'fa-sort-up': column.direction === 'asc',
31+
'fa-sort-down': column.direction === 'desc',
32+
}]"
33+
/>
34+
</div>
35+
</template>
36+
<!-- Slot Table Body -->
37+
<template
38+
v-for="(row, rowIndex) in data.data"
39+
#[`row-${rowIndex}`]
40+
>
41+
<td
42+
v-for="(header, colIndex) in fields"
43+
:key="`${rowIndex}_${colIndex}`"
44+
:data-cy="`my-templates-table-td-${rowIndex}-${colIndex}`"
45+
>
46+
<div
47+
v-if="containsHTML(row[header.field])"
48+
:data-cy="`my-templates-table-html-${rowIndex}-${colIndex}`"
49+
v-html="sanitize(row[header.field])"
50+
/>
51+
<template v-else>
52+
<template
53+
v-if="isComponent(row[header.field])"
54+
:data-cy="`my-templates-table-component-${rowIndex}-${colIndex}`"
55+
>
56+
<component
57+
:is="row[header.field].component"
58+
v-bind="row[header.field].props"
59+
/>
60+
</template>
61+
<template
62+
v-else
63+
:data-cy="`my-templates-table-field-${rowIndex}-${colIndex}`"
64+
>
65+
<template v-if="header.field === 'name'">
66+
<b-tooltip
67+
v-if="header.truncate"
68+
:target="`element-${row.id}`"
69+
custom-class="pm-table-tooltip"
70+
>
71+
{{ row[header.field] }}
72+
</b-tooltip>
73+
</template>
74+
<template v-if="header.field === 'actions'">
75+
<ellipsis-menu
76+
class="my-template-table"
77+
:actions="myTemplateActions"
78+
:permission="permission"
79+
:data="row"
80+
:divider="true"
81+
:screen-template="true"
82+
@navigate="onMyTemplateNavigate"
83+
/>
84+
</template>
85+
<template v-if="header.field !== 'name'">
86+
<div
87+
:style="{ maxWidth: header.width + 'px' }"
88+
>
89+
{{ getNestedPropertyValue(row, header) }}
90+
</div>
91+
</template>
92+
</template>
93+
</template>
94+
</td>
95+
</template>
96+
</filter-table>
97+
98+
<pagination-table
99+
:meta="data.meta"
100+
data-cy="my-templates-pagination"
101+
@page-change="changePage"
102+
/>
103+
<pagination
104+
ref="pagination"
105+
:single="$t('Template')"
106+
:plural="$t('Templates')"
107+
:per-page-select-enabled="true"
108+
@changePerPage="changePerPage"
109+
@vuetable-pagination:change-page="onPageChange"
110+
/>
111+
</div>
112+
</div>
113+
</template>
114+
115+
<script>
116+
import datatableMixin from "../../../components/common/mixins/datatable";
117+
import dataLoadingMixin from "../../../components/common/mixins/apiDataLoading";
118+
import ellipsisMenuMixin from "../../../components/shared/ellipsisMenuActions";
119+
import screenNavigationMixin from "../../../components/shared/screenNavigation";
120+
import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
121+
import FilterTableBodyMixin from "../../../components/shared/FilterTableBodyMixin";
122+
import paginationTable from "../../../components/shared/PaginationTable.vue";
123+
124+
import { createUniqIdsMixin } from "vue-uniq-ids";
125+
const uniqIdsMixin = createUniqIdsMixin();
126+
127+
export default {
128+
components: { EllipsisMenu, paginationTable },
129+
mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin, ellipsisMenuMixin, screenNavigationMixin, FilterTableBodyMixin],
130+
props: ["filter", "id", "permission"],
131+
data() {
132+
return {
133+
orderBy: "title",
134+
screenId: null,
135+
assetName: " ",
136+
assignedProjects: [],
137+
sortOrder: [
138+
{
139+
field: "title",
140+
sortField: "title",
141+
direction: "asc"
142+
}
143+
],
144+
145+
fields: [
146+
{
147+
label: this.$t("Name"),
148+
field: "title",
149+
width: 200,
150+
sortable: true,
151+
truncate: true,
152+
direction: "none",
153+
},
154+
{
155+
label: this.$t("Description"),
156+
field: "description",
157+
width: 200,
158+
sortable: true,
159+
direction: "none",
160+
sortField: "description",
161+
},
162+
{
163+
label: this.$t("Type of Screen"),
164+
field: "screen_type",
165+
width: 160,
166+
sortable: true,
167+
direction: "none",
168+
sortField: "screen_type",
169+
},
170+
{
171+
label: this.$t("Modified"),
172+
field: "updated_at",
173+
format: "datetime",
174+
width: 160,
175+
sortable: true,
176+
direction: "none",
177+
},
178+
{
179+
name: "__slot:actions",
180+
field: "actions",
181+
width: 60,
182+
}
183+
]
184+
};
185+
},
186+
187+
methods: {
188+
onMyTemplateNavigate() {
189+
console.log('ellipsis menu action');
190+
},
191+
fetch() {
192+
//TODO: UPDATE FUNCTIONALITY FOR FETCHING 'MY TEMPLATES' FROM SCREEN TEMPLATES
193+
this.loading = true;
194+
//change method sort by slot name
195+
this.orderBy = this.orderBy === "__slot:title" ? "title" : this.orderBy;
196+
// Load from our api client
197+
ProcessMaker.apiClient
198+
.get(
199+
"screens" +
200+
"?page=" +
201+
this.page +
202+
"&per_page=" +
203+
this.perPage +
204+
"&filter=" +
205+
this.filter +
206+
"&order_by=" +
207+
this.orderBy +
208+
"&order_direction=" +
209+
this.orderDirection +
210+
"&include=categories,category" +
211+
"&exclude=config"
212+
)
213+
.then(response => {
214+
this.data = this.transform(response.data);
215+
this.loading = false;
216+
});
217+
},
218+
},
219+
};
220+
</script>
221+
222+
<style lang="scss" scoped>
223+
:deep(th#_description) {
224+
width: 250px;
225+
}
226+
227+
.my-templates-table-card {
228+
padding: 0;
229+
}
230+
</style>

‎resources/js/processes/screen-templates/index.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Vue from "vue";
2+
import MyTemplatesListing from "../screen-templates/components/MyTemplatesListing";
3+
4+
new Vue({
5+
el: "#myTemplatesIndex",
6+
components: {
7+
MyTemplatesListing,
8+
},
9+
data: {
10+
filter: "",
11+
pmql: "",
12+
urlPmql: "",
13+
},
14+
methods: {
15+
onNLQConversion(query) {
16+
this.onChange(query);
17+
this.reload();
18+
},
19+
onChange(query) {
20+
this.pmql = query;
21+
},
22+
reload() {
23+
this.$refs.myTemplatesListing.fetch();
24+
},
25+
},
26+
});

0 commit comments

Comments
 (0)