Merge pull request 'dev' (#50) from dev into master
Reviewed-on: WillaEngine-Project/WillaEngine#50pull/87/head
commit
4ab570a14c
@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<slot :filter="filter"></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let cancelId;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AutoCompleteWrapper",
|
||||||
|
props: {
|
||||||
|
callback: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
filter(e) {
|
||||||
|
clearTimeout(cancelId);
|
||||||
|
if (
|
||||||
|
e.target.value &&
|
||||||
|
e.target.value.length > 1 &&
|
||||||
|
e.code !== "Tab" &&
|
||||||
|
e.code !== "Enter"
|
||||||
|
) {
|
||||||
|
cancelId = setTimeout(() => {
|
||||||
|
this.$emit('filter', e.target.value);
|
||||||
|
this.callback(e.target.value);
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
@ -1,53 +1,70 @@
|
|||||||
<template>
|
<template>
|
||||||
<prism-editor class="my-editor LTR height-300 " v-model="code" :highlight="highlighter" line-numbers></prism-editor>
|
<prism-editor
|
||||||
|
class="my-editor LTR height-300"
|
||||||
|
v-model="code"
|
||||||
|
:highlight="highlighter"
|
||||||
|
line-numbers
|
||||||
|
></prism-editor>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import Prism Editor
|
// import Prism Editor
|
||||||
import { PrismEditor } from 'vue-prism-editor';
|
import { PrismEditor } from "vue-prism-editor";
|
||||||
import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere
|
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||||
|
|
||||||
// import highlighting library (you can use any library you want just return html string)
|
// import highlighting library (you can use any library you want just return html string)
|
||||||
import { highlight, languages } from 'prismjs/components/prism-core';
|
import { highlight, languages } from "prismjs/components/prism-core";
|
||||||
import 'prismjs/components/prism-clike';
|
import "prismjs/components/prism-clike";
|
||||||
import 'prismjs/components/prism-javascript';
|
import "prismjs/components/prism-javascript";
|
||||||
import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles
|
import "prismjs/components/prism-css";
|
||||||
|
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
PrismEditor,
|
PrismEditor,
|
||||||
},
|
},
|
||||||
data: () => ({ code: 'console.log("Hello World")' }),
|
props: ["value", "language"],
|
||||||
methods: {
|
data: () => ({}),
|
||||||
highlighter(code) {
|
methods: {
|
||||||
return highlight(code, languages.js); // languages.<insert language> to return html with markup
|
highlighter(code) {
|
||||||
},
|
return highlight(code, languages[this.language]); // languages.<insert language> to return html with markup
|
||||||
},
|
},
|
||||||
};
|
},
|
||||||
|
computed: {
|
||||||
|
code: {
|
||||||
|
get() {
|
||||||
|
return this.value;
|
||||||
|
},
|
||||||
|
set(e) {
|
||||||
|
this.$emit("input", e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.height-300 {
|
.height-300 {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
/* required class */
|
/* required class */
|
||||||
.my-editor {
|
.my-editor {
|
||||||
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
|
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
|
||||||
background: #f5f2f0;
|
background: #f5f2f0;
|
||||||
border: 1px solid #dcdcdc;
|
border: 1px solid #dcdcdc;
|
||||||
border-left: 10px solid #dcdcdc;
|
border-left: 10px solid #dcdcdc;
|
||||||
color: #5a6268;
|
color: #5a6268;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
/* you must provide font-family font-size line-height. Example: */
|
/* you must provide font-family font-size line-height. Example: */
|
||||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* optional class for removing the outline */
|
/* optional class for removing the outline */
|
||||||
.prism-editor__textarea:focus {
|
.prism-editor__textarea:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -0,0 +1,106 @@
|
|||||||
|
<template>
|
||||||
|
<v-tooltip
|
||||||
|
:top="top"
|
||||||
|
:bottom="bottom"
|
||||||
|
:left="left"
|
||||||
|
:right="right"
|
||||||
|
:color="tooltipColor"
|
||||||
|
:transition="transition"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on }">
|
||||||
|
<v-btn
|
||||||
|
slot="activator"
|
||||||
|
fab
|
||||||
|
:color="buttonColor"
|
||||||
|
:dark="dark"
|
||||||
|
:light="light"
|
||||||
|
v-on="on"
|
||||||
|
@click="$emit('click')"
|
||||||
|
:small="small"
|
||||||
|
:large="large"
|
||||||
|
:x-large="xLarge"
|
||||||
|
:x-small="xSmall"
|
||||||
|
>
|
||||||
|
<v-icon dark>{{ icon }}</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
<span>{{ text }}</span>
|
||||||
|
</v-tooltip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "tooltipButton",
|
||||||
|
props: {
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: "WMi-user",
|
||||||
|
},
|
||||||
|
buttonColor: {
|
||||||
|
type: String,
|
||||||
|
default: "black",
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: "متن پیش فرض",
|
||||||
|
},
|
||||||
|
tooltipColor: {
|
||||||
|
type: String,
|
||||||
|
default: "black",
|
||||||
|
},
|
||||||
|
top: {
|
||||||
|
type: Boolean,
|
||||||
|
default: function () {
|
||||||
|
return !this.bottom && !this.left && !this.right ? true : false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
bottom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
left: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
transition: {
|
||||||
|
type: String,
|
||||||
|
default: "fade-transition",
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
type: Boolean,
|
||||||
|
default: function () {
|
||||||
|
return !this.light ? true : false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
light: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
small: {
|
||||||
|
type: Boolean,
|
||||||
|
default: function () {
|
||||||
|
return !this.large && !this.xSmall && !this.xLarge ? true : false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
large: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
xSmall: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
xLarge: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
@ -0,0 +1,42 @@
|
|||||||
|
// Warn if overriding existing method
|
||||||
|
if(Array.prototype.equals)
|
||||||
|
console.warn("Overriding existing Array.prototype.equals. Possible causes: New API defines the method, there's a framework conflict or you've got double inclusions in your code.");
|
||||||
|
// attach the .equals method to Array's prototype to call it on any array
|
||||||
|
Array.prototype.equals = function (array) {
|
||||||
|
// if the other array is a falsy value, return
|
||||||
|
if (!array)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
// compare lengths - can save a lot of time
|
||||||
|
if (this.length != array.length)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
for (var i = 0, l=this.length; i < l; i++) {
|
||||||
|
// Check if we have nested arrays
|
||||||
|
if (this[i] instanceof Array && array[i] instanceof Array) {
|
||||||
|
// recurse into the nested arrays
|
||||||
|
if (!this[i].equals(array[i]))
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else if (this[i] != array[i]) {
|
||||||
|
// Warning - two different object instances will never be equal: {x:20} != {x:20}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
// Hide method from for-in loops
|
||||||
|
Object.defineProperty(Array.prototype, "equals", {enumerable: false});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Array.prototype.matchItems = function (array) {
|
||||||
|
// if the other array is a falsy value, return
|
||||||
|
if (!array)
|
||||||
|
return [];
|
||||||
|
|
||||||
|
return this.filter(item => array.includes(item));
|
||||||
|
}
|
||||||
|
// Hide method from for-in loops
|
||||||
|
Object.defineProperty(Array.prototype, "matchItems", {enumerable: false});
|
@ -0,0 +1,114 @@
|
|||||||
|
import {filterByLevel} from '@Global/utils/common/ProcessTreeArray'
|
||||||
|
export default class DynamicFilter {
|
||||||
|
|
||||||
|
constructor(arrayData, filterObject) {
|
||||||
|
this.arrayData = arrayData;
|
||||||
|
this.filterObject = filterObject;
|
||||||
|
|
||||||
|
for (const name in filterObject) {
|
||||||
|
if (filterObject.hasOwnProperty(name)) {
|
||||||
|
if(filterObject[name] && typeof filterObject[name].type !== 'undefined'){
|
||||||
|
this[filterObject[name].type](name);
|
||||||
|
} else {
|
||||||
|
this[name](this.filterObject[name]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.arrayData;
|
||||||
|
}
|
||||||
|
|
||||||
|
like(name) {
|
||||||
|
const value = this.filterObject[name].val;
|
||||||
|
if(value !== null) {
|
||||||
|
this.arrayData = this.arrayData.filter(data => data[name].indexOf(value) !== -1 );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
between(name) {
|
||||||
|
const value1 = this.filterObject[name].val1;
|
||||||
|
const value2 = this.filterObject[name].val2;
|
||||||
|
|
||||||
|
if (value1 && value2) {
|
||||||
|
if(typeof value1 === 'number' && typeof value2 === 'number') {
|
||||||
|
this.arrayData = this.arrayData.filter(data => value1 <= data[name] && data[name] <= value2);
|
||||||
|
} else {
|
||||||
|
let {from, to} = this.checkDateAndParse(value1, value2);
|
||||||
|
this.arrayData = this.arrayData.filter(data => {
|
||||||
|
const check = Date.parse(data[name]);
|
||||||
|
return check >= from && check <= to;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
} else if (value1) {
|
||||||
|
this.greater(name);
|
||||||
|
|
||||||
|
} else if(value2) {
|
||||||
|
this.less(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
checkDateAndParse(value1, value2) {
|
||||||
|
let from, to = null;
|
||||||
|
if(value1 && value1.length <= 10) {
|
||||||
|
from = Date.parse(value1 + 'T00:00:00');
|
||||||
|
} else {
|
||||||
|
from = Date.parse(value1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(value2 && value2.length <= 10) {
|
||||||
|
to = Date.parse(value2 + 'T23:59:59');
|
||||||
|
} else {
|
||||||
|
to = Date.parse(value1);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {from, to};
|
||||||
|
}
|
||||||
|
|
||||||
|
greater(name) {
|
||||||
|
const value1 = this.filterObject[name].val1;
|
||||||
|
|
||||||
|
if(typeof value1 === 'number') {
|
||||||
|
this.arrayData = this.arrayData.filter(data => value1 <= data[name]);
|
||||||
|
} else {
|
||||||
|
let {from} = this.checkDateAndParse(value1);
|
||||||
|
|
||||||
|
this.arrayData = this.arrayData.filter(data => {
|
||||||
|
const check = Date.parse(data[name]);
|
||||||
|
return check >= from;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
less(name) {
|
||||||
|
const value2 = this.filterObject[name].val2;
|
||||||
|
|
||||||
|
if(typeof value2 === 'number') {
|
||||||
|
this.arrayData = this.arrayData.filter(data => data[name] <= value2);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
let {to} = this.checkDateAndParse(value2);
|
||||||
|
|
||||||
|
this.arrayData = this.arrayData.filter(data => {
|
||||||
|
const check = Date.parse(data[name]);
|
||||||
|
return check <= to;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
in(name) {
|
||||||
|
const value = this.filterObject[name].val;
|
||||||
|
const key = this.filterObject[name].key ? this.filterObject[name].key : 'id';
|
||||||
|
this.arrayData = this.arrayData.filter(data => {
|
||||||
|
if (typeof data[name] === 'object') {
|
||||||
|
return data[name].map(item => item[key]).matchItems(value).length > 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
level(value) {
|
||||||
|
if(value) {
|
||||||
|
this.arrayData = filterByLevel(this.arrayData, value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue