fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update task metrics

Browse Source
This commit is contained in:
Henry Jordan
2021-08-12 19:05:50 +00:00
parent 50c8cae9c2 1d740f9e9c
commit 1cba862603
51 changed files with 5756 additions and 1133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1040
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@@ -21,10 +21,14 @@
}, },
"dependencies": { "dependencies": {
"apexcharts": "^3.27.3", "apexcharts": "^3.27.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2",
"axios": "^0.15.3", "axios": "^0.15.3",
"bootstrap": "^4.5.3", "bootstrap": "^4.5.3",
"bootstrap-colorpicker": "^3.0.3", "bootstrap-colorpicker": "^3.0.3",
"bootstrap-vue": "^2.19.0", "bootstrap-vue": "^2.19.0",
"bootstrap-vue-font-awesome-picker": "^0.1.3",
"chart.js": "^2.7.2", "chart.js": "^2.7.2",
"dateformat": "^3.0.3", "dateformat": "^3.0.3",
"faker": "^5.1.0", "faker": "^5.1.0",
@@ -40,6 +44,9 @@
"promise-polyfill": "8.1.3", "promise-polyfill": "8.1.3",
"sortablejs": "^1.13.0", "sortablejs": "^1.13.0",
"uiv": "^0.28.0", "uiv": "^0.28.0",
"v-color": "^1.1.2",
"verte": "0.0.12",
"vfa-picker": "^5.9.1",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-apexcharts": "^1.6.1", "vue-apexcharts": "^1.6.1",
"vue-awesome-swiper": "^3.1.3", "vue-awesome-swiper": "^3.1.3",
@@ -49,6 +56,7 @@
"vue-faker": "^3.0.0", "vue-faker": "^3.0.0",
"vue-fullscreen": "^2.1.3", "vue-fullscreen": "^2.1.3",
"vue-i18n": "^8.22.2", "vue-i18n": "^8.22.2",
"vue-icon-picker": "^1.0.0",
"vue-js-toggle-button": "^1.3.1", "vue-js-toggle-button": "^1.3.1",
"vue-multiselect": "^2.1.6", "vue-multiselect": "^2.1.6",
"vue-muuri": "^0.1.2", "vue-muuri": "^0.1.2",

63
resources/assets/js/admin/Modals/ModalDeleteCaseList.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div>
<b-modal
ref="modal-delete-list"
hide-footer
size="md"
>
<template v-slot:modal-title>
{{ $t('ID_DELETE_CUSTOM_CASE_LIST') }}
</template>
<b-container fluid>
<p>
{{ $t("ID_ARE_YOU_SURE_DELETE_CUSTOM_CASE_LIST") }}
</p>
</b-container>
<div class="modal-footer">
<div class="float-right">
<b-button
variant="danger"
data-dismiss="modal"
@click="hide"
>
{{ $t("ID_NO") }}
</b-button>
<b-button
variant="success"
@click="deleteCustomCaseList"
>
{{ $t("ID_YES") }}
</b-button>
</div>
</div>
</b-modal>
</div>
</template>
<script>
import api from "./../settings/customCaseList/Api/CaseList";
export default {
name: "ModalDeleteCaseList",
data() {
return {
data: null
}
},
methods: {
show() {
this.$refs["modal-delete-list"].show();
},
hide() {
this.$refs["modal-delete-list"].hide();
},
deleteCustomCaseList() {
api.deleteCaseList(this.data).then((response) => {
if (response.statusText == "OK") {
that.$refs["modal-pause-case"].hide();
that.$parent.$refs["vueTable"].getData();
}
});
}
}
}
</script>

13
resources/assets/js/admin/settings/customCaseList/Api/CaseList.js
View File

@@ -36,6 +36,19 @@ class caseListApi extends Api {
keys: {} keys: {}
}); });
} }
deleteCaseList(data) {
return axios.delete(
window.config.SYS_SERVER_API +
'/api/1.0/' +
window.config.SYS_WORKSPACE +
'/caseList/' + data.id, {
headers: {
'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken,
"Accept-Language": window.config.SYS_LANG
}
}
);
}
} }
let api = new caseListApi(Services); let api = new caseListApi(Services);

320
resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue Normal file
View File

