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

fix conflicts

Browse Source 
fix

Revert "fix"

This reverts commit 6d21e322081ecd8b89db4d6c07c6c8a82b2549a6.

add advanced-search main

fix header

gif Home

fix missed code

CR notes

CR notes 2

CR notes 5

CR notes 8
This commit is contained in:
Rodrigo Quelca
2020-12-04 20:36:42 +00:00
parent 9e6414a4b2
commit ffda3997d5
18 changed files with 1557 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/assets/js/api/Cases.js
View File

@@ -1,5 +1,6 @@
import axios from "axios"; import axios from "axios";
import headerData from "./../mocks/casesHeader.json"; import headerData from "./../mocks/casesHeader.json";
import startedCasesFaker from "./../mocks/startedCasesFaker.js";
import Api from "./Api.js"; import Api from "./Api.js";
export let cases = { export let cases = {
@@ -32,6 +33,14 @@ export let cases = {
return axios.post(window.config.SYS_SERVER + return axios.post(window.config.SYS_SERVER +
window.config.SYS_URI + window.config.SYS_URI +
`cases/casesStartPage_Ajax.php`, params); `cases/casesStartPage_Ajax.php`, params);
},
//remove this section
search(data) {
return new Promise((resolutionFunc, rejectionFunc) => {
resolutionFunc(startedCasesFaker);
});
} }
}; };

343
resources/assets/js/components/search/GenericFilter.vue Normal file
View File

