Skip to content

Commit a1487c4

Browse files
franzwildingfranzwilding
authored
Feature/view filter (unite-cms#743) closes unite-cms#486 and closes unite-cms#453
* Start to implement view filter * Start implementing view search + advanced filter * feature unite-cms#486 [AdminBundle]: Implement view search + advanced search filter
1 parent ee9ace0 commit a1487c4

File tree

24 files changed

+797
-226
lines changed

24 files changed

+797
-226
lines changed

‎package-lock.json

+132-66
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
},
66
"devDependencies": {
77
"@symfony/webpack-encore": "^0.28.0",
8-
"core-js": "^3.0.0",
8+
"core-js": "^3.6.1",
99
"regenerator-runtime": "^0.13.2",
1010
"sass-loader": "^7.0.1",
1111
"vue-loader": "^15.0.11",

‎src/Bundle/AdminBundle/Resources/assets/app.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { Unite, VueUnite } from './vue/plugins/unite';
77
import IdList from "./vue/components/Fields/List/Id";
88
import TextList from "./vue/components/Fields/List/Text";
99
import EmailList from "./vue/components/Fields/List/Text";
10-
import IntegerList from "./vue/components/Fields/List/Text";
11-
import FloatList from "./vue/components/Fields/List/Text";
10+
import IntegerList from "./vue/components/Fields/List/Integer";
11+
import FloatList from "./vue/components/Fields/List/Float";
1212
import TextareaList from "./vue/components/Fields/List/Textarea";
1313
import WysiwygList from "./vue/components/Fields/List/Wysiwyg";
1414
import ChoiceList from "./vue/components/Fields/List/Choice";

‎src/Bundle/AdminBundle/Resources/assets/sass/components/_input.scss

+5
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,8 @@
1414
margin: $form-padding-vertical;
1515
}
1616
}
17+
18+
.uk-search-default .uk-search-input {
19+
background: $navbar-background;
20+
border-radius: 20px;
21+
}

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/Checkbox.vue

+26-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,31 @@
11
<template>
2-
<div>
3-
<template v-for="value in values">
4-
<icon :name="value ? 'check-circle' : 'x-circle'" :class="value ? 'uk-text-success' : 'uk-text-danger'" />
5-
<br v-if="!isLastValue(value)" />
6-
</template>
7-
</div>
2+
<div>
3+
<template v-for="value in values">
4+
<icon :name="value ? 'check-circle' : 'x-circle'" :class="value ? 'uk-text-success' : 'uk-text-danger'" />
5+
<br v-if="!isLastValue(value)" />
6+
</template>
7+
</div>
88
</template>
99
<script>
10-
import _abstract from "./_abstract";
11-
import Icon from "../../Icon";
10+
import _abstract from "./_abstract";
11+
import Icon from "../../Icon";
12+
import CheckboxInput from "../../Views/Filter/Input/CheckboxInput";
1213
13-
export default {
14-
extends: _abstract,
15-
components: {Icon}
16-
}
14+
export default {
15+
extends: _abstract,
16+
17+
// static filter method
18+
filter(field, view, unite) {
19+
return {
20+
searchable: false,
21+
id: field.id,
22+
label: field.name.slice(0, 1).toUpperCase() + field.name.slice(1),
23+
operators: ['IS'],
24+
cast: 'BOOLEAN',
25+
input: CheckboxInput
26+
};
27+
},
28+
29+
components: {Icon}
30+
}
1731
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/Choice.vue

