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": {
"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",
"bootstrap": "^4.5.3",
"bootstrap-colorpicker": "^3.0.3",
"bootstrap-vue": "^2.19.0",
"bootstrap-vue-font-awesome-picker": "^0.1.3",
"chart.js": "^2.7.2",
"dateformat": "^3.0.3",
"faker": "^5.1.0",
@@ -40,6 +44,9 @@
"promise-polyfill": "8.1.3",
"sortablejs": "^1.13.0",
"uiv": "^0.28.0",
"v-color": "^1.1.2",
"verte": "0.0.12",
"vfa-picker": "^5.9.1",
"vue": "^2.6.12",
"vue-apexcharts": "^1.6.1",
"vue-awesome-swiper": "^3.1.3",
@@ -49,6 +56,7 @@
"vue-faker": "^3.0.0",
"vue-fullscreen": "^2.1.3",
"vue-i18n": "^8.22.2",
"vue-icon-picker": "^1.0.0",
"vue-js-toggle-button": "^1.3.1",
"vue-multiselect": "^2.1.6",
"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: {}
});
}
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);

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

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

@@ -1,5 +1,6 @@
<template>
<div id="people">
<ModalDeleteCaseList ref="modal-delete-list"></ModalDeleteCaseList>
<button-fleft :data="newList"></button-fleft>
<button-fleft :data="importList"></button-fleft>
<v-server-table
@@ -27,13 +28,15 @@ import ButtonFleft from "../../../components/home/ButtonFleft.vue";
import Ellipsis from "../../../components/utils/ellipsis.vue";
import utils from "../../../utils/utils";
import OwnerCell from "../../../components/vuetable/OwnerCell";
import ModalDeleteCaseList from "./../../Modals/ModalDeleteCaseList.vue"
export default {
name: "Tables",
props: ["module"],
components: {
ButtonFleft,
Ellipsis,
OwnerCell
OwnerCell,
ModalDeleteCaseList
},
data() {
return {
@@ -55,6 +58,17 @@ export default {
title: this.$i18n.t("New List"),
class: "btn-success",
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
}
},
@@ -76,8 +90,6 @@ export default {
],
tableData: [],
options: {
perPage:25,
perPageValues:[25],
filterable: true,
headings: {
name: this.$i18n.t("ID_NAME"),
@@ -171,6 +183,14 @@ export default {
data.push(v);
});
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 VueSidebarMenu from "vue-sidebar-menu";
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 Sortable from 'sortablejs';
import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";
import 'bootstrap/dist/css/bootstrap-grid.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import CustomCaseList from "./CustomCaseList";
Vue.use(VueRouter);
import Verte from 'verte';
import 'verte/dist/verte.css';
// register component globally
Vue.component('verte', Verte);
Vue.use(VueRouter);
Vue.use(VueSidebarMenu);
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
Vue.use(VueI18n);
Vue.use(ServerTable, {}, false, 'bootstrap3', {});
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
window.ProcessMaker = {
@@ -48,5 +48,6 @@ new Vue({
// eslint-disable-line no-new
el: "#customCaseList",
router,
components: { Verte },
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 ApiInstance from "./Api.js";
import Services from "./Services";
let Api = new ApiInstance( Services );
let Api = new ApiInstance(Services);
export let filters = {
get(data) {
return Api.get({
@@ -42,8 +42,8 @@ export let filters = {
params.append("action", "startCase");
return axios.post(
window.config.SYS_SERVER_AJAX +
window.config.SYS_URI +
`cases/casesStartPage_Ajax.php`,
window.config.SYS_URI +
`cases/casesStartPage_Ajax.php`,
params
);
},
@@ -88,11 +88,16 @@ export let filters = {
* Service to get the categories list
*/
categories(query) {
let pr = {
limit: 15,
offset: 0
};
if (query) {
pr["name"] = query;
}
return Api.get({
service: "CATEGORIES",
params: {
name: query,
},
params: pr,
keys: {},
});
},
@@ -102,8 +107,8 @@ export let filters = {
userValues(query) {
return axios.post(
window.config.SYS_SERVER_AJAX +
window.config.SYS_URI +
`cases/casesList_Ajax?actionAjax=userValues&action=search`,
window.config.SYS_URI +
`cases/casesList_Ajax?actionAjax=userValues&action=search`,
{
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({
service: "CATEGORIES",
service: "PROCESS_CATEGORIES",
method: "get",
data: dt,
data: {},
keys: {}
});
}

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

@@ -69,8 +69,10 @@
CATEGORIES: "/home/categories",
DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
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",
REASSIGN_CASE: "/cases/{app_uid}/reassign-case",
REASSIGN_USERS: "/light/userstoreassign/{task_uid}",
CATEGORIES: "/processcategory/categories"
REASSIGN_USERS: "/light/userstoreassign/{task_uid}"
};

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

@@ -1,7 +1,7 @@
import { menu } from "./Menu";
import { cases, casesHeader } from "./Cases";
import { config } from "./Config";
import { caseNotes } from "./CaseNotes";
import { process } from "./Process";
import { filters } from "./Filters";
@@ -13,5 +13,6 @@ export default {
casesHeader,
process,
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) {
initialFilters = this.prepareFilterItems(element.items, this.selected, true);
}
//adding process name filter
initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
//adding process name filter
if (self.byProcessName !== "") {
initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
}
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",
programmatic: false,
},
sortable: [],
orderBy: {},
requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data);
},
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')
}
}
}
}
customFilters: ["myfilter"]
},
pmDateFormat: window.config.FORMATS.dateFormat,
clickCount: 0,

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

@@ -22,6 +22,7 @@
ref="vueTable"
@row-click="onRowClick"
:key="random"
name="draft"
>
<div slot="detail" slot-scope="props">
<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 defaultMixins from "./defaultMixins";
import Ellipsis from '../../components/utils/ellipsis.vue';
import { Event } from 'vue-tables-2';
export default {
name: "Draft",
@@ -209,10 +211,15 @@ export default {
VueCardView,
VueListView
},
props: ["defaultOption", "filters"],
props: ["defaultOption", "settings"],
data() {
let that = this;
return {
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE"
},
newCase: {
title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success",
@@ -220,21 +227,28 @@ export default {
this.$refs["newRequest"].show();
},
},
columns: [
"detail",
"case_number",
"case_title",
"process_name",
"task",
"priority",
"actions"
],
filters:
this.settings && this.settings.filters
? this.settings.filters
: {},
columns:
this.settings && this.settings.columns
? this.settings.columns
: [
"detail",
"case_number",
"case_title",
"process_name",
"task",
"priority",
"actions"
],
tableData: [],
icon:"fas fa-edit",
options: {
filterable: false,
headings: {
detail: "",
detail: this.$i18n.t("ID_DETAIL_CASE"),
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
case_title: this.$i18n.t("ID_CASE_TITLE"),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
@@ -249,6 +263,8 @@ export default {
selectAllMode: "page",
programmatic: false,
},
sortable: ['case_number'],
orderBy: this.settings && this.settings.orderBy ? this.settings.orderBy: {},
requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data);
},
@@ -294,9 +310,21 @@ export default {
this.initFilters();
},
mounted() {
let that = this;
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: {
/**
* Build our ProcessMaker apiClient
@@ -388,7 +416,8 @@ export default {
paged,
limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {};
filters = {},
sort = "";
paged = start + "," + limit;
filters = {
@@ -400,6 +429,10 @@ export default {
filters[item.filterVar] = item.value;
}
});
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => {
api.cases
.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
*/
@@ -480,7 +525,7 @@ export default {
},
onRemoveFilter(data) {},
onUpdateFilters(data) {
this.$emit("onUpdateFilters", data.params);
this.filters = data.params;
if (data.refresh) {
this.$nextTick(() => {
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) {
if (item.value && item.value != "") {
filters[item.filterVar] = item.value;
if(filters && item.value) {
filters[item.filterVar] = item.value;
}
}
});
return new Promise((resolutionFunc, rejectionFunc) => {

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

@@ -20,19 +20,21 @@
<component
v-bind:is="page"
ref="component"
:filters="filters"
:id="pageId"
:pageUri="pageUri"
:name="pageName"
:defaultOption="defaultOption"
@onSubmitFilter="onSubmitFilter"
:settings="config.setting[page]"
:filters="filters"
@onSubmitFilter="onSubmitFilter"
@onRemoveFilter="onRemoveFilter"
@onUpdatePage="onUpdatePage"
@onUpdateDataCase="onUpdateDataCase"
@onLastPage="onLastPage"
@onUpdateFilters="onUpdateFilters"
@cleanDefaultOption="cleanDefaultOption"
></component>
@updateUserSettings="updateUserSettings"
></component>
</div>
</div>
</template>
@@ -87,6 +89,11 @@ export default {
pageName: null,
pageUri: null,
filters: null,
config: {
id: window.config.userId || "1",
name: "home",
setting: {}
},
menuMap: {
CASES_MY_CASES: "MyCases",
CASES_SENT: "MyCases",
@@ -105,6 +112,7 @@ export default {
mounted() {
this.onResize();
this.getMenu();
this.getUserSettings();
this.listenerIframe();
window.setInterval(
this.setCounter,
@@ -150,6 +158,65 @@ export default {
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
*/
@@ -337,7 +404,7 @@ export default {
},
onUpdateFilters(filters) {
this.filters = filters;
}
},
}
};
</script>

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

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

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

@@ -120,7 +120,9 @@ export default {
paged: paged,
};
_.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) => {
api.cases

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

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

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

@@ -23,6 +23,7 @@
ref="vueTable"
@row-click="onRowClick"
:key="random"
name="paused"
>
<div slot="detail" slot-scope="props">
<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 Ellipsis from '../../components/utils/ellipsis.vue';
import ModalReassignCase from '../modal/ModalReassignCase.vue';
import { Event } from 'vue-tables-2';
import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
export default {
@@ -245,10 +247,15 @@ export default {
ModalReassignCase,
CurrentUserCell,
},
props: ["defaultOption", "filters"],
props: ["defaultOption", "settings"],
data() {
let that = this;
return {
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE"
},
newCase: {
title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success",
@@ -256,18 +263,25 @@ export default {
this.$refs["newRequest"].show();
},
},
columns: [
"detail",
"case_number",
"case_title",
"process_name",
"task",
"send_by",
"due_date",
"delegation_date",
"priority",
"actions",
],
filters:
this.settings && this.settings.filters
? this.settings.filters
: {},
columns:
this.settings && this.settings.columns
? this.settings.columns
: [
"detail",
"case_number",
"case_title",
"process_name",
"task",
"send_by",
"due_date",
"delegation_date",
"priority",
"actions"
],
tableData: [],
icon:"far fa-pause-circle",
options: {
@@ -301,6 +315,8 @@ export default {
selectAllMode: "page",
programmatic: false,
},
sortable: ['case_number'],
orderBy: this.settings && this.settings.orderBy ? this.settings.orderBy: {},
requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data);
},
@@ -337,10 +353,21 @@ export default {
this.initFilters();
},
mounted() {
let that = this;
// force to open case
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: {
/**
* Build our ProcessMaker apiClient
@@ -432,7 +459,8 @@ export default {
paged,
limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {};
filters = {},
sort = "";
paged = start + "," + limit;
filters = {
@@ -444,6 +472,10 @@ export default {
filters[item.filterVar] = item.value;
}
});
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => {
api.cases
.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
*/
@@ -560,7 +604,7 @@ export default {
},
onRemoveFilter(data) {},
onUpdateFilters(data) {
this.$emit("onUpdateFilters", data.params);
this.filters = data.params;
if (data.refresh) {
this.$nextTick(() => {
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) {
if (item.value && item.value != "") {
filters[item.filterVar] = item.value;
}
if(filters && item.value) {
filters[item.filterVar] = item.value;
}
});
return new Promise((resolutionFunc, rejectionFunc) => {
api.cases

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

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

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

@@ -1,216 +1,348 @@
<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 per Task Status</h6>
<div>
<label class="vp-inline-block">{{ $t("ID_PROCESS_CATEGORY") }}</label>
<div class="vp-width-p40 vp-inline-block">
<multiselect
v-model="category"
:options="optionsCategory"
:searchable="false"
:close-on-select="false"
:show-labels="false"
placeholder="Pick a value"
></multiselect>
</div>
</div>
<apexchart
ref="apexchart1"
:width="width"
:options="optionsBar"
:series="seriesBar"
></apexchart>
</div>
</div>
<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)" />
<ProcessPopover
:options="optionsProcesses"
target="pm-task-process"
ref="pm-task-process"
@onUpdateColumnSettings="onUpdateColumnSettings"
/>
<div class="vp-width-p40 vp-inline-block">
<multiselect
v-model="category"
:options="optionsCategory"
:searchable="false"
:close-on-select="false"
:show-labels="false"
track-by="id"
label="name"
@select="changeOption"
></multiselect>
</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>
<script>
import _ from "lodash";
import Api from "../../api/index";
import BreadCrumb from "../../components/utils/BreadCrumb.vue";
import ProcessPopover from "./ProcessPopover.vue";
import Multiselect from "vue-multiselect";
export default {
name: "VueChartLvOne",
mixins: [],
components: {
Multiselect,
},
props: [],
data() {
let that = this;
return {
category: null,
optionsCategory: [],
width: 0,
seriesBar: [
{
data: [400, 430, 448, 470],
},
],
optionsBar: {
chart: {
type: "bar",
id: "apexchart2",
toolbar: {
show: false,
},
events: {
legendClick: function (chartContext, seriesIndex, config) {
console.log("click");
},
},
},
plotOptions: {
bar: {
barHeight: "100%",
distributed: true,
horizontal: true,
},
},
legend: {
position: "left",
offsetY: 50,
fontSize: "18px",
},
colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
dataLabels: {
enabled: false,
},
xaxis: {
categories: [
this.$i18n.t("ID_INBOX"),
this.$i18n.t("ID_DRAFT"),
this.$i18n.t("ID_PAUSED"),
this.$i18n.t("ID_UNASSIGNED"),
],
},
tooltip: {
x: {
show: false,
},
y: {
title: {
formatter: function () {
return "";
},
},
},
},
},
};
},
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 * 0.8;
},
/**
* 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.process
.categories({
name:""
})
.then((response) => {
that.formatDataCategories(response.data);
})
.catch((e) => {
console.error(err);
});
},
formatDataCategories(data) {
let array = [];
_.each(data, (el) => {
array.push(el["cat_name"]);
});
this.optionsCategory = array;
this.category = array[0];
},
},
name: "VueChartLvOne",
mixins: [],
components: {
Multiselect,
BreadCrumb,
ProcessPopover,
},
props: ["data"],
data() {
let that = this;
return {
category: null,
dataProcesses: null, //Data API processes
optionsCategory: [],
optionsProcesses: [],
selectedProcesses: [],
top: false,
width: 0,
totalCases: [],
currentSelection: null,
seriesBar: [
{
data: [],
},
],
optionsBar: {
chart: {
type: "bar",
id: "LevelOneChart",
toolbar: {
show: false,
},
events: {
legendClick: function (chartContext, seriesIndex, config) {
that.currentSelection = that.totalCases[seriesIndex];
console.log("LEGENDDDDDDDDDDDDD");
that.$emit("updateDataLevel", {
id: that.currentSelection["PRO_ID"],
name: that.currentSelection["PRO_TITLE"],
level: 1,
data: that.currentSelection,
});
},
},
},
plotOptions: {
bar: {
barHeight: "100%",
distributed: true,
horizontal: true,
},
},
legend: {
position: "left",
},
colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
dataLabels: {
enabled: false,
},
xaxis: {
categories: [],
},
tooltip: {
x: {
show: false,
},
y: {
title: {
formatter: function () {
return "";
},
},
},
},
},
};
},
created() {},
mounted() {
this.getBodyHeight();
this.getCategories();
this.getProcesses();
},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {
/**
* Return the height for Vue Card View body
*/
getBodyHeight() {
this.width = window.innerHeight;
},
/**
* Get Categories form API
*/
getCategories() {
let that = this;
Api.filters
.categories()
.then((response) => {
that.formatDataCategories(response.data);
})
.catch((e) => {
console.error(err);
});
},
/**
* Get Processes form API
*/
getProcesses() {
let that = this;
Api.filters
.processList("")
.then((response) => {
that.formatDataProcesses(response.data);
that.changeOption({
id: 0,
});
})
.catch((e) => {
console.error(err);
});
},
/**
* Format categories for multiselect
*/
formatDataCategories(data) {
let array = [];
array.push({
name: "No Categories",
id: "0",
});
_.each(data, (el) => {
array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] });
});
this.optionsCategory = array;
this.category = array[0];
},
/**
* Format processes for popover
*/
formatDataProcesses(data) {
let sels = [],
labels = [],
array = [];
_.each(data, (el) => {
array.push({ value: el["PRO_TITLE"], key: el["PRO_ID"] });
sels.push(el["PRO_ID"]);
labels;
});
this.optionsProcesses = array;
this.selectedProcesses = sels;
//Update the labels
this.dataProcesses = data;
this.updateLabels(data);
console.log("aaaaaaaaaaaaaaaaa aaaaaaa");
},
/**
* Change the options in TOTAL CASES BY PROCESS
*/
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>
<style>
.vp-task-metrics-label {
display: inline-block;
display: inline-block;
}
.vp-width-p40 {
width: 40%;
width: 40%;
}
.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 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>
<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 per Task Status</h6>
<apexchart
v-show="typeView === 'donut'"
ref="apexchart1"
:width="width"
:options="optionsDonut"
:series="seriesDonut"
></apexchart>
<apexchart
v-show="typeView === 'bar'"
ref="apexchart2"
:width="width"
:options="optionsBar"
:series="seriesBar"
></apexchart>
<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 per Task Status</h6>
<apexchart
v-show="typeView === 'donut'"
ref="apexchart1"
:width="width"
:options="optionsDonut"
:series="seriesDonut"
></apexchart>
<apexchart
v-show="typeView === 'bar'"
ref="apexchart2"
:width="width"
:options="optionsBar"
:series="seriesBar"
></apexchart>
<div class="row">
<div class="col-sm vp-center">
<button
@click="changeView('donut')"
type="button"
class="btn btn-primary"
>
<i class="fas fa-chart-pie"></i
><span class="vp-padding-l10">View</span>
</button>
</div>
<div class="col-sm">
<button
@click="changeView('bar')"
type="button"
class="btn btn-primary"
>
<i class="fas fa-chart-bar"></i
><span class="vp-padding-l10">View</span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm vp-align-right">
<button
@click="changeView('donut')"
type="button"
class="btn btn-primary"
>
<i class="fas fa-chart-pie"></i
><span class="vp-padding-l10">{{ $t("ID_VIEW") }}</span>
</button>
</div>
<div class="col-sm">
<button
@click="changeView('bar')"
type="button"
class="btn btn-primary"
>
<i class="fas fa-chart-bar"></i
><span class="vp-padding-l10">{{ $t("ID_VIEW") }}</span>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import _ from "lodash";
import Api from "../../api/index";
export default {
name: "VueChartLvZero",
mixins: [],
components: {},
props: [],
data() {
let that = this;
return {
typeView: "bar",
width: 0,
seriesDonut: [],
optionsDonut: {
labels: [
this.$i18n.t("ID_INBOX"),
this.$i18n.t("ID_DRAFT"),
this.$i18n.t("ID_PAUSED"),
this.$i18n.t("ID_UNASSIGNED"),
],
chart: {
id: "apexchart1",
type: "donut",
},
legend: {
position: "top",
offsetY: 0,
},
},
seriesBar: [
{
data: [400, 430, 448, 470],
},
],
optionsBar: {
chart: {
type: "bar",
id: "apexchart2",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
barHeight: "100%",
distributed: true,
},
},
legend: {
position: "top",
offsetY: 0,
},
colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
dataLabels: {
enabled: false,
},
xaxis: {
categories: [
this.$i18n.t("ID_INBOX"),
this.$i18n.t("ID_DRAFT"),
this.$i18n.t("ID_PAUSED"),
this.$i18n.t("ID_UNASSIGNED"),
],
},
tooltip: {
x: {
show: false,
},
y: {
title: {
formatter: function () {
return "";
},
},
},
},
},
};
},
created() {},
mounted() {
this.getBodyHeight();
//this.getDataDonut();
this.getData();
},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {
/**
* Return the height for Vue Card View body
*/
getBodyHeight() {
this.width = window.innerHeight * 0.8;
},
/**
* Change view - donut/bar
*/
changeView(view) {
this.typeView = view;
this.getData();
},
name: "VueChartLvZero",
mixins: [],
components: {},
props: [],
data() {
let that = this;
return {
typeView: "donut",
width: 0,
data: [],
currentSelection: null,
seriesDonut: [],
optionsDonut: {
labels: [
this.$i18n.t("ID_INBOX"),
this.$i18n.t("ID_DRAFT"),
this.$i18n.t("ID_PAUSED"),
this.$i18n.t("ID_UNASSIGNED"),
],
chart: {
id: "apexchart1",
type: "donut",
events: {
legendClick: function (chartContext, seriesIndex, config) {
that.currentSelection = that.data[seriesIndex];
that.$emit("updateDataLevel", {
id: that.currentSelection["List Name"],
name: that.currentSelection["List Name"],
level: 0,
data: that.currentSelection,
});
},
},
},
legend: {
position: "top",
offsetY: 0,
},
},
seriesBar: [
{
data: [400, 430, 448, 470],
},
],
optionsBar: {
chart: {
type: "bar",
id: "apexchart2",
toolbar: {
show: false,
},
events: {
legendClick: function (chartContext, seriesIndex, config) {
that.currentSelection = that.data[seriesIndex];
that.$emit("updateDataLevel", {
id: that.currentSelection["List Name"],
name: that.currentSelection["List Name"],
level: 0,
data: that.currentSelection,
});
},
},
},
plotOptions: {
bar: {
barHeight: "100%",
distributed: true,
},
},
legend: {
position: "top",
offsetY: 0,
},
colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
dataLabels: {
enabled: false,
},
xaxis: {
categories: [
this.$i18n.t("ID_INBOX"),
this.$i18n.t("ID_DRAFT"),
this.$i18n.t("ID_PAUSED"),
this.$i18n.t("ID_UNASSIGNED"),
],
},
tooltip: {
x: {
show: false,
},
y: {
title: {
formatter: function () {
return "";
},
},
},
},
},
};
},
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
*/
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,
},
]);
},
},
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.data = data;
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,
},
]);
},
},
};
</script>
<style>
.vp-center {
text-align: center;
text-align: center;
}
.vp-align-right {
text-align: right;
}
.vp-padding-l10 {
padding-left: 10px;
padding-left: 10px;
}
</style>

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

@@ -1,16 +1,27 @@
<template>
<div
id="v-pm-charts"
ref="v-pm-charts"
class="v-pm-charts vp-inline-block"
>
<vue-chart-lv-one/>
<div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
<vue-chart-lv-zero
v-show="level === 0"
@updateDataLevel="updateDataLevel"
/>
<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>
</template>
<script>
import VueChartLvZero from "./VueChartLvZero.vue";
import VueChartLvOne from "./VueChartLvOne.vue";
import VueChartLvTwo from "./VueChartLvTwo.vue";
export default {
name: "VueCharts",
@@ -18,12 +29,15 @@ export default {
components: {
VueChartLvZero,
VueChartLvOne,
VueChartLvTwo,
},
props: [],
data() {
let that = this;
return {
width: 0,
level: 0,
data: [],
dataBreadCrumbs: [],
};
},
created() {},
@@ -32,7 +46,31 @@ export default {
computed: {},
updated() {},
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>
<style>

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

@@ -21,6 +21,7 @@
ref="vueTable"
@row-click="onRowClick"
:key="random"
name="unassigned"
>
<div slot="detail" slot-scope="props">
<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 defaultMixins from "./defaultMixins";
import ModalPauseCase from '../modal/ModalPauseCase.vue';
import { Event } from 'vue-tables-2';
import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
export default {
@@ -241,10 +243,15 @@ export default {
ModalPauseCase,
CurrentUserCell,
},
props: ["defaultOption", "filters"],
props: ["defaultOption", "settings"],
data() {
let that = this;
return {
columMap: {
case_number: "APP_NUMBER",
case_title: "DEL_TITLE",
process_name: "PRO_TITLE"
},
newCase: {
title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success",
@@ -252,18 +259,25 @@ export default {
this.$refs["newRequest"].show();
},
},
columns: [
"detail",
"case_number",
"case_title",
"process_name",
"task",
"send_by",
"due_date",
"delegation_date",
"priority",
"actions",
],
filters:
this.settings && this.settings.filters
? this.settings.filters
: {},
columns:
this.settings && this.settings.columns
? this.settings.columns
: [
"detail",
"case_number",
"case_title",
"process_name",
"task",
"send_by",
"due_date",
"delegation_date",
"priority",
"actions"
],
icon:"fas fa-users",
options: {
filterable: false,
@@ -296,6 +310,8 @@ export default {
selectAllMode: "page",
programmatic: false,
},
sortable: ['case_number'],
orderBy: this.settings && this.settings.orderBy ? this.settings.orderBy: {},
requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable(data);
},
@@ -329,9 +345,21 @@ export default {
};
},
mounted() {
let that = this;
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: {
/**
* Build our ProcessMaker apiClient
@@ -397,7 +425,8 @@ export default {
paged,
limit = data.limit,
start = data.page === 1 ? 0 : limit * (data.page - 1),
filters = {};
filters = {},
sort = "";
paged = start + "," + limit;
filters = {
@@ -409,6 +438,10 @@ export default {
filters[item.filterVar] = item.value;
}
});
sort = that.prepareSortString(data);
if (sort) {
filters["sort"] = sort;
}
return new Promise((resolutionFunc, rejectionFunc) => {
api.cases
.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
*/
@@ -530,7 +575,7 @@ export default {
onRemoveFilter(data) {},
onUpdateFilters(data) {
if (data.params) {
this.$emit("onUpdateFilters", data.params);
this.filters = data.params;
}
if (data.refresh) {
this.$nextTick(() => {

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

@@ -86,7 +86,9 @@ export default {
};
_.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) => {
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 { ServerTable, Event, ClientTable } from 'vue-tables-2';
import VtTableHeadingCustom from './../components/vuetable/extends/VtTableHeadingCustom';
import VtSortControl from './../components/vuetable/extends/VtSortControl';
import SettingsPopover from "../components/vuetable/SettingsPopover.vue";
import Sortable from 'sortablejs';
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-vue/dist/bootstrap-vue.css';
import VueApexCharts from 'vue-apexcharts'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import Home from "./Home";
Vue.use(VueApexCharts);
@@ -21,9 +26,11 @@ Vue.use(VueSidebarMenu);
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
Vue.use(VueI18n);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.use(ServerTable, {}, false, 'bootstrap3', {
tableHeading: VtTableHeadingCustom
tableHeading: VtTableHeadingCustom,
sortControl: VtSortControl
});
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
Vue.component('settings-popover', SettingsPopover);

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

@@ -89,5 +89,359 @@ export default {
}
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;
use ProcessMaker\Model\AdditionalTables;
use ProcessMaker\Model\CaseList;
use Tests\TestCase;
@@ -348,4 +349,108 @@ class CaseListTest extends TestCase
//assert file export
$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?"
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
# LABEL/ID_ARE_YOU_SURE_RESEND
#: LABEL/ID_ARE_YOU_SURE_RESEND
@@ -6149,6 +6155,12 @@ msgstr "Delete Category"
msgid "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
# 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_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_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_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') ,
@@ -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
( '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_DATABASES','en','Delete database if it exists','2015-02-23') ,
( '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 ProcessMaker\Core\System;
use ProcessMaker\Model\Application;
use ProcessMaker\Model\User;
$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("FORMATS", $conf->getFormats());
$userCanAccess = 1;
global $translation;
@@ -142,4 +142,5 @@ ScriptVariables::add('SYS_URI', SYS_URI);
ScriptVariables::add('SYS_LANG', SYS_LANG);
ScriptVariables::add('TRANSLATIONS', $translation);
ScriptVariables::add('FORMATS', $conf->getFormats());
ScriptVariables::add('userId', User::getId($_SESSION['USER_LOGGED']));
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);
// 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->addSelectColumn(DynaformPeer::DYN_CONTENT);
$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 G;
use ProcessMaker\BusinessModel\Table;
use ProcessMaker\Core\System;
use ProcessMaker\Model\AdditionalTables;
use ProcessMaker\Model\User;
@@ -62,10 +63,17 @@ class CaseList extends Model
'USR_FIRSTNAME' => 'userFirstname',
'USR_LASTNAME' => 'userLastname',
'USR_EMAIL' => 'userEmail',
'USR_POSITION' => 'userPosition',
'ADD_TAB_NAME' => 'tableName',
'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.
* @param array $array
@@ -187,7 +195,7 @@ class CaseList extends Model
'CASE_LIST.*',
'PROCESS.PRO_TITLE',
'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) {
$query
@@ -211,7 +219,10 @@ class CaseList extends Model
$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);
unset($result['USR_UID']);
@@ -285,4 +296,190 @@ class CaseList extends Model
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());
}
}
/**
* 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
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListToDo(
$start = 0,
@@ -265,6 +266,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListToDoPaged(
$start = 0,
@@ -309,6 +311,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListDraft(
$start = 0,
@@ -353,6 +356,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListDraftPaged(
$start = 0,
@@ -397,6 +401,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListParticipated(
$start = 0,
@@ -441,6 +446,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListParticipatedPaged(
$start = 0,
@@ -485,6 +491,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListUnassigned(
$start = 0,
@@ -529,6 +536,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListUnassignedPaged(
$start = 0,
@@ -573,6 +581,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListPaused(
$start = 0,
@@ -617,6 +626,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListPausedPaged(
$start = 0,
@@ -665,6 +675,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListAdvancedSearch(
$start = 0,
@@ -723,6 +734,7 @@ class Cases extends Api
*
* @return array
* @throws Exception
* @deprecated Method deprecated in Release 3.6.x
*/
public function doGetCasesListAdvancedSearchPaged(
$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
*
* @url /process-total-cases
* @url GET /total-cases-by-process
*
* @param string $caseList
* @param int $category
@@ -112,7 +112,7 @@ class Metrics extends Api
/**
* Get total of cases per list
*
* @url /list-total-cases
* @url GET /list-total-cases
*
* @return array
*