@@ -0,0 +1,343 @@
<template>
<div>
<b-container fluid class="bv-example-row" id="my-container">
<b-row>
<b-col md="10"><h5>Advanced Search</h5></b-col>
<b-col md="2">
<b-button variant="success" size="sm" class="float-right"
><b-icon icon="plus"></b-icon>Request</b-button
>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<div class="d-flex flex-row">
<SearchPopover
target="popover-target-1"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<b-button
id="popover-target-1"
variant="success"
size="sm"
href="#"
tabindex="0"
>
<b-icon icon="plus"></b-icon>Add Filter
</b-button>
</template>
<template v-slot:body>
<b-form-group
label="Add Serch filter criteria: "
>
<b-form-checkbox-group
v-model="selected"
:options="filterOptions"
name="flavour-2a"
stacked
></b-form-checkbox-group>
</b-form-group>
</template>
</SearchPopover>
<b-button
size="sm"
@click="cleanAllTags"
variant="danger"
>Clean All</b-button
>
</div>
</b-col>
<b-col md="8">
<div class="d-flex flex-row-reverse">
<div class="p-2">
<b-button v-b-modal.modal-prevent-closing variant="primary" size="sm">
<b-icon icon="menu-button"></b-icon>Save Search
</b-button>
</div>
<div class="p-2">
<b-button variant="danger" size="sm" @click="onDeleteSearch">
<b-icon icon="trash"></b-icon>Delete Search
</b-button>
</div>
<div class="p-2">
<b-button variant="success" size="sm" @click="onJumpCase">
<b-icon icon="arrow-up-right-square"></b-icon>
Jump
</b-button>
</div>
<div class="p-2">
<input v-model="caseNumber" size="7" type="text" class="form-control" placeholder="Case Number"/>
</div>
</div>
</b-col>
</b-row>
<b-row>
<b-col>
<div class="d-flex flex-row">
<b-form-tags
input-id="tags-pills"
v-model="searchTags"
size="sm"
>
<template v-slot="{ tags, tagVariant, removeTag }">
<div
class="d-inline-block"
style="font-size: 1rem;"
>
<b-form-tag
v-for="tag in tags"
@remove="customRemove(removeTag, tag)"
:key="tag"
:title="tag"
:variant="tagVariant"
class="mr-1"
>
<component v-bind:is="tag"
v-bind:info="searchTagsModels[tag]"
v-bind:tag="tag"
@updateSearchTag="updateSearchTag"
/>
</b-form-tag>
</div>
</template>
</b-form-tags>
<b-input-group-append>
<b-button
pill
variant="outline-secondary"
class="pull-right"
@click="onSearch"
>
<b-icon icon="search"></b-icon>
</b-button>
</b-input-group-append>
</div>
</b-col>
</b-row>
<b-modal
id="modal-prevent-closing"
ref="modal"
:title="saveModalTitle"
@show="resetModal"
@hidden="resetModal"
@ok="handleOk"
>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
:state="nameState"
label="Name"
label-for="name-input"
invalid-feedback="Name is required"
>
<b-form-input
id="name-input"
v-model="name"
:state="nameState"
required
></b-form-input>
</b-form-group>
</form>
</b-modal>
</b-container>
</div>
</template>
<script>
import SearchPopover from "./popovers/SearchPopover.vue";
import CaseNumber from "./popovers/CaseNumber.vue";
import DueDate from "./popovers/DueDate.vue";
import CaseTitle from "./popovers/CaseTitle.vue";
import ProcessName from "./popovers/ProcessName.vue";
import ParticipatedLevel from "./popovers/ParticipatedLevel.vue";
import CasePriority from "./popovers/CasePriority.vue";
import SentBy from "./popovers/SentBy.vue";
import CaseStatus from "./popovers/CaseStatus.vue";
export default {
name: "GenericFilter",
components: {
SearchPopover,
CaseNumber,
DueDate,
CaseTitle,
ProcessName,
ParticipatedLevel,
SentBy,
CaseStatus
},
data() {
return {
searchTags: [],
searchTagsModels: {
"CaseNumber": {
text: "#",
tagText: "From: 1, 3, 7 To: 15",
default: {
from: "",
to: "",
},
},
"DueDate": {
text: "Due Date",
tagText: "From: 01-01-2020 To: 01-01-2020",
default: {
from: "",
to: "",
},
},
"CaseTitle": {
text: "Case",
tagText: "Case: title",
default: {
name: ""
}
},
"ProcessName": {
text: "Process",
tagText: "Process: name",
default: {
name: ""
}
},
"ParticipatedLevel": {
text: "Participated",
tagText: "Process: name",
default: {
name: ""
}
},
"CasePriority": {
text: "Priority",
tagText: "Process: name",
title: "Filter: Priority",
label: "Please select the priority for the search",
options: [
{ text: 'Very Low', value: '1' },
{ text: 'Low', value: '2' },
{ text: 'Niormal', value: '3' },
{ text: 'Very High', value: '4' },
{ text: 'High', value: '5' }
]
},
"SentBy": {
text: "Sent By",
title: "Filter: Sent By",
placeHolder: "User name",
},
"CaseStatus": {
text: "Status",
title: "Filter: Case Status",
label: "Please select the status for the search",
options: [
{ text: 'Draft', value: '1' },
{ text: 'To Do', value: '2' },
{ text: 'Completed', value: '4' },
{ text: 'Canceled', value: '5' },
{ text: 'Paused', value: '6' }
]
},
},
text: "",
selected: [],
jsonFilter: {},
caseNumber: "",
saveModalTitle: "SaveSearch",
name: '',
nameState: null
};
},
computed: {
filterOptions: function() {
let options = [];
_.forIn(this.searchTagsModels, function(value, key) {
options.push({
text: value.text,
value: key,
});
});
return options;
}
},
methods: {
onClose() {
this.popoverShow = false;
},
onOk() {
this.searchTags = [...this.searchTags, ...this.selected];
this.onClose();
},
cleanAllTags() {
this.searchTags = [];
this.jsonFilter = {
search: "",
};
},
customRemove (removeTag, tag) {
removeTag(tag);
this.jsonFilter = {
search: "",
};
},
onSearch() {
this.$emit("onSearch", this.jsonFilter);
},
updateSearchTag(params) {
this.jsonFilter = {...this.jsonFilter, ...params}
},
onJumpCase() {
this.$emit("onJumpCase", {caseNumber: this.caseNumber});
},
/**
* Delete Search handler
*/
onDeleteSearch () {
},
checkFormValidity() {
const valid = this.$refs.form.checkValidity();
this.nameState = valid;
return valid;
},
resetModal() {
this.name = '';
this.nameState = null;
},
handleOk(bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault();
// Trigger submit handler
this.handleSubmit();
},
handleSubmit() {
// Exit when the form isn't valid
if (!this.checkFormValidity()) {
return;
}
// Hide the modal manually
this.$nextTick(() => {
this.$bvModal.hide('modal-prevent-closing');
});
}
},
};
</script>
<style scoped>
.bv-example-row .row + .row {
margin-top: 1rem;
}
.bv-example-row-flex-cols .row {
min-height: 10rem;
}
</style>

