PMCORE-3106: UI - New Custom Cases List Settings in Admin Tab
fix CR notes
This commit is contained in:
Rodrigo Quelca
@@ -0,0 +1,42 @@
|
||||
import axios from "axios";
|
||||
import Api from "../../../../api/Api";
|
||||
import Services from "./Services";
|
||||
|
||||
class caseListApi extends Api {
|
||||
constructor(services) {
|
||||
// Here, it calls the parent class' constructor with lengths
|
||||
// provided for the Polygon's width and height
|
||||
super(services, services);
|
||||
}
|
||||
/**
|
||||
* Get the case list
|
||||
* @param {object} data
|
||||
* @param {string} module
|
||||
*/
|
||||
getCaseList(data, module) {
|
||||
let service = "CASE_LIST_TODO";
|
||||
switch (module) {
|
||||
case 'inbox' :
|
||||
service = "CASE_LIST_TODO";
|
||||
break;
|
||||
case 'draft' :
|
||||
service = "CASE_LIST_DRAFT";
|
||||
break;
|
||||
case 'unassigned' :
|
||||
service = "CASE_LIST_UNASSIGNED";
|
||||
break;
|
||||
case 'paused' :
|
||||
service = "CASE_LIST_PAUSED";
|
||||
break;
|
||||
}
|
||||
|
||||
return this.get({
|
||||
service: service,
|
||||
params: data,
|
||||
keys: {}
|
||||
});
|
||||
}
|
||||
}
|
||||
let api = new caseListApi(Services);
|
||||
|
||||
export default api;
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
CASE_LIST_TODO: "/caseList/inbox",
|
||||
CASE_LIST_DRAFT: "/caseList/draft",
|
||||
CASE_LIST_UNASSIGNED: "/caseList/unassigned",
|
||||
CASE_LIST_PAUSED: "/caseList/paused"
|
||||
};
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div
|
||||
id="home"
|
||||
>
|
||||
<div class="demo">
|
||||
<div class="container">
|
||||
<h5 >{{ $t("ID_CUSTOM_CASES_LISTS") }}</h5>
|
||||
<div class="x_content">
|
||||
<b-container fluid>
|
||||
<b-tabs content-class="mt-3">
|
||||
<b-tab :title="$t('TO_DO')" active>
|
||||
<Tables module="inbox"/>
|
||||
</b-tab>
|
||||
<b-tab :title="$t('ID_DRAFT')" lazy>
|
||||
<Tables module="draft"/>
|
||||
</b-tab>
|
||||
<b-tab :title="$t('ID_UNASSIGNED')" lazy>
|
||||
<Tables module="unassigned"/>
|
||||
</b-tab>
|
||||
<b-tab :title="$t('ID_PAUSED')" lazy>
|
||||
<Tables module="paused"/>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Tables from "./Tables";
|
||||
export default {
|
||||
name: "CustomCaseList",
|
||||
components: {
|
||||
Tables
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#home {
|
||||
padding-left: 0px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
#home.collapsed {
|
||||
padding-left: 50px;
|
||||
}
|
||||
#home.onmobile {
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1500px;
|
||||
}
|
||||
</style>
|
||||
141
resources/assets/js/admin/settings/customCaseList/Tables.vue
Normal file
141
resources/assets/js/admin/settings/customCaseList/Tables.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div id="people">
|
||||
<button-fleft :data="newList"></button-fleft>
|
||||
<button-fleft :data="importList"></button-fleft>
|
||||
<v-server-table
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:options="options"
|
||||
ref="table"
|
||||
>
|
||||
<div slot="actions" slot-scope="props">
|
||||
<div>
|
||||
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
</v-server-table>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import Api from "./Api/CaseList";
|
||||
import ButtonFleft from "../../../components/home/ButtonFleft.vue";
|
||||
import Ellipsis from '../../../components/utils/ellipsis.vue';
|
||||
export default {
|
||||
name: "Tables",
|
||||
props: ["module"],
|
||||
components: {
|
||||
ButtonFleft,
|
||||
Ellipsis
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataEllipsis: {
|
||||
buttons: {
|
||||
open: {
|
||||
name: "edit",
|
||||
icon: "far fa-edit",
|
||||
fn: function() {console.log("Edit");}
|
||||
},
|
||||
note: {
|
||||
name: "case note",
|
||||
icon: "far fa-comments",
|
||||
fn: function() {console.log("comments");}
|
||||
},
|
||||
}
|
||||
},
|
||||
newList: {
|
||||
title: this.$i18n.t("New List"),
|
||||
class: "btn-success",
|
||||
onClick: () => {
|
||||
//TODO button
|
||||
}
|
||||
},
|
||||
importList: {
|
||||
title: this.$i18n.t("Import List"),
|
||||
class: "btn-success",
|
||||
onClick: () => {
|
||||
//TODO button
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
"name",
|
||||
"process",
|
||||
"tableName",
|
||||
"owner",
|
||||
"createDate",
|
||||
"updateDate",
|
||||
"actions"
|
||||
],
|
||||
tableData: [],
|
||||
options: {
|
||||
perPage:25,
|
||||
perPageValues:[25],
|
||||
filterable: true,
|
||||
headings: {
|
||||
name: this.$i18n.t("ID_NAME"),
|
||||
process: this.$i18n.t("ID_PROCESS"),
|
||||
tableName: this.$i18n.t("ID_PM_TABLE"),
|
||||
owner: this.$i18n.t("ID_OWNER"),
|
||||
createDate: this.$i18n.t("ID_DATE_CREATED"),
|
||||
updateDate: this.$i18n.t("ID_DATE_UPDATED"),
|
||||
actions: ""
|
||||
},
|
||||
texts: {
|
||||
count: this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
|
||||
first: this.$i18n.t("ID_FIRST"),
|
||||
last: this.$i18n.t("ID_LAST"),
|
||||
filter: this.$i18n.t("ID_FILTER") + ":",
|
||||
limit: this.$i18n.t("ID_RECORDS") + ":",
|
||||
page: this.$i18n.t("ID_PAGE") + ":",
|
||||
noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS"),
|
||||
},
|
||||
requestFunction(data) {
|
||||
return this.$parent.$parent.getCasesForVueTable(data);
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Get cases data by module
|
||||
* @param {object} datas
|
||||
* @returns {object}
|
||||
*/
|
||||
getCasesForVueTable(data) {
|
||||
let that = this,
|
||||
dt,
|
||||
paged,
|
||||
limit = data.limit,
|
||||
start = data.page === 1 ? 0 : limit * (data.page - 1),
|
||||
filters = {};
|
||||
filters = {
|
||||
offset: start,
|
||||
limit: limit
|
||||
};
|
||||
if (data && data.query) {
|
||||
filters["search"] = data.query;
|
||||
}
|
||||
_.forIn(this.filters, function (item, key) {
|
||||
if(filters && item.value) {
|
||||
filters[item.filterVar] = item.value;
|
||||
}
|
||||
});
|
||||
return new Promise((resolutionFunc, rejectionFunc) => {
|
||||
Api.getCaseList(filters, that.module)
|
||||
.then((response) => {
|
||||
resolutionFunc({
|
||||
data: response.data.data,
|
||||
count: response.data.total
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
rejectionFunc(e);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
52
resources/assets/js/admin/settings/customCaseList/main.js
Normal file
52
resources/assets/js/admin/settings/customCaseList/main.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
import VueSidebarMenu from "vue-sidebar-menu";
|
||||
import VueI18n from 'vue-i18n';
|
||||
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
|
||||
import { ServerTable, Event, ClientTable} from 'vue-tables-2';
|
||||
import Sortable from 'sortablejs';
|
||||
import "@fortawesome/fontawesome-free/css/all.css";
|
||||
import "@fortawesome/fontawesome-free/js/all.js";
|
||||
import 'bootstrap/dist/css/bootstrap-grid.css';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
|
||||
import CustomCaseList from "./CustomCaseList";
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(VueSidebarMenu);
|
||||
Vue.use(BootstrapVue);
|
||||
Vue.use(BootstrapVueIcons);
|
||||
Vue.use(VueI18n);
|
||||
|
||||
Vue.use(ServerTable, {}, false, 'bootstrap3', {});
|
||||
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
|
||||
window.ProcessMaker = {
|
||||
apiClient: require('axios')
|
||||
};
|
||||
window.ProcessMaker.pluginBase = "/sysworkflow/en/neoclassic/viena/index.php";
|
||||
window.ProcessMaker.apiClient.defaults.baseURL = '/sysworkflow/en/neoclassic/viena/index.php/api/';
|
||||
window.ProcessMaker.SYS_SYS = "workflow";
|
||||
window.ProcessMaker.SYS_LANG = "en";
|
||||
window.ProcessMaker.SYS_SKIN = "neoclassic";
|
||||
|
||||
let messages = {};
|
||||
messages[config.SYS_LANG] = config.TRANSLATIONS;
|
||||
const i18n = new VueI18n({
|
||||
locale: config.SYS_LANG, // set locale
|
||||
messages, // set locale messages
|
||||
});
|
||||
|
||||
// Define routes
|
||||
const routes = [];
|
||||
|
||||
const router = new VueRouter({
|
||||
routes, // short for `routes: routes`,
|
||||
});
|
||||
|
||||
new Vue({
|
||||
i18n,
|
||||
// eslint-disable-line no-new
|
||||
el: "#customCaseList",
|
||||
router,
|
||||
render: (h) => h(CustomCaseList),
|
||||
});
|
||||
Reference in New Issue
Block a user