+58-32
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,62 @@
11
<template>
2-
<div>
3-
<template v-for="value in values">
4-
<span class="uk-label uk-label-muted">{{ label(value) }}</span>
5-
<br v-if="!isLastValue(value)" />
6-
</template>
7-
</div>
2+
<div>
3+
<template v-for="value in values">
4+
<span class="uk-label uk-label-muted">{{ label(value) }}</span>
5+
<br v-if="!isLastValue(value)" />
6+
</template>
7+
</div>
88
</template>
99
<script>
10-
import _abstract from "./_abstract";
11-
export default {
12-
extends: _abstract,
13-
methods: {
14-
label(value) {
15-
16-
if(!value) {
17-
return null;
18-
}
19-
20-
let enumType = this.$unite.getRawType(this.field.returnType);
21-
22-
if(!enumType) {
23-
return null;
24-
}
25-
26-
let labels = enumType.enumValues.filter((val) => {
27-
return val.name === value;
28-
}).map((val) => {
29-
return val.description || val.name;
30-
});
31-
32-
return labels.length > 0 ? labels[0] : value;
33-
}
34-
}
35-
}
10+
import _abstract from "./_abstract";
11+
import SelectInput from "../../Views/Filter/Input/SelectInput";
12+
13+
export default {
14+
extends: _abstract,
15+
16+
// static filter method
17+
filter(field, view, unite) {
18+
19+
let enumType = unite.getRawType(field.returnType);
20+
21+
if(!enumType) {
22+
return false;
23+
}
24+
25+
return {
26+
searchable: false,
27+
id: field.id,
28+
label: field.name.slice(0, 1).toUpperCase() + field.name.slice(1),
29+
input: SelectInput,
30+
operators: ['EQ', 'NEQ'],
31+
inputProps: {
32+
options: enumType.enumValues.map((value) => {
33+
return {label: value.description, value: value.name}
34+
})
35+
},
36+
};
37+
},
38+
39+
methods: {
40+
label(value) {
41+
42+
if(!value) {
43+
return null;
44+
}
45+
46+
let enumType = this.$unite.getRawType(this.field.returnType);
47+
48+
if(!enumType) {
49+
return null;
50+
}
51+
52+
let labels = enumType.enumValues.filter((val) => {
53+
return val.name === value;
54+
}).map((val) => {
55+
return val.description || val.name;
56+
});
57+
58+
return labels.length > 0 ? labels[0] : value;
59+
}
60+
}
61+
}
3662
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/Float.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
<template v-for="value in values">
4+
{{ value }}
5+
<br v-if="!isLastValue(value)" />
6+
</template>
7+
</div>
8+
</template>
9+
<script>
10+
import _abstract from "./_abstract";
11+
import TextInput from "../../Views/Filter/Input/TextInput";
12+
export default {
13+
extends: _abstract,
14+
15+
// static filter method
16+
filter(field, view, unite) { return Object.assign(_abstract.filter(field, view, unite), {
17+
operators: ['EQ', 'NEQ', 'GT', 'LT', 'GTE', 'LTE'],
18+
cast: 'FLOAT',
19+
input: TextInput
20+
}); },
21+
}
22+
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/Id.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
<script>
1010
import _abstract from "./_abstract";
1111
export default {
12-
extends: _abstract
12+
extends: _abstract,
13+
14+
// static filter method
15+
filter(field, view, unite) { return _abstract.filter(field, view, unite); },
1316
}
1417
</script>
1518
<style scoped lang="scss">

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/Integer.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
<template v-for="value in values">
4+
{{ value }}
5+
<br v-if="!isLastValue(value)" />
6+
</template>
7+
</div>
8+
</template>
9+
<script>
10+
import _abstract from "./_abstract";
11+
import TextInput from "../../Views/Filter/Input/TextInput";
12+
export default {
13+
extends: _abstract,
14+
15+
// static filter method
16+
filter(field, view, unite) { return Object.assign(_abstract.filter(field, view, unite), {
17+
operators: ['EQ', 'NEQ', 'GT', 'LT', 'GTE', 'LTE'],
18+
cast: 'INT',
19+
input: TextInput
20+
}); },
21+
}
22+
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/Sequence.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,15 @@
88
</template>
99
<script>
1010
import _abstract from "./_abstract";
11+
import TextInput from "../../Views/Filter/Input/TextInput";
1112
export default {
12-
extends: _abstract
13+
extends: _abstract,
14+
15+
// static filter method
16+
filter(field, view, unite) { return Object.assign(_abstract.filter(field, view, unite), {
17+
operators: ['EQ', 'NEQ', 'GT', 'LT', 'GTE', 'LTE'],
18+
cast: 'INT',
19+
input: TextInput
20+
}); },
1321
}
1422
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/Text.vue

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<template>
2-
<div>
3-
<template v-for="value in values">
4-
{{ value }}
5-
<br v-if="!isLastValue(value)" />
6-
</template>
7-
</div>
2+
<div>
3+
<template v-for="value in values">
4+
{{ value }}
5+
<br v-if="!isLastValue(value)" />
6+
</template>
7+
</div>
88
</template>
99
<script>
10-
import _abstract from "./_abstract";
11-
export default {
12-
extends: _abstract
13-
}
10+
import _abstract from "./_abstract";
11+
export default {
12+
extends: _abstract,
13+
14+
// static filter method
15+
filter(field, view, unite) { return _abstract.filter(field, view, unite); },
16+
}
1417
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/Textarea.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
<script>
99
import _abstract from "./_abstract";
1010
export default {
11-
extends: _abstract
11+
extends: _abstract,
12+
13+
// static filter method
14+
filter(field, view, unite) { return _abstract.filter(field, view, unite); },
1215
}
1316
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/Wysiwyg.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<script>
77
import _abstract from "./_abstract";
88
export default {
9-
extends: _abstract
9+
extends: _abstract,
10+
11+
// static filter method
12+
filter(field, view, unite) { return _abstract.filter(field, view, unite); },
1013
}
1114
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Fields/List/_abstract.vue