83
resources/assets/js/components/search/SearchDataTable.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<div :class="`VueTables VueTables--${props.source}`" slot-scope="props">
<div :class="props.theme.row">
<div :class="props.theme.column">
<div v-if="!props.opts.filterByColumn && props.opts.filterable"
:class="`${props.theme.field} ${props.theme.inline} ${props.theme.left} VueTables__search`">
<vnodes :vnodes="props.slots.beforeFilter"/>
<vt-generic-filter ref="genericFilter"/>
<vnodes :vnodes="props.slots.afterFilter"/>
</div>
<vnodes :vnodes="props.slots.afterFilterWrapper"/>
<div v-if="props.perPageValues.length > 1 || props.opts.alwaysShowPerPageSelect"
:class="`${props.theme.field} ${props.theme.inline} ${props.theme.right} VueTables__limit`">
<vnodes :vnodes="props.slots.beforeLimit"/>
<vt-per-page-selector/>
<vnodes :vnodes="props.slots.afterLimit"/>
</div>
{{ props.generic}}
<GenericFilter @onSearch="onSearch" @onJumpCase="onJumpCase"/>
<div class="VueTables__pagination-wrapper" v-if="props.opts.pagination.dropdown && props.totalPages > 1">
<div :class="`${props.theme.field} ${props.theme.inline} ${props.theme.right} VueTables__dropdown-pagination`">
<vt-dropdown-pagination/>
</div>
</div>
<div v-if="props.opts.columnsDropdown"
:class="`VueTables__columns-dropdown-wrapper ${props.theme.right} ${props.theme.dropdown.container}`">
<vt-columns-dropdown/>
</div>
</div>
</div>
<vnodes :vnodes="props.slots.beforeTable"/>
<div class="table-responsive">
<vt-table ref="vt_table"/>
</div>
<vnodes :vnodes="props.slots.afterTable"/>
<vt-pagination/>
</div>
</template>
<script>
import VtColumnsDropdown from 'vue-tables-2/compiled/components/VtColumnsDropdown'
import VtDropdownPagination from 'vue-tables-2/compiled/components/VtDropdownPagination'
import VtGenericFilter from 'vue-tables-2/compiled/components/VtGenericFilter'
import VtPerPageSelector from 'vue-tables-2/compiled/components/VtPerPageSelector';
import VtPagination from 'vue-tables-2/compiled/components/VtPagination'
import VtTable from 'vue-tables-2/compiled/components/VtTable';
import GenericFilter from './GenericFilter'
export default {
name: "SearchDataTable",
props: ['props'],
components: {
VtGenericFilter,
VtPerPageSelector,
VtColumnsDropdown,
VtDropdownPagination,
VtTable,
VtPagination,
GenericFilter,
vnodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes
}
},
methods: {
onSearch(jsonFilter) {
this.$parent.$parent.$emit("onsearch", jsonFilter);
},
onJumpCase(params) {
this.$parent.$parent.$emit("onjumpcase", params);
}
}
}
</script>

77
resources/assets/js/components/search/popovers/CaseNumber.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div>
<SearchPopover
:target="tag"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<div @click="onClickTag(tag)" :id="tag">
<i class="fas fa-tags"></i>
{{ tagText }}
</div>
</template>
<template v-slot:body>
<div class="row">
<div class="col">
<input
v-model="from"
type="text"
size="210"
class="form-control"
placeholder="From Case number #"
/>
</div>
<div class="col">
<input
v-model="to"
type="text"
size="210"
class="form-control"
placeholder="To Case number # (Optional)"
/>
</div>
</div>
</template>
</SearchPopover>
</div>
</template>
<script>
import SearchPopover from "./SearchPopover.vue";
export default {
components: {
SearchPopover,
},
props: ["tag", "info"],
data() {
return {
from: "",
to: "",
};
},
computed: {
tagText: function() {
return `From: ${this.from} To: ${this.to}`;
},
},
methods: {
onClose() {},
onOk() {
this.$emit("updateSearchTag", { from: this.from, to: this.to });
},
onRemoveTag() {},
onClickTag(tag) {
this.$root.$emit("bv::hide::popover");
},
handler() {
},
},
};
</script>
<style scoped>
.popovercustom {
max-width: 650px !important;
}
</style>

64
resources/assets/js/components/search/popovers/CasePriority.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div id="">
<SearchPopover
:target="tag"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<div @click="onClickTag(tag)" :id="tag">
<b-icon icon="tags-fill" font-scale="1"></b-icon>
{{ tagText }}
</div>
</template>
<template v-slot:body>
<h6>{{ info.title }}</h6>
<b-form-group :label="info.label">
<b-form-checkbox
v-for="option in info.options"
v-model="selected"
:key="option.value"
:value="option.value"
name="flavour-2a"
stacked
>
{{ option.text }}
</b-form-checkbox>
</b-form-group>
</template>
</SearchPopover>
</div>
</template>
|
<script>
import SearchPopover from "./SearchPopover.vue";
export default {
components: {
SearchPopover,
},
props: ["tag", "info"],
data() {
return {
selected: [], // Must be an array reference!
};
},
computed: {
tagText: function() {
return `Priority: `;
},
},
methods: {
onClose() {
},
onOk() {
},
onRemoveTag() {},
onClickTag(tag) {
this.$root.$emit("bv::hide::popover");
},
},
};
</script>
<style scoped></style>

