PMCORE-3117:UI - New Custom Case List Setting Window, using Listbox
This commit is contained in:
Rodrigo Quelca
126
package-lock.json
generated
126
package-lock.json
generated
@@ -11,11 +11,44 @@
|
||||
"regenerator-runtime": "^0.13.2"
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.35",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
|
||||
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
|
||||
},
|
||||
"@fortawesome/fontawesome-free": {
|
||||
"version": "5.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
|
||||
"integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "1.2.35",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
|
||||
"integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.35"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-brands-svg-icons": {
|
||||
"version": "5.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
|
||||
"integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.35"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
|
||||
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.35"
|
||||
}
|
||||
},
|
||||
"@fortawesome/vue-fontawesome": {
|
||||
"version": "0.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.10.tgz",
|
||||
"integrity": "sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w=="
|
||||
},
|
||||
"@nuxt/opencollective": {
|
||||
"version": "0.3.2",
|
||||
@@ -36,6 +69,14 @@
|
||||
"vue": "^2.5.16"
|
||||
}
|
||||
},
|
||||
"@rightbraintechbd/vue-awesome-icon-picker": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@rightbraintechbd/vue-awesome-icon-picker/-/vue-awesome-icon-picker-1.1.0.tgz",
|
||||
"integrity": "sha512-7O01yWD2h/s4SeT3sB7UUfuSRBBaQm7csx/4NFjtt2vnlmbFIBuK5e8SFb6i7S4CdhdjeXUAdPOP8CiZcSg22Q==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-free": "^5.13.0"
|
||||
}
|
||||
},
|
||||
"@types/chart.js": {
|
||||
"version": "2.9.28",
|
||||
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.28.tgz",
|
||||
@@ -1487,6 +1528,16 @@
|
||||
"vue-functional-data-merge": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"bootstrap-vue-font-awesome-picker": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-vue-font-awesome-picker/-/bootstrap-vue-font-awesome-picker-0.1.3.tgz",
|
||||
"integrity": "sha512-gTji5kl03tw7rEjDi+YrY1JmsPPmD3kiu36VKkyZTjskgSStab8WY4qBL+RIKw3VegWCidkcZV6DukpD9FvEow==",
|
||||
"requires": {
|
||||
"bootstrap": "^4.4.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-click-outside": "^1.0.7"
|
||||
}
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@@ -2137,6 +2188,11 @@
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-fns": {
|
||||
"version": "0.0.10",
|
||||
"resolved": "https://registry.npmjs.org/color-fns/-/color-fns-0.0.10.tgz",
|
||||
"integrity": "sha512-QFKowTE9CXCLp09Gz5cQo8VPUP55hf73iHEI52JC3NyKfMpQG2VoLWmTxYeTKH6ngkEnoMrCdEX//M6J4PVQBA=="
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
@@ -4606,7 +4662,6 @@
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
@@ -4952,8 +5007,7 @@
|
||||
"js-tokens": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
|
||||
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
|
||||
"dev": true
|
||||
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "3.7.0",
|
||||
@@ -5306,7 +5360,6 @@
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
}
|
||||
@@ -8611,6 +8664,11 @@
|
||||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
|
||||
"dev": true
|
||||
},
|
||||
"pure-color": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
|
||||
"integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
|
||||
},
|
||||
"q": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
|
||||
@@ -10661,6 +10719,26 @@
|
||||
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
|
||||
"dev": true
|
||||
},
|
||||
"v-color": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/v-color/-/v-color-1.1.2.tgz",
|
||||
"integrity": "sha512-C3lbi9wjAnR4OVV41R73setGfdDAALcpv0u38vEqOpQY4nP7Tc7VyY2j/iUyKcSfOqczETas/xqIjeNvI7aHXQ==",
|
||||
"requires": {
|
||||
"invariant": "^2.2.4",
|
||||
"lodash": "^4.17.10",
|
||||
"object-assign": "^4.1.1",
|
||||
"pure-color": "^1.3.0",
|
||||
"v-ctrl": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"v-ctrl": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/v-ctrl/-/v-ctrl-1.1.0.tgz",
|
||||
"integrity": "sha1-1hj6Id0Skchi9VbTIiSJ5+ngiqg=",
|
||||
"requires": {
|
||||
"lodash": "^4.17.4"
|
||||
}
|
||||
},
|
||||
"validate-npm-package-license": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
|
||||
@@ -10704,6 +10782,23 @@
|
||||
"extsprintf": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"verte": {
|
||||
"version": "0.0.12",
|
||||
"resolved": "https://registry.npmjs.org/verte/-/verte-0.0.12.tgz",
|
||||
"integrity": "sha512-QEWpKkjAT8SLkNJzeiZxN7tJuUiTTFO51tg9dGIrkDlQhzbaM+bTT0wtDM2c/F+Ur9luE64qhsM4xI0Af3Ut1g==",
|
||||
"requires": {
|
||||
"color-fns": "^0.0.10"
|
||||
}
|
||||
},
|
||||
"vfa-picker": {
|
||||
"version": "5.9.1",
|
||||
"resolved": "https://registry.npmjs.org/vfa-picker/-/vfa-picker-5.9.1.tgz",
|
||||
"integrity": "sha512-HytUGQWlEEWTbPm+s7AVXql6WI0+YNu9JsIFYsxdwjw/n5+IWRjKybGpEieknbAUkZoFZWKtke7zykIO2yjixA==",
|
||||
"requires": {
|
||||
"core-js": "^2.6.5",
|
||||
"vue": "^2.6.10"
|
||||
}
|
||||
},
|
||||
"vm-browserify": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
|
||||
@@ -10732,6 +10827,11 @@
|
||||
"@types/chart.js": "^2.7.55"
|
||||
}
|
||||
},
|
||||
"vue-click-outside": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.1.0.tgz",
|
||||
"integrity": "sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ=="
|
||||
},
|
||||
"vue-clipboards": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-clipboards/-/vue-clipboards-1.3.0.tgz",
|
||||
@@ -10781,6 +10881,20 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.22.2.tgz",
|
||||
"integrity": "sha512-rb569fVJInPUgS/bbCxEQ9DrAoFTntuJvYoK4Fpk2VfNbA09WzdTKk57ppjz3S+ps9hW+p9H+2ASgMvojedkow=="
|
||||
},
|
||||
"vue-icon-picker": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-icon-picker/-/vue-icon-picker-1.0.0.tgz",
|
||||
"integrity": "sha512-pr1/SGnYXn+KwpM1gI4y/yOf8OGpsOaWYGZ2lLX8IxapkPDB7bNvRSeG7B9gCz3dG4iGwTB/kJo2ajrDaSaG5A==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.4",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.3.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.3.1",
|
||||
"@fortawesome/vue-fontawesome": "^0.1.1",
|
||||
"vue": "^2.5.17",
|
||||
"vue-click-outside": "^1.0.7",
|
||||
"vue-color": "^2.6.0"
|
||||
}
|
||||
},
|
||||
"vue-js-toggle-button": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-js-toggle-button/-/vue-js-toggle-button-1.3.3.tgz",
|
||||
|
||||
@@ -20,10 +20,12 @@
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rightbraintechbd/vue-awesome-icon-picker": "^1.1.0",
|
||||
"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",
|
||||
@@ -39,6 +41,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-awesome-swiper": "^3.1.3",
|
||||
"vue-chartjs": "^3.3.2",
|
||||
@@ -47,6 +52,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",
|
||||
|
||||
@@ -0,0 +1,230 @@
|
||||
<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>
|
||||
|
||||
|
||||
<v-client-table :columns="columns" v-model="data" :options="options">
|
||||
<a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>
|
||||
|
||||
<div slot="child_row" slot-scope="props">
|
||||
The link to {{props.row.name}} is <a :href="props.row.uri">{{props.row.uri}}</a>
|
||||
</div>
|
||||
|
||||
<div slot="name" slot-scope="{row, update, setEditing, isEditing, revertValue}">
|
||||
<span @click="setEditing(true)" v-if="!isEditing()">
|
||||
<a>{{row.name}}</a>
|
||||
</span>
|
||||
<span v-else>
|
||||
<input type="text" v-model="row.name">
|
||||
<button type="button" class="btn btn-info btn-xs" @click="update(row.name); setEditing(false)">Submit</button>
|
||||
<button type="button" class="btn btn-default btn-xs" @click="revertValue(); setEditing(false)">Cancel</button>
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</v-client-table>
|
||||
<b-form-group
|
||||
id="iconLabel"
|
||||
label="Icon "
|
||||
label-for="icon"
|
||||
>
|
||||
<icon-picker @selected="onSelectIcon" :color="menuColor"/>
|
||||
</b-form-group>
|
||||
<div>
|
||||
<b-form-group
|
||||
id="menuColor"
|
||||
label="Menu Color "
|
||||
label-for="icon"
|
||||
>
|
||||
<verte :value="menuColor" 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 id="screen" picker="square" menuPosition="left" model="rgb">
|
||||
<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">
|
||||
One of two columns
|
||||
|
||||
</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,
|
||||
menuColor:"#4287f5",
|
||||
pmTablesOptions: [],
|
||||
columns: ['name', 'code', 'uri'],
|
||||
data: utils.getData(),
|
||||
options: {
|
||||
headings: {
|
||||
name: 'Country Name',
|
||||
code: 'Country Code',
|
||||
uri: 'View Record'
|
||||
},
|
||||
filterable:true,
|
||||
editableColumns:['name'],
|
||||
sortable: ['name', 'code'],
|
||||
filterable: ['name', 'code']
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
onSelectIcon(data){
|
||||
console.log (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;
|
||||
}
|
||||
</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,25 +28,43 @@
|
||||
|
||||
</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;
|
||||
debugger;
|
||||
this.params = params;
|
||||
},
|
||||
onCloseSketch (params) {
|
||||
this.showSketch = false;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@@ -55,6 +55,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: '',
|
||||
iconColor: '',
|
||||
iconColorScreen:'',
|
||||
type: this.module
|
||||
|
||||
});
|
||||
|
||||
//TODO button
|
||||
}
|
||||
},
|
||||
@@ -76,8 +87,6 @@ export default {
|
||||
],
|
||||
tableData: [],
|
||||
options: {
|
||||
perPage:25,
|
||||
perPageValues:[25],
|
||||
filterable: true,
|
||||
headings: {
|
||||
name: this.$i18n.t("ID_NAME"),
|
||||
|
||||
@@ -10,14 +10,17 @@ 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";
|
||||
|
||||
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(BootstrapVueIcons)
|
||||
Vue.use(ServerTable, {}, false, 'bootstrap3', {});
|
||||
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
|
||||
window.ProcessMaker = {
|
||||
@@ -48,5 +51,6 @@ new Vue({
|
||||
// eslint-disable-line no-new
|
||||
el: "#customCaseList",
|
||||
router,
|
||||
components: { Verte },
|
||||
render: (h) => h(CustomCaseList),
|
||||
});
|
||||
210
resources/assets/js/components/iconPicker/IconPicker.vue
Normal file
210
resources/assets/js/components/iconPicker/IconPicker.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="rbt-icon-picker">
|
||||
|
||||
<b-button @click="popUpActive = true">
|
||||
<i ref="icon" v-bind:class="`${selectedIcon.type} fa-${selectedIcon.name}`" v-bind:color="color"></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
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
allIcons: {
|
||||
brand: [],
|
||||
regular: [],
|
||||
solid: []
|
||||
},
|
||||
|
||||
popUpActive: false,
|
||||
selectedIcon: {
|
||||
name: "list",
|
||||
type: "fas"
|
||||
},
|
||||
searchText: '',
|
||||
|
||||
searchIconNotFound: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color(){
|
||||
console.log("colores");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectIcon(icon, type) {
|
||||
this.selectedIcon.type = type;
|
||||
this.selectedIcon.name = icon;
|
||||
this.popUpActive = false;
|
||||
this.$emit('selected', this.selectedIcon);
|
||||
},
|
||||
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();
|
||||
},
|
||||
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>
|
||||
@@ -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
437
resources/assets/js/components/iconPicker/assets/icons/brand.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,7 @@
|
||||
import solid from "./solid";
|
||||
import regular from "./regular";
|
||||
import brand from "./brand";
|
||||
|
||||
const icons = { solid, brand, regular };
|
||||
|
||||
export default icons;
|
||||
@@ -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
962
resources/assets/js/components/iconPicker/assets/icons/solid.js
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user