@@ -0,0 +1,320 @@
<template>
<div id="home">
<div class="demo">
<div class="container">
<h5>{{ $t("ID_NEW_CASES_LISTS") }}</h5>
<div class="row">
<div class="col-sm">
<b-row>
<b-col>
<b-form-group
id="nameLabel"
label="Name"
label-for="name"
>
<b-form-input
id="name"
v-model="params.name"
placeholder="Set a Case List Name"
required
></b-form-input>
</b-form-group>
</b-col>
<b-col>
<b-form-group
id="tableLabel"
label="PM Table "
label-for="name"
>
<multiselect
v-model="params.tableUid"
:options="pmTablesOptions"
placeholder="Chose an option"
label="label"
track-by="value"
:show-no-results="false"
@search-change="asyncFind"
:loading="isLoading"
id="ajax"
:limit="10"
:clear-on-select="true"
>
</multiselect>
</b-form-group>
</b-col>
</b-row>
<b-form-group
id="descriptionLabel"
label="Description "
label-for="description"
>
<b-form-textarea
id="description"
v-model="params.description"
placeholder="Some Text"
rows="1"
max-rows="1"
></b-form-textarea>
</b-form-group>
<b-row>
<b-col cols="10">
<v-client-table
:columns="columns"
v-model="data"
:options="options"
>
</v-client-table>
</b-col>
<b-col cols="2">
<!-- Control panel -->
<div class="control-panel">
<div class="vertical-center">
<button
type="button"
class="btn btn-light"
@click="assignAll()"
:disabled="isButtonDisabled"
>
<i
class="fa fa-angle-double-right"
></i>
</button>
<button
type="button"
class="btn btn-light"
@click="assignSelected()"
:disabled="isButtonDisabled"
>
<i class="fa fa-angle-right"></i>
</button>
<button
type="button"
class="btn btn-light"
@click="unassignSelected()"
:disabled="isButtonDisabled"
>
<i class="fa fa-angle-left"></i>
</button>
<button
type="button"
class="btn btn-light"
@click="unassignAll()"
:disabled="isButtonDisabled"
>
<i
class="fa fa-angle-double-right"
></i>
</button>
</div>
</div>
<!-- End Control panel -->
</b-col>
</b-row>
<b-form-group
id="iconLabel"
label="Icon "
label-for="icon"
>
<icon-picker
@selected="onSelectIcon"
:default="params.iconList"
/>
</b-form-group>
<div>
<b-form-group
id="menuColor"
label="Menu Color "
label-for="icon"
>
<verte
:value="params.iconColor"
id="icon"
@input="onChangeColor"
picker="square"
menuPosition="left"
model="hex"
>
<svg viewBox="0 0 50 50">
<path
d="M 10 10 H 90 V 90 H 10 L 10 10"
/>
</svg>
</verte>
</b-form-group>
</div>
<div>
<b-form-group
id="screenColor"
label="Screen Color Icon"
label-for="screen"
>
<verte
:value="params.iconColorScreen"
@input="onChangeColor"
picker="square"
menuPosition="left"
model="hex"
>
<svg viewBox="0 0 50 50">
<path
d="M 10 10 H 90 V 90 H 10 L 10 10"
/>
</svg>
</verte>
</b-form-group>
</div>
</div>
<div class="col-sm">
<v-client-table
:columns="columnsCaseList"
v-model="data"
:options="caseListOptions"
>
</v-client-table>
</div>
</div>
<div>
<b-button variant="danger" @click="onCancel"
>Cancel</b-button
>
<b-button variant="outline-primary">Preview</b-button>
<b-button variant="success">Save</b-button>
</div>
</div>
</div>
</div>
</template>
<script>
import utils from "../../../utils/utils";
import Multiselect from "vue-multiselect";
import api from "./../../../api/index";
import IconPicker from "../../../components/iconPicker/IconPicker.vue";
export default {
name: "CaseListSketh",
components: {
Multiselect,
IconPicker,
IconPicker,
},
props: ["params"],
data() {
return {
icon: "fas fa-user-cog",
isLoading: false,
isButtonDisabled: false,
pmTablesOptions: [],
columns: ["name", "field", "type", "source", "source"],
data: utils.getData(),
options: {
headings: {
name: "Name",
field: "Field",
type: "Type",
source: "Source",
},
filterable: true,
},
columnsCaseList: [
"name",
"field",
"type",
"source",
"typeOfSearching",
"enableSearchFilter",
"actions",
],
caseListOptions: {
headings: {
name: "Name",
field: "Field",
type: "Type",
typeOfSearching: "Type of Searching",
enableSearchFilter: "Enable Search Filter",
},
filterable: false,
perPage: 1000,
perPageValues: [],
texts: {
count: "",
},
},
};
},
mounted() {},
methods: {
unassignSelected() {},
unassignAll() {},
assignSelected() {},
assignAll() {},
onSelectIcon(data) {
console.log(data);
// this.params.iconList = data;
},
onChangeColor(color) {
console.log(color);
this.menuColor = color;
},
onCancel() {
this.$emit("closeSketch");
},
onChange(e) {
console.log(e);
},
/**
* Find asynchronously in the server
* @param {string} query - string from the text field
*/
asyncFind(query) {
let self = this;
this.isLoading = true;
self.processes = [];
api.filters
.processList(query)
.then((response) => {
self.processes = [];
_.forEach(response.data, function(elem, key) {
self.pmTablesOptions.push({
label: elem.PRO_TITLE,
value: elem.PRO_ID,
});
});
this.isLoading = false;
})
.catch((e) => {
console.error(err);
});
},
},
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style scoped>
.verte {
position: relative;
display: flex;
justify-content: normal;
}
.control-panel {
height: 100%;
width: 8%;
float: left;
position: relative;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical-center > button {
width: 70%;
margin: 5px;
}
</style>

29
resources/assets/js/admin/settings/customCaseList/CustomCaseList.vue
View File

@@ -3,13 +3,16 @@
id="home" id="home"
> >
<div class="demo"> <div class="demo">
<div class="container"> <div class="container" v-if="!showSketch">
<h5 >{{ $t("ID_CUSTOM_CASES_LISTS") }}</h5> <h5 >{{ $t("ID_CUSTOM_CASES_LISTS") }}</h5>
<div class="x_content"> <div class="x_content">
<b-container fluid> <b-container fluid>
<b-tabs content-class="mt-3"> <b-tabs content-class="mt-3">
<b-tab :title="$t('TO_DO')" active> <b-tab :title="$t('TO_DO')" active>
<Tables module="inbox"/> <Tables module="inbox"
@showSketch="onShowSketch"
@closeSketch="onCloseSketch"
/>
</b-tab> </b-tab>
<b-tab :title="$t('ID_DRAFT')" lazy> <b-tab :title="$t('ID_DRAFT')" lazy>
<Tables module="draft"/> <Tables module="draft"/>
@@ -25,26 +28,42 @@
</div> </div>
</div> </div>
<div class="container" v-if="showSketch">
<CaseListSketch
@showSketch="onShowSketch"
@closeSketch="onCloseSketch"
:params="params"
/>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Tables from "./Tables"; import Tables from "./Tables";
import CaseListSketch from "./CaseListSketch"
export default { export default {
name: "CustomCaseList", name: "CustomCaseList",
components: { components: {
Tables Tables,
CaseListSketch
}, },
data() { data() {
return { return {
showSketch: false,
params: {}
}; };
}, },
mounted() { mounted() {
}, },
methods: { methods: {
onShowSketch (params) {
this.showSketch = true;
this.params = params;
},
onCloseSketch (params) {
this.showSketch = false;
}
} }
}; };
</script> </script>

26
resources/assets/js/admin/settings/customCaseList/Tables.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<div id="people"> <div id="people">
<ModalDeleteCaseList ref="modal-delete-list"></ModalDeleteCaseList>
<button-fleft :data="newList"></button-fleft> <button-fleft :data="newList"></button-fleft>
<button-fleft :data="importList"></button-fleft> <button-fleft :data="importList"></button-fleft>
<v-server-table <v-server-table
@@ -27,13 +28,15 @@ import ButtonFleft from "../../../components/home/ButtonFleft.vue";
import Ellipsis from "../../../components/utils/ellipsis.vue"; import Ellipsis from "../../../components/utils/ellipsis.vue";
import utils from "../../../utils/utils"; import utils from "../../../utils/utils";
import OwnerCell from "../../../components/vuetable/OwnerCell"; import OwnerCell from "../../../components/vuetable/OwnerCell";
import ModalDeleteCaseList from "./../../Modals/ModalDeleteCaseList.vue"
export default { export default {
name: "Tables", name: "Tables",
props: ["module"], props: ["module"],
components: { components: {
ButtonFleft, ButtonFleft,
Ellipsis, Ellipsis,
OwnerCell OwnerCell,
ModalDeleteCaseList
}, },
data() { data() {
return { return {
@@ -55,6 +58,17 @@ export default {
title: this.$i18n.t("New List"), title: this.$i18n.t("New List"),
class: "btn-success", class: "btn-success",
onClick: () => { onClick: () => {
this.$emit("showSketch", {
name: "Rocko",
description: "algo te texto",
tableUid: "1234",
iconList: 'far fa-calendar-alt',
iconColor: '#4287f5',
iconColorScreen:'#4287f5',
type: this.module
});
//TODO button //TODO button
} }
}, },
@@ -76,8 +90,6 @@ export default {
], ],
tableData: [], tableData: [],
options: { options: {
perPage:25,
perPageValues:[25],
filterable: true, filterable: true,
headings: { headings: {
name: this.$i18n.t("ID_NAME"), name: this.$i18n.t("ID_NAME"),
@@ -171,6 +183,14 @@ export default {
data.push(v); data.push(v);
}); });
return data; return data;
},
/**
* Show modal to delete a custom case list
* @param {object} data
*/
showModalDelete(data) {
this.$refs["modal-delete-list"].data = data;
this.$refs["modal-delete-list"].show();
} }
} }
}; };

13
resources/assets/js/admin/settings/customCaseList/main.js
View File

@@ -2,22 +2,22 @@ import Vue from "vue";
import VueRouter from "vue-router"; import VueRouter from "vue-router";
import VueSidebarMenu from "vue-sidebar-menu"; import VueSidebarMenu from "vue-sidebar-menu";
import VueI18n from 'vue-i18n'; import VueI18n from 'vue-i18n';
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'; import { BootstrapVue } from 'bootstrap-vue';
import { ServerTable, Event, ClientTable} from 'vue-tables-2'; import { ServerTable, Event, ClientTable} from 'vue-tables-2';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import "@fortawesome/fontawesome-free/css/all.css"; 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-grid.css';
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
import CustomCaseList from "./CustomCaseList"; import CustomCaseList from "./CustomCaseList";
Vue.use(VueRouter); import Verte from 'verte';
import 'verte/dist/verte.css';
// register component globally
Vue.component('verte', Verte);
Vue.use(VueRouter);
Vue.use(VueSidebarMenu); Vue.use(VueSidebarMenu);
Vue.use(BootstrapVue); Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
Vue.use(VueI18n); Vue.use(VueI18n);
Vue.use(ServerTable, {}, false, 'bootstrap3', {}); Vue.use(ServerTable, {}, false, 'bootstrap3', {});
Vue.use(ClientTable, {}, false, 'bootstrap3', {}); Vue.use(ClientTable, {}, false, 'bootstrap3', {});
window.ProcessMaker = { window.ProcessMaker = {
@@ -48,5 +48,6 @@ new Vue({
// eslint-disable-line no-new // eslint-disable-line no-new
el: "#customCaseList", el: "#customCaseList",
router, router,
components: { Verte },
render: (h) => h(CustomCaseList), render: (h) => h(CustomCaseList),
}); });

24
resources/assets/js/api/Config.js Normal file
View File

@@ -0,0 +1,24 @@
import ApiInstance from "./Api.js";
import Services from "./Services";
let Api = new ApiInstance( Services );
export let config = {
get(data) {
return Api.get({
service: "GET_CONFIG",
keys: data
});
},
post(data) {
return Api.post({
service: "CONFIG",
data: data
});
},
put(data) {
return Api.put({
service: "CONFIG",
data: data
});
},
};

21
resources/assets/js/api/Filters.js
View File

@@ -1,7 +1,7 @@
import axios from "axios"; import axios from "axios";
import ApiInstance from "./Api.js"; import ApiInstance from "./Api.js";
import Services from "./Services"; import Services from "./Services";
let Api = new ApiInstance( Services ); let Api = new ApiInstance(Services);
export let filters = { export let filters = {
get(data) { get(data) {
return Api.get({ return Api.get({
@@ -42,8 +42,8 @@ export let filters = {
params.append("action", "startCase"); params.append("action", "startCase");
return axios.post( return axios.post(
window.config.SYS_SERVER_AJAX + window.config.SYS_SERVER_AJAX +
window.config.SYS_URI + window.config.SYS_URI +
`cases/casesStartPage_Ajax.php`, `cases/casesStartPage_Ajax.php`,
params params
); );
}, },
@@ -88,11 +88,16 @@ export let filters = {
* Service to get the categories list * Service to get the categories list
*/ */
categories(query) { categories(query) {
let pr = {
limit: 15,
offset: 0
};
if (query) {
pr["name"] = query;
}
return Api.get({ return Api.get({
service: "CATEGORIES", service: "CATEGORIES",
params: { params: pr,
name: query,
},
keys: {}, keys: {},
}); });
}, },
@@ -102,8 +107,8 @@ export let filters = {
userValues(query) { userValues(query) {
return axios.post( return axios.post(
window.config.SYS_SERVER_AJAX + window.config.SYS_SERVER_AJAX +
window.config.SYS_URI + window.config.SYS_URI +
`cases/casesList_Ajax?actionAjax=userValues&action=search`, `cases/casesList_Ajax?actionAjax=userValues&action=search`,
{ {
query, query,
} }

13
resources/assets/js/api/Process.js
View File

@@ -13,11 +13,18 @@ export let process = {
}); });
} }
}, },
categories(dt) { totalCasesByProcess(dt) {
return Api.get({
service: "TOTAL_CASES_BY_PROCESS",
params: dt,
keys: {}
});
},
processCategories() {
return Api.fetch({ return Api.fetch({
service: "CATEGORIES", service: "PROCESS_CATEGORIES",
method: "get", method: "get",
data: dt, data: {},
keys: {} keys: {}
}); });
} }

6
resources/assets/js/api/Services.js
View File

@@ -69,8 +69,10 @@
CATEGORIES: "/home/categories", CATEGORIES: "/home/categories",
DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}", DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
LIST_TOTAL_CASES: "/metrics/list-total-cases", LIST_TOTAL_CASES: "/metrics/list-total-cases",
TOTAL_CASES_BY_PROCESS:"/metrics/total-cases-by-process",
CONFIG: "/home/config",
GET_CONFIG: "/home/config/{id}/{name}",
PAUSE_CASE: "/cases/{app_uid}/pause", PAUSE_CASE: "/cases/{app_uid}/pause",
REASSIGN_CASE: "/cases/{app_uid}/reassign-case", REASSIGN_CASE: "/cases/{app_uid}/reassign-case",
REASSIGN_USERS: "/light/userstoreassign/{task_uid}", REASSIGN_USERS: "/light/userstoreassign/{task_uid}"
CATEGORIES: "/processcategory/categories"
}; };

5
resources/assets/js/api/index.js
View File

@@ -1,7 +1,7 @@
import { menu } from "./Menu"; import { menu } from "./Menu";
import { cases, casesHeader } from "./Cases"; import { cases, casesHeader } from "./Cases";
import { config } from "./Config";
import { caseNotes } from "./CaseNotes"; import { caseNotes } from "./CaseNotes";
import { process } from "./Process"; import { process } from "./Process";
import { filters } from "./Filters"; import { filters } from "./Filters";
@@ -13,5 +13,6 @@ export default {
casesHeader, casesHeader,
process, process,
caseNotes, caseNotes,
filters filters,
config
}; };

239
resources/assets/js/components/iconPicker/IconPicker.vue Normal file
View File

@@ -0,0 +1,239 @@
<template>
<div class="rbt-icon-picker">
<b-button @click="popUpActive = true">
<i ref="icon" :class="icon"></i>
</b-button>
<div class="rip-popup-component" :style="popupActiveStyle">
<div class="rip-popup-bg"></div>
<div class="rip-popup">
<div class="rip-popup-content">
<div class="rip-search">
<div class="rip-input">
<label for="ripSearch" style="display: none;"
>Search for Icon</label
>
<input
id="ripSearch"
placeholder="Search for Icon"
v-model="searchText"
@input="searchTextChanged"
/>
<span class="input-append">
<i class="fas fa-search"></i>
</span>
</div>
</div>
<div class="rip-content">
<div class="rip-not-found" v-show="loading">
<i class="fas fa-spinner fa-pulse"></i>
</div>
<div class="rip-icons" v-show="!loading">
<h4 class="icon-title">
Regular Icons
</h4>
<p
style="text-align: center;"
v-if="regularIcons.length <= 0"
>
<i class="fas fa-eye-slash"></i>
Sorry, No icons found!
</p>
<ul class="rip-row" v-if="regularIcons.length > 0">
<li
v-for="(icon, index) in regularIcons"
:key="index"
class="rip-col"
>
<div class="icon-content text-center">
<div
class="icon-el"
@click="selectIcon(icon, 'far')"
>
<i :class="`far fa-${icon}`"></i>
</div>
<div class="icon-title">
{{ icon }}
</div>
</div>
</li>
</ul>
<h4 class="icon-title">
Brand Icons
</h4>
<p
style="text-align: center;"
v-if="brandIcons.length <= 0"
>
<i class="fas fa-eye-slash"></i>
Sorry, No Brand icons found!
</p>
<ul class="rip-row" v-if="brandIcons.length > 0">
<li
v-for="(icon, index) in brandIcons"
:key="index"
class="rip-col"
>
<div class="icon-content text-center">
<div
class="icon-el"
@click="selectIcon(icon, 'fab')"
>
<i :class="`fab fa-${icon}`"></i>
</div>
<div class="icon-title">
{{ icon }}
</div>
</div>
</li>
</ul>
<h4 class="icon-title">
Solid Icons
</h4>
<p
style="text-align: center;"
v-if="solidIcons.length <= 0"
>
<i class="fas fa-eye-slash"></i>
Sorry, No Solid icons found!
</p>
<ul class="rip-row" v-if="solidIcons.length > 0">
<li
v-for="(icon, index) in solidIcons"
:key="index"
class="rip-col"
>
<div class="icon-content text-center">
<div
class="icon-el"
@click="selectIcon(icon, 'fas')"
>
<i :class="`fas fa-${icon}`"></i>
</div>
<div class="icon-title">
{{ icon }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ripIcons from "./assets/icons";
export default {
name: "VueAwesomeIconPicker",
props: {
button: {
type: String,
default: "Pick A Icon",
},
color: {
type: String,
default: "black",
},
title: {
type: String,
default: "Vue Awesome Icon Picker",
},
iconPreview: {
type: Boolean,
default: true,
},
default: {
type: String,
default: null,
},
},
data() {
return {
loading: false,
allIcons: {
brand: [],
regular: [],
solid: [],
},
popUpActive: false,
icon: null,
searchText: "",
searchIconNotFound: false,
};
},
watch: {
color() {
console.log("colores");
},
},
methods: {
selectIcon(icon, type) {
this.icon = `${type} fa-${icon}`;
this.popUpActive = false;
this.$emit("selected", this.icon);
},
searchTextChanged() {
this.searchIcon(this.searchText);
},
setDefaultIcons() {
this.allIcons.brand = ripIcons.brand;
this.allIcons.regular = ripIcons.regular;
this.allIcons.solid = ripIcons.solid;
},
searchIcon(txt) {
this.loading = true;
if (txt && txt.length > 0) {
setTimeout(() => {
this.loading = false;
}, 950);
txt = txt.toLowerCase();
Object.keys(ripIcons).forEach((key) => {
setTimeout(() => {
let icons = ripIcons[key].filter(
(ico) => ico.indexOf(txt) > -1
);
if (icons && icons.length > 0) {
this.allIcons[key] = icons;
} else {
this.allIcons[key] = [];
}
}, 320);
});
} else {
setTimeout(() => {
this.setDefaultIcons();
this.loading = false;
}, 950);
}
},
},
created() {
this.setDefaultIcons();
if (this.default) {
this.icon = this.default;
}
},
computed: {
popupActiveStyle() {
return !this.popUpActive ? "display: none;" : "";
},
brandIcons() {
return this.loading ? [] : this.allIcons.brand;
},
solidIcons() {
return this.loading ? [] : this.allIcons.solid;
},
regularIcons() {
return this.loading ? [] : this.allIcons.regular;
},
},
};
</script>
<style lang="scss" scoped>
@import "./assets/RbtIconPicker";
</style>

239
resources/assets/js/components/iconPicker/assets/_RbtIconPicker.scss Normal file
View File

@@ -0,0 +1,239 @@
.rbt-icon-picker {
.icon-preview {
font-size: 22px;
padding: 10px 20px 0;
display: inline-block;
}
.picker-btn {
color: #fff;
background: #339af0;
padding: 12px 25px;
border: 0;
border-radius: 2px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
cursor: pointer;
transition: all .25s ease-in;
&:hover {
background: #2c89d6;
}
}
}
.rip-popup-component {
text-align: center;
z-index: 5999999;
transition: all .2s;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 1;
.rip-popup-bg {
width: 100%;
background: rgba(0,0,0,.4);
position: absolute;
top: 0;
height: 100%;
z-index: 10;
transition: all .25s ease;
opacity: 1;
left: 0;
}
.rip-popup {
transition: all .2s;
z-index: 100;
margin: 10px;
width: calc(100% - 30px);
height: calc(100% - 30px);
border-radius: 6px;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
background: #f8f9fa;
animation: rebound .3s;
.rip-popup-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0,0,0,.05);
border-radius: 5px 5px;
position: relative;
h2 {
transition: all .23s ease .1s;
padding: 8px 8px 8px 12px;
font-size: 18px;
text-align: center;
width: 100%;
}
span {
background: #ffffff;
transition: all .23s ease .1s;
position: relative;
padding: 8px;
cursor: pointer;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
border-radius: 5px;
color: rgba(0,0,0,.6);
transform: translate(8px,-8px);
line-height: 16px;
font-size: 30px;
&:hover {
box-shadow: 0 0 0 0 rgba(0,0,0,.1);
transform: translate(5px,-5px);
}
}
}
.rip-popup-content {
padding: 14px;
font-size: 14px;
transition: all .23s ease .1s;
overflow: auto;
max-height: calc(100vh - 100px);
margin-top: 5px;
margin-bottom: 5px;
.rip-search {
.rip-input {
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 20px;
border-bottom: 1px dashed #e5e5e5;
margin-bottom: 20px;
input {
width: 100% !important;
transition: all .1s ease-in-out;
padding: 16px 48px 16px 24px;
font-size: 25px;
border: 2px solid #dee2e6;
box-shadow: inset 0 0.25rem 0.125rem 0 rgba(0,0,0,0.05);
color: #495057;
border-radius: 4px;
&::placeholder {
color: #c9cbcd;
}
}
span {
position: absolute;
right: 25px;
font-size: 28px;
color: #caccce;
opacity: 0.4;
}
}
}
.rip-content {
width: 100%;
.rip-not-found {
min-height: 75vh;
display: flex;
align-items: center;
align-self: center;
align-content: center;
min-width: 100%;
text-align: center;
svg {
margin: 0 auto;
font-size: 50px;
color: #adb5bd;
}
}
h4.icon-title {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 25px;
}
.rip-row {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
.rip-col {
text-align: center;
padding: 0 0 16px;
width: 25%;
list-style: none;
.icon-content {
border-radius: 3px;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: translateZ(0);
.icon-el {
padding: 8px;
font-size: 35px;
font-weight: 900;
color: #495057;
cursor: pointer;
transition: all ;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
&:hover {
color: #fff;
background: #339af0;
}
}
.icon-title {
padding: 8px 4px;
font-size: 13px;
color: #adb5bd;
&:hover {
color: #495057;
}
}
&:hover {
background: #fff;
box-shadow: 0 0.25rem 0.125rem 0 rgba(0,0,0,0.05);
}
}
@media (min-width: 576px) {
width: 20%;
}
@media (min-width: 768px) {
width: 16.6667%;
}
@media (min-width: 1200px) {
width: 11.1111%;
}
}
}
}
}
}
}
@keyframes rebound {
0% {
-webkit-transform: scale(.9);
transform: scale(.9);
}
50% {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

437
resources/assets/js/components/iconPicker/assets/icons/brand.js Normal file
View File

@@ -0,0 +1,437 @@
const brand = [
'500px',
'accessible-icon',
'accusoft',
'acquisitions-incorporated',
'adn',
'adobe',
'adversal',
'affiliatetheme',
'airbnb',
'algolia',
'alipay',
'amazon',
'amazon-pay',
'amilia',
'android',
'angellist',
'angrycreative',
'angular',
'app-store',
'app-store-ios',
'apper',
'apple',
'apple-pay',
'artstation',
'asymmetrik',
'atlassian',
'audible',
'autoprefixer',
'avianex',
'aviato',
'aws',
'bandcamp',
'battle-net',
'behance',
'behance-square',
'bimobject',
'bitbucket',
'bitcoin',
'bity',
'black-tie',
'blackberry',
'blogger',
'blogger-b',
'bluetooth',
'bluetooth-b',
'bootstrap',
'btc',
'buffer',
'buromobelexperte',
'buy-n-large',
'buysellads',
'canadian-maple-leaf',
'cc-amazon-pay',
'cc-amex',
'cc-apple-pay',
'cc-diners-club',
'cc-discover',
'cc-jcb',
'cc-mastercard',
'cc-paypal',
'cc-stripe',
'cc-visa',
'centercode',
'centos',
'chrome',
'chromecast',
'cloudscale',
'cloudsmith',
'cloudversify',
'codepen',
'codiepie',
'confluence',
'connectdevelop',
'contao',
'cotton-bureau',
'cpanel',
'creative-commons',
'creative-commons-by',
'creative-commons-nc',
'creative-commons-nc-eu',
'creative-commons-nc-jp',
'creative-commons-nd',
'creative-commons-pd',
'creative-commons-pd-alt',
'creative-commons-remix',
'creative-commons-sa',
'creative-commons-sampling',
'creative-commons-sampling-plus',
'creative-commons-share',
'creative-commons-zero',
'critical-role',
'css3',
'css3-alt',
'cuttlefish',
'd-and-d',
'd-and-d-beyond',
'dashcube',
'delicious',
'deploydog',
'deskpro',
'dev',
'deviantart',
'dhl',
'diaspora',
'digg',
'digital-ocean',
'discord',
'discourse',
'dochub',
'docker',
'draft2digital',
'dribbble',
'dribbble-square',
'dropbox',
'drupal',
'dyalog',
'earlybirds',
'ebay',
'edge',
'elementor',
'ello',
'ember',
'empire',
'envira',
'erlang',
'ethereum',
'etsy',
'evernote',
'expeditedssl',
'facebook',
'facebook-f',
'facebook-messenger',
'facebook-square',
'fantasy-flight-games',
'fedex',
'fedora',
'figma',
'firefox',
'first-order',
'first-order-alt',
'firstdraft',
'flickr',
'flipboard',
'fly',
'font-awesome',
'font-awesome-alt',
'font-awesome-flag',
'fonticons',
'fonticons-fi',
'fort-awesome',
'fort-awesome-alt',
'forumbee',
'foursquare',
'free-code-camp',
'freebsd',
'fulcrum',
'galactic-republic',
'galactic-senate',
'get-pocket',
'gg',
'gg-circle',
'git',
'git-alt',
'git-square',
'github',
'github-alt',
'github-square',
'gitkraken',
'gitlab',
'gitter',
'glide',
'glide-g',
'gofore',
'goodreads',
'goodreads-g',
'google',
'google-drive',
'google-play',
'google-plus',
'google-plus-g',
'google-plus-square',
'google-wallet',
'gratipay',
'grav',
'gripfire',
'grunt',
'gulp',
'hacker-news',
'hacker-news-square',
'hackerrank',
'hips',
'hire-a-helper',
'hooli',
'hornbill',
'hotjar',
'houzz',
'html5',
'hubspot',
'imdb',
'instagram',
'intercom',
'internet-explorer',
'invision',
'ioxhost',
'itch-io',
'itunes',
'itunes-note',
'java',
'jedi-order',
'jenkins',
'jira',
'joget',
'joomla',
'js',
'js-square',
'jsfiddle',
'kaggle',
'keybase',
'keycdn',
'kickstarter',
'kickstarter-k',
'korvue',
'laravel',
'lastfm',
'lastfm-square',
'leanpub',
'less',
'line',
'linkedin',
'linkedin-in',
'linode',
'linux',
'lyft',
'magento',
'mailchimp',
'mandalorian',
'markdown',
'mastodon',
'maxcdn',
'mdb',
'medapps',
'medium',
'medium-m',
'medrt',
'meetup',
'megaport',
'mendeley',
'microsoft',
'mix',
'mixcloud',
'mizuni',
'modx',
'monero',
'napster',
'neos',
'nimblr',
'node',
'node-js',
'npm',
'ns8',
'nutritionix',
'odnoklassniki',
'odnoklassniki-square',
'old-republic',
'opencart',
'openid',
'opera',
'optin-monster',
'orcid',
'osi',
'page4',
'pagelines',
'palfed',
'patreon',
'paypal',
'penny-arcade',
'periscope',
'phabricator',
'phoenix-framework',
'phoenix-squadron',
'php',
'pied-piper',
'pied-piper-alt',
'pied-piper-hat',
'pied-piper-pp',
'pinterest',
'pinterest-p',
'pinterest-square',
'playstation',
'product-hunt',
'pushed',
'python',
'qq',
'quinscape',
'quora',
'r-project',
'raspberry-pi',
'ravelry',
'react',
'reacteurope',
'readme',
'rebel',
'red-river',
'reddit',
'reddit-alien',
'reddit-square',
'redhat',
'renren',
'replyd',
'researchgate',
'resolving',
'rev',
'rocketchat',
'rockrms',
'safari',
'salesforce',
'sass',
'schlix',
'scribd',
'searchengin',
'sellcast',
'sellsy',
'servicestack',
'shirtsinbulk',
'shopware',
'simplybuilt',
'sistrix',
'sith',
'sketch',
'skyatlas',
'skype',
'slack',
'slack-hash',
'slideshare',
'snapchat',
'snapchat-ghost',
'snapchat-square',
'soundcloud',
'sourcetree',
'speakap',
'speaker-deck',
'spotify',
'squarespace',
'stack-exchange',
'stack-overflow',
'stackpath',
'staylinked',
'steam',
'steam-square',
'steam-symbol',
'sticker-mule',
'strava',
'stripe',
'stripe-s',
'studiovinari',
'stumbleupon',
'stumbleupon-circle',
'superpowers',
'supple',
'suse',
'swift',
'symfony',
'teamspeak',
'telegram',
'telegram-plane',
'tencent-weibo',
'the-red-yeti',
'themeco',
'themeisle',
'think-peaks',
'trade-federation',
'trello',
'tripadvisor',
'tumblr',
'tumblr-square',
'twitch',
'twitter',
'twitter-square',
'typo3',
'uber',
'ubuntu',
'uikit',
'umbraco',
'uniregistry',
'untappd',
'ups',
'usb',
'usps',
'ussunnah',
'vaadin',
'viacoin',
'viadeo',
'viadeo-square',
'viber',
'vimeo',
'vimeo-square',
'vimeo-v',
'vine',
'vk',
'vnv',
'vuejs',
'waze',
'weebly',
'weibo',
'weixin',
'whatsapp',
'whatsapp-square',
'whmcs',
'wikipedia-w',
'windows',
'wix',
'wizards-of-the-coast',
'wolf-pack-battalion',
'wordpress',
'wordpress-simple',
'wpbeginner',
'wpexplorer',
'wpforms',
'wpressr',
'xbox',
'xing',
'xing-square',
'y-combinator',
'yahoo',
'yammer',
'yandex',
'yandex-international',
'yarn',
'yelp',
'yoast',
'youtube',
'youtube-square',
'zhihu'
];
export default brand;

7
resources/assets/js/components/iconPicker/assets/icons/index.js Normal file
View File

@@ -0,0 +1,7 @@
import solid from "./solid";
import regular from "./regular";
import brand from "./brand";
const icons = { solid, brand, regular };
export default icons;

155
resources/assets/js/components/iconPicker/assets/icons/regular.js Normal file
View File

@@ -0,0 +1,155 @@
const regular = [
'address-book',
'address-card',
'angry',
'arrow-alt-circle-down',
'arrow-alt-circle-left',
'arrow-alt-circle-right',
'arrow-alt-circle-up',
'bell',
'bell-slash',
'bookmark',
'building',
'calendar',
'calendar-alt',
'calendar-check',
'calendar-minus',
'calendar-plus',
'calendar-times',
'caret-square-down',
'caret-square-left',
'caret-square-right',
'caret-square-up',
'chart-bar',
'check-circle',
'check-square',
'circle',
'clipboard',
'clock',
'clone',
'closed-captioning',
'comment',
'comment-alt',
'comment-dots',
'comments',
'compass',
'copy',
'copyright',
'credit-card',
'dizzy',
'dot-circle',
'edit',
'envelope',
'envelope-open',
'eye',
'eye-slash',
'file',
'file-alt',
'file-archive',
'file-audio',
'file-code',
'file-excel',
'file-image',
'file-pdf',
'file-powerpoint',
'file-video',
'file-word',
'flag',
'flushed',
'folder',
'folder-open',
'frown',
'frown-open',
'futbol',
'gem',
'grimace',
'grin',
'grin-alt',
'grin-beam',
'grin-beam-sweat',
'grin-hearts',
'grin-squint',
'grin-squint-tears',
'grin-stars',
'grin-tears',
'grin-tongue',
'grin-tongue-squint',
'grin-tongue-wink',
'grin-wink',
'hand-lizard',
'hand-paper',
'hand-peace',
'hand-point-down',
'hand-point-left',
'hand-point-right',
'hand-point-up',
'hand-pointer',
'hand-rock',
'hand-scissors',
'hand-spock',
'handshake',
'hdd',
'heart',
'hospital',
'hourglass',
'id-badge',
'id-card',
'image',
'images',
'keyboard',
'kiss',
'kiss-beam',
'kiss-wink-heart',
'laugh',
'laugh-beam',
'laugh-squint',
'laugh-wink',
'lemon',
'life-ring',
'lightbulb',
'list-alt',
'map',
'meh',
'meh-blank',
'meh-rolling-eyes',
'minus-square',
'money-bill-alt',
'moon',
'newspaper',
'object-group',
'object-ungroup',
'paper-plane',
'pause-circle',
'play-circle',
'plus-square',
'question-circle',
'registered',
'sad-cry',
'sad-tear',
'save',
'share-square',
'smile',
'smile-beam',
'smile-wink',
'snowflake',
'square',
'star',
'star-half',
'sticky-note',
'stop-circle',
'sun',
'surprise',
'thumbs-down',
'thumbs-up',
'times-circle',
'tired',
'trash-alt',
'user',
'user-circle',
'window-close',
'window-maximize',
'window-minimize',
'window-restore'
];
export default regular;

962
resources/assets/js/components/iconPicker/assets/icons/solid.js Normal file
View File

@@ -0,0 +1,962 @@
const solid = [
'ad',
'address-book',
'address-card',
'adjust',
'air-freshener',
'align-center',
'align-justify',
'align-left',
'align-right',
'allergies',
'ambulance',
'american-sign-language-interpreting',
'anchor',
'angle-double-down',
'angle-double-left',
'angle-double-right',
'angle-double-up',
'angle-down',
'angle-left',
'angle-right',
'angle-up',
'angry',
'ankh',
'apple-alt',
'archive',
'archway',
'arrow-alt-circle-down',
'arrow-alt-circle-left',
'arrow-alt-circle-right',
'arrow-alt-circle-up',
'arrow-circle-down',
'arrow-circle-left',
'arrow-circle-right',
'arrow-circle-up',
'arrow-down',
'arrow-left',
'arrow-right',
'arrow-up',
'arrows-alt',
'arrows-alt-h',
'arrows-alt-v',
'assistive-listening-systems',
'asterisk',
'at',
'atlas',
'atom',
'audio-description',
'award',
'baby',
'baby-carriage',
'backspace',
'backward',
'bacon',
'balance-scale',
'balance-scale-left',
'balance-scale-right',
'ban',
'band-aid',
'barcode',
'bars',
'baseball-ball',
'basketball-ball',
'bath',
'battery-empty',
'battery-full',
'battery-half',
'battery-quarter',
'battery-three-quarters',
'bed',
'beer',
'bell',
'bell-slash',
'bezier-curve',
'bible',
'bicycle',
'biking',
'binoculars',
'biohazard',
'birthday-cake',
'blender',
'blender-phone',
'blind',
'blog',
'bold',
'bolt',
'bomb',
'bone',
'bong',
'book',
'book-dead',
'book-medical',
'book-open',
'book-reader',
'bookmark',
'border-all',
'border-none',
'border-style',
'bowling-ball',
'box',
'box-open',
'boxes',
'braille',
'brain',
'bread-slice',
'briefcase',
'briefcase-medical',
'broadcast-tower',
'broom',
'brush',
'bug',
'building',
'bullhorn',
'bullseye',
'burn',
'bus',
'bus-alt',
'business-time',
'calculator',
'calendar',
'calendar-alt',
'calendar-check',
'calendar-day',
'calendar-minus',
'calendar-plus',
'calendar-times',
'calendar-week',
'camera',
'camera-retro',
'campground',
'candy-cane',
'cannabis',
'capsules',
'car',
'car-alt',
'car-battery',
'car-crash',
'car-side',
'caret-down',
'caret-left',
'caret-right',
'caret-square-down',
'caret-square-left',
'caret-square-right',
'caret-square-up',
'caret-up',
'carrot',
'cart-arrow-down',
'cart-plus',
'cash-register',
'cat',
'certificate',
'chair',
'chalkboard',
'chalkboard-teacher',
'charging-station',
'chart-area',
'chart-bar',
'chart-line',
'chart-pie',
'check',
'check-circle',
'check-double',
'check-square',
'cheese',
'chess',
'chess-bishop',
'chess-board',
'chess-king',
'chess-knight',
'chess-pawn',
'chess-queen',
'chess-rook',
'chevron-circle-down',
'chevron-circle-left',
'chevron-circle-right',
'chevron-circle-up',
'chevron-down',
'chevron-left',
'chevron-right',
'chevron-up',
'child',
'church',
'circle',
'circle-notch',
'city',
'clinic-medical',
'clipboard',
'clipboard-check',
'clipboard-list',
'clock',
'clone',
'closed-captioning',
'cloud',
'cloud-download-alt',
'cloud-meatball',
'cloud-moon',
'cloud-moon-rain',
'cloud-rain',
'cloud-showers-heavy',
'cloud-sun',
'cloud-sun-rain',
'cloud-upload-alt',
'cocktail',
'code',
'code-branch',
'coffee',
'cog',
'cogs',
'coins',
'columns',
'comment',
'comment-alt',
'comment-dollar',
'comment-dots',
'comment-medical',
'comment-slash',
'comments',
'comments-dollar',
'compact-disc',
'compass',
'compress',
'compress-arrows-alt',
'concierge-bell',
'cookie',
'cookie-bite',
'copy',
'copyright',
'couch',
'credit-card',
'crop',
'crop-alt',
'cross',
'crosshairs',
'crow',
'crown',
'crutch',
'cube',
'cubes',
'cut',
'database',
'deaf',
'democrat',
'desktop',
'dharmachakra',
'diagnoses',
'dice',
'dice-d20',
'dice-d6',
'dice-five',
'dice-four',
'dice-one',
'dice-six',
'dice-three',
'dice-two',
'digital-tachograph',
'directions',
'divide',
'dizzy',
'dna',
'dog',
'dollar-sign',
'dolly',
'dolly-flatbed',
'donate',
'door-closed',
'door-open',
'dot-circle',
'dove',
'download',
'drafting-compass',
'dragon',
'draw-polygon',
'drum',
'drum-steelpan',
'drumstick-bite',
'dumbbell',
'dumpster',
'dumpster-fire',
'dungeon',
'edit',
'egg',
'eject',
'ellipsis-h',
'ellipsis-v',
'envelope',
'envelope-open',
'envelope-open-text',
'envelope-square',
'equals',
'eraser',
'ethernet',
'euro-sign',
'exchange-alt',
'exclamation',
'exclamation-circle',
'exclamation-triangle',
'expand',
'expand-arrows-alt',
'external-link-alt',
'external-link-square-alt',
'eye',
'eye-dropper',
'eye-slash',
'fan',
'fast-backward',
'fast-forward',
'fax',
'feather',
'feather-alt',
'female',
'fighter-jet',
'file',
'file-alt',
'file-archive',
'file-audio',
'file-code',
'file-contract',
'file-csv',
'file-download',
'file-excel',
'file-export',
'file-image',
'file-import',
'file-invoice',
'file-invoice-dollar',
'file-medical',
'file-medical-alt',
'file-pdf',
'file-powerpoint',
'file-prescription',
'file-signature',
'file-upload',
'file-video',
'file-word',
'fill',
'fill-drip',
'film',
'filter',
'fingerprint',
'fire',
'fire-alt',
'fire-extinguisher',
'first-aid',
'fish',
'fist-raised',
'flag',
'flag-checkered',
'flag-usa',
'flask',
'flushed',
'folder',
'folder-minus',
'folder-open',
'folder-plus',
'font',
'football-ball',
'forward',
'frog',
'frown',
'frown-open',
'funnel-dollar',
'futbol',
'gamepad',
'gas-pump',
'gavel',
'gem',
'genderless',
'ghost',
'gift',
'gifts',
'glass-cheers',
'glass-martini',
'glass-martini-alt',
'glass-whiskey',
'glasses',
'globe',
'globe-africa',
'globe-americas',
'globe-asia',
'globe-europe',
'golf-ball',
'gopuram',
'graduation-cap',
'greater-than',
'greater-than-equal',
'grimace',
'grin',
'grin-alt',
'grin-beam',
'grin-beam-sweat',
'grin-hearts',
'grin-squint',
'grin-squint-tears',
'grin-stars',
'grin-tears',
'grin-tongue',
'grin-tongue-squint',
'grin-tongue-wink',
'grin-wink',
'grip-horizontal',
'grip-lines',
'grip-lines-vertical',
'grip-vertical',
'guitar',
'h-square',
'hamburger',
'hammer',
'hamsa',
'hand-holding',
'hand-holding-heart',
'hand-holding-usd',
'hand-lizard',
'hand-middle-finger',
'hand-paper',
'hand-peace',
'hand-point-down',
'hand-point-left',
'hand-point-right',
'hand-point-up',
'hand-pointer',
'hand-rock',
'hand-scissors',
'hand-spock',
'hands',
'hands-helping',
'handshake',
'hanukiah',
'hard-hat',
'hashtag',
'hat-cowboy',
'hat-cowboy-side',
'hat-wizard',
'heading',
'headphones',
'headphones-alt',
'headset',
'heart',
'heart-broken',
'heartbeat',
'helicopter',
'highlighter',
'hiking',
'hippo',
'history',
'hockey-puck',
'holly-berry',
'home',
'horse',
'horse-head',
'hospital',
'hospital-alt',
'hospital-symbol',
'hot-tub',
'hotdog',
'hotel',
'hourglass',
'hourglass-end',
'hourglass-half',
'hourglass-start',
'house-damage',
'hryvnia',
'i-cursor',
'ice-cream',
'icicles',
'icons',
'id-badge',
'id-card',
'id-card-alt',
'igloo',
'image',
'images',
'inbox',
'indent',
'industry',
'infinity',
'info',
'info-circle',
'italic',
'jedi',
'joint',
'journal-whills',
'kaaba',
'key',
'keyboard',
'khanda',
'kiss',
'kiss-beam',
'kiss-wink-heart',
'kiwi-bird',
'landmark',
'language',
'laptop',
'laptop-code',
'laptop-medical',
'laugh',
'laugh-beam',
'laugh-squint',
'laugh-wink',
'layer-group',
'leaf',
'lemon',
'less-than',
'less-than-equal',
'level-down-alt',
'level-up-alt',
'life-ring',
'lightbulb',
'link',
'lira-sign',
'list',
'list-alt',
'list-ol',
'list-ul',
'location-arrow',
'lock',
'lock-open',
'long-arrow-alt-down',
'long-arrow-alt-left',
'long-arrow-alt-right',
'long-arrow-alt-up',
'low-vision',
'luggage-cart',
'magic',
'magnet',
'mail-bulk',
'male',
'map',
'map-marked',
'map-marked-alt',
'map-marker',
'map-marker-alt',
'map-pin',
'map-signs',
'marker',
'mars',
'mars-double',
'mars-stroke',
'mars-stroke-h',
'mars-stroke-v',
'mask',
'medal',
'medkit',
'meh',
'meh-blank',
'meh-rolling-eyes',
'memory',
'menorah',
'mercury',
'meteor',
'microchip',
'microphone',
'microphone-alt',
'microphone-alt-slash',
'microphone-slash',
'microscope',
'minus',
'minus-circle',
'minus-square',
'mitten',
'mobile',
'mobile-alt',
'money-bill',
'money-bill-alt',
'money-bill-wave',
'money-bill-wave-alt',
'money-check',
'money-check-alt',
'monument',
'moon',
'mortar-pestle',
'mosque',
'motorcycle',
'mountain',
'mouse',
'mouse-pointer',
'mug-hot',
'music',
'network-wired',
'neuter',
'newspaper',
'not-equal',
'notes-medical',
'object-group',
'object-ungroup',
'oil-can',
'om',
'otter',
'outdent',
'pager',
'paint-brush',
'paint-roller',
'palette',
'pallet',
'paper-plane',
'paperclip',
'parachute-box',
'paragraph',
'parking',
'passport',
'pastafarianism',
'paste',
'pause',
'pause-circle',
'paw',
'peace',
'pen',
'pen-alt',
'pen-fancy',
'pen-nib',
'pen-square',
'pencil-alt',
'pencil-ruler',
'people-carry',
'pepper-hot',
'percent',
'percentage',
'person-booth',
'phone',
'phone-alt',
'phone-slash',
'phone-square',
'phone-square-alt',
'phone-volume',
'photo-video',
'piggy-bank',
'pills',
'pizza-slice',
'place-of-worship',
'plane',
'plane-arrival',
'plane-departure',
'play',
'play-circle',
'plug',
'plus',
'plus-circle',
'plus-square',
'podcast',
'poll',
'poll-h',
'poo',
'poo-storm',
'poop',
'portrait',
'pound-sign',
'power-off',
'pray',
'praying-hands',
'prescription',
'prescription-bottle',
'prescription-bottle-alt',
'print',
'procedures',
'project-diagram',
'puzzle-piece',
'qrcode',
'question',
'question-circle',
'quidditch',
'quote-left',
'quote-right',
'quran',
'radiation',
'radiation-alt',
'rainbow',
'random',
'receipt',
'record-vinyl',
'recycle',
'redo',
'redo-alt',
'registered',
'remove-format',
'reply',
'reply-all',
'republican',
'restroom',
'retweet',
'ribbon',
'ring',
'road',
'robot',
'rocket',
'route',
'rss',
'rss-square',
'ruble-sign',
'ruler',
'ruler-combined',
'ruler-horizontal',
'ruler-vertical',
'running',
'rupee-sign',
'sad-cry',
'sad-tear',
'satellite',
'satellite-dish',
'save',
'school',
'screwdriver',
'scroll',
'sd-card',
'search',
'search-dollar',
'search-location',
'search-minus',
'search-plus',
'seedling',
'server',
'shapes',
'share',
'share-alt',
'share-alt-square',
'share-square',
'shekel-sign',
'shield-alt',
'ship',
'shipping-fast',
'shoe-prints',
'shopping-bag',
'shopping-basket',
'shopping-cart',
'shower',
'shuttle-van',
'sign',
'sign-in-alt',
'sign-language',
'sign-out-alt',
'signal',
'signature',
'sim-card',
'sitemap',
'skating',
'skiing',
'skiing-nordic',
'skull',
'skull-crossbones',
'slash',
'sleigh',
'sliders-h',
'smile',
'smile-beam',
'smile-wink',
'smog',
'smoking',
'smoking-ban',
'sms',
'snowboarding',
'snowflake',
'snowman',
'snowplow',
'socks',
'solar-panel',
'sort',
'sort-alpha-down',
'sort-alpha-down-alt',
'sort-alpha-up',
'sort-alpha-up-alt',
'sort-amount-down',
'sort-amount-down-alt',
'sort-amount-up',
'sort-amount-up-alt',
'sort-down',
'sort-numeric-down',
'sort-numeric-down-alt',
'sort-numeric-up',
'sort-numeric-up-alt',
'sort-up',
'spa',
'space-shuttle',
'spell-check',
'spider',
'spinner',
'splotch',
'spray-can',
'square',
'square-full',
'square-root-alt',
'stamp',
'star',
'star-and-crescent',
'star-half',
'star-half-alt',
'star-of-david',
'star-of-life',
'step-backward',
'step-forward',
'stethoscope',
'sticky-note',
'stop',
'stop-circle',
'stopwatch',
'store',
'store-alt',
'stream',
'street-view',
'strikethrough',
'stroopwafel',
'subscript',
'subway',
'suitcase',
'suitcase-rolling',
'sun',
'superscript',
'surprise',
'swatchbook',
'swimmer',
'swimming-pool',
'synagogue',
'sync',
'sync-alt',
'syringe',
'table',
'table-tennis',
'tablet',
'tablet-alt',
'tablets',
'tachometer-alt',
'tag',
'tags',
'tape',
'tasks',
'taxi',
'teeth',
'teeth-open',
'temperature-high',
'temperature-low',
'tenge',
'terminal',
'text-height',
'text-width',
'th',
'th-large',
'th-list',
'theater-masks',
'thermometer',
'thermometer-empty',
'thermometer-full',
'thermometer-half',
'thermometer-quarter',
'thermometer-three-quarters',
'thumbs-down',
'thumbs-up',
'thumbtack',
'ticket-alt',
'times',
'times-circle',
'tint',
'tint-slash',
'tired',
'toggle-off',
'toggle-on',
'toilet',
'toilet-paper',
'toolbox',
'tools',
'tooth',
'torah',
'torii-gate',
'tractor',
'trademark',
'traffic-light',
'train',
'tram',
'transgender',
'transgender-alt',
'trash',
'trash-alt',
'trash-restore',
'trash-restore-alt',
'tree',
'trophy',
'truck',
'truck-loading',
'truck-monster',
'truck-moving',
'truck-pickup',
'tshirt',
'tty',
'tv',
'umbrella',
'umbrella-beach',
'underline',
'undo',
'undo-alt',
'universal-access',
'university',
'unlink',
'unlock',
'unlock-alt',
'upload',
'user',
'user-alt',
'user-alt-slash',
'user-astronaut',
'user-check',
'user-circle',
'user-clock',
'user-cog',
'user-edit',
'user-friends',
'user-graduate',
'user-injured',
'user-lock',
'user-md',
'user-minus',
'user-ninja',
'user-nurse',
'user-plus',
'user-secret',
'user-shield',
'user-slash',
'user-tag',
'user-tie',
'user-times',
'users',
'users-cog',
'utensil-spoon',
'utensils',
'vector-square',
'venus',
'venus-double',
'venus-mars',
'vial',
'vials',
'video',
'video-slash',
'vihara',
'voicemail',
'volleyball-ball',
'volume-down',
'volume-mute',
'volume-off',
'volume-up',
'vote-yea',
'vr-cardboard',
'walking',
'wallet',
'warehouse',
'water',
'wave-square',
'weight',
'weight-hanging',
'wheelchair',
'wifi',
'wind',
'window-close',
'window-maximize',
'window-minimize',
'window-restore',
'wine-bottle',
'wine-glass',
'wine-glass-alt',
'won-sign',
'wrench',
'x-ray',
'yen-sign',
'yin-yang'
];
export default solid;

6
resources/assets/js/components/search/CasesFilter.vue
View File

@@ -234,8 +234,10 @@ export default {
if (element) { if (element) {
initialFilters = this.prepareFilterItems(element.items, this.selected, true); initialFilters = this.prepareFilterItems(element.items, this.selected, true);
} }
//adding process name filter //adding process name filter
initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])]; if (self.byProcessName !== "") {
initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
}
this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); this.$emit("onUpdateFilters", {params: initialFilters, refresh: false});
}, },
/** /**

53
resources/assets/js/components/utils/BreadCrumb.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li
v-for="item in formatOptions(options)"
:key="item.label"
:class="item.classObject"
>
<span v-if="item.classObject.active === true">{{ item.label }}</span>
<a
v-if="item.classObject.active === false"
href="#"
@click="item.onClick"
>{{ item.label }}</a
>
</li>
</ol>
</nav>
</template>
<script>
import _ from "lodash";
export default {
name: "BreadCrumb",
props: ["options"],
data() {
return {};
},
methods: {
/**
* format options to Bread Crumbs
*/
formatOptions(data) {
let options = data;
for (let i = 0; i <= options.length - 1; i++) {
if (i === options.length - 1) {
options[i].classObject = {
"breadcrumb-item": true,
active: true,
};
} else {
options[i].classObject = {
"breadcrumb-item": true,
active: false,
};
}
}
console.log("aquii");
return options;
},
},
};
</script>