64
resources/assets/js/components/search/popovers/CaseStatus.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div id="">
<SearchPopover
:target="tag"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<div @click="onClickTag(tag)" :id="tag">
<b-icon icon="tags-fill" font-scale="1"></b-icon>
{{ tagText }}
</div>
</template>
<template v-slot:body>
<h6>{{ info.title }}</h6>
<b-form-group :label="info.label">
<b-form-checkbox
v-for="option in info.options"
v-model="selected"
:key="option.value"
:value="option.value"
name="flavour-2a"
stacked
>
{{ option.text }}
</b-form-checkbox>
</b-form-group>
</template>
</SearchPopover>
</div>
</template>
|
<script>
import SearchPopover from "./SearchPopover.vue";
export default {
components: {
SearchPopover,
},
props: ["tag", "info"],
data() {
return {
selected: [], // Must be an array reference!
};
},
computed: {
tagText: function() {
return `Case Status: `;
},
},
methods: {
onClose() {
},
onOk() {
},
onRemoveTag() {},
onClickTag(tag) {
this.$root.$emit("bv::hide::popover");
},
},
};
</script>
<style scoped></style>

62
resources/assets/js/components/search/popovers/CaseTitle.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div id="">
<SearchPopover
:target="tag"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<div @click="onClickTag(tag)" :id="tag">
<b-icon icon="tags-fill" font-scale="1"></b-icon>
{{ tagText }}
</div>
</template>
<template v-slot:body>
<h6>Filter: Case Title</h6>
<input
v-model="title"
type="text"
size="150"
class="form-control"
placeholder="Case Title Name"
/>
</template>
</SearchPopover>
</div>
</template>
|
<script>
import SearchPopover from "./SearchPopover.vue";
export default {
components: {
SearchPopover,
},
props: ["tag", "info"],
data() {
return {
title: "",
};
},
computed: {
tagText: function() {
return `Case: ${this.title}`;
},
},
methods: {
onClose() {
},
onOk() {
this.$emit("updateSearchTag", {
columnSearch: "APP_TITLE",
search: this.title,
});
},
onRemoveTag() {},
onClickTag(tag) {
this.$root.$emit("bv::hide::popover");
},
},
};
</script>
<style scoped></style>

51
resources/assets/js/components/search/popovers/Category.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div id="">
<SearchPopover
:target="tag"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<div @click="onClickTag(tag)" :id="tag">
<b-icon icon="tags-fill" font-scale="1"></b-icon>
{{ info.tagText }}
</div>
</template>
<template v-slot:body>
<h6>Filter: Case Title</h6>
<input
type="text"
size="150"
class="form-control"
placeholder="Case Title Name"
/>
</template>
</SearchPopover>
</div>
</template>
<script>
import SearchPopover from "./SearchPopover.vue";
export default {
components: {
SearchPopover,
},
props: ["tag", "info"],
data() {
return {};
},
computed: {},
methods: {
onClose() {
},
onOk() {
},
onClickTag(tag) {
this.$root.$emit("bv::hide::popover");
},
},
};
</script>
<style scoped></style>

78
resources/assets/js/components/search/popovers/DueDate.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div id="">
<SearchPopover
:target="tag"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<div
@click="onClickTag(tag)"
:id="tag"
>
<b-icon
icon="tags-fill"
font-scale="1"
></b-icon>
{{
tagText
}}
</div>
</template>
<template v-slot:body>
<div class="row">
<div class="col">
<b-form-datepicker id="from" v-model="from" placeholder="From Due Date"></b-form-datepicker>
</div>
<div class="col">
<b-form-datepicker id="to" v-model="to" placeholder="To Due Date"></b-form-datepicker>
</div>
</div>
</template>
</SearchPopover>
</div>
</template>
<script>
import SearchPopover from "./SearchPopover.vue";
export default {
components: {
SearchPopover,
},
props: ['tag','info'],
data() {
return {
from: "",
to: ""
};
},
computed: {
tagText: function() {
return `From: ${this.from} To: ${this.to}`;
},
},
methods: {
onClose() {
// this.popoverShow = false;
// this.$emit("closePopover");
},
onOk() {
this.$emit("updateSearchTag", {
columnSearch: "APP_TITLE",
search: null,
dateFrom: this.from,
dateTo: this.to
});
},
onClickTag(tag) {
this.$root.$emit("bv::hide::popover");
}
},
};
</script>
<style scoped>
</style>