+15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
<script>
2+
3+
import TextInput from "../../Views/Filter/Input/TextInput";
4+
25
export default {
6+
7+
// static abstract filter method
8+
filter(field, view, unite) {
9+
return {
10+
searchable: true,
11+
id: field.id,
12+
label: field.name.slice(0, 1).toUpperCase() + field.name.slice(1),
13+
operators: ['EQ', 'NEQ', 'CONTAINS', 'NCONTAINS'],
14+
input: TextInput
15+
};
16+
},
17+
318
props: {
419
view: Object,
520
field: Object,

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Views/Filter/Input/CheckboxInput.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid uk-height-1-1 uk-flex uk-flex-middle">
3+
<label><input class="uk-radio" type="radio" name="checkbox-radios" :checked="value === 'true'" @change="change('true')"> {{ $t('content.list.filter.checkbox_true') }}</label>
4+
<label><input class="uk-radio" type="radio" name="checkbox-radios" :checked="value === 'false'" @change="change('false')"> {{ $t('content.list.filter.checkbox_false') }}</label>
5+
<label><input class="uk-radio" type="radio" name="checkbox-radios" :checked="!value" @change="change(null)"> {{ $t('content.list.filter.checkbox_null') }}</label>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
props: {
12+
value: String
13+
},
14+
methods: {
15+
change(value) {
16+
this.$emit('input', value);
17+
}
18+
}
19+
}
20+
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Views/Filter/Input/SelectInput.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<select class="uk-select" :value="value" @change="change">
3+
<option :value="null" disabled>{{ $t('content.list.filter.placeholder') }}</option>
4+
<option :value="option.value" v-for="option in options">{{ option.label }}</option>
5+
</select>
6+
</template>
7+
8+
<script>
9+
export default {
10+
props: {
11+
value: String,
12+
options: Array
13+
},
14+
methods: {
15+
change(event) {
16+
this.$emit('input', event.target.value);
17+
}
18+
}
19+
}
20+
</script>

‎src/Bundle/AdminBundle/Resources/assets/vue/components/Views/Filter/Input/TextInput.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<input class="uk-input" type="text" :placeholder="$t('content.list.filter.placeholder')" :value="value" @change="change" />
3+
</template>
4+
5+
<script>
6+
export default {
7+
props: {
8+
value: String
9+
},
10+
methods: {
11+
change(event) {
12+
this.$emit('input', event.target.value);
13+
}
14+
}
15+
}
16+
</script>

0 commit comments

Comments
 (0)