fix CR notes
This commit is contained in:
Rodrigo Quelca
@@ -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);
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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),
|
||||
});
|
||||
Reference in New Issue
Block a user