73
resources/assets/js/components/search/popovers/ParticipatedLevel.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div id="">
<SearchPopover
:target="tag"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<div @click="onClickTag(tag)" :id="tag">
<b-icon icon="tags-fill" font-scale="1"></b-icon>
{{ tagText }}
</div>
</template>
<template v-slot:body>
<h6>Filter: Participated</h6>
<b-form-group
label="Please select the participation for the search"
>
<b-form-checkbox
v-for="option in options"
v-model="selected"
:key="option.value"
:value="option.value"
name="flavour-2a"
stacked
>
{{ option.text }}
</b-form-checkbox>
</b-form-group>
</template>
</SearchPopover>
</div>
</template>
|
<script>
import SearchPopover from "./SearchPopover.vue";
export default {
components: {
SearchPopover,
},
props: ["tag", "info"],
data() {
return {
selected: [], // Must be an array reference!
options: [
{ text: "Started By Me", value: "Started By Me" },
{ text: "Participated", value: "Participated" },
{ text: "Completed By Me", value: "Completed By Me" },
],
};
},
computed: {
tagText: function() {
return `Participated Level`;
},
},
methods: {
onClose() {},
onOk() {
this.$emit("updateSearchTag", {
columnSearch: "APP_TITLE",
search: this.title,
});
},
onRemoveTag() {},
onClickTag(tag) {
this.$root.$emit("bv::hide::popover");
},
},
};
</script>
<style scoped></style>

86
resources/assets/js/components/search/popovers/ProcessName.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<div id="">
<SearchPopover
:target="tag"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<div @click="onClickTag(tag)" :id="tag">
<b-icon icon="tags-fill" font-scale="1"></b-icon>
{{ tagText }}
</div>
</template>
<template v-slot:body>
<h6>Filter: Process</h6>
<vue-bootstrap-typeahead
class="mb-4"
v-model="query"
:data="process"
:serializer="(item) => item.PRO_TITLE"
@hit="selectedUser = $event"
placeholder="Search GitHub Users"
/>
</template>
</SearchPopover>
</div>
</template>
<script>
import SearchPopover from "./SearchPopover.vue";
import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
// OR
export default {
components: {
SearchPopover,
VueBootstrapTypeahead,
},
props: ["tag", "info"],
data() {
return {
query: "",
process: [],
};
},
computed: {
ProcessMaker() {
return window.ProcessMaker;
},
tagText: function() {
return `Process: ${this.query}`;
},
},
watch: {
query(newQuery) {
ProcessMaker.apiClient
.post(
`http://localhost:350/sysworkflow/en/neoclassic/cases/casesList_Ajax?actionAjax=processListExtJs&action=search`,
{
query: this.query,
}
)
.then((response) => {
this.process = response.data;
})
.catch((err) => {
console.error(err);
});
},
},
methods: {
onClose() {},
onOk() {
this.$emit("updateSearchTag", {
columnSearch: "APP_TITLE",
process_label: this.query,
process: _.find(this.process, { PRO_TITLE: this.query }).PRO_ID,
});
},
onClickTag(tag) {
this.$root.$emit("bv::hide::popover");
},
},
};
</script>
<style scoped></style>

59
resources/assets/js/components/search/popovers/SearchPopover.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<div>
<slot name="target-item">here component</slot>
<b-popover
:show.sync="popoverShow"
:target="target"
triggers="click"
placement="bottom"
class="popovercustom"
>
<template #title>
<b-button @click="onClose" class="close" aria-label="Close">
<span class="d-inline-block" aria-hidden="true"
>&times;</span
>
</b-button>
&nbsp;
</template>
<div>
<slot name="body">
popover body
</slot>
<div class="float-right">
<b-button @click="onClose" size="sm" variant="danger">Cancel</b-button>
<b-button @click="onSave" size="sm" variant="primary">Save</b-button>
</div>
</div>
</b-popover>
</div>
</template>
<script>
export default {
props: ['target'],
data() {
return {
popoverShow: false
};
},
methods: {
onClose() {
this.popoverShow = false;
this.$emit('closePopover');
},
onSave() {
this.$emit('savePopover');
this.onClose();
},
},
};
</script>
</script>
<style scoped>
.popover {
max-width: 650px !important;
min-width: 400px !important;
}
</style>

