Merged in feature/PMCORE-3062-A (pull request #7997)
PMCORE-3062-A Approved-by: Rodrigo Quelca
This commit is contained in:
committed by
Rodrigo Quelca
commit
a0b9605d92
167
resources/assets/js/components/vuetable/SettingsPopover.vue
Normal file
167
resources/assets/js/components/vuetable/SettingsPopover.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="pm-all-view-popover">
|
||||
<b-popover
|
||||
:target="target"
|
||||
ref="popover"
|
||||
triggers="click"
|
||||
placement="bottom"
|
||||
@show="onshow"
|
||||
>
|
||||
<template #title>{{ $t("ID_COLUMNS").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 {
|
||||
props: ["target", "options", "selected"],
|
||||
data() {
|
||||
return {
|
||||
localSelected: [],
|
||||
text: "",
|
||||
results: [],
|
||||
allColumns: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.results = this.options;
|
||||
this.localSelected = this.selected || [];
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 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.localSelected = 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>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<span v-if="settings()" :class="classObject" :id="id"> </span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "VtSettingsControl",
|
||||
props: ["props", "parent"],
|
||||
mounted() {},
|
||||
methods: {
|
||||
settings() {
|
||||
return (
|
||||
this.props.opts.settings && this.props.opts.settings[this.parent.column]
|
||||
);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
classObject() {
|
||||
return this.settings()
|
||||
? this.props.opts.settings[this.parent.column]["class"]
|
||||
: this.props.class;
|
||||
},
|
||||
id() {
|
||||
return this.settings()
|
||||
? this.props.opts.settings[this.parent.column]["id"]
|
||||
: "default-settings-case";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<th slot-scope="props" v-on="events()" v-bind="props.thAttrs" :key="random">
|
||||
<span class="VueTables__heading" :title="props.title">
|
||||
<vnodes :vnodes="props.heading" />
|
||||
</span>
|
||||
<vt-sort-control />
|
||||
<vt-settings-control :props="props" :parent="$parent" />
|
||||
</th>
|
||||
</template>
|
||||
<script>
|
||||
import VtSortControl from "vue-tables-2/compiled/components/VtSortControl";
|
||||
import VtSettingsControl from "./VtSettingsControl.vue";
|
||||
export default {
|
||||
name: "VtTableHeading",
|
||||
components: {
|
||||
VtSortControl,
|
||||
VtSettingsControl,
|
||||
vnodes: {
|
||||
functional: true,
|
||||
render: (h, ctx) =>
|
||||
typeof ctx.props.vnodes === "object"
|
||||
? ctx.props.vnodes
|
||||
: [ctx.props.vnodes],
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
random() {
|
||||
return _.random(0, 10000000000);
|
||||
},
|
||||
},
|
||||
props: ["props"],
|
||||
mounted() {},
|
||||
methods: {
|
||||
events() {
|
||||
return this.props.opts.settings &&
|
||||
this.props.opts.settings[this.$parent.column]
|
||||
? this.props.opts.settings[this.$parent.column]["events"]
|
||||
: this.props.thEvents;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -24,13 +24,14 @@
|
||||
/>
|
||||
|
||||
<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)"/>
|
||||
<v-server-table
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:options="options"
|
||||
ref="vueTable"
|
||||
@row-click="onRowClick"
|
||||
:key="random"
|
||||
>
|
||||
<div slot="info" slot-scope="props">
|
||||
<b-icon
|
||||
@@ -82,17 +83,19 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ButtonFleft from "../components/home/ButtonFleft.vue";
|
||||
import ModalNewRequest from "./ModalNewRequest.vue";
|
||||
import AdvancedFilter from "../components/search/AdvancedFilter";
|
||||
import TaskCell from "../components/vuetable/TaskCell.vue";
|
||||
import CurrentUserCell from "../components/vuetable/CurrentUserCell.vue";
|
||||
import ModalComments from "./modal/ModalComments.vue";
|
||||
import api from "./../api/index";
|
||||
import utils from "./../utils/utils";
|
||||
import ButtonFleft from "../../components/home/ButtonFleft.vue";
|
||||
import ModalNewRequest from "../ModalNewRequest.vue";
|
||||
import AdvancedFilter from "../../components/search/AdvancedFilter";
|
||||
import TaskCell from "../../components/vuetable/TaskCell.vue";
|
||||
import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
|
||||
import ModalComments from "../modal/ModalComments.vue";
|
||||
import api from "../../api/index";
|
||||
import utils from "../../utils/utils";
|
||||
import defaultMixin from "./defaultMixins.js";
|
||||
|
||||
export default {
|
||||
name: "AdvancedSearch",
|
||||
mixins: [defaultMixin],
|
||||
components: {
|
||||
AdvancedFilter,
|
||||
ButtonFleft,
|
||||
@@ -103,6 +106,7 @@ export default {
|
||||
},
|
||||
props: ["id", "name", "filters"],
|
||||
data() {
|
||||
let that = this;
|
||||
return {
|
||||
dismissSecs: 5,
|
||||
dismissCountDown: 0,
|
||||
@@ -137,7 +141,6 @@ export default {
|
||||
options: {
|
||||
filterable: false,
|
||||
headings: {
|
||||
info: "",
|
||||
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
|
||||
case_title: this.$i18n.t("ID_CASE_TITLE"),
|
||||
status: this.$i18n.t("ID_STATUS"),
|
||||
@@ -170,6 +173,17 @@ export default {
|
||||
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')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pmDateFormat: window.config.FORMATS.dateFormat,
|
||||
clickCount: 0,
|
||||
46
resources/assets/js/home/AdvancedSearch/defaultMixins.js
Normal file
46
resources/assets/js/home/AdvancedSearch/defaultMixins.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import api from "../../api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
random: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Format columns for custom columns
|
||||
* @param {*} headings
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSettings(headings) {
|
||||
let res = [];
|
||||
_.forEach(headings, function (value, key) {
|
||||
if (key != "actions") {
|
||||
res.push({ value, key });
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
/**
|
||||
* Formating the columns selected
|
||||
* @param {*} columns
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSelected(columns) {
|
||||
let cols = _.clone(columns);
|
||||
cols.pop();
|
||||
return cols;
|
||||
},
|
||||
/**
|
||||
* Event handler when update the settings columns
|
||||
* @param {*} columns
|
||||
*/
|
||||
onUpdateColumnSettings(columns) {
|
||||
let cols = columns;
|
||||
if (_.findIndex(cols, 'actions') == -1) {
|
||||
cols.push("actions");
|
||||
}
|
||||
this.columns = cols;
|
||||
this.random = _.random(0, 10000000000);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,7 @@
|
||||
@onUpdateFilters="onUpdateFilters"
|
||||
/>
|
||||
<multiview-header :data="dataMultiviewHeader" />
|
||||
<settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
|
||||
<v-server-table
|
||||
v-if="typeView === 'GRID'"
|
||||
:data="tableData"
|
||||
@@ -16,6 +17,7 @@
|
||||
:options="options"
|
||||
ref="vueTable"
|
||||
@row-click="onRowClick"
|
||||
:key="random"
|
||||
>
|
||||
<div slot="detail" slot-scope="props">
|
||||
<div class="btn-default" @click="openCaseDetail(props.row)">
|
||||
@@ -187,6 +189,7 @@ export default {
|
||||
},
|
||||
props: ["defaultOption", "filters"],
|
||||
data() {
|
||||
let that = this;
|
||||
return {
|
||||
newCase: {
|
||||
title: this.$i18n.t("ID_NEW_CASE"),
|
||||
@@ -234,7 +237,18 @@ export default {
|
||||
limit: this.$i18n.t("ID_RECORDS") + ":",
|
||||
page: this.$i18n.t("ID_PAGE") + ":",
|
||||
noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS")
|
||||
},
|
||||
settings: {
|
||||
"actions":{
|
||||
class: "fas fa-cog",
|
||||
id:"pm-dr-column-settings",
|
||||
events:{
|
||||
click(){
|
||||
that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
pmDateFormat: "Y-m-d H:i:s",
|
||||
clickCount: 0,
|
||||
|
||||
@@ -4,6 +4,7 @@ export default {
|
||||
let that = this;
|
||||
return {
|
||||
typeView: "GRID",
|
||||
random: 1,
|
||||
dataMultiviewHeader: {
|
||||
actions: [
|
||||
{
|
||||
@@ -139,5 +140,41 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Format columns for custom columns
|
||||
* @param {*} headings
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSettings(headings) {
|
||||
let res=[];
|
||||
_.forEach(headings, function(value, key) {
|
||||
if(key != "actions"){
|
||||
res.push({value,key});
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
/**
|
||||
* Formating the columns selected
|
||||
* @param {*} columns
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSelected(columns) {
|
||||
let cols = _.clone(columns);
|
||||
cols.pop();
|
||||
return cols;
|
||||
},
|
||||
/**
|
||||
* Event handler when update the settings columns
|
||||
* @param {*} columns
|
||||
*/
|
||||
onUpdateColumnSettings(columns) {
|
||||
let cols = columns;
|
||||
if(_.findIndex(cols, 'actions') == -1){
|
||||
cols.push("actions");
|
||||
}
|
||||
this.columns = cols;
|
||||
this.random = _.random(0, 10000000000);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -38,7 +38,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import CustomSidebar from "./../components/menu/CustomSidebar";
|
||||
import MyCases from "./MyCases";
|
||||
import MyCases from "./MyCases/MyCases.vue";
|
||||
import MyDocuments from "./MyDocuments";
|
||||
import Todo from "./Inbox/Todo.vue";
|
||||
import Paused from "./Paused/Paused.vue";
|
||||
@@ -48,7 +48,7 @@ import BatchRouting from "./BatchRouting";
|
||||
import CaseDetail from "./CaseDetail";
|
||||
import XCase from "./XCase";
|
||||
import TaskReassignments from "./TaskReassignments";
|
||||
import AdvancedSearch from "./AdvancedSearch";
|
||||
import AdvancedSearch from "./AdvancedSearch/AdvancedSearch.vue";
|
||||
import LegacyFrame from "./LegacyFrame";
|
||||
|
||||
import api from "./../api/index";
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
@onUpdateFilters="onUpdateFilters"
|
||||
/>
|
||||
<multiview-header :data="dataMultiviewHeader" />
|
||||
<settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
|
||||
<v-server-table
|
||||
v-if="typeView === 'GRID'"
|
||||
:data="tableData"
|
||||
@@ -16,6 +17,7 @@
|
||||
:options="options"
|
||||
ref="vueTable"
|
||||
@row-click="onRowClick"
|
||||
:key="random"
|
||||
>
|
||||
<div slot="detail" slot-scope="props">
|
||||
<div class="btn-default" @click="openCaseDetail(props.row)">
|
||||
@@ -195,6 +197,7 @@ export default {
|
||||
},
|
||||
props: ["defaultOption", "filters"],
|
||||
data() {
|
||||
let that = this;
|
||||
return {
|
||||
newCase: {
|
||||
title: this.$i18n.t("ID_NEW_CASE"),
|
||||
@@ -212,18 +215,17 @@ export default {
|
||||
"due_date",
|
||||
"delegation_date",
|
||||
"priority",
|
||||
"actions",
|
||||
"actions"
|
||||
],
|
||||
tableData: [],
|
||||
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"),
|
||||
task: this.$i18n.t("ID_TASK"),
|
||||
current_user: this.$i18n.t("ID_CURRENT_USER"),
|
||||
due_date: this.$i18n.t("ID_DUE_DATE"),
|
||||
delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
|
||||
priority: this.$i18n.t("ID_PRIORITY"),
|
||||
@@ -249,6 +251,17 @@ export default {
|
||||
requestFunction(data) {
|
||||
return this.$parent.$parent.getCasesForVueTable(data);
|
||||
},
|
||||
settings: {
|
||||
"actions":{
|
||||
class: "fas fa-cog",
|
||||
id:"pm-dr-column-settings",
|
||||
events:{
|
||||
click(){
|
||||
that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
pmDateFormat: "Y-m-d H:i:s",
|
||||
clickCount: 0,
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import _ from "lodash";
|
||||
import api from "../../api/index";
|
||||
export default {
|
||||
data() {
|
||||
let that = this;
|
||||
return {
|
||||
typeView: "GRID",
|
||||
random: 1,
|
||||
dataMultiviewHeader: {
|
||||
actions: [
|
||||
{
|
||||
@@ -135,5 +137,41 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Format columns for custom columns
|
||||
* @param {*} headings
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSettings(headings) {
|
||||
let res=[];
|
||||
_.forEach(headings, function(value, key) {
|
||||
if(key != "actions"){
|
||||
res.push({value,key});
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
/**
|
||||
* Formating the columns selected
|
||||
* @param {*} columns
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSelected(columns) {
|
||||
let cols = _.clone(columns);
|
||||
cols.pop();
|
||||
return cols;
|
||||
},
|
||||
/**
|
||||
* Event handler when update the settings columns
|
||||
* @param {*} columns
|
||||
*/
|
||||
onUpdateColumnSettings(columns) {
|
||||
let cols = columns;
|
||||
if(_.findIndex(cols, 'actions') == -1){
|
||||
cols.push("actions");
|
||||
}
|
||||
this.columns = cols;
|
||||
this.random = _.random(0, 10000000000);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
/>
|
||||
<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)"/>
|
||||
<v-server-table
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:options="options"
|
||||
ref="vueTable"
|
||||
@row-click="onRowClick"
|
||||
:key="random"
|
||||
>
|
||||
<div slot="detail" slot-scope="props">
|
||||
<div class="btn-default" @click="openCaseDetail(props.row)">
|
||||
@@ -64,17 +65,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderCounter from "../components/home/HeaderCounter.vue";
|
||||
import ButtonFleft from "../components/home/ButtonFleft.vue";
|
||||
import ModalNewRequest from "./ModalNewRequest.vue";
|
||||
import MyCasesFilter from "../components/search/MyCasesFilter";
|
||||
import ModalComments from "./modal/ModalComments.vue";
|
||||
import GroupedCell from "../components/vuetable/GroupedCell.vue";
|
||||
import api from "./../api/index";
|
||||
import utils from "./../utils/utils";
|
||||
import HeaderCounter from "../../components/home/HeaderCounter.vue";
|
||||
import ButtonFleft from "../../components/home/ButtonFleft.vue";
|
||||
import ModalNewRequest from "../ModalNewRequest.vue";
|
||||
import MyCasesFilter from "../../components/search/MyCasesFilter";
|
||||
import ModalComments from "../modal/ModalComments.vue";
|
||||
import GroupedCell from "../../components/vuetable/GroupedCell.vue";
|
||||
import api from "../../api/index";
|
||||
import utils from "../../utils/utils";
|
||||
import defaultMixins from "./defaultMixins";
|
||||
|
||||
export default {
|
||||
name: "MyCases",
|
||||
mixins: [defaultMixins],
|
||||
components: {
|
||||
MyCasesFilter,
|
||||
HeaderCounter,
|
||||
@@ -85,6 +88,7 @@ export default {
|
||||
},
|
||||
props: ["filters", "defaultOption"],
|
||||
data() {
|
||||
let that = this;
|
||||
return {
|
||||
dataAlert: {
|
||||
dismissSecs: 5,
|
||||
@@ -150,6 +154,17 @@ export default {
|
||||
requestFunction(data) {
|
||||
return this.$parent.$parent.getCasesForVueTable(data);
|
||||
},
|
||||
settings: {
|
||||
"actions":{
|
||||
class: "fas fa-cog",
|
||||
id:"pm-dr-column-settings",
|
||||
events:{
|
||||
click(){
|
||||
that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
translations: null,
|
||||
pmDateFormat: window.config.FORMATS.dateFormat,
|
||||
46
resources/assets/js/home/MyCases/defaultMixins.js
Normal file
46
resources/assets/js/home/MyCases/defaultMixins.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import api from "../../api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
random: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Format columns for custom columns
|
||||
* @param {*} headings
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSettings(headings) {
|
||||
let res = [];
|
||||
_.forEach(headings, function (value, key) {
|
||||
if (key != "actions") {
|
||||
res.push({ value, key });
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
/**
|
||||
* Formating the columns selected
|
||||
* @param {*} columns
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSelected(columns) {
|
||||
let cols = _.clone(columns);
|
||||
cols.pop();
|
||||
return cols;
|
||||
},
|
||||
/**
|
||||
* Event handler when update the settings columns
|
||||
* @param {*} columns
|
||||
*/
|
||||
onUpdateColumnSettings(columns) {
|
||||
let cols = columns;
|
||||
if (_.findIndex(cols, 'actions') == -1) {
|
||||
cols.push("actions");
|
||||
}
|
||||
this.columns = cols;
|
||||
this.random = _.random(0, 10000000000);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,7 @@
|
||||
@onUpdateFilters="onUpdateFilters"
|
||||
/>
|
||||
<multiview-header :data="dataMultiviewHeader" />
|
||||
<settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
|
||||
<v-server-table
|
||||
v-if="typeView === 'GRID'"
|
||||
:data="tableData"
|
||||
@@ -16,6 +17,7 @@
|
||||
:options="options"
|
||||
ref="vueTable"
|
||||
@row-click="onRowClick"
|
||||
:key="random"
|
||||
>
|
||||
<div slot="detail" slot-scope="props">
|
||||
<div class="btn-default" @click="openCaseDetail(props.row)">
|
||||
@@ -200,6 +202,7 @@ export default {
|
||||
},
|
||||
props: ["defaultOption", "filters"],
|
||||
data() {
|
||||
let that = this;
|
||||
return {
|
||||
newCase: {
|
||||
title: this.$i18n.t("ID_NEW_CASE"),
|
||||
@@ -223,16 +226,15 @@ export default {
|
||||
options: {
|
||||
filterable: false,
|
||||
headings: {
|
||||
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"),
|
||||
task: this.$i18n.t("ID_TASK"),
|
||||
current_user: this.$i18n.t("ID_CURRENT_USER"),
|
||||
due_date: this.$i18n.t("ID_DUE_DATE"),
|
||||
delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
|
||||
priority: this.$i18n.t("ID_PRIORITY"),
|
||||
actions: "",
|
||||
detail: "",
|
||||
actions: ""
|
||||
},
|
||||
texts: {
|
||||
count:this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
|
||||
@@ -254,6 +256,17 @@ export default {
|
||||
requestFunction(data) {
|
||||
return this.$parent.$parent.getCasesForVueTable(data);
|
||||
},
|
||||
settings: {
|
||||
"actions":{
|
||||
class: "fas fa-cog",
|
||||
id:"pm-dr-column-settings",
|
||||
events:{
|
||||
click(){
|
||||
that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
pmDateFormat: "Y-m-d H:i:s",
|
||||
clickCount: 0,
|
||||
|
||||
@@ -4,6 +4,7 @@ export default {
|
||||
let that = this;
|
||||
return {
|
||||
typeView: "GRID",
|
||||
random: 1,
|
||||
dataMultiviewHeader: {
|
||||
actions: [
|
||||
{
|
||||
@@ -139,5 +140,41 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Format columns for custom columns
|
||||
* @param {*} headings
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSettings(headings) {
|
||||
let res=[];
|
||||
_.forEach(headings, function(value, key) {
|
||||
if(key != "actions"){
|
||||
res.push({value,key});
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
/**
|
||||
* Formating the columns selected
|
||||
* @param {*} columns
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSelected(columns) {
|
||||
let cols = _.clone(columns);
|
||||
cols.pop();
|
||||
return cols;
|
||||
},
|
||||
/**
|
||||
* Event handler when update the settings columns
|
||||
* @param {*} columns
|
||||
*/
|
||||
onUpdateColumnSettings(columns) {
|
||||
let cols = columns;
|
||||
if(_.findIndex(cols, 'actions') == -1){
|
||||
cols.push("actions");
|
||||
}
|
||||
this.columns = cols;
|
||||
this.random = _.random(0, 10000000000);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,12 +9,14 @@
|
||||
@onUpdateFilters="onUpdateFilters"
|
||||
/>
|
||||
<multiview-header :data="dataMultiviewHeader" />
|
||||
<settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
|
||||
<v-server-table
|
||||
v-if="typeView === 'GRID'"
|
||||
:columns="columns"
|
||||
:options="options"
|
||||
ref="vueTable"
|
||||
@row-click="onRowClick"
|
||||
:key="random"
|
||||
>
|
||||
<div slot="detail" slot-scope="props">
|
||||
<div class="btn-default" @click="openCaseDetail(props.row)">
|
||||
@@ -195,6 +197,7 @@ export default {
|
||||
},
|
||||
props: ["defaultOption", "filters"],
|
||||
data() {
|
||||
let that = this;
|
||||
return {
|
||||
newCase: {
|
||||
title: this.$i18n.t("ID_NEW_CASE"),
|
||||
@@ -217,16 +220,15 @@ export default {
|
||||
options: {
|
||||
filterable: false,
|
||||
headings: {
|
||||
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"),
|
||||
task: this.$i18n.t("ID_TASK"),
|
||||
current_user: this.$i18n.t("ID_CURRENT_USER"),
|
||||
due_date: this.$i18n.t("ID_DUE_DATE"),
|
||||
delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
|
||||
priority: this.$i18n.t("ID_PRIORITY"),
|
||||
actions: "",
|
||||
detail: "",
|
||||
actions: ""
|
||||
},
|
||||
texts: {
|
||||
count:this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
|
||||
@@ -248,6 +250,17 @@ export default {
|
||||
requestFunction(data) {
|
||||
return this.$parent.$parent.getCasesForVueTable(data);
|
||||
},
|
||||
settings: {
|
||||
"actions":{
|
||||
class: "fas fa-cog",
|
||||
id:"pm-dr-column-settings",
|
||||
events:{
|
||||
click(){
|
||||
that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
pmDateFormat: "Y-m-d H:i:s",
|
||||
clickCount: 0,
|
||||
|
||||
@@ -4,6 +4,7 @@ export default {
|
||||
let that = this;
|
||||
return {
|
||||
typeView: "GRID",
|
||||
random: 1,
|
||||
dataMultiviewHeader: {
|
||||
actions: [
|
||||
{
|
||||
@@ -135,5 +136,41 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Format columns for custom columns
|
||||
* @param {*} headings
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSettings(headings) {
|
||||
let res=[];
|
||||
_.forEach(headings, function(value, key) {
|
||||
if(key != "actions"){
|
||||
res.push({value,key});
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
/**
|
||||
* Formating the columns selected
|
||||
* @param {*} columns
|
||||
* @returns
|
||||
*/
|
||||
formatColumnSelected(columns) {
|
||||
let cols = _.clone(columns);
|
||||
cols.pop();
|
||||
return cols;
|
||||
},
|
||||
/**
|
||||
* Event handler when update the settings columns
|
||||
* @param {*} columns
|
||||
*/
|
||||
onUpdateColumnSettings(columns) {
|
||||
let cols = columns;
|
||||
if(_.findIndex(cols, 'actions') == -1){
|
||||
cols.push("actions");
|
||||
}
|
||||
this.columns = cols;
|
||||
this.random = _.random(0, 10000000000);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,9 @@ import VueRouter from "vue-router";
|
||||
import VueSidebarMenu from "vue-sidebar-menu";
|
||||
import VueI18n from 'vue-i18n';
|
||||
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
|
||||
import { ServerTable, Event, ClientTable} from 'vue-tables-2';
|
||||
import { ServerTable, Event, ClientTable } from 'vue-tables-2';
|
||||
import VtTableHeadingCustom from './../components/vuetable/extends/VtTableHeadingCustom';
|
||||
import SettingsPopover from "../components/vuetable/SettingsPopover.vue";
|
||||
import Sortable from 'sortablejs';
|
||||
import "@fortawesome/fontawesome-free/css/all.css";
|
||||
import "@fortawesome/fontawesome-free/js/all.js";
|
||||
@@ -18,8 +20,11 @@ Vue.use(BootstrapVue);
|
||||
Vue.use(BootstrapVueIcons);
|
||||
Vue.use(VueI18n);
|
||||
|
||||
Vue.use(ServerTable, {}, false, 'bootstrap3', {});
|
||||
Vue.use(ServerTable, {}, false, 'bootstrap3', {
|
||||
tableHeading: VtTableHeadingCustom
|
||||
});
|
||||
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
|
||||
Vue.component('settings-popover', SettingsPopover);
|
||||
window.ProcessMaker = {
|
||||
apiClient: require('axios')
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user