17
resources/assets/js/components/vuetable/extends/VtSortControl.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<font-awesome-icon v-if="props.sortable" :icon="icon" class="fa-pull-right"/>
</template>
<script>
export default {
name: "VtSortControl",
props: ['props'],
computed: {
icon() {
// if not sorted return base icon
if (!this.props.sortStatus.sorted) return 'sort';
// return sort direction icon
return this.props.sortStatus.asc ? 'sort-amount-up' : 'sort-amount-down';
}
}
}
</script>

15
resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
View File

@@ -169,21 +169,12 @@ export default {
selectAllMode: "page", selectAllMode: "page",
programmatic: false, programmatic: false,
}, },
sortable: [],
orderBy: {},
requestFunction(data) { requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data); return this.$parent.$parent.getCasesForVueTable(data);
}, },
customFilters: ["myfilter"], customFilters: ["myfilter"]
settings: {
"actions":{
class: "fas fa-cog",
id:"pm-dr-column-settings",
events:{
click(){
that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
}
}
}
}
}, },
pmDateFormat: window.config.FORMATS.dateFormat, pmDateFormat: window.config.FORMATS.dateFormat,
clickCount: 0, clickCount: 0,

73
resources/assets/js/home/Draft/Draft.vue
View File

@@ -22,6 +22,7 @@
ref="vueTable" ref="vueTable"
@row-click="onRowClick" @row-click="onRowClick"
:key="random" :key="random"
name="draft"
> >
<div slot="detail" slot-scope="props"> <div slot="detail" slot-scope="props">
<div class="btn-default" @click="openCaseDetail(props.row)"> <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -194,6 +195,7 @@ import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue"
import VueListView from "../../components/dataViews/vueListView/VueListView.vue"; import VueListView from "../../components/dataViews/vueListView/VueListView.vue";
import defaultMixins from "./defaultMixins"; import defaultMixins from "./defaultMixins";
import Ellipsis from '../../components/utils/ellipsis.vue'; import Ellipsis from '../../components/utils/ellipsis.vue';
import { Event } from 'vue-tables-2';
export default { export default {
name: "Draft", name: "Draft",
@@ -209,10 +211,15 @@ export default {
VueCardView, VueCardView,
VueListView VueListView
}, },
props: ["defaultOption", "filters"], props: ["defaultOption", "settings"],
data() { data() {
let that = this; let that = this;
return { return {
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE"
},
newCase: { newCase: {
title: this.$i18n.t("ID_NEW_CASE"), title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success", class: "btn-success",
@@ -220,21 +227,28 @@ export default {
this.$refs["newRequest"].show(); this.$refs["newRequest"].show();
}, },
}, },
columns: [ filters:
"detail", this.settings && this.settings.filters
"case_number", ? this.settings.filters
"case_title", : {},
"process_name", columns:
"task", this.settings && this.settings.columns
"priority", ? this.settings.columns
"actions" : [
], "detail",
"case_number",
"case_title",
"process_name",
"task",
"priority",
"actions"
],
tableData: [], tableData: [],
icon:"fas fa-edit", icon:"fas fa-edit",
options: { options: {
filterable: false, filterable: false,
headings: { headings: {
detail: "", detail: this.$i18n.t("ID_DETAIL_CASE"),
case_number: this.$i18n.t("ID_MYCASE_NUMBER"), case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
case_title: this.$i18n.t("ID_CASE_TITLE"), case_title: this.$i18n.t("ID_CASE_TITLE"),
process_name: this.$i18n.t("ID_PROCESS_NAME"), process_name: this.$i18n.t("ID_PROCESS_NAME"),
@@ -249,6 +263,8 @@ export default {
selectAllMode: "page", selectAllMode: "page",
programmatic: false, programmatic: false,
}, },
sortable: ['case_number'],
orderBy: this.settings && this.settings.orderBy ? this.settings.orderBy: {},
requestFunction(data) { requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data); return this.$parent.$parent.getCasesForVueTable(data);
}, },
@@ -294,9 +310,21 @@ export default {
this.initFilters(); this.initFilters();
}, },
mounted() { mounted() {
let that = this;
this.openDefaultCase(); this.openDefaultCase();
// define sort event
Event.$on('vue-tables.draft.sorted', function (data) {
that.$emit("updateUserSettings", "orderBy", data);
});
},
watch: {
columns: function (val) {
this.$emit("updateUserSettings", "columns", val);
},
filters: function (val) {
this.$emit("updateUserSettings", "filters", val);
},
}, },
watch: {},
computed: { computed: {
/** /**
* Build our ProcessMaker apiClient * Build our ProcessMaker apiClient
@@ -388,7 +416,8 @@ export default {
paged, paged,
limit = data.limit, limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1), start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {}; filters = {},
sort = "";
paged = start + "," + limit; paged = start + "," + limit;
filters = { filters = {
@@ -400,6 +429,10 @@ export default {
filters[item.filterVar] = item.value; filters[item.filterVar] = item.value;
} }
}); });
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => { return new Promise((resolutionFunc, rejectionFunc) => {
api.cases api.cases
.draft(filters) .draft(filters)
@@ -415,6 +448,18 @@ export default {
}); });
}); });
}, },
/**
* Prepare sort string to be sended in the service
* @param {object} data
* @returns {string}
*/
prepareSortString(data){
let sort = "";
if (data.orderBy && this.columMap[data.orderBy]) {
sort = `${this.columMap[data.orderBy]},${data.ascending === 1 ? "ASC": "DESC"}`;
}
return sort;
},
/** /**
* Format Response API TODO to grid todo and columns * Format Response API TODO to grid todo and columns
*/ */
@@ -480,7 +525,7 @@ export default {
}, },
onRemoveFilter(data) {}, onRemoveFilter(data) {},
onUpdateFilters(data) { onUpdateFilters(data) {
this.$emit("onUpdateFilters", data.params); this.filters = data.params;
if (data.refresh) { if (data.refresh) {
this.$nextTick(() => { this.$nextTick(() => {
if (this.typeView === "GRID") { if (this.typeView === "GRID") {

4
resources/assets/js/home/Draft/defaultMixins.js
View File

@@ -87,7 +87,9 @@ export default {
_.forIn(this.filters, function (item, key) { _.forIn(this.filters, function (item, key) {
if (item.value && item.value != "") { if (item.value && item.value != "") {
filters[item.filterVar] = item.value; if(filters && item.value) {
filters[item.filterVar] = item.value;
}
} }
}); });
return new Promise((resolutionFunc, rejectionFunc) => { return new Promise((resolutionFunc, rejectionFunc) => {

75
resources/assets/js/home/Home.vue
View File

@@ -20,19 +20,21 @@
<component <component
v-bind:is="page" v-bind:is="page"
ref="component" ref="component"
:filters="filters"
:id="pageId" :id="pageId"
:pageUri="pageUri" :pageUri="pageUri"
:name="pageName" :name="pageName"
:defaultOption="defaultOption" :defaultOption="defaultOption"
@onSubmitFilter="onSubmitFilter" :settings="config.setting[page]"
:filters="filters"
@onSubmitFilter="onSubmitFilter"
@onRemoveFilter="onRemoveFilter" @onRemoveFilter="onRemoveFilter"
@onUpdatePage="onUpdatePage" @onUpdatePage="onUpdatePage"
@onUpdateDataCase="onUpdateDataCase" @onUpdateDataCase="onUpdateDataCase"
@onLastPage="onLastPage" @onLastPage="onLastPage"
@onUpdateFilters="onUpdateFilters" @onUpdateFilters="onUpdateFilters"
@cleanDefaultOption="cleanDefaultOption" @cleanDefaultOption="cleanDefaultOption"
></component> @updateUserSettings="updateUserSettings"
></component>
</div> </div>
</div> </div>
</template> </template>
@@ -87,6 +89,11 @@ export default {
pageName: null, pageName: null,
pageUri: null, pageUri: null,
filters: null, filters: null,
config: {
id: window.config.userId || "1",
name: "home",
setting: {}
},
menuMap: { menuMap: {
CASES_MY_CASES: "MyCases", CASES_MY_CASES: "MyCases",
CASES_SENT: "MyCases", CASES_SENT: "MyCases",
@@ -105,6 +112,7 @@ export default {
mounted() { mounted() {
this.onResize(); this.onResize();
this.getMenu(); this.getMenu();
this.getUserSettings();
this.listenerIframe(); this.listenerIframe();
window.setInterval( window.setInterval(
this.setCounter, this.setCounter,
@@ -150,6 +158,65 @@ export default {
console.error(e); console.error(e);
}); });
}, },
/**
* Gets the user config
*/
getUserSettings() {
api.config
.get({
id: this.config.id,
name: this.config.name
})
.then((response) => {
if (response.data) {
this.config = response.data;
} else {
this.createUserSettings();
}
})
.catch((e) => {
console.error(e);
});
},
/**
* Creates the user config service
*/
createUserSettings() {
api.config
.post({
...this.configParams,
...{setting: '{}'}
})
.then((response) => {
if (response.data) {
this.config = response.data;
}
})
.catch((e) => {
console.error(e);
});
},
/**
* Update the user config service
*/
updateUserSettings(prop, data) {
if (this.config.setting) {
if (!this.config.setting[this.page]) {
this.config.setting[this.page] = {};
}
this.config.setting[this.page][prop] = data;
api.config
.put(this.config)
.then((response) => {
if (response.data) {
//TODO success response
}
})
.catch((e) => {
console.error(e);
});
}
},
/** /**
* Set default cases menu option * Set default cases menu option
*/ */
@@ -337,7 +404,7 @@ export default {
}, },
onUpdateFilters(filters) { onUpdateFilters(filters) {
this.filters = filters; this.filters = filters;
} },
} }
}; };
</script> </script>

80
resources/assets/js/home/Inbox/Todo.vue
View File

@@ -25,6 +25,7 @@
ref="vueTable" ref="vueTable"
@row-click="onRowClick" @row-click="onRowClick"
:key="random" :key="random"
name="todo"
> >
<div slot="detail" slot-scope="props"> <div slot="detail" slot-scope="props">
<div class="btn-default" @click="openCaseDetail(props.row)"> <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -227,6 +228,7 @@ import defaultMixins from "./defaultMixins";
import Ellipsis from '../../components/utils/ellipsis.vue'; import Ellipsis from '../../components/utils/ellipsis.vue';
import ModalPauseCase from '../modal/ModalPauseCase.vue'; import ModalPauseCase from '../modal/ModalPauseCase.vue';
import ModalReassignCase from '../modal/ModalReassignCase.vue'; import ModalReassignCase from '../modal/ModalReassignCase.vue';
import { Event } from 'vue-tables-2';
import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue"; import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
export default { export default {
@@ -246,10 +248,15 @@ export default {
ModalReassignCase, ModalReassignCase,
CurrentUserCell, CurrentUserCell,
}, },
props: ["defaultOption", "filters"], props: ["defaultOption", "settings"],
data() { data() {
let that = this; let that = this;
return { return {
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE"
},
newCase: { newCase: {
title: this.$i18n.t("ID_NEW_CASE"), title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success", class: "btn-success",
@@ -257,18 +264,25 @@ export default {
this.$refs["newRequest"].show(); this.$refs["newRequest"].show();
}, },
}, },
columns: [ filters:
"detail", this.settings && this.settings.filters
"case_number", ? this.settings.filters
"case_title", : {},
"process_name", columns:
"task", this.settings && this.settings.columns
"send_by", ? this.settings.columns
"due_date", : [
"delegation_date", "detail",
"priority", "case_number",
"actions" "case_title",
], "process_name",
"task",
"send_by",
"due_date",
"delegation_date",
"priority",
"actions"
],
tableData: [], tableData: [],
icon:"fas fa-check-circle", icon:"fas fa-check-circle",
options: { options: {
@@ -302,6 +316,8 @@ export default {
selectAllMode: "page", selectAllMode: "page",
programmatic: false, programmatic: false,
}, },
sortable: ['case_number'],
orderBy: this.settings && this.settings.orderBy ? this.settings.orderBy: {},
requestFunction(data) { requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data); return this.$parent.$parent.getCasesForVueTable(data);
}, },
@@ -338,10 +354,22 @@ export default {
this.initFilters(); this.initFilters();
}, },
mounted() { mounted() {
let that = this;
// force to open case // force to open case
this.openDefaultCase(); this.openDefaultCase();
// define sort event
Event.$on('vue-tables.todo.sorted', function (data) {
that.$emit("updateUserSettings", "orderBy", data);
});
},
watch: {
columns: function (val) {
this.$emit("updateUserSettings", "columns", val);
},
filters: function (val) {
this.$emit("updateUserSettings", "filters", val);
},
}, },
watch: {},
computed: { computed: {
/** /**
* Build our ProcessMaker apiClient * Build our ProcessMaker apiClient
@@ -433,18 +461,22 @@ export default {
paged, paged,
limit = data.limit, limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1), start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {}; filters = {},
sort = "";
paged = start + "," + limit; paged = start + "," + limit;
filters = { filters = {
paged: paged, paged: paged,
}; }
_.forIn(this.filters, function (item, key) { _.forIn(this.filters, function (item, key) {
if(filters && item.value) { if(filters && item.value) {
filters[item.filterVar] = item.value; filters[item.filterVar] = item.value;
} }
}); });
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => { return new Promise((resolutionFunc, rejectionFunc) => {
api.cases api.cases
.todo(filters) .todo(filters)
@@ -460,6 +492,18 @@ export default {
}); });
}); });
}, },
/**
* Prepare sort string to be sended in the service
* @param {object} data
* @returns {string}
*/
prepareSortString(data){
let sort = "";
if (data.orderBy && this.columMap[data.orderBy]) {
sort = `${this.columMap[data.orderBy]},${data.ascending === 1 ? "ASC": "DESC"}`;
}
return sort;
},
/** /**
* Format Response API TODO to grid todo and columns * Format Response API TODO to grid todo and columns
*/ */
@@ -562,7 +606,7 @@ export default {
}, },
onRemoveFilter(data) {}, onRemoveFilter(data) {},
onUpdateFilters(data) { onUpdateFilters(data) {
this.$emit("onUpdateFilters", data.params); this.filters = data.params;
if (data.refresh) { if (data.refresh) {
this.$nextTick(() => { this.$nextTick(() => {
if (this.typeView === "GRID") { if (this.typeView === "GRID") {

4
resources/assets/js/home/Inbox/defaultMixins.js
View File

@@ -120,7 +120,9 @@ export default {
paged: paged, paged: paged,
}; };
_.forIn(this.filters, function (item, key) { _.forIn(this.filters, function (item, key) {
filters[item.filterVar] = item.value; if(filters && item.value) {
filters[item.filterVar] = item.value;
}
}); });
return new Promise((resolutionFunc, rejectionFunc) => { return new Promise((resolutionFunc, rejectionFunc) => {
api.cases api.cases

291
resources/assets/js/home/MyCases/MyCases.vue
View File

@@ -1,14 +1,14 @@
<template> <template>
<div id="v-mycases" ref="v-mycases" class="v-container-mycases"> <div id="v-mycases" ref="v-mycases" class="v-container-mycases">
<b-alert <b-alert
:show="dataAlert.dismissCountDown" :show="dataAlert.dismissCountDown"
dismissible dismissible
:variant="dataAlert.variant" :variant="dataAlert.variant"
@dismissed="dataAlert.dismissCountDown = 0" @dismissed="dataAlert.dismissCountDown = 0"
@dismiss-count-down="countDownChanged" @dismiss-count-down="countDownChanged"
> >
{{ dataAlert.message }} {{ dataAlert.message }}
</b-alert> </b-alert>
<button-fleft :data="newCase"></button-fleft> <button-fleft :data="newCase"></button-fleft>
<MyCasesFilter <MyCasesFilter
:filters="filters" :filters="filters"
@@ -20,18 +20,25 @@
/> />
<header-counter :data="headers"> </header-counter> <header-counter :data="headers"> </header-counter>
<modal-new-request ref="newRequest"></modal-new-request> <modal-new-request ref="newRequest"></modal-new-request>
<settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/> <settings-popover
:options="formatColumnSettings(options.headings)"
target="pm-dr-column-settings"
@onUpdateColumnSettings="onUpdateColumnSettings"
:key="random + 1"
:selected="formatColumnSelected(columns)"
/>
<v-server-table <v-server-table
:data="tableData" :data="tableData"
:columns="columns" :columns="columns"
:options="options" :options="options"
ref="vueTable" ref="vueTable"
name="mycases"
@row-click="onRowClick" @row-click="onRowClick"
:key="random" :key="random"
> >
<div slot="detail" slot-scope="props"> <div slot="detail" slot-scope="props">
<div class="btn-default" @click="openCaseDetail(props.row)"> <div class="btn-default" @click="openCaseDetail(props.row)">
<i class="fas fa-info-circle"></i> <i class="fas fa-info-circle"></i>
</div> </div>
</div> </div>
<div slot="case_number" slot-scope="props"> <div slot="case_number" slot-scope="props">
@@ -57,12 +64,19 @@
{{ props.row.DURATION }} {{ props.row.DURATION }}
</div> </div>
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<div class="btn-default" v-bind:style="{ color: props.row.MESSAGE_COLOR}" @click="openComments(props.row)"> <div
class="btn-default"
v-bind:style="{ color: props.row.MESSAGE_COLOR }"
@click="openComments(props.row)"
>
<span class="fas fa-comments"></span> <span class="fas fa-comments"></span>
</div> </div>
</div> </div>
</v-server-table> </v-server-table>
<ModalComments ref="modal-comments" @postNotes="onPostNotes"></ModalComments> <ModalComments
ref="modal-comments"
@postNotes="onPostNotes"
></ModalComments>
</div> </div>
</template> </template>
@@ -76,6 +90,7 @@ import GroupedCell from "../../components/vuetable/GroupedCell.vue";
import api from "../../api/index"; import api from "../../api/index";
import utils from "../../utils/utils"; import utils from "../../utils/utils";
import defaultMixins from "./defaultMixins"; import defaultMixins from "./defaultMixins";
import { Event } from "vue-tables-2";
export default { export default {
name: "MyCases", name: "MyCases",
@@ -88,18 +103,18 @@ export default {
GroupedCell, GroupedCell,
ModalComments, ModalComments,
}, },
props: ["filters", "defaultOption"], props: ["defaultOption", "settings"],
data() { data() {
let that = this; let that = this;
return { return {
dataAlert: { dataAlert: {
dismissSecs: 5, dismissSecs: 5,
dismissCountDown: 0, dismissCountDown: 0,
message: "", message: "",
variant: "info" variant: "info",
}, },
metrics: [], metrics: [],
title: this.$i18n.t('ID_MY_CASES'), title: this.$i18n.t("ID_MY_CASES"),
filter: "CASES_INBOX", filter: "CASES_INBOX",
allView: [], allView: [],
filterHeader: "STARTED", filterHeader: "STARTED",
@@ -107,6 +122,11 @@ export default {
icon:"fas fa-inbox" icon:"fas fa-inbox"
}, },
headers: [], headers: [],
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE",
},
random: _.random(0,1000000000), random: _.random(0,1000000000),
newCase: { newCase: {
title: this.$i18n.t("ID_NEW_CASE"), title: this.$i18n.t("ID_NEW_CASE"),
@@ -115,17 +135,24 @@ export default {
this.$refs["newRequest"].show(); this.$refs["newRequest"].show();
}, },
}, },
columns: [ filters:
"case_number", this.settings && this.settings.filters
"case_title", ? this.settings.filters
"process_name", : {},
"pending_taks", columns:
"status", this.settings && this.settings.columns
"start_date", ? this.settings.columns
"finish_date", : [
"duration", "case_number",
"actions", "case_title",
], "process_name",
"pending_taks",
"status",
"start_date",
"finish_date",
"duration",
"actions",
],
tableData: [], tableData: [],
options: { options: {
filterable: false, filterable: false,
@@ -141,13 +168,13 @@ export default {
actions: "", actions: "",
}, },
texts: { texts: {
count:this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"), count: this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
first: this.$i18n.t("ID_FIRST"), first: this.$i18n.t("ID_FIRST"),
last: this.$i18n.t("ID_LAST"), last: this.$i18n.t("ID_LAST"),
filter: this.$i18n.t("ID_FILTER") + ":", filter: this.$i18n.t("ID_FILTER") + ":",
limit: this.$i18n.t("ID_RECORDS") + ":", limit: this.$i18n.t("ID_RECORDS") + ":",
page: this.$i18n.t("ID_PAGE") + ":", page: this.$i18n.t("ID_PAGE") + ":",
noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS") noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS"),
}, },
selectable: { selectable: {
mode: "single", mode: "single",
@@ -157,35 +184,44 @@ export default {
selectAllMode: "page", selectAllMode: "page",
programmatic: false, programmatic: false,
}, },
sortable: ["case_number"],
orderBy:
this.settings && this.settings.orderBy
? this.settings.orderBy
: {},
requestFunction(data) { requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data); return this.$parent.$parent.getCasesForVueTable(data);
}, },
settings: { settings: {
"actions":{ actions: {
class: "fas fa-cog", class: "fas fa-cog",
id:"pm-dr-column-settings", id: "pm-dr-column-settings",
events:{ events: {
click(){ click() {
that.$root.$emit('bv::show::popover', 'pm-dr-column-settings') that.$root.$emit(
} "bv::show::popover",
} "pm-dr-column-settings"
} );
} },
},
},
},
}, },
translations: null, translations: null,
pmDateFormat: window.config.FORMATS.dateFormat, pmDateFormat: window.config.FORMATS.dateFormat,
clickCount: 0, clickCount: 0,
singleClickTimer: null, singleClickTimer: null,
statusTitle: { statusTitle: {
"ON_TIME": this.$i18n.t("ID_IN_PROGRESS"), ON_TIME: this.$i18n.t("ID_IN_PROGRESS"),
"OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"), OVERDUE: this.$i18n.t("ID_TASK_OVERDUE"),
"DRAFT": this.$i18n.t("ID_IN_DRAFT"), DRAFT: this.$i18n.t("ID_IN_DRAFT"),
"PAUSED": this.$i18n.t("ID_PAUSED"), PAUSED: this.$i18n.t("ID_PAUSED"),
"UNASSIGNED": this.$i18n.t("ID_UNASSIGNED") UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
} },
}; };
}, },
mounted() { mounted() {
let that = this;
this.getHeaders(); this.getHeaders();
this.openDefaultCase(); this.openDefaultCase();
// force to open start cases modal // force to open start cases modal
@@ -193,8 +229,19 @@ export default {
if (window.config._nodeId === "CASES_START_CASE") { if (window.config._nodeId === "CASES_START_CASE") {
this.$refs["newRequest"].show(); this.$refs["newRequest"].show();
} }
// define sort event
Event.$on("vue-tables.mycases.sorted", function(data) {
that.$emit("updateUserSettings", "orderBy", data);
});
},
watch: {
columns: function(val) {
this.$emit("updateUserSettings", "columns", val);
},
filters: function(val) {
this.$emit("updateUserSettings", "filters", val);
},
}, },
watch: {},
computed: { computed: {
/** /**
* Build our ProcessMaker apiClient * Build our ProcessMaker apiClient
@@ -211,12 +258,12 @@ export default {
*/ */
openDefaultCase() { openDefaultCase() {
let params; let params;
if(this.defaultOption) { if (this.defaultOption) {
params = utils.getAllUrlParams(this.defaultOption); params = utils.getAllUrlParams(this.defaultOption);
if (params && params.app_uid && params.del_index) { if (params && params.app_uid && params.del_index) {
this.openCase({ this.openCase({
APP_UID: params.app_uid, APP_UID: params.app_uid,
DEL_INDEX: params.del_index DEL_INDEX: params.del_index,
}); });
this.$emit("cleanDefaultOption"); this.$emit("cleanDefaultOption");
} }
@@ -231,7 +278,7 @@ export default {
self.clickCount += 1; self.clickCount += 1;
if (self.clickCount === 1) { if (self.clickCount === 1) {
self.singleClickTimer = setTimeout(function() { self.singleClickTimer = setTimeout(function() {
self.clickCount = 0; self.clickCount = 0;
}, 400); }, 400);
} else if (self.clickCount === 2) { } else if (self.clickCount === 2) {
clearTimeout(self.singleClickTimer); clearTimeout(self.singleClickTimer);
@@ -250,7 +297,7 @@ export default {
DEL_INDEX: item.DEL_INDEX, DEL_INDEX: item.DEL_INDEX,
PRO_UID: item.PRO_UID, PRO_UID: item.PRO_UID,
TAS_UID: item.TAS_UID, TAS_UID: item.TAS_UID,
ACTION: "todo" ACTION: "todo",
}); });
this.$emit("onUpdatePage", "XCase"); this.$emit("onUpdatePage", "XCase");
}, },
@@ -262,17 +309,22 @@ export default {
openCaseDetail(item) { openCaseDetail(item) {
let that = this; let that = this;
api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => { api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => {
api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => { api.cases
that.$emit("onUpdateDataCase", { .cases_open(_.extend({ ACTION: "todo" }, item))
APP_UID: item.APP_UID, .then(() => {
DEL_INDEX: item.DEL_INDEX, that.$emit("onUpdateDataCase", {
PRO_UID: item.PRO_UID, APP_UID: item.APP_UID,
TAS_UID: item.TAS_UID, DEL_INDEX: item.DEL_INDEX,
APP_NUMBER: item.CASE_NUMBER, PRO_UID: item.PRO_UID,
ACTION: that.filterHeader === "SUPERVISING" ? "to_revise": "todo" TAS_UID: item.TAS_UID,
APP_NUMBER: item.CASE_NUMBER,
ACTION:
that.filterHeader === "SUPERVISING"
? "to_revise"
: "todo",
});
that.$emit("onUpdatePage", "case-detail");
}); });
that.$emit("onUpdatePage", "case-detail");
});
}); });
}, },
/** /**
@@ -314,18 +366,22 @@ export default {
paged, paged,
limit = data.limit, limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1), start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {}; filters = {},
paged = start + "," + limit; sort = "";
paged = start + "," + limit;
filters = { filters = {
filter: that.filterHeader, filter: that.filterHeader,
paged: paged, paged: paged,
}; };
_.forIn(this.filters, function (item, key) { _.forIn(this.filters, function(item, key) {
if(filters && item.value) { if (filters && item.value) {
filters[item.filterVar] = item.value; filters[item.filterVar] = item.value;
} }
}); });
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => { return new Promise((resolutionFunc, rejectionFunc) => {
api.cases api.cases
.myCases(filters) .myCases(filters)
@@ -341,6 +397,20 @@ export default {
}); });
}); });
}, },
/**
* Prepare sort string to be sended in the service
* @param {object} data
* @returns {string}
*/
prepareSortString(data) {
let sort = "";
if (data.orderBy && this.columMap[data.orderBy]) {
sort = `${this.columMap[data.orderBy]},${
data.ascending === 1 ? "ASC" : "DESC"
}`;
}
return sort;
},
/** /**
* Format Response API TODO to grid inbox and columns * Format Response API TODO to grid inbox and columns
*/ */
@@ -355,13 +425,16 @@ export default {
STATUS: v.APP_STATUS, STATUS: v.APP_STATUS,
START_DATE: v.APP_CREATE_DATE_LABEL || "", START_DATE: v.APP_CREATE_DATE_LABEL || "",
FINISH_DATE: v.APP_FINISH_DATE_LABEL || "", FINISH_DATE: v.APP_FINISH_DATE_LABEL || "",
PENDING_TASKS: that.formantPendingTask(v.PENDING, v.APP_STATUS), PENDING_TASKS: that.formantPendingTask(
v.PENDING,
v.APP_STATUS
),
DURATION: v.DURATION, DURATION: v.DURATION,
DEL_INDEX: v.DEL_INDEX, DEL_INDEX: v.DEL_INDEX,
APP_UID: v.APP_UID, APP_UID: v.APP_UID,
PRO_UID: v.PRO_UID, PRO_UID: v.PRO_UID,
TAS_UID: v.TAS_UID, TAS_UID: v.TAS_UID,
MESSAGE_COLOR: v.CASE_NOTES_COUNT > 0 ? "black":"silver" MESSAGE_COLOR: v.CASE_NOTES_COUNT > 0 ? "black" : "silver",
}); });
}); });
return data; return data;
@@ -375,26 +448,34 @@ export default {
dataFormat = []; dataFormat = [];
for (i = 0; i < data.length; i += 1) { for (i = 0; i < data.length; i += 1) {
userDataFormat = utils.userNameDisplayFormat({ userDataFormat = utils.userNameDisplayFormat({
userName: data[i].user_tooltip.usr_username || "", userName: data[i].user_tooltip.usr_username || "",
firstName: data[i].user_tooltip.usr_firstname || "", firstName: data[i].user_tooltip.usr_firstname || "",
lastName: data[i].user_tooltip.usr_lastname || "", lastName: data[i].user_tooltip.usr_lastname || "",
format: window.config.FORMATS.format || null format: window.config.FORMATS.format || null,
}); });
dataFormat.push( dataFormat.push({
{ TAS_NAME: data[i].tas_title,
TAS_NAME: data[i].tas_title, STATUS: data[i].tas_color,
STATUS: data[i].tas_color, DELAYED_TITLE: this.delayedTitle(data[i], status),
DELAYED_TITLE: this.delayedTitle(data[i], status), DELAYED_MSG:
DELAYED_MSG: data[i].tas_status === "OVERDUE" && status !== "COMPLETED" ? data[i].delay : "", data[i].tas_status === "OVERDUE" &&
AVATAR: userDataFormat !== "" ? window.config.SYS_SERVER_AJAX + status !== "COMPLETED"
window.config.SYS_URI + ? data[i].delay
`users/users_ViewPhotoGrid?pUID=${data[i].user_id}` : "", : "",
USERNAME: userDataFormat !== "" ? userDataFormat : this.$i18n.t("ID_UNASSIGNED"), AVATAR:
POSITION: data[i].user_tooltip.usr_position, userDataFormat !== ""
EMAIL: data[i].user_tooltip.usr_email, ? window.config.SYS_SERVER_AJAX +
UNASSIGNED: userDataFormat !== "" ? true : false window.config.SYS_URI +
} `users/users_ViewPhotoGrid?pUID=${data[i].user_id}`
); : "",
USERNAME:
userDataFormat !== ""
? userDataFormat
: this.$i18n.t("ID_UNASSIGNED"),
POSITION: data[i].user_tooltip.usr_position,
EMAIL: data[i].user_tooltip.usr_email,
UNASSIGNED: userDataFormat !== "" ? true : false,
});
} }
return dataFormat; return dataFormat;
}, },
@@ -402,16 +483,21 @@ export default {
* Prepare the delayed title * Prepare the delayed title
* @param {object} data * @param {object} data
* @param {string} status * @param {string} status
* @returns {string} * @returns {string}
*/ */
delayedTitle(data, status) { delayedTitle(data, status) {
let title = ""; let title = "";
if (status === "COMPLETED") { if (status === "COMPLETED") {
title = this.$i18n.t("ID_COMPLETED") + ": "; title = this.$i18n.t("ID_COMPLETED") + ": ";
title += data.tas_status === "ON_TIME" ? this.$i18n.t("ID_ON_TIME"): this.$i18n.t("ID_TASK_OVERDUE"); title +=
data.tas_status === "ON_TIME"
? this.$i18n.t("ID_ON_TIME")
: this.$i18n.t("ID_TASK_OVERDUE");
} else { } else {
title = data.tas_status === "OVERDUE" ? title =
this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[data.tas_status]; data.tas_status === "OVERDUE"
? this.$i18n.t("ID_DELAYED") + ":"
: this.statusTitle[data.tas_status];
} }
return title; return title;
}, },
@@ -528,7 +614,7 @@ export default {
}; };
_.forEach(response, (v) => { _.forEach(response, (v) => {
//Hack for display the SUPERVISING CARD //Hack for display the SUPERVISING CARD
if(!(v.id === "SUPERVISING" && v.counter === 0)){ if (!(v.id === "SUPERVISING" && v.counter === 0)) {
data.push({ data.push({
title: v.title, title: v.title,
counter: v.counter, counter: v.counter,
@@ -542,7 +628,7 @@ export default {
that.filterHeaderObject = obj; that.filterHeaderObject = obj;
that.random = _.random(0,1000000000); that.random = _.random(0,1000000000);
}, },
class: info[v.id].class class: info[v.id].class,
}); });
} }
}); });
@@ -559,10 +645,9 @@ export default {
that.$refs["modal-comments"].show(); that.$refs["modal-comments"].show();
}); });
}, },
onRemoveFilter(data) { onRemoveFilter(data) {},
},
onUpdateFilters(data) { onUpdateFilters(data) {
this.$emit("onUpdateFilters", data.params); this.filters = data.params;
if (data.refresh) { if (data.refresh) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs["vueTable"].getData(); this.$refs["vueTable"].getData();
@@ -581,9 +666,9 @@ export default {
* @param {string} type - alert type * @param {string} type - alert type
*/ */
showAlert(message, type) { showAlert(message, type) {
this.dataAlert.message = message; this.dataAlert.message = message;
this.dataAlert.variant = type || "info"; this.dataAlert.variant = type || "info";
this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs; this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs;
}, },
/** /**
* Updates the alert dismiss value to update * Updates the alert dismiss value to update
@@ -591,7 +676,7 @@ export default {
* @param {mumber} * @param {mumber}
*/ */
countDownChanged(dismissCountDown) { countDownChanged(dismissCountDown) {
this.dataAlert.dismissCountDown = dismissCountDown; this.dataAlert.dismissCountDown = dismissCountDown;
}, },
}, },
}; };
@@ -603,4 +688,4 @@ export default {
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
} }
</style> </style>

76
resources/assets/js/home/Paused/Paused.vue
View File

@@ -23,6 +23,7 @@
ref="vueTable" ref="vueTable"
@row-click="onRowClick" @row-click="onRowClick"
:key="random" :key="random"
name="paused"
> >
<div slot="detail" slot-scope="props"> <div slot="detail" slot-scope="props">
<div class="btn-default" @click="openCaseDetail(props.row)"> <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -226,6 +227,7 @@ import VueListView from "../../components/dataViews/vueListView/VueListView.vue"
import defaultMixins from "./defaultMixins"; import defaultMixins from "./defaultMixins";
import Ellipsis from '../../components/utils/ellipsis.vue'; import Ellipsis from '../../components/utils/ellipsis.vue';
import ModalReassignCase from '../modal/ModalReassignCase.vue'; import ModalReassignCase from '../modal/ModalReassignCase.vue';
import { Event } from 'vue-tables-2';
import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue"; import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
export default { export default {
@@ -245,10 +247,15 @@ export default {
ModalReassignCase, ModalReassignCase,
CurrentUserCell, CurrentUserCell,
}, },
props: ["defaultOption", "filters"], props: ["defaultOption", "settings"],
data() { data() {
let that = this; let that = this;
return { return {
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE"
},
newCase: { newCase: {
title: this.$i18n.t("ID_NEW_CASE"), title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success", class: "btn-success",
@@ -256,18 +263,25 @@ export default {
this.$refs["newRequest"].show(); this.$refs["newRequest"].show();
}, },
}, },
columns: [ filters:
"detail", this.settings && this.settings.filters
"case_number", ? this.settings.filters
"case_title", : {},
"process_name", columns:
"task", this.settings && this.settings.columns
"send_by", ? this.settings.columns
"due_date", : [
"delegation_date", "detail",
"priority", "case_number",
"actions", "case_title",
], "process_name",
"task",
"send_by",
"due_date",
"delegation_date",
"priority",
"actions"
],
tableData: [], tableData: [],
icon:"far fa-pause-circle", icon:"far fa-pause-circle",
options: { options: {
@@ -301,6 +315,8 @@ export default {
selectAllMode: "page", selectAllMode: "page",
programmatic: false, programmatic: false,
}, },
sortable: ['case_number'],
orderBy: this.settings && this.settings.orderBy ? this.settings.orderBy: {},
requestFunction(data) { requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data); return this.$parent.$parent.getCasesForVueTable(data);
}, },
@@ -337,10 +353,21 @@ export default {
this.initFilters(); this.initFilters();
}, },
mounted() { mounted() {
let that = this;
// force to open case // force to open case
this.openDefaultCase(); this.openDefaultCase();
Event.$on('vue-tables.paused.sorted', function (data) {
that.$emit("updateUserSettings", "orderBy", data);
});
},
watch: {
columns: function (val) {
this.$emit("updateUserSettings", "columns", val);
},
filters: function (val) {
this.$emit("updateUserSettings", "filters", val);
},
}, },
watch: {},
computed: { computed: {
/** /**
* Build our ProcessMaker apiClient * Build our ProcessMaker apiClient
@@ -432,7 +459,8 @@ export default {
paged, paged,
limit = data.limit, limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1), start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {}; filters = {},
sort = "";
paged = start + "," + limit; paged = start + "," + limit;
filters = { filters = {
@@ -444,6 +472,10 @@ export default {
filters[item.filterVar] = item.value; filters[item.filterVar] = item.value;
} }
}); });
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => { return new Promise((resolutionFunc, rejectionFunc) => {
api.cases api.cases
.paused(filters) .paused(filters)
@@ -459,6 +491,18 @@ export default {
}); });
}); });
}, },
/**
* Prepare sort string to be sended in the service
* @param {object} data
* @returns {string}
*/
prepareSortString(data){
let sort = "";
if (data.orderBy && this.columMap[data.orderBy]) {
sort = `${this.columMap[data.orderBy]},${data.ascending === 1 ? "ASC": "DESC"}`;
}
return sort;
},
/** /**
* Format Response API TODO to grid todo and columns * Format Response API TODO to grid todo and columns
*/ */
@@ -560,7 +604,7 @@ export default {
}, },
onRemoveFilter(data) {}, onRemoveFilter(data) {},
onUpdateFilters(data) { onUpdateFilters(data) {
this.$emit("onUpdateFilters", data.params); this.filters = data.params;
if (data.refresh) { if (data.refresh) {
this.$nextTick(() => { this.$nextTick(() => {
if (this.typeView === "GRID") { if (this.typeView === "GRID") {

6
resources/assets/js/home/Paused/defaultMixins.js
View File

@@ -86,9 +86,9 @@ export default {
}; };
_.forIn(this.filters, function (item, key) { _.forIn(this.filters, function (item, key) {
if (item.value && item.value != "") { if(filters && item.value) {
filters[item.filterVar] = item.value; filters[item.filterVar] = item.value;
} }
}); });
return new Promise((resolutionFunc, rejectionFunc) => { return new Promise((resolutionFunc, rejectionFunc) => {
api.cases api.cases

232
resources/assets/js/home/TaskMetrics/DrillDown.vue
View File

@@ -1,151 +1,149 @@
<template> <template>
<div <div
id="v-pm-drill-down" id="v-pm-drill-down"
ref="v-pm-drill-down" ref="v-pm-drill-down"
class="v-pm-drill-down vp-inline-block" class="v-pm-drill-down vp-inline-block"
> >
<div class="p-1 v-flex"> <div class="p-1 v-flex">
<h6 class="v-search-title">Drill Down Navigator</h6> <h6 class="v-search-title">Drill Down Navigator</h6>
</div> </div>
<div <div
v-for="item in loadItems(data, index)" v-for="item in loadItems(data, level)"
:key="item.content" :key="item.content"
class="vp-padding-b10" class="vp-padding-b10"
> >
<span class="vp-inline-block vp-padding-r10 vp-font-size-r1"> <span class="vp-inline-block vp-padding-r10 vp-font-size-r1">
{{ item.label }} {{ item.label }}
</span> </span>
<div class="vp-inline-block"> <div class="vp-inline-block">
<span :class="item.classObject" @click="onClick(item)"> <span :class="item.classObject"> {{ item.content }}</span>
{{ item.content }}</span </div>
> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
import _ from "lodash"; import _ from "lodash";
export default { export default {
name: "DrillDown", name: "DrillDown",
mixins: [], mixins: [],
components: {}, components: {},
props: [], props: ["level"],
data() { data() {
let that = this; let that = this;
return { return {
index: 0, classObject: {
classObject: { "rounded-circle": true,
"rounded-circle": true, "v-pm-drill-down-number": true,
"v-pm-drill-down-number": true, "vp-btn-secondary": true,
"vp-btn-secondary": true, "btn-primary": false,
"btn-primary": false, "vp-block": true,
"vp-block": true, },
}, data: [
data: [ {
{ label: "Level",
label: "Level", content: "0",
content: "1", click() {},
click() {}, },
}, {
{ label: "Level",
label: "Level", content: "1",
content: "2", click() {},
click() {}, },
}, {
{ label: "Level",
label: "Level", content: "2",
content: "3", click() {},
click() {}, },
}, {
{ label: "Level",
label: "Level", content: "3",
content: "4", click() {},
click() {}, },
}, ],
], };
}; },
}, created() {},
created() {}, mounted() {},
mounted() {}, watch: {},
watch: {}, computed: {},
computed: {}, updated() {},
updated() {}, beforeCreate() {},
beforeCreate() {}, methods: {
methods: { onClick(item) {
onClick(item) { let array,
let array, i = 0,
i = 0, nindex;
nindex; array = _.clone(this.data);
array = _.clone(this.data); array.forEach((el) => {
array.forEach((el) => { if (el.content === item.content) {
if (el.content === item.content) { nindex = i;
nindex = i; }
} i++;
i++; });
}); this.index = nindex;
this.index = nindex; item.click(item);
item.click(item); },
}, loadItems(items, index) {
loadItems(items, index) { let array,
let array, i = 0,
i = 0, that = this;
that = this; array = _.clone(items);
array = _.clone(items); array.forEach((el) => {
array.forEach((el) => { el.classObject = _.clone(that.classObject);
el.classObject = _.clone(that.classObject); if (i <= index) {
if (i <= index) { el.classObject["vp-btn-secondary"] = false;
el.classObject["vp-btn-secondary"] = false; el.classObject["btn-primary"] = true;
el.classObject["btn-primary"] = true; }
} i++;
i++; });
}); console.log("aquiaaa");
console.log("aquiaaa"); return array;
return array; },
}, changeItem(item) {},
changeItem(item) {}, },
},
}; };
</script> </script>
<style> <style>
.v-pm-drill-down-number { .v-pm-drill-down-number {
height: 5rem; height: 5rem;
width: 5rem; width: 5rem;
text-align: center; text-align: center;
line-height: 5rem; line-height: 5rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
.vp-inline-block { .vp-inline-block {
display: inline-block; display: inline-block;
} }
.vp-block { .vp-block {
display: block; display: block;
} }
.vp-padding-r10 { .vp-padding-r10 {
padding-right: 10px; padding-right: 10px;
} }
.vp-padding-b10 { .vp-padding-b10 {
padding-bottom: 10px; padding-bottom: 10px;
} }
.vp-font-size-r1 { .vp-font-size-r1 {
font-size: 1rem; font-size: 1rem;
} }
.vp-btn-secondary { .vp-btn-secondary {
color: #2f3133; color: #2f3133;
background-color: #b5b6b6; background-color: #b5b6b6;
} }
.vp-btn-secondary:hover { .vp-btn-secondary:hover {
color: #fff; color: #fff;
background-color: #6c757d; background-color: #6c757d;
border-color: #6c757d; border-color: #6c757d;
} }
.v-pm-drill-down { .v-pm-drill-down {
vertical-align: top; vertical-align: top;
padding-left: 50px;
} }
</style> </style>

183
resources/assets/js/home/TaskMetrics/ProcessPopover.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<div class="pm-all-view-popover">
<b-popover
:target="target"
ref="popover"
triggers="click"
placement="bottom"
@show="onshow"
>
<template #title>{{ $t("ID_PROCESSES").toUpperCase() }}</template>
<div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm"
><i class="fas fa-search"></i
></span>
<input
type="text"
class="form-control"
aria-describedby="inputGroup-sizing-sm"
@keyup="search"
v-model="text"
/>
</div>
<div class="form-check border-bottom">
<input
class="form-check-input"
type="checkbox"
v-model="allColumns"
@change="toogleAllColumns"
/>
<label class="form-check-label" for="flexCheckDefault">
{{ $t("ID_ALL") }}
</label>
</div>
<b-form-group>
<b-form-checkbox-group
v-model="localSelected"
:options="results"
value-field="key"
text-field="value"
name="flavour-2a"
@change="changeOptions"
stacked
></b-form-checkbox-group>
</b-form-group>
<div class="v-popover-footer">
<div class="float-right">
<b-button @click="onClose" size="sm" variant="danger">
{{ $t("ID_CANCEL") }}</b-button
>
<b-button @click="onSave" size="sm" variant="success">{{
$t("ID_SAVE")
}}</b-button>
</div>
</div>
</div>
</b-popover>
</div>
</template>
<script>
export default {
name: "ProcessPopover",
props: ["target"],
data() {
return {
options: [],
text: "",
results: [],
allColumns: false,
localSelected: [],
selected: [],
};
},
mounted() {
this.results = this.options;
this.localSelected = this.selected;
},
methods: {
/**
* Set options
*/
setOptions(options) {
this.options = options;
this.results = options;
},
/**
* Set selected options
*/
setSelectedOptions(options) {
console.log("SELECTED");
this.selected = options;
this.localSelected = options;
},
/**
* Close buton click handler
*/
onClose() {
this.$refs.popover.$emit("close");
this.$emit("closePopover");
},
/**
* Save button click handler
*/
onSave() {
let sels;
sels = _.clone(this.localSelected);
this.$root.$emit("bv::hide::popover");
this.$emit("onUpdateColumnSettings", sels);
},
/**
* Show popover event handler
*/
onshow() {
this.$root.$emit("bv::hide::popover");
},
/**
* Search in the column name
*/
search() {
let txt = this.text.toLowerCase(),
val,
opts = [];
opts = _.filter(this.options, function (o) {
val = o.value.toLowerCase();
return val.search(txt) != -1;
});
this.results = opts;
},
/**
* Toogle all options in popover
*/
toogleAllColumns() {
let res = [];
if (this.allColumns) {
_.each(this.options, function (o) {
res.push(o.key);
});
}
this.selected = res;
},
/**
* Handler when change options event
*/
changeOptions() {
let that = this,
res = [];
_.each(this.options, function (o) {
if (
_.findIndex(that.localSelected, function (v) {
return v === o.key;
}) != -1
) {
res.push(o.key);
}
});
this.localSelected = res;
},
},
};
</script>
<style scoped>
.pm-all-view-popover .popover {
max-width: 350px !important;
min-width: 200px !important;
}
.v-popover-footer {
display: flow-root;
}
</style>

23
resources/assets/js/home/TaskMetrics/TaskMetrics.vue
View File

@@ -2,13 +2,16 @@
<div id="v-pm-task-metrics" ref="v-pm-task-metrics" class="v-pm-task-metrics"> <div id="v-pm-task-metrics" ref="v-pm-task-metrics" class="v-pm-task-metrics">
<button-fleft :data="newCase"></button-fleft> <button-fleft :data="newCase"></button-fleft>
<div class="p-1 v-flex"> <div class="p-1 v-flex">
<h5 class="v-search-title">Task metrics</h5> <h4 class="v-search-title">
Task metrics
<span class="vp-padding-r3"> <i class="fas fa-chart-pie"></i></span>
</h4>
</div> </div>
<modal-new-request ref="newRequest"></modal-new-request> <modal-new-request ref="newRequest"></modal-new-request>
<div class="d-inline-flex p-2"> <div class="d-inline-flex p-2">
<vue-charts /> <vue-charts @onChangeLevel="changeLevel" />
<div class="vp-6"></div> <div class="vp-6"></div>
<drill-down /> <drill-down :level="level" />
</div> </div>
</div> </div>
</template> </template>
@@ -32,7 +35,9 @@ export default {
props: [], props: [],
data() { data() {
let that = this; let that = this;
return {}; return {
level: 0,
};
}, },
created() {}, created() {},
mounted() {}, mounted() {},
@@ -40,7 +45,11 @@ export default {
computed: {}, computed: {},
updated() {}, updated() {},
beforeCreate() {}, beforeCreate() {},
methods: {}, methods: {
changeLevel(lv) {
this.level = lv;
},
},
}; };
</script> </script>
<style> <style>
@@ -51,7 +60,7 @@ export default {
padding-right: 50px; padding-right: 50px;
} }
.vp-6 { .vp-padding-r3 {
padding: 3.5rem !important; padding-right: 3rem;
} }
</style> </style>

520
resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
View File

@@ -1,216 +1,348 @@
<template> <template>
<div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block"> <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
<div class="p-1 v-flex"> <div class="p-1 v-flex">
<h6 class="v-search-title">Number of tasks per Task Status</h6> <h6 class="v-search-title">Number of Tasks Status per Process</h6>
<div> <div>
<label class="vp-inline-block">{{ $t("ID_PROCESS_CATEGORY") }}</label> <BreadCrumb :options="dataBreadCrumbs(data)" />
<div class="vp-width-p40 vp-inline-block"> <ProcessPopover
<multiselect :options="optionsProcesses"
v-model="category" target="pm-task-process"
:options="optionsCategory" ref="pm-task-process"
:searchable="false" @onUpdateColumnSettings="onUpdateColumnSettings"
:close-on-select="false" />
:show-labels="false" <div class="vp-width-p40 vp-inline-block">
placeholder="Pick a value" <multiselect
></multiselect> v-model="category"
</div> :options="optionsCategory"
</div> :searchable="false"
<apexchart :close-on-select="false"
ref="apexchart1" :show-labels="false"
:width="width" track-by="id"
:options="optionsBar" label="name"
:series="seriesBar" @select="changeOption"
></apexchart> ></multiselect>
</div> </div>
</div> <label class="vp-inline-block vp-padding-l20">{{
$t("ID_MAFE_a4ffdcf0dc1f31b9acaf295d75b51d00")
}}</label>
<div class="vp-inline-block">
<b-form-checkbox v-model="top" name="check-button" switch>
</b-form-checkbox>
</div>
<div class="vp-inline-block vp-right vp-padding-r40">
<h4
class="v-search-title"
@click="showProcessesPopover"
id="pm-task-process"
>
<i class="fas fa-cog"></i>
</h4>
</div>
</div>
<apexchart
ref="LevelOneChart"
:width="width"
:options="optionsBar"
:series="seriesBar"
></apexchart>
</div>
</div>
</template> </template>
<script> <script>
import _ from "lodash"; import _ from "lodash";
import Api from "../../api/index"; import Api from "../../api/index";
import BreadCrumb from "../../components/utils/BreadCrumb.vue";
import ProcessPopover from "./ProcessPopover.vue";
import Multiselect from "vue-multiselect"; import Multiselect from "vue-multiselect";
export default { export default {
name: "VueChartLvOne", name: "VueChartLvOne",
mixins: [], mixins: [],
components: { components: {
Multiselect, Multiselect,
}, BreadCrumb,
props: [], ProcessPopover,
data() { },
let that = this; props: ["data"],
return { data() {
category: null, let that = this;
optionsCategory: [], return {
width: 0, category: null,
seriesBar: [ dataProcesses: null, //Data API processes
{
data: [400, 430, 448, 470], optionsCategory: [],
}, optionsProcesses: [],
], selectedProcesses: [],
optionsBar: { top: false,
chart: { width: 0,
type: "bar", totalCases: [],
id: "apexchart2", currentSelection: null,
toolbar: { seriesBar: [
show: false, {
}, data: [],
events: { },
legendClick: function (chartContext, seriesIndex, config) { ],
console.log("click"); optionsBar: {
}, chart: {
}, type: "bar",
}, id: "LevelOneChart",
plotOptions: { toolbar: {
bar: { show: false,
barHeight: "100%", },
distributed: true, events: {
horizontal: true, legendClick: function (chartContext, seriesIndex, config) {
}, that.currentSelection = that.totalCases[seriesIndex];
}, console.log("LEGENDDDDDDDDDDDDD");
legend: { that.$emit("updateDataLevel", {
position: "left", id: that.currentSelection["PRO_ID"],
offsetY: 50, name: that.currentSelection["PRO_TITLE"],
fontSize: "18px", level: 1,
}, data: that.currentSelection,
colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"], });
dataLabels: { },
enabled: false, },
}, },
xaxis: { plotOptions: {
categories: [ bar: {
this.$i18n.t("ID_INBOX"), barHeight: "100%",
this.$i18n.t("ID_DRAFT"), distributed: true,
this.$i18n.t("ID_PAUSED"), horizontal: true,
this.$i18n.t("ID_UNASSIGNED"), },
], },
}, legend: {
tooltip: { position: "left",
x: { },
show: false, colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
}, dataLabels: {
y: { enabled: false,
title: { },
formatter: function () { xaxis: {
return ""; categories: [],
}, },
}, tooltip: {
}, x: {
}, show: false,
}, },
}; y: {
}, title: {
created() {}, formatter: function () {
mounted() { return "";
this.getBodyHeight(); },
this.getCategories(); },
//this.getDataDonut(); },
//this.getData(); },
}, },
watch: {}, };
computed: {}, },
updated() {}, created() {},
beforeCreate() {}, mounted() {
methods: { this.getBodyHeight();
/** this.getCategories();
* Return the height for Vue Card View body this.getProcesses();
*/ },
getBodyHeight() { watch: {},
this.width = window.innerHeight * 0.8; computed: {},
}, updated() {},
/** beforeCreate() {},
* Change view - donut/bar methods: {
*/ /**
changeView(view) { * Return the height for Vue Card View body
this.typeView = view; */
this.getData(); getBodyHeight() {
}, this.width = window.innerHeight;
/** },
* Get data from rest API /**
*/ * Get Categories form API
getData() { */
let that = this; getCategories() {
Api.cases let that = this;
.listTotalCases() Api.filters
.then((response) => { .categories()
that.formatData(response.data); .then((response) => {
}) that.formatDataCategories(response.data);
.catch((response) => {}); })
}, .catch((e) => {
/** console.error(err);
* Format the data for chart });
*/ },
formatData(data) { /**
let l = [], * Get Processes form API
c = [], */
s = []; getProcesses() {
_.each(data, (el) => { let that = this;
l.push(el["List Name"]); Api.filters
s.push(el["Total"]); .processList("")
if (el["Color"] == "green") { .then((response) => {
c.push("#179a6e"); that.formatDataProcesses(response.data);
} that.changeOption({
if (el["Color"] == "yellow") { id: 0,
c.push("#feb019"); });
} })
if (el["Color"] == "blue") { .catch((e) => {
c.push("#008ffb"); console.error(err);
} });
if (el["Color"] == "gray") { },
c.push("#8f99a0"); /**
} * Format categories for multiselect
}); */
this.seriesDonut = s; formatDataCategories(data) {
this.seriesBar = [ let array = [];
{ array.push({
data: s, name: "No Categories",
}, id: "0",
]; });
this.$refs["apexchart1"].updateOptions({ labels: l, colors: c }); _.each(data, (el) => {
this.$refs["apexchart2"].updateOptions({ labels: l, colors: c }); array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] });
this.$apexcharts.exec("apexchart1", "updateSeries", s); });
this.$apexcharts.exec("apexchart2", "updateSeries", [ this.optionsCategory = array;
{ this.category = array[0];
data: s, },
}, /**
]); * Format processes for popover
}, */
getCategories() { formatDataProcesses(data) {
let that = this; let sels = [],
console.log("jonas"); labels = [],
Api.process array = [];
.categories({
name:"" _.each(data, (el) => {
}) array.push({ value: el["PRO_TITLE"], key: el["PRO_ID"] });
.then((response) => { sels.push(el["PRO_ID"]);
that.formatDataCategories(response.data); labels;
}) });
.catch((e) => { this.optionsProcesses = array;
console.error(err); this.selectedProcesses = sels;
});
}, //Update the labels
formatDataCategories(data) { this.dataProcesses = data;
let array = []; this.updateLabels(data);
_.each(data, (el) => { console.log("aaaaaaaaaaaaaaaaa aaaaaaa");
array.push(el["cat_name"]); },
}); /**
this.optionsCategory = array; * Change the options in TOTAL CASES BY PROCESS
this.category = array[0]; */
}, changeOption(option) {
}, let that = this,
dt = {};
if (this.data.length > 0) {
dt = {
category: option.id,
caseList: this.data[0].id.toLowerCase(),
processes: this.selectedProcesses,
};
Api.process
.totalCasesByProcess(dt)
.then((response) => {
that.totalCases = response.data;
that.formatTotalCases(response.data);
})
.catch((e) => {
console.error(err);
});
}
},
/**
* Show the processes popover
*/
showProcessesPopover() {
this.$root.$emit("bv::show::popover", "pm-task-process");
this.$refs["pm-task-process"].setOptions(this.optionsProcesses);
this.$refs["pm-task-process"].setSelectedOptions(this.selectedProcesses);
},
formatTotalCases(data) {
let serie = [],
labels = [];
_.each(data, (el) => {
serie.push(el["TOTAL"]);
labels.push(el["PRO_TITLE"]);
});
this.$refs["LevelOneChart"].updateOptions({ labels: labels });
this.$apexcharts.exec("LevelOneChart", "updateSeries", [
{
data: serie,
},
]);
},
dataBreadCrumbs(options) {
let res = [],
that = this;
res.push({
label: "Start",
onClick() {
console.log("STARTTTTTTTTTT");
that.$emit("onChangeLevel", 0);
},
});
_.each(options, (el) => {
res.push({
label: el.id,
onClick() {
that.$emit("onChangeLevel", el.level);
},
});
});
return res;
},
/**
* Update list processes in chart
*/
onUpdateColumnSettings(data) {
let res;
this.selectedProcesses = data;
res = _.intersectionBy(this.totalCases, data, (el) => {
if (_.isNumber(el)) {
return el;
}
if (_.isObject(el) && el["PRO_ID"]) {
return el["PRO_ID"];
}
});
this.formatTotalCases(res);
},
updateLabels(processes) {
let labels = [];
_.each(processes, (el) => {
labels.push(el["PRO_TITLE"]);
});
this.$refs["LevelOneChart"].updateOptions({ labels: labels });
},
updateSerie(processes) {
let labels = [];
_.each(processes, (el) => {
labels.push(el["TOTAL"]);
});
this.$refs["LevelOneChart"].updateOptions({ labels: labels });
},
},
}; };
</script> </script>
<style> <style>
.vp-task-metrics-label { .vp-task-metrics-label {
display: inline-block; display: inline-block;
} }
.vp-width-p40 { .vp-width-p40 {
width: 40%; width: 40%;
} }
.vp-inline-block { .vp-inline-block {
display: inline-block; display: inline-block;
}
.vp-padding-l20 {
padding-left: 20px;
}
.vp-padding-r40 {
padding-right: 40px;
}
.vp-right {
float: right;
} }
</style> </style>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style> <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

315
resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue Normal file
View File

@@ -0,0 +1,315 @@
<template>
<div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
<div class="p-1 v-flex">
<h6 class="v-search-title">Number of Tasks Status per Process</h6>
<div>
<BreadCrumb :options="dataBreadCrumbs(data)" />
<div class="vp-width-p30 vp-inline-block">
<b-form-datepicker id="date-from" size="sm"></b-form-datepicker>
</div>
<div class="vp-width-p30 vp-inline-block">
<b-form-datepicker id="date-to" size="sm"></b-form-datepicker>
</div>
<div class="vp-inline-block">
<b-button-group size="sm">
<b-button variant="outline-secondary">{{ $t("ID_DAY") }}</b-button>
<b-button variant="outline-secondary">{{
$t("ID_MONTH")
}}</b-button>
<b-button variant="outline-secondary">{{ $t("ID_YEAR") }}</b-button>
</b-button-group>
</div>
</div>
<apexchart
ref="apexchart1"
:width="width"
:options="options"
:series="series"
></apexchart>
</div>
</div>
</template>
<script>
import _ from "lodash";
import Api from "../../api/index";
import Multiselect from "vue-multiselect";
import BreadCrumb from "../../components/utils/BreadCrumb.vue";
export default {
name: "VueChartLvOne",
mixins: [],
components: {
Multiselect,
BreadCrumb,
},
props: ["data"],
data() {
let that = this;
return {
category: null,
optionsCategory: [],
top: false,
width: 0,
series: [
{
name: "TEAM 1",
data: this.generateDayWiseTimeSeries(
new Date("11/02/2017").getTime(),
20,
{
min: 10,
max: 60,
}
),
},
{
name: "TEAM 2",
data: this.generateDayWiseTimeSeries(
new Date("11 Feb 2017 GMT").getTime(),
20,
{
min: 10,
max: 60,
}
),
},
{
name: "TEAM 3",
data: this.generateDayWiseTimeSeries(
new Date("11 Feb 2017 GMT").getTime(),
30,
{
min: 10,
max: 60,
}
),
},
{
name: "TEAM 4",
data: this.generateDayWiseTimeSeries(
new Date("11 Feb 2017 GMT").getTime(),
10,
{
min: 10,
max: 60,
}
),
},
{
name: "TEAM 5",
data: this.generateDayWiseTimeSeries(
new Date("11 Feb 2017 GMT").getTime(),
30,
{
min: 10,
max: 60,
}
),
},
],
options: {
chart: {
height: 350,
type: "scatter",
zoom: {
type: "xy",
},
},
dataLabels: {
enabled: false,
},
grid: {
xaxis: {
lines: {
show: true,
},
},
yaxis: {
lines: {
show: true,
},
},
},
xaxis: {
type: "datetime",
},
yaxis: {
max: 70,
},
},
};
},
created() {},
mounted() {
this.getBodyHeight();
this.getCategories();
//this.getDataDonut();
//this.getData();
},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {
/**
* Return the height for Vue Card View body
*/
getBodyHeight() {
this.width = window.innerHeight;
},
/**
* Change view - donut/bar
*/
changeView(view) {
this.typeView = view;
this.getData();
},
/**
* Get data from rest API
*/
getData() {
let that = this;
Api.cases
.listTotalCases()
.then((response) => {
that.formatData(response.data);
})
.catch((response) => {});
},
/**
* Format the data for chart
*/
formatData(data) {
let l = [],
c = [],
s = [];
_.each(data, (el) => {
l.push(el["List Name"]);
s.push(el["Total"]);
if (el["Color"] == "green") {
c.push("#179a6e");
}
if (el["Color"] == "yellow") {
c.push("#feb019");
}
if (el["Color"] == "blue") {
c.push("#008ffb");
}
if (el["Color"] == "gray") {
c.push("#8f99a0");
}
});
this.seriesDonut = s;
this.seriesBar = [
{
data: s,
},
];
this.$refs["apexchart1"].updateOptions({ labels: l, colors: c });
this.$refs["apexchart2"].updateOptions({ labels: l, colors: c });
this.$apexcharts.exec("apexchart1", "updateSeries", s);
this.$apexcharts.exec("apexchart2", "updateSeries", [
{
data: s,
},
]);
},
getCategories() {
let that = this;
console.log("jonas");
Api.filters
.categories()
.then((response) => {
that.formatDataCategories(response.data);
})
.catch((e) => {
console.error(err);
});
},
formatDataCategories(data) {
let array = [];
_.each(data, (el) => {
array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] });
});
this.optionsCategory = array;
this.category = array[0];
},
changeOption(option) {
console.log("asda sdas d");
let dt = {
category: option.id,
caseList:
this.data && this.data.dataLv0
? this.data.dataLv0["List Name"].toLowerCase()
: "inbox",
};
Api.process
.processTotalCases(dt)
.then((response) => {
console.log("asda sdas d11111111111111");
console.log(response);
})
.catch((e) => {
console.error(err);
});
},
dataBreadCrumbs(options) {
let res = [],
that = this;
res.push({
label: "Start",
onClick() {
console.log("STARTTTTTTTTTT");
that.$emit("onChangeLevel", 0);
},
});
_.each(options, (el) => {
res.push({
label: el.name,
onClick() {
that.$emit("onChangeLevel", el.level);
},
});
});
return res;
},
generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
yrange.min;
series.push([baseval, y]);
baseval += 86400000;
i++;
}
console.log(series);
return series;
},
},
};
</script>
<style>
.vp-task-metrics-label {
display: inline-block;
}
.vp-width-p30 {
width: 30%;
}
.vp-inline-block {
display: inline-block;
}
.vp-padding-l20 {
padding-left: 20px;
}
</style>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

410
resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
View File

@@ -1,211 +1,239 @@
<template> <template>
<div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block"> <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
<div class="p-1 v-flex"> <div class="p-1 v-flex">
<h6 class="v-search-title">Number of tasks per Task Status</h6> <h6 class="v-search-title">Number of tasks per Task Status</h6>
<apexchart <apexchart
v-show="typeView === 'donut'" v-show="typeView === 'donut'"
ref="apexchart1" ref="apexchart1"
:width="width" :width="width"
:options="optionsDonut" :options="optionsDonut"
:series="seriesDonut" :series="seriesDonut"
></apexchart> ></apexchart>
<apexchart <apexchart
v-show="typeView === 'bar'" v-show="typeView === 'bar'"
ref="apexchart2" ref="apexchart2"
:width="width" :width="width"
:options="optionsBar" :options="optionsBar"
:series="seriesBar" :series="seriesBar"
></apexchart> ></apexchart>
<div class="row"> <div class="row">
<div class="col-sm vp-center"> <div class="col-sm vp-align-right">
<button <button
@click="changeView('donut')" @click="changeView('donut')"
type="button" type="button"
class="btn btn-primary" class="btn btn-primary"
> >
<i class="fas fa-chart-pie"></i <i class="fas fa-chart-pie"></i
><span class="vp-padding-l10">View</span> ><span class="vp-padding-l10">{{ $t("ID_VIEW") }}</span>
</button> </button>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<button <button
@click="changeView('bar')" @click="changeView('bar')"
type="button" type="button"
class="btn btn-primary" class="btn btn-primary"
> >
<i class="fas fa-chart-bar"></i <i class="fas fa-chart-bar"></i
><span class="vp-padding-l10">View</span> ><span class="vp-padding-l10">{{ $t("ID_VIEW") }}</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import _ from "lodash"; import _ from "lodash";
import Api from "../../api/index"; import Api from "../../api/index";
export default { export default {
name: "VueChartLvZero", name: "VueChartLvZero",
mixins: [], mixins: [],
components: {}, components: {},
props: [], props: [],
data() { data() {
let that = this; let that = this;
return { return {
typeView: "bar", typeView: "donut",
width: 0, width: 0,
seriesDonut: [], data: [],
optionsDonut: { currentSelection: null,
labels: [ seriesDonut: [],
this.$i18n.t("ID_INBOX"), optionsDonut: {
this.$i18n.t("ID_DRAFT"), labels: [
this.$i18n.t("ID_PAUSED"), this.$i18n.t("ID_INBOX"),
this.$i18n.t("ID_UNASSIGNED"), this.$i18n.t("ID_DRAFT"),
], this.$i18n.t("ID_PAUSED"),
chart: { this.$i18n.t("ID_UNASSIGNED"),
id: "apexchart1", ],
type: "donut", chart: {
}, id: "apexchart1",
legend: { type: "donut",
position: "top", events: {
offsetY: 0, legendClick: function (chartContext, seriesIndex, config) {
}, that.currentSelection = that.data[seriesIndex];
}, that.$emit("updateDataLevel", {
seriesBar: [ id: that.currentSelection["List Name"],
{ name: that.currentSelection["List Name"],
data: [400, 430, 448, 470], level: 0,
}, data: that.currentSelection,
], });
optionsBar: { },
chart: { },
type: "bar", },
id: "apexchart2", legend: {
toolbar: { position: "top",
show: false, offsetY: 0,
}, },
}, },
plotOptions: { seriesBar: [
bar: { {
barHeight: "100%", data: [400, 430, 448, 470],
distributed: true, },
}, ],
}, optionsBar: {
legend: { chart: {
position: "top", type: "bar",
offsetY: 0, id: "apexchart2",
}, toolbar: {
colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"], show: false,
dataLabels: { },
enabled: false, events: {
}, legendClick: function (chartContext, seriesIndex, config) {
xaxis: { that.currentSelection = that.data[seriesIndex];
categories: [ that.$emit("updateDataLevel", {
this.$i18n.t("ID_INBOX"), id: that.currentSelection["List Name"],
this.$i18n.t("ID_DRAFT"), name: that.currentSelection["List Name"],
this.$i18n.t("ID_PAUSED"), level: 0,
this.$i18n.t("ID_UNASSIGNED"), data: that.currentSelection,
], });
}, },
tooltip: { },
x: { },
show: false, plotOptions: {
}, bar: {
y: { barHeight: "100%",
title: { distributed: true,
formatter: function () { },
return ""; },
}, legend: {
}, position: "top",
}, offsetY: 0,
}, },
}, colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
}; dataLabels: {
}, enabled: false,
created() {}, },
mounted() { xaxis: {
this.getBodyHeight(); categories: [
//this.getDataDonut(); this.$i18n.t("ID_INBOX"),
this.getData(); this.$i18n.t("ID_DRAFT"),
}, this.$i18n.t("ID_PAUSED"),
watch: {}, this.$i18n.t("ID_UNASSIGNED"),
computed: {}, ],
updated() {}, },
beforeCreate() {}, tooltip: {
methods: { x: {
/** show: false,
* Return the height for Vue Card View body },
*/ y: {
getBodyHeight() { title: {
this.width = window.innerHeight * 0.8; formatter: function () {
}, return "";
/** },
* Change view - donut/bar },
*/ },
changeView(view) { },
this.typeView = view; },
this.getData(); };
}, },
created() {},
mounted() {
this.getBodyHeight();
this.getData();
},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {
/**
* Return the height for Vue Card View body
*/
getBodyHeight() {
this.width = window.innerHeight * 0.9;
},
/**
* Change view - donut/bar
*/
changeView(view) {
this.typeView = view;
this.getData();
},
/** /**
* Get data from rest API * Get data from rest API
*/ */
getData() { getData() {
let that = this; let that = this;
Api.cases Api.cases
.listTotalCases() .listTotalCases()
.then((response) => { .then((response) => {
that.formatData(response.data); that.formatData(response.data);
}) })
.catch((response) => {}); .catch((response) => {});
}, },
/** /**
* Format the data for chart * Format the data for chart
*/ */
formatData(data) { formatData(data) {
let l = [], let l = [],
c = [], c = [],
s = []; s = [];
_.each(data, (el) => { _.each(data, (el) => {
l.push(el["List Name"]); l.push(el["List Name"]);
s.push(el["Total"]); s.push(el["Total"]);
if (el["Color"] == "green") { if (el["Color"] == "green") {
c.push("#179a6e"); c.push("#179a6e");
} }
if (el["Color"] == "yellow") { if (el["Color"] == "yellow") {
c.push("#feb019"); c.push("#feb019");
} }
if (el["Color"] == "blue") { if (el["Color"] == "blue") {
c.push("#008ffb"); c.push("#008ffb");
} }
if (el["Color"] == "gray") { if (el["Color"] == "gray") {
c.push("#8f99a0"); c.push("#8f99a0");
} }
}); });
this.seriesDonut = s; this.data = data;
this.seriesBar = [ this.seriesDonut = s;
{ this.seriesBar = [
data: s, {
}, data: s,
]; },
this.$refs["apexchart1"].updateOptions({ labels: l, colors: c }); ];
this.$refs["apexchart2"].updateOptions({ labels: l, colors: c }); this.$refs["apexchart1"].updateOptions({ labels: l, colors: c });
this.$apexcharts.exec("apexchart1", "updateSeries", s); this.$refs["apexchart2"].updateOptions({ labels: l, colors: c });
this.$apexcharts.exec("apexchart2", "updateSeries", [ this.$apexcharts.exec("apexchart1", "updateSeries", s);
{ this.$apexcharts.exec("apexchart2", "updateSeries", [
data: s, {
}, data: s,
]); },
}, ]);
}, },
},
}; };
</script> </script>
<style> <style>
.vp-center { .vp-center {
text-align: center; text-align: center;
}
.vp-align-right {
text-align: right;
} }
.vp-padding-l10 { .vp-padding-l10 {
padding-left: 10px; padding-left: 10px;
} }
</style> </style>

54
resources/assets/js/home/TaskMetrics/VueCharts.vue
View File

@@ -1,16 +1,27 @@
<template> <template>
<div <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
id="v-pm-charts" <vue-chart-lv-zero
ref="v-pm-charts" v-show="level === 0"
class="v-pm-charts vp-inline-block" @updateDataLevel="updateDataLevel"
> />
<vue-chart-lv-one/> <vue-chart-lv-one
v-if="level === 1"
:data="data"
@onChangeLevel="onChangeLevel"
@updateDataLevel="updateDataLevel"
/>
<vue-chart-lv-two
v-if="level === 2"
:data="data"
@onChangeLevel="onChangeLevel"
/>
</div> </div>
</template> </template>
<script> <script>
import VueChartLvZero from "./VueChartLvZero.vue"; import VueChartLvZero from "./VueChartLvZero.vue";
import VueChartLvOne from "./VueChartLvOne.vue"; import VueChartLvOne from "./VueChartLvOne.vue";
import VueChartLvTwo from "./VueChartLvTwo.vue";
export default { export default {
name: "VueCharts", name: "VueCharts",
@@ -18,12 +29,15 @@ export default {
components: { components: {
VueChartLvZero, VueChartLvZero,
VueChartLvOne, VueChartLvOne,
VueChartLvTwo,
}, },
props: [], props: [],
data() { data() {
let that = this; let that = this;
return { return {
width: 0, level: 0,
data: [],
dataBreadCrumbs: [],
}; };
}, },
created() {}, created() {},
@@ -32,7 +46,31 @@ export default {
computed: {}, computed: {},
updated() {}, updated() {},
beforeCreate() {}, beforeCreate() {},
methods: {}, methods: {
/**
* Set data level 0
*/
updateDataLevel(data) {
this.data.push(data);
this.level = data.level + 1;
this.$emit("onChangeLevel", this.level);
},
/**
* Format data to vue charts any level
*/
formatData() {
return {
level: this.level,
data: this.data,
};
},
onChangeLevel(lv) {
console.log("leveeeeeeeeeeeeeee");
this.level = lv;
this.$emit("onChangeLevel", this.level);
},
},
}; };
</script> </script>
<style> <style>

77
resources/assets/js/home/Unassigned/Unassigned.vue
View File

@@ -21,6 +21,7 @@
ref="vueTable" ref="vueTable"
@row-click="onRowClick" @row-click="onRowClick"
:key="random" :key="random"
name="unassigned"
> >
<div slot="detail" slot-scope="props"> <div slot="detail" slot-scope="props">
<div class="btn-default" @click="openCaseDetail(props.row)"> <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -222,6 +223,7 @@ import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue"
import VueListView from "../../components/dataViews/vueListView/VueListView.vue"; import VueListView from "../../components/dataViews/vueListView/VueListView.vue";
import defaultMixins from "./defaultMixins"; import defaultMixins from "./defaultMixins";
import ModalPauseCase from '../modal/ModalPauseCase.vue'; import ModalPauseCase from '../modal/ModalPauseCase.vue';
import { Event } from 'vue-tables-2';
import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue"; import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
export default { export default {
@@ -241,10 +243,15 @@ export default {
ModalPauseCase, ModalPauseCase,
CurrentUserCell, CurrentUserCell,
}, },
props: ["defaultOption", "filters"], props: ["defaultOption", "settings"],
data() { data() {
let that = this; let that = this;
return { return {
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE"
},
newCase: { newCase: {
title: this.$i18n.t("ID_NEW_CASE"), title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success", class: "btn-success",
@@ -252,18 +259,25 @@ export default {
this.$refs["newRequest"].show(); this.$refs["newRequest"].show();
}, },
}, },
columns: [ filters:
"detail", this.settings && this.settings.filters
"case_number", ? this.settings.filters
"case_title", : {},
"process_name", columns:
"task", this.settings && this.settings.columns
"send_by", ? this.settings.columns
"due_date", : [
"delegation_date", "detail",
"priority", "case_number",
"actions", "case_title",
], "process_name",
"task",
"send_by",
"due_date",
"delegation_date",
"priority",
"actions"
],
icon:"fas fa-users", icon:"fas fa-users",
options: { options: {
filterable: false, filterable: false,
@@ -296,6 +310,8 @@ export default {
selectAllMode: "page", selectAllMode: "page",
programmatic: false, programmatic: false,
}, },
sortable: ['case_number'],
orderBy: this.settings && this.settings.orderBy ? this.settings.orderBy: {},
requestFunction(data) { requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data); return this.$parent.$parent.getCasesForVueTable(data);
}, },
@@ -329,9 +345,21 @@ export default {
}; };
}, },
mounted() { mounted() {
let that = this;
this.initFilters(); this.initFilters();
// define sort event
Event.$on('vue-tables.unassigned.sorted', function (data) {
that.$emit("updateUserSettings", "orderBy", data);
});
},
watch: {
columns: function (val) {
this.$emit("updateUserSettings", "columns", val);
},
filters: function (val) {
this.$emit("updateUserSettings", "filters", val);
},
}, },
watch: {},
computed: { computed: {
/** /**
* Build our ProcessMaker apiClient * Build our ProcessMaker apiClient
@@ -397,7 +425,8 @@ export default {
paged, paged,
limit = data.limit, limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1), start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {}; filters = {},
sort = "";
paged = start + "," + limit; paged = start + "," + limit;
filters = { filters = {
@@ -409,6 +438,10 @@ export default {
filters[item.filterVar] = item.value; filters[item.filterVar] = item.value;
} }
}); });
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => { return new Promise((resolutionFunc, rejectionFunc) => {
api.cases api.cases
.unassigned(filters) .unassigned(filters)
@@ -424,6 +457,18 @@ export default {
}); });
}); });
}, },
/**
* Prepare sort string to be sended in the service
* @param {object} data
* @returns {string}
*/
prepareSortString(data){
let sort = "";
if (data.orderBy && this.columMap[data.orderBy]) {
sort = `${this.columMap[data.orderBy]},${data.ascending === 1 ? "ASC": "DESC"}`;
}
return sort;
},
/** /**
* Format Response API TODO to grid todo and columns * Format Response API TODO to grid todo and columns
*/ */
@@ -530,7 +575,7 @@ export default {
onRemoveFilter(data) {}, onRemoveFilter(data) {},
onUpdateFilters(data) { onUpdateFilters(data) {
if (data.params) { if (data.params) {
this.$emit("onUpdateFilters", data.params); this.filters = data.params;
} }
if (data.refresh) { if (data.refresh) {
this.$nextTick(() => { this.$nextTick(() => {

4
resources/assets/js/home/Unassigned/defaultMixins.js
View File

@@ -86,7 +86,9 @@ export default {
}; };
_.forIn(this.filters, function (item, key) { _.forIn(this.filters, function (item, key) {
filters[item.filterVar] = item.value; if(filters && item.value) {
filters[item.filterVar] = item.value;
}
}); });
return new Promise((resolutionFunc, rejectionFunc) => { return new Promise((resolutionFunc, rejectionFunc) => {
api.cases api.cases

9
resources/assets/js/home/main.js
View File

@@ -5,6 +5,7 @@ import VueI18n from 'vue-i18n';
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'; import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
import { ServerTable, Event, ClientTable } from 'vue-tables-2'; import { ServerTable, Event, ClientTable } from 'vue-tables-2';
import VtTableHeadingCustom from './../components/vuetable/extends/VtTableHeadingCustom'; import VtTableHeadingCustom from './../components/vuetable/extends/VtTableHeadingCustom';
import VtSortControl from './../components/vuetable/extends/VtSortControl';
import SettingsPopover from "../components/vuetable/SettingsPopover.vue"; import SettingsPopover from "../components/vuetable/SettingsPopover.vue";
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import "@fortawesome/fontawesome-free/css/all.css"; import "@fortawesome/fontawesome-free/css/all.css";
@@ -13,6 +14,10 @@ import 'bootstrap/dist/css/bootstrap-grid.css';
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'; import 'bootstrap-vue/dist/bootstrap-vue.css';
import VueApexCharts from 'vue-apexcharts' import VueApexCharts from 'vue-apexcharts'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import Home from "./Home"; import Home from "./Home";
Vue.use(VueApexCharts); Vue.use(VueApexCharts);
@@ -21,9 +26,11 @@ Vue.use(VueSidebarMenu);
Vue.use(BootstrapVue); Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons); Vue.use(BootstrapVueIcons);
Vue.use(VueI18n); Vue.use(VueI18n);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.use(ServerTable, {}, false, 'bootstrap3', { Vue.use(ServerTable, {}, false, 'bootstrap3', {
tableHeading: VtTableHeadingCustom tableHeading: VtTableHeadingCustom,
sortControl: VtSortControl
}); });
Vue.use(ClientTable, {}, false, 'bootstrap3', {}); Vue.use(ClientTable, {}, false, 'bootstrap3', {});
Vue.component('settings-popover', SettingsPopover); Vue.component('settings-popover', SettingsPopover);

354
resources/assets/js/utils/utils.js
View File

@@ -89,5 +89,359 @@ export default {
} }
return obj; return obj;
},
getData() {
return [{
code: "ZW",
name: "Zimbabwe",
created_at: "2015-04-24T01:46:50.459583",
updated_at: "2015-04-24T01:46:50.459593",
uri: "http://api.lobbyfacts.eu/api/1/country/245",
id: 245
}, {
code: "ZM",
name: "Zambia",
created_at: "2015-04-24T01:46:50.457459",
updated_at: "2015-04-24T01:46:50.457468",
uri: "http://api.lobbyfacts.eu/api/1/country/244",
id: 244
}, {
code: "YE",
name: "Yemen",
created_at: "2015-04-24T01:46:50.454731",
updated_at: "2015-04-24T01:46:50.454741",
uri: "http://api.lobbyfacts.eu/api/1/country/243",
id: 243
}, {
code: "EH",
name: "Western Sahara",
created_at: "2015-04-24T01:46:50.452002",
updated_at: "2015-04-24T01:46:50.452011",
uri: "http://api.lobbyfacts.eu/api/1/country/242",
id: 242
}, {
code: "WF",
name: "Wallis & Futuna",
created_at: "2015-04-24T01:46:50.449346",
updated_at: "2015-04-24T01:46:50.449355",
uri: "http://api.lobbyfacts.eu/api/1/country/241",
id: 241
}, {
code: "VN",
name: "Vietnam",
created_at: "2015-04-24T01:46:50.446644",
updated_at: "2015-04-24T01:46:50.446652",
uri: "http://api.lobbyfacts.eu/api/1/country/240",
id: 240
}, {
code: "VE",
name: "Venezuela",
created_at: "2015-04-24T01:46:50.444031",
updated_at: "2015-04-24T01:46:50.444040",
uri: "http://api.lobbyfacts.eu/api/1/country/239",
id: 239
}, {
code: "VU",
name: "Vanuatu",
created_at: "2015-04-24T01:46:50.441423",
updated_at: "2015-04-24T01:46:50.441433",
uri: "http://api.lobbyfacts.eu/api/1/country/238",
id: 238
}, {
code: "UZ",
name: "Uzbekistan",
created_at: "2015-04-24T01:46:50.438748",
updated_at: "2015-04-24T01:46:50.438757",
uri: "http://api.lobbyfacts.eu/api/1/country/237",
id: 237
}, {
code: "UY",
name: "Uruguay",
created_at: "2015-04-24T01:46:50.435761",
updated_at: "2015-04-24T01:46:50.435770",
uri: "http://api.lobbyfacts.eu/api/1/country/236",
id: 236
}, {
code: "VI",
name: "United States Virgin Islands",
created_at: "2015-04-24T01:46:50.433229",
updated_at: "2015-04-24T01:46:50.433238",
uri: "http://api.lobbyfacts.eu/api/1/country/235",
id: 235
}, {
code: "US",
name: "United States",
created_at: "2015-04-24T01:46:50.430335",
updated_at: "2015-04-24T01:46:50.430340",
uri: "http://api.lobbyfacts.eu/api/1/country/234",
id: 234
}, {
code: "GB",
name: "United Kingdom",
created_at: "2015-04-24T01:46:50.427956",
updated_at: "2015-04-24T01:46:50.427961",
uri: "http://api.lobbyfacts.eu/api/1/country/233",
id: 233
}, {
code: "AE",
name: "United Arab Emirates",
created_at: "2015-04-24T01:46:50.425383",
updated_at: "2015-04-24T01:46:50.425392",
uri: "http://api.lobbyfacts.eu/api/1/country/232",
id: 232
}, {
code: "UA",
name: "Ukraine",
created_at: "2015-04-24T01:46:50.422970",
updated_at: "2015-04-24T01:46:50.422980",
uri: "http://api.lobbyfacts.eu/api/1/country/231",
id: 231
}, {
code: "UG",
name: "Uganda",
created_at: "2015-04-24T01:46:50.419963",
updated_at: "2015-04-24T01:46:50.419968",
uri: "http://api.lobbyfacts.eu/api/1/country/230",
id: 230
}, {
code: "TV",
name: "Tuvalu",
created_at: "2015-04-24T01:46:50.417896",
updated_at: "2015-04-24T01:46:50.417906",
uri: "http://api.lobbyfacts.eu/api/1/country/229",
id: 229
}, {
code: "TC",
name: "Turks & Caicos Islands",
created_at: "2015-04-24T01:46:50.414854",
updated_at: "2015-04-24T01:46:50.414868",
uri: "http://api.lobbyfacts.eu/api/1/country/228",
id: 228
}, {
code: "TM",
name: "Turkmenistan",
created_at: "2015-04-24T01:46:50.412601",
updated_at: "2015-04-24T01:46:50.412605",
uri: "http://api.lobbyfacts.eu/api/1/country/227",
id: 227
}, {
code: "TR",
name: "Turkey",
created_at: "2015-04-24T01:46:50.411105",
updated_at: "2015-04-24T01:46:50.411110",
uri: "http://api.lobbyfacts.eu/api/1/country/226",
id: 226
}, {
code: "TN",
name: "Tunisia",
created_at: "2015-04-24T01:46:50.409535",
updated_at: "2015-04-24T01:46:50.409539",
uri: "http://api.lobbyfacts.eu/api/1/country/225",
id: 225
}, {
code: "TT",
name: "Trinidad & Tobago",
created_at: "2015-04-24T01:46:50.408030",
updated_at: "2015-04-24T01:46:50.408034",
uri: "http://api.lobbyfacts.eu/api/1/country/224",
id: 224
}, {
code: "TO",
name: "Tonga",
created_at: "2015-04-24T01:46:50.406306",
updated_at: "2015-04-24T01:46:50.406311",
uri: "http://api.lobbyfacts.eu/api/1/country/223",
id: 223
}, {
code: "TK",
name: "Tokelau",
created_at: "2015-04-24T01:46:50.404794",
updated_at: "2015-04-24T01:46:50.404799",
uri: "http://api.lobbyfacts.eu/api/1/country/222",
id: 222
}, {
code: "TG",
name: "Togo",
created_at: "2015-04-24T01:46:50.403306",
updated_at: "2015-04-24T01:46:50.403310",
uri: "http://api.lobbyfacts.eu/api/1/country/221",
id: 221
}, {
code: "TH",
name: "Thailand",
created_at: "2015-04-24T01:46:50.400840",
updated_at: "2015-04-24T01:46:50.400849",
uri: "http://api.lobbyfacts.eu/api/1/country/220",
id: 220
}, {
code: "TZ",
name: "Tanzania",
created_at: "2015-04-24T01:46:50.397846",
updated_at: "2015-04-24T01:46:50.397855",
uri: "http://api.lobbyfacts.eu/api/1/country/219",
id: 219
}, {
code: "TJ",
name: "Tajikistan",
created_at: "2015-04-24T01:46:50.394924",
updated_at: "2015-04-24T01:46:50.394933",
uri: "http://api.lobbyfacts.eu/api/1/country/218",
id: 218
}, {
code: "TW",
name: "Taiwan",
created_at: "2015-04-24T01:46:50.391969",
updated_at: "2015-04-24T01:46:50.391978",
uri: "http://api.lobbyfacts.eu/api/1/country/217",
id: 217
}, {
code: "SY",
name: "Syria",
created_at: "2015-04-24T01:46:50.389120",
updated_at: "2015-04-24T01:46:50.389124",
uri: "http://api.lobbyfacts.eu/api/1/country/216",
id: 216
}, {
code: "CH",
name: "Switzerland",
created_at: "2015-04-24T01:46:50.386939",
updated_at: "2015-04-24T01:46:50.386943",
uri: "http://api.lobbyfacts.eu/api/1/country/215",
id: 215
}, {
code: "SE",
name: "Sweden",
created_at: "2015-04-24T01:46:50.385345",
updated_at: "2015-04-24T01:46:50.385349",
uri: "http://api.lobbyfacts.eu/api/1/country/214",
id: 214
}, {
code: "SZ",
name: "Swaziland",
created_at: "2015-04-24T01:46:50.383834",
updated_at: "2015-04-24T01:46:50.383838",
uri: "http://api.lobbyfacts.eu/api/1/country/213",
id: 213
}, {
code: "SR",
name: "Suriname",
created_at: "2015-04-24T01:46:50.382073",
updated_at: "2015-04-24T01:46:50.382078",
uri: "http://api.lobbyfacts.eu/api/1/country/212",
id: 212
}, {
code: "SD",
name: "Sudan",
created_at: "2015-04-24T01:46:50.380114",
updated_at: "2015-04-24T01:46:50.380119",
uri: "http://api.lobbyfacts.eu/api/1/country/211",
id: 211
}, {
code: "LK",
name: "Sri Lanka",
created_at: "2015-04-24T01:46:50.378189",
updated_at: "2015-04-24T01:46:50.378195",
uri: "http://api.lobbyfacts.eu/api/1/country/210",
id: 210
}, {
code: "ES",
name: "Spain",
created_at: "2015-04-24T01:46:50.376105",
updated_at: "2015-04-24T01:46:50.376109",
uri: "http://api.lobbyfacts.eu/api/1/country/209",
id: 209
}, {
code: "SS",
name: "South Sudan",
created_at: "2015-04-24T01:46:50.373942",
updated_at: "2015-04-24T01:46:50.373946",
uri: "http://api.lobbyfacts.eu/api/1/country/208",
id: 208
}, {
code: "KR",
name: "South Korea",
created_at: "2015-04-24T01:46:50.371790",
updated_at: "2015-04-24T01:46:50.371794",
uri: "http://api.lobbyfacts.eu/api/1/country/207",
id: 207
}, {
code: "GS",
name: "South Georgia & The South Sandwish Islands",
created_at: "2015-04-24T01:46:50.369460",
updated_at: "2015-04-24T01:46:50.369465",
uri: "http://api.lobbyfacts.eu/api/1/country/206",
id: 206
}, {
code: "ZA",
name: "South Africa",
created_at: "2015-04-24T01:46:50.367247",
updated_at: "2015-04-24T01:46:50.367252",
uri: "http://api.lobbyfacts.eu/api/1/country/205",
id: 205
}, {
code: "SO",
name: "Somaliland",
created_at: "2015-04-24T01:46:50.362905",
updated_at: "2016-09-18T18:34:35.724427",
uri: "http://api.lobbyfacts.eu/api/1/country/204",
id: 204
}, {
code: "SB",
name: "Solomon Islands",
created_at: "2015-04-24T01:46:50.360631",
updated_at: "2015-04-24T01:46:50.360635",
uri: "http://api.lobbyfacts.eu/api/1/country/203",
id: 203
}, {
code: "SI",
name: "Slovenia",
created_at: "2015-04-24T01:46:50.358394",
updated_at: "2015-04-24T01:46:50.358399",
uri: "http://api.lobbyfacts.eu/api/1/country/202",
id: 202
}, {
code: "SK",
name: "Slovakia",
created_at: "2015-04-24T01:46:50.356154",
updated_at: "2015-04-24T01:46:50.356158",
uri: "http://api.lobbyfacts.eu/api/1/country/201",
id: 201
}, {
code: "SX",
name: "Sint Maarten",
created_at: "2015-04-24T01:46:50.353807",
updated_at: "2015-04-24T01:46:50.353811",
uri: "http://api.lobbyfacts.eu/api/1/country/200",
id: 200
}, {
code: "SG",
name: "Singapore",
created_at: "2015-04-24T01:46:50.349354",
updated_at: "2015-04-24T01:46:50.349358",
uri: "http://api.lobbyfacts.eu/api/1/country/199",
id: 199
}, {
code: "SL",
name: "Sierra Leone",
created_at: "2015-04-24T01:46:50.347186",
updated_at: "2015-04-24T01:46:50.347190",
uri: "http://api.lobbyfacts.eu/api/1/country/198",
id: 198
}, {
code: "SC",
name: "Seychelles",
created_at: "2015-04-24T01:46:50.344980",
updated_at: "2015-04-24T01:46:50.344984",
uri: "http://api.lobbyfacts.eu/api/1/country/197",
id: 197
}, {
code: "RS",
name: "Serbia",
created_at: "2015-04-24T01:46:50.342496",
updated_at: "2015-04-24T01:46:50.342501",
uri: "http://api.lobbyfacts.eu/api/1/country/196",
id: 196
}];
} }
} }

105
tests/unit/workflow/engine/src/ProcessMaker/Model/CaseListTest.php
View File

@@ -2,6 +2,7 @@
namespace tests\unit\workflow\engine\src\ProcessMaker\Model; namespace tests\unit\workflow\engine\src\ProcessMaker\Model;
use ProcessMaker\Model\AdditionalTables;
use ProcessMaker\Model\CaseList; use ProcessMaker\Model\CaseList;
use Tests\TestCase; use Tests\TestCase;
@@ -348,4 +349,108 @@ class CaseListTest extends TestCase
//assert file export //assert file export
$this->assertFileExists($result['filename']); $this->assertFileExists($result['filename']);
} }
/**
* This test the formattingColumns method.
* @test
* @covers \ProcessMaker\Model\CaseList::formattingColumns()
*/
public function it_should_test_formattingColumns()
{
$additionalTables = factory(\ProcessMaker\Model\AdditionalTables::class)->create();
$fields = factory(\ProcessMaker\Model\Fields::class, 5)->create([
'ADD_TAB_UID' => $additionalTables->ADD_TAB_UID
]);
factory(CaseList::class)->create([
'CAL_TYPE' => 'inbox',
'ADD_TAB_UID' => $additionalTables->ADD_TAB_UID
]);
factory(CaseList::class)->create([
'CAL_TYPE' => 'draft',
'ADD_TAB_UID' => $additionalTables->ADD_TAB_UID
]);
factory(CaseList::class)->create([
'CAL_TYPE' => 'paused',
'ADD_TAB_UID' => $additionalTables->ADD_TAB_UID
]);
factory(CaseList::class)->create([
'CAL_TYPE' => 'unassigned',
'ADD_TAB_UID' => $additionalTables->ADD_TAB_UID
]);
$columns = [
[
"field" => "case_number",
"enableFilter" => false,
"set" => true
],
[
"field" => "case_title",
"enableFilter" => false,
"set" => true
],
];
$result = CaseList::formattingColumns('inbox', $additionalTables->ADD_TAB_UID, $columns);
$this->assertNotEmpty($result);
$this->assertArrayHasKey('field', $result[0]);
$this->assertArrayHasKey('name', $result[0]);
$this->assertArrayHasKey('type', $result[0]);
$this->assertArrayHasKey('source', $result[0]);
$this->assertArrayHasKey('typeSearch', $result[0]);
$this->assertArrayHasKey('enableFilter', $result[0]);
$this->assertArrayHasKey('set', $result[0]);
$result = CaseList::formattingColumns('draft', $additionalTables->ADD_TAB_UID, $columns);
$this->assertNotEmpty($result);
$this->assertArrayHasKey('field', $result[1]);
$this->assertArrayHasKey('name', $result[1]);
$this->assertArrayHasKey('type', $result[1]);
$this->assertArrayHasKey('source', $result[1]);
$this->assertArrayHasKey('typeSearch', $result[1]);
$this->assertArrayHasKey('enableFilter', $result[1]);
$this->assertArrayHasKey('set', $result[1]);
$result = CaseList::formattingColumns('paused', $additionalTables->ADD_TAB_UID, $columns);
$this->assertNotEmpty($result);
$this->assertArrayHasKey('field', $result[2]);
$this->assertArrayHasKey('name', $result[2]);
$this->assertArrayHasKey('type', $result[2]);
$this->assertArrayHasKey('source', $result[2]);
$this->assertArrayHasKey('typeSearch', $result[2]);
$this->assertArrayHasKey('enableFilter', $result[2]);
$this->assertArrayHasKey('set', $result[2]);
$result = CaseList::formattingColumns('unassigned', $additionalTables->ADD_TAB_UID, $columns);
$this->assertNotEmpty($result);
$this->assertArrayHasKey('field', $result[3]);
$this->assertArrayHasKey('name', $result[3]);
$this->assertArrayHasKey('type', $result[3]);
$this->assertArrayHasKey('source', $result[3]);
$this->assertArrayHasKey('typeSearch', $result[3]);
$this->assertArrayHasKey('enableFilter', $result[3]);
$this->assertArrayHasKey('set', $result[3]);
}
/**
* This test the getReportTables method.
* @test
* @covers \ProcessMaker\Model\CaseList::getReportTables()
*/
public function it_should_test_getReportTables()
{
AdditionalTables::truncate();
$additionalTables = factory(AdditionalTables::class, 10)->create();
$search = '';
$result = CaseList::getReportTables($search);
$this->assertNotEmpty($result);
$this->assertCount(10, $result);
$this->assertArrayHasKey('name', $result[0]);
$this->assertArrayHasKey('description', $result[0]);
$this->assertArrayHasKey('fields', $result[0]);
}
} }

12
workflow/engine/content/translations/english/processmaker.en.po
View File

@@ -2359,6 +2359,12 @@ msgstr "App Uid"
msgid "Are you sure want to claim the task?" msgid "Are you sure want to claim the task?"
msgstr "Are you sure want to claim the task?" msgstr "Are you sure want to claim the task?"
# TRANSLATION
# LABEL/ID_ARE_YOU_SURE_DELETE_CUSTOM_CASE_LIST
#: LABEL/ID_ARE_YOU_SURE_DELETE_CUSTOM_CASE_LIST
msgid "Are you sure to delete the Case List {CUSTOM_NAME}, please confirm?"
msgstr "Are you sure to delete the Case List {CUSTOM_NAME}, please confirm?"
# TRANSLATION # TRANSLATION
# LABEL/ID_ARE_YOU_SURE_RESEND # LABEL/ID_ARE_YOU_SURE_RESEND
#: LABEL/ID_ARE_YOU_SURE_RESEND #: LABEL/ID_ARE_YOU_SURE_RESEND
@@ -6149,6 +6155,12 @@ msgstr "Delete Category"
msgid "Delete the connection?" msgid "Delete the connection?"
msgstr "Delete the connection?" msgstr "Delete the connection?"
# TRANSLATION
# LABEL/ID_DELETE_CUSTOM_CASE_LIST
#: LABEL/ID_DELETE_CUSTOM_CASE_LIST
msgid "Delete Custom Case List"
msgstr "Delete Custom Case List"
# TRANSLATION # TRANSLATION
# LABEL/ID_DELETE_DASHLET_INSTANCE # LABEL/ID_DELETE_DASHLET_INSTANCE
#: LABEL/ID_DELETE_DASHLET_INSTANCE #: LABEL/ID_DELETE_DASHLET_INSTANCE

2
workflow/engine/data/mysql/insert.sql
View File

@@ -57196,6 +57196,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
( 'LABEL','ID_APP_MSG_BODY','en','Body','2014-01-15') , ( 'LABEL','ID_APP_MSG_BODY','en','Body','2014-01-15') ,
( 'LABEL','ID_APP_UID','en','App Uid','2015-09-15') , ( 'LABEL','ID_APP_UID','en','App Uid','2015-09-15') ,
( 'LABEL','ID_ARE_YOU_SURE_CLAIM_TASK','en','Are you sure want to claim the task?','2021-01-26') , ( 'LABEL','ID_ARE_YOU_SURE_CLAIM_TASK','en','Are you sure want to claim the task?','2021-01-26') ,
( 'LABEL','ID_ARE_YOU_SURE_DELETE_CUSTOM_CASE_LIST','en','Are you sure to delete the Case List {CUSTOM_NAME}, please confirm?','2021-08-05') ,
( 'LABEL','ID_ARE_YOU_SURE_RESEND','en','Are you sure that you want to resend this message','2014-01-15') , ( 'LABEL','ID_ARE_YOU_SURE_RESEND','en','Are you sure that you want to resend this message','2014-01-15') ,
( 'LABEL','ID_ARE_YOU_SURE_TO_DELETE_ATTRIBUTE_PLEASE_CONFIRM','en','Are you sure to delete the matched attribute "{0}", please confirm?','2020-12-10') , ( 'LABEL','ID_ARE_YOU_SURE_TO_DELETE_ATTRIBUTE_PLEASE_CONFIRM','en','Are you sure to delete the matched attribute "{0}", please confirm?','2020-12-10') ,
( 'LABEL','ID_ARE_YOU_SURE_TO_DELETE_CONNECTION_PLEASE_CONFIRM','en','Are you sure to delete the connection "{0}", please confirm?','2020-12-10') , ( 'LABEL','ID_ARE_YOU_SURE_TO_DELETE_CONNECTION_PLEASE_CONFIRM','en','Are you sure to delete the connection "{0}", please confirm?','2020-12-10') ,
@@ -57851,6 +57852,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE ) VALUES INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE ) VALUES
( 'LABEL','ID_DELETE_CONNECTION','en','Delete the connection?','2014-01-15') , ( 'LABEL','ID_DELETE_CONNECTION','en','Delete the connection?','2014-01-15') ,
( 'LABEL','ID_DELETE_CUSTOM_CASE_LIST','en','Delete Custom Case List','2021-08-05') ,
( 'LABEL','ID_DELETE_DASHLET_INSTANCE','en','Delete Dashlet Instance','2014-10-10') , ( 'LABEL','ID_DELETE_DASHLET_INSTANCE','en','Delete Dashlet Instance','2014-10-10') ,
( 'LABEL','ID_DELETE_DATABASES','en','Delete database if it exists','2015-02-23') , ( 'LABEL','ID_DELETE_DATABASES','en','Delete database if it exists','2015-02-23') ,
( 'LABEL','ID_DELETE_DATABASE_CONNECTION','en','Delete Database Connection','2015-02-20') , ( 'LABEL','ID_DELETE_DATABASE_CONNECTION','en','Delete Database Connection','2015-02-20') ,

3
workflow/engine/methods/cases/viena_init.php
View File

@@ -4,6 +4,7 @@ use Eusebiu\JavaScript\Facades\ScriptVariables;
use Illuminate\Support\Facades\View; use Illuminate\Support\Facades\View;
use ProcessMaker\Core\System; use ProcessMaker\Core\System;
use ProcessMaker\Model\Application; use ProcessMaker\Model\Application;
use ProcessMaker\Model\User;
$conf = new Configurations(); $conf = new Configurations();
@@ -127,7 +128,6 @@ $oHeadPublisher->assign('urlProxy', $urlProxy); //sending the urlProxy to make
$oHeadPublisher->assign("_nodeId", isset($confDefaultOption) ? $confDefaultOption : "PM_USERS"); //User menu permissions $oHeadPublisher->assign("_nodeId", isset($confDefaultOption) ? $confDefaultOption : "PM_USERS"); //User menu permissions
$oHeadPublisher->assign("FORMATS", $conf->getFormats()); $oHeadPublisher->assign("FORMATS", $conf->getFormats());
$userCanAccess = 1; $userCanAccess = 1;
global $translation; global $translation;
@@ -142,4 +142,5 @@ ScriptVariables::add('SYS_URI', SYS_URI);
ScriptVariables::add('SYS_LANG', SYS_LANG); ScriptVariables::add('SYS_LANG', SYS_LANG);
ScriptVariables::add('TRANSLATIONS', $translation); ScriptVariables::add('TRANSLATIONS', $translation);
ScriptVariables::add('FORMATS', $conf->getFormats()); ScriptVariables::add('FORMATS', $conf->getFormats());
ScriptVariables::add('userId', User::getId($_SESSION['USER_LOGGED']));
echo View::make('Views::home.home', compact("userCanAccess"))->render(); echo View::make('Views::home.home', compact("userCanAccess"))->render();

13
workflow/engine/methods/services/ActionsByEmailDataForm.php
View File

@@ -34,6 +34,19 @@ if (isset($_GET['BROWSER_TIME_ZONE_OFFSET'])) {
$caseFields = $case->loadCase($applicationUid, $delIndex); $caseFields = $case->loadCase($applicationUid, $delIndex);
// Updating case variables with system constants
$systemConstants = G::getSystemConstants();
$caseFields['APP_DATA']['USER_LOGGED'] = $systemConstants['USER_LOGGED'];
$caseFields['APP_DATA']['USR_USERNAME'] = $systemConstants['USR_USERNAME'];
$caseFields['APP_DATA']['SYS_LANG'] = $systemConstants['SYS_LANG'];
$caseFields['APP_DATA']['SYS_SKIN'] = $systemConstants['SYS_SKIN'];
$caseFields['APP_DATA']['SYS_SYS'] = $systemConstants['SYS_SYS'];
$caseFields['APP_DATA']['APPLICATION'] = $caseFields['APP_UID'];
$caseFields['APP_DATA']['PROCESS'] = $caseFields['PRO_UID'];
$caseFields['APP_DATA']['TASK'] = $caseFields['TASK'];
$caseFields['APP_DATA']['INDEX'] = $caseFields['INDEX'];
$case->updateCase($applicationUid, $caseFields);
$criteria = new Criteria(); $criteria = new Criteria();
$criteria->addSelectColumn(DynaformPeer::DYN_CONTENT); $criteria->addSelectColumn(DynaformPeer::DYN_CONTENT);
$criteria->addSelectColumn(DynaformPeer::PRO_UID); $criteria->addSelectColumn(DynaformPeer::PRO_UID);

201
workflow/engine/src/ProcessMaker/Model/CaseList.php
View File

@@ -4,6 +4,7 @@ namespace ProcessMaker\Model;
use Exception; use Exception;
use G; use G;
use ProcessMaker\BusinessModel\Table;
use ProcessMaker\Core\System; use ProcessMaker\Core\System;
use ProcessMaker\Model\AdditionalTables; use ProcessMaker\Model\AdditionalTables;
use ProcessMaker\Model\User; use ProcessMaker\Model\User;
@@ -62,10 +63,17 @@ class CaseList extends Model
'USR_FIRSTNAME' => 'userFirstname', 'USR_FIRSTNAME' => 'userFirstname',
'USR_LASTNAME' => 'userLastname', 'USR_LASTNAME' => 'userLastname',
'USR_EMAIL' => 'userEmail', 'USR_EMAIL' => 'userEmail',
'USR_POSITION' => 'userPosition',
'ADD_TAB_NAME' => 'tableName', 'ADD_TAB_NAME' => 'tableName',
'PRO_TITLE' => 'process' 'PRO_TITLE' => 'process'
]; ];
/**
* Represents the columns exclude from report table.
* @var array
*/
public static $excludeColumns = ['APP_UID', 'APP_NUMBER', 'APP_STATUS'];
/** /**
* Get column name from alias. * Get column name from alias.
* @param array $array * @param array $array
@@ -187,7 +195,7 @@ class CaseList extends Model
'CASE_LIST.*', 'CASE_LIST.*',
'PROCESS.PRO_TITLE', 'PROCESS.PRO_TITLE',
'ADDITIONAL_TABLES.ADD_TAB_NAME', 'ADDITIONAL_TABLES.ADD_TAB_NAME',
'USERS.USR_UID', 'USERS.USR_USERNAME', 'USERS.USR_FIRSTNAME', 'USERS.USR_LASTNAME', 'USERS.USR_EMAIL' 'USERS.USR_UID', 'USERS.USR_USERNAME', 'USERS.USR_FIRSTNAME', 'USERS.USR_LASTNAME', 'USERS.USR_EMAIL', 'USERS.USR_POSITION'
]) ])
->where(function ($query) use ($search) { ->where(function ($query) use ($search) {
$query $query
@@ -211,7 +219,10 @@ class CaseList extends Model
$result = CaseList::getAliasFromColumnName($item->toArray()); $result = CaseList::getAliasFromColumnName($item->toArray());
$result['columns'] = json_decode($result['columns']); $columns = json_decode($result['columns']);
$columns = CaseList::formattingColumns($result['type'], $result['tableUid'], $columns);
$result['columns'] = $columns;
$result['userAvatar'] = System::getServerMainPath() . '/users/users_ViewPhotoGrid?pUID=' . $result['USR_UID'] . '&h=' . microtime(true); $result['userAvatar'] = System::getServerMainPath() . '/users/users_ViewPhotoGrid?pUID=' . $result['USR_UID'] . '&h=' . microtime(true);
unset($result['USR_UID']); unset($result['USR_UID']);
@@ -285,4 +296,190 @@ class CaseList extends Model
throw new Exception($e->getMessage()); throw new Exception($e->getMessage());
} }
} }
/**
* Formatting columns from minimal stored columns configuration in custom cases list.
* @param string $type
* @param string $tableUid
* @param array $storedColumns
* @return array
*/
public static function formattingColumns(string $type = 'inbox', string $tableUid = '', array $storedColumns = [])
{
$default = [
[
'list' => ['inbox', 'draft', 'paused', 'unassigned'],
'field' => 'case_number',
'name' => G::LoadTranslation('ID_MYCASE_NUMBER'),
'type' => 'integer',
'source' => 'APPLICATION',
'typeSearch' => 'integer range',
'enableFilter' => false,
'set' => true
], [
'list' => ['inbox', 'draft', 'paused', 'unassigned'],
'field' => 'case_title',
'name' => G::LoadTranslation('ID_CASE_TITLE'),
'type' => 'string',
'source' => 'APPLICATION',
'typeSearch' => 'search text',
'enableFilter' => false,
'set' => true
], [
'list' => ['inbox', 'draft', 'paused', 'unassigned'],
'field' => 'process_name',
'name' => G::LoadTranslation('ID_PROCESS_NAME'),
'type' => 'string',
'source' => 'APPLICATION',
'typeSearch' => 'search text',
'enableFilter' => false,
'set' => true
], [
'list' => ['inbox', 'draft', 'paused', 'unassigned'],
'field' => 'task',
'name' => G::LoadTranslation('ID_TASK'),
'type' => 'string',
'source' => 'APPLICATION',
'typeSearch' => 'search text',
'enableFilter' => false,
'set' => true
], [
'list' => ['inbox', 'draft', 'paused', 'unassigned'],
'field' => 'send_by',
'name' => G::LoadTranslation('ID_SEND_BY'),
'type' => 'string',
'source' => 'APPLICATION',
'typeSearch' => 'search text',
'enableFilter' => false,
'set' => true
], [
'list' => ['inbox', 'paused', 'unassigned'],
'field' => 'due_date',
'name' => G::LoadTranslation('ID_DUE_DATE'),
'type' => 'date',
'source' => 'APPLICATION',
'typeSearch' => 'date range',
'enableFilter' => false,
'set' => true
], [
'list' => ['inbox', 'paused', 'unassigned'],
'field' => 'delegation_date',
'name' => G::LoadTranslation('ID_DELEGATION_DATE'),
'type' => 'date',
'source' => 'APPLICATION',
'typeSearch' => 'date range',
'enableFilter' => false,
'set' => true
], [
'list' => ['inbox', 'draft', 'paused', 'unassigned'],
'field' => 'priority',
'name' => G::LoadTranslation('ID_PRIORITY'),
'type' => 'string',
'source' => 'APPLICATION',
'typeSearch' => 'option',
'enableFilter' => false,
'set' => true
],
];
//filter by type
$result = [];
foreach ($default as &$column) {
if (in_array($type, $column['list'])) {
unset($column['list']);
$result[] = $column;
}
}
$default = $result;
//get additional tables
$additionalTables = AdditionalTables::where('ADD_TAB_UID', '=', $tableUid)
->where('PRO_UID', '<>', '')
->whereNotNull('PRO_UID')
->get();
$additionalTables->transform(function ($object) {
$table = new Table();
return $table->getTable($object->ADD_TAB_UID, $object->PRO_UID, true, false);
});
$result = $additionalTables->toArray();
if (!empty($result)) {
$result = $result[0];
if (isset($result['fields'])) {
foreach ($result['fields'] as $column) {
if (in_array($column['fld_name'], self::$excludeColumns)) {
continue;
}
$default[] = [
'field' => $column['fld_name'],
'name' => $column['fld_name'],
'type' => $column['fld_type'],
'source' => $result['rep_tab_name'],
'typeSearch' => 'search text',
'enableFilter' => false,
'set' => false
];
}
}
}
//merge with stored information
$result = [];
foreach ($default as &$column) {
foreach ($storedColumns as $storedColumn) {
if (!is_array($storedColumn) || !isset($storedColumn['field'])) {
continue;
}
if ($storedColumn['field'] === $column['field']) {
$column['enableFilter'] = $storedColumn['enableFilter'];
$column['set'] = $storedColumn['set'];
break;
}
}
$result[] = $column;
}
return $result;
}
/**
* Get the report tables, this can filter the results by the search parameter.
* @param string $search
* @return array
*/
public static function getReportTables(string $search = '')
{
$additionalTables = AdditionalTables::where('ADD_TAB_NAME', 'LIKE', "%{$search}%")
->where('PRO_UID', '<>', '')
->whereNotNull('PRO_UID')
->get();
$additionalTables->transform(function ($object) {
$table = new Table();
$result = $table->getTable($object->ADD_TAB_UID, $object->PRO_UID, true, false);
$fields = [];
if (isset($result['fields'])) {
foreach ($result['fields'] as $column) {
if (in_array($column['fld_name'], self::$excludeColumns)) {
continue;
}
$fields[] = [
'field' => $column['fld_name'],
'name' => $column['fld_name'],
'type' => $column['fld_type'],
'source' => $result['rep_tab_name'],
'typeSearch' => 'search text',
'enableFilter' => false,
'set' => false
];
}
}
return [
'name' => $result['rep_tab_name'],
'description' => $result['rep_tab_description'],
'fields' => $fields
];
});
$result = $additionalTables->toArray();
return $result;
}
} }

36
workflow/engine/src/ProcessMaker/Services/Api/CaseList.php
View File

@@ -183,4 +183,40 @@ class CaseList extends Api
throw new RestException(Api::STAT_APP_EXCEPTION, $e->getMessage()); throw new RestException(Api::STAT_APP_EXCEPTION, $e->getMessage());
} }
} }
/**
* Get default columns associate to custom cases list.
* @url GET /:type/default-columns
* @param string $type
* @access protected
* @class AccessControl {@permission PM_CASES}
* @throws RestException
* @return array
*/
public function doGetDefaultColumns(string $type)
{
try {
return CaseListBusinessModel::formattingColumns($type, '', []);
} catch (Exception $e) {
throw new RestException(Api::STAT_APP_EXCEPTION, $e->getMessage());
}
}
/**
* Get report tables.
* @url GET /report-tables
* @param string $search
* @access protected
* @class AccessControl {@permission PM_CASES}
* @throws RestException
* @return array
*/
public function doGetReportTables(string $search = '')
{
try {
return CaseListBusinessModel::getReportTables($search);
} catch (Exception $e) {
throw new RestException(Api::STAT_APP_EXCEPTION, $e->getMessage());
}
}
} }

12
workflow/engine/src/ProcessMaker/Services/Api/Cases.php
View File

@@ -221,6 +221,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListToDo( public function doGetCasesListToDo(
$start = 0, $start = 0,
@@ -265,6 +266,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListToDoPaged( public function doGetCasesListToDoPaged(
$start = 0, $start = 0,
@@ -309,6 +311,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListDraft( public function doGetCasesListDraft(
$start = 0, $start = 0,
@@ -353,6 +356,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListDraftPaged( public function doGetCasesListDraftPaged(
$start = 0, $start = 0,
@@ -397,6 +401,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListParticipated( public function doGetCasesListParticipated(
$start = 0, $start = 0,
@@ -441,6 +446,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListParticipatedPaged( public function doGetCasesListParticipatedPaged(
$start = 0, $start = 0,
@@ -485,6 +491,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListUnassigned( public function doGetCasesListUnassigned(
$start = 0, $start = 0,
@@ -529,6 +536,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListUnassignedPaged( public function doGetCasesListUnassignedPaged(
$start = 0, $start = 0,
@@ -573,6 +581,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListPaused( public function doGetCasesListPaused(
$start = 0, $start = 0,
@@ -617,6 +626,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListPausedPaged( public function doGetCasesListPausedPaged(
$start = 0, $start = 0,
@@ -665,6 +675,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListAdvancedSearch( public function doGetCasesListAdvancedSearch(
$start = 0, $start = 0,
@@ -723,6 +734,7 @@ class Cases extends Api
* *
* @return array * @return array
* @throws Exception * @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/ */
public function doGetCasesListAdvancedSearchPaged( public function doGetCasesListAdvancedSearchPaged(
$start = 0, $start = 0,

4
workflow/engine/src/ProcessMaker/Services/Api/Metrics.php
View File

@@ -31,7 +31,7 @@ class Metrics extends Api
/** /**
* Get total cases per process * Get total cases per process
* *
* @url /process-total-cases * @url GET /total-cases-by-process
* *
* @param string $caseList * @param string $caseList
* @param int $category * @param int $category
@@ -112,7 +112,7 @@ class Metrics extends Api
/** /**
* Get total of cases per list * Get total of cases per list
* *
* @url /list-total-cases * @url GET /list-total-cases
* *
* @return array * @return array
* *