70
resources/assets/js/components/search/popovers/SentBy.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<div id="">
<SearchPopover
:target="tag"
@closePopover="onClose"
@savePopover="onOk"
>
<template v-slot:target-item>
<div
@click="onClickTag(tag)"
:id="tag"
>
<b-icon
icon="tags-fill"
font-scale="1"
></b-icon>
{{
tagText
}}
</div>
</template>
<template v-slot:body>
<h6>{{ info.title }}</h6>
<input v-model="title" type="text" size="150" class="form-control" :placeholder="info.placeHolder">
</template>
</SearchPopover>
</div>
</template>
|
<script>
import SearchPopover from "./SearchPopover.vue";
export default {
components: {
SearchPopover,
},
props: ['tag','info'],
data() {
return {
title: ''
};
},
computed: {
tagText: function () {
return `Set By: `;
}
},
methods: {
onClose() {
},
onOk() {
this.$emit("updateSearchTag", {
columnSearch: "APP_TITLE",
search: this.title,
});
},
onRemoveTag() {
},
onClickTag(tag) {
this.$root.$emit("bv::hide::popover");
}
},
};
</script>
<style scoped>
</style>

3
resources/assets/js/components/utils/Fail.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<div>Error</div>
</template>

22
resources/assets/js/components/utils/Loading.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div id='loading'></div>
</template>
<script>
export default {
name: "Loading"
};
</script>
<style lang="scss">
#loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(/images/gears.gif) 50% 50% no-repeat rgba(255, 255, 255, 1);
}
</style>

408
resources/assets/js/home/AdvancedSearch.vue Normal file
View File

@@ -0,0 +1,408 @@
<template>
<div id="v-mycases3" ref="v-mycases2" class="v-container-mycases">
<button-fleft :data="newCase"></button-fleft>
<GenericFilter/>
<modal-new-request ref="newRequest"></modal-new-request>
<v-server-table
:data="tableData"
:columns="columns"
:options="options"
ref="test"
>
<div slot="info" slot-scope="props">
<b-icon
icon="exclamation-circle-fill"
variant="primary"
@click="caseDetail(props)"
></b-icon>
</div>
<div slot="case_number" slot-scope="props">
{{ props.row.CASE_NUMBER }}
</div>
<div slot="case_title" slot-scope="props">
{{ props.row.CASE_TITLE }}
</div>
<div slot="process_name" slot-scope="props">
{{ props.row.PROCESS_NAME }}
</div>
<!-- <div slot="pending_taks" slot-scope="props">
<GroupedCell :data="props.row.PENDING_TASKS" />
</div> -->
<div slot="status" slot-scope="props">{{ props.row.STATUS }}</div>
<div slot="start_date" slot-scope="props">
{{ props.row.START_DATE }}
</div>
<div slot="finish_date" slot-scope="props">
{{ props.row.FINISH_DATE }}
</div>
<div slot="duration" slot-scope="props">
{{ props.row.DURATION }}
</div>
<div slot="actions" slot-scope="props">
<div class="btn-default">
<i class="fas fa-comments"></i>
<span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</div>
</div>
</v-server-table>
</div>
</template>
<script>
import ButtonFleft from "../components/home/ButtonFleft.vue";
import ModalNewRequest from "./ModalNewRequest.vue";
import GenericFilter from "../components/search/GenericFilter"
import api from "./../api/index";
export default {
name: "AdvancedSearch",
components: {
GenericFilter,
ButtonFleft,
ModalNewRequest
},
props: {},
data() {
return {
metrics: [],
filter: "CASES_INBOX",
allView: [],
filterHeader: "STARTED_BY_ME",
headers: [],
newCase: {
title: "New Case",
class: "btn-success",
onClick: () => {
this.$refs["newRequest"].show();
},
},
columns: [
"info",
"case_number",
"case_title",
"process_name",
"status",
"start_date",
"finish_date",
"duration",
"actions",
],
tableData: [],
options: {
filterable: false,
headings: {
info: "",
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
case_title: this.$i18n.t("ID_CASE_TITLE"),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
pending_taks: this.$i18n.t("PENDdING_TASKS"),
status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
start_date: this.$i18n.t("ID_START_DATE"),
finish_date: this.$i18n.t("ID_FINISH_DATE"),
duration: this.$i18n.t("ID_DURATION"),
actions: "",
},
selectable: {
mode: "single",
only: function(row) {
return true;
},
selectAllMode: "page",
programmatic: false,
},
requestFunction(data) {
return this.$parent.$parent.getCasesForVueTable();
},
},
translations: null,
pmDateFormat: "Y-m-d H:i:s",
apiParams: {
action: "todo",
list: "inbox",
filter: "",
search: "",
sort: "APP_NUMBER",
dir: "DESC",
category: "",
process: "",
filterStatus: "",
paged: true,
start: 0,
limit: 10,
},
};
},
mounted() {
// this.$refs.vueTable24.refresh();
this.$refs.test.refresh();
this.getHeaders();
},
watch: {},
computed: {
ProcessMaker() {
return window.ProcessMaker;
},
},
updated() {},
beforeCreate() {},
methods: {
/**
* Get Cases Headers from BE
*/
getHeaders() {
let that = this;
api.casesHeader.get().then((response) => {
that.headers = that.formatCasesHeaders(response.data);
});
},
/**
* Get cases data by header
*/
getCasesForVueTable() {
let that = this,
dt;
return new Promise((resolutionFunc, rejectionFunc) => {
api.cases
.search({
type: that.filterHeader,
})
.then((response) => {
dt = that.formatDataResponse(response.data);
resolutionFunc({
data: dt,
count: response.total,
});
})
.catch((e) => {
rejectionFunc(e);
});
});
},
/**
* Format Response API TODO to grid inbox and columns
*/
formatDataResponse(response) {
let data = [];
_.forEach(response, (v) => {
data.push({
CASE_NUMBER: v.APP_NUMBER,
CASE_TITLE: v.APP_TITLE,
PROCESS_NAME: v.PRO_TITLE,
STATUS: v.APP_STATUS,
START_DATE: v.DEL_DELEGATE_DATE_LABEL,
FINISH_DATE: v.DEL_DELEGATE_DATE_LABEL,
PENDING_TASKS: v.PENDING_TASKS,
DURATION: v.DURATION_LABEL,
});
});
return data;
},
/**
* Get for user format name configured in Processmaker Environment Settings
*
* @param {string} name
* @param {string} lastName
* @param {string} userName
* @return {string} nameFormat
*/
nameFormatCases(name, lastName, userName) {
let nameFormat = "";
if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
return nameFormat;
}
if (this.nameFormat === "@firstName @lastName") {
nameFormat = name + " " + lastName;
} else if (this.nameFormat === "@firstName @lastName (@userName)") {
nameFormat = name + " " + lastName + " (" + userName + ")";
} else if (this.nameFormat === "@userName") {
nameFormat = userName;
} else if (this.nameFormat === "@userName (@firstName @lastName)") {
nameFormat = userName + " (" + name + " " + lastName + ")";
} else if (this.nameFormat === "@lastName @firstName") {
nameFormat = lastName + " " + name;
} else if (this.nameFormat === "@lastName, @firstName") {
nameFormat = lastName + ", " + name;
} else if (
this.nameFormat === "@lastName, @firstName (@userName)"
) {
nameFormat = lastName + ", " + name + " (" + userName + ")";
} else {
nameFormat = name + " " + lastName;
}
return nameFormat;
},
/**
* Convert string to date format
*
* @param {string} value
* @return {date} myDate
*/
convertDate(value) {
myDate = new Date(1900, 0, 1, 0, 0, 0);
try {
if (!isNaN(Date.parse(value))) {
var myArray = value.split(" ");
var myArrayDate = myArray[0].split("-");
if (myArray.length > 1) {
var myArrayHour = myArray[1].split(":");
} else {
var myArrayHour = new Array("0", "0", "0");
}
var myDate = new Date(
myArrayDate[0],
myArrayDate[1] - 1,
myArrayDate[2],
myArrayHour[0],
myArrayHour[1],
myArrayHour[2]
);
}
} catch (err) {
throw new Error(err);
}
return myDate;
},
/**
* Get a format for specific date
*
* @param {string} d
* @return {string} dateToConvert
*/
dateFormatCases(d) {
let dateToConvert = d;
const stringToDate = this.convertDate(dateToConvert);
if (this.pmDateFormat === "Y-m-d H:i:s") {
dateToConvert = dateFormat(stringToDate, "yyyy-mm-dd HH:MM:ss");
} else if (this.pmDateFormat === "d/m/Y") {
dateToConvert = dateFormat(stringToDate, "dd/mm/yyyy");
} else if (this.pmDateFormat === "m/d/Y") {
dateToConvert = dateFormat(stringToDate, "mm/dd/yyyy");
} else if (this.pmDateFormat === "Y/d/m") {
dateToConvert = dateFormat(stringToDate, "yyyy/dd/mm");
} else if (this.pmDateFormat === "Y/m/d") {
dateToConvert = dateFormat(stringToDate, "yyyy/mm/dd");
} else if (this.pmDateFormat === "F j, Y, g:i a") {
dateToConvert = dateFormat(
stringToDate,
"mmmm d, yyyy, h:MM tt"
);
} else if (this.pmDateFormat === "m.d.y") {
dateToConvert = dateFormat(stringToDate, "mm.dd.yy");
} else if (this.pmDateFormat === "j, n, Y") {
dateToConvert = dateFormat(stringToDate, "d,m,yyyy");
} else if (this.pmDateFormat === "D M j G:i:s T Y") {
dateToConvert = dateFormat(
stringToDate,
"ddd mmm d HH:MM:ss Z yyyy"
);
} else if (this.pmDateFormat === "M d, Y") {
dateToConvert = dateFormat(stringToDate, "mmm dd, yyyy");
} else if (this.pmDateFormat === "m D, Y") {
dateToConvert = dateFormat(stringToDate, "mm ddd, yyyy");
} else if (this.pmDateFormat === "D d M, Y") {
dateToConvert = dateFormat(stringToDate, "ddd dd mmm, yyyy");
} else if (this.pmDateFormat === "D M, Y") {
dateToConvert = dateFormat(stringToDate, "ddd mmm, yyyy");
} else if (this.pmDateFormat === "d M, Y") {
dateToConvert = dateFormat(stringToDate, "dd mmm, yyyy");
} else if (this.pmDateFormat === "d m, Y") {
dateToConvert = dateFormat(stringToDate, "dd mm, yyyy");
} else if (this.pmDateFormat === "d.m.Y") {
dateToConvert = dateFormat(stringToDate, "mm.dd.yyyy");
} else {
dateToConvert = dateFormat(
stringToDate,
'dd "de" mmmm "de" yyyy'
);
}
return dateToConvert;
},
/**
* Open selected cases in the inbox
*
* @param {object} item
*/
openCase(item) {
const action = "todo";
if (this.isIE) {
window.open(
"../../../cases/open?APP_UID=" +
item.row.APP_UID +
"&DEL_INDEX=" +
item.row.DEL_INDEX +
"&action=" +
action
);
} else {
window.location.href =
"../../../cases/open?APP_UID=" +
item.row.APP_UID +
"&DEL_INDEX=" +
item.row.DEL_INDEX +
"&action=" +
action;
}
},
/**
* Format Response from HEADERS
* @param {*} response
*/
formatCasesHeaders(response) {
let data = [],
that = this,
info = {
STARTED_BY_ME: {
icon: "fas fa-inbox",
class: "btn-primary",
},
COMPLETED: {
icon: "fas fa-check-square",
class: "btn-success",
},
IN_PROGRESS: {
icon: "fas fa-tasks",
class: "btn-danger",
},
SUPERVISING: {
icon: "fas fa-binoculars",
class: "btn-warning",
},
};
_.forEach(response, (v) => {
data.push({
title: v.name,
counter: v.count,
item: v.item,
icon: info[v.item].icon,
onClick: (obj) => {
that.filterHeader = obj.item;
that.$refs["vueTable"].getData();
},
class: info[v.item].class,
});
});
return data;
},
/**
* Open case detail
* @param {*} item
*/
caseDetail(item) {
console.log("CaseDetail");
console.log("item");
}
},
};
</script>
<style>
.v-container-mycases {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;
}
</style>

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

@@ -26,12 +26,14 @@ import MyDocuments from "./MyDocuments";
import BatchRouting from "./BatchRouting"; import BatchRouting from "./BatchRouting";
import XCase from "./XCase"; import XCase from "./XCase";
import TaskReassignments from "./TaskReassignments"; import TaskReassignments from "./TaskReassignments";
import AdvancedSearch from "./AdvancedSearch"
export default { export default {
name: "Home", name: "Home",
components: { components: {
CustomSidebar, CustomSidebar,
MyCases, MyCases,
AdvancedSearch,
MyDocuments, MyDocuments,
BatchRouting, BatchRouting,
TaskReassignments, TaskReassignments,

1
resources/assets/js/mocks/menu.json
View File

@@ -11,6 +11,7 @@
}, },
{ {
"href": "/advanced-search", "href": "/advanced-search",
"id": "advanced-search",
"title": "Advanced Search", "title": "Advanced Search",
"icon": "fas fa-search" "icon": "fas fa-search"
}, },