@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/filter/FilterBuilder.vue

@@ -0,0 +1,147 @@
+<template>
+    <flex-column class="filter-builder">
+        <flex-body>
+            <div class="filters">
+            <div class="top">
+                <div class="summary">
+                    Match <native-select v-model="model.operator" :field="operatorField">
+                        {{summary}}
+                    </native-select> of the following rules
+                </div>
+            </div>
+            <filter-rule :enableRemove="model.filters.length > 1" :key="`rule-${index}`" @remove="removeRule(index)" :definition="definition" v-model="model.filters[index]" :index="index" v-for="(rule, index) in model.filters" />
+            <ux-button @click="addRule()">Add Rule</ux-button>
+        </div>
+        </flex-body>
+    </flex-column>
+</template>
+<script>
+import NativeSelect from '../form/inputs/select.vue';
+
+import FilterRule from './FilterRule.vue';
+import debounce from 'lodash/debounce';
+
+export default {
+    components: {
+        FilterRule,
+        NativeSelect,
+    },
+    methods: {
+        removeRule(index) {
+            this.model.filters.splice(index, 1);
+        },
+        addRule() {
+            this.model.filters.push({
+                operator: 'and',
+                filters: [{
+
+                }],
+            })
+        }
+    },
+    computed: {
+        summary() {
+            switch (this.model.operator) {
+                case 'or':
+                    return `any`;
+                    break;
+                case 'nor':
+                    return `none`;
+                    break;
+                default:
+                    return `all`;
+                    break;
+            }
+        },
+        operatorField() {
+            return {
+                minimum: 1,
+                maximum: 1,
+                options: [{
+                        title: 'All',
+                        value: 'and',
+
+                    },
+                    {
+                        title: 'Any',
+                        value: 'or',
+
+                    },
+                    {
+                        title: 'None',
+                        value: 'nor',
+
+                    }
+                ],
+            }
+        },
+    },
+    watch: {
+        modelValue(v) {
+            var currentString = JSON.stringify(this.model)
+            var stringed = JSON.stringify(v);
+
+            if (currentString != stringed) {
+                this.model = JSON.parse(stringed)
+            }
+        },
+        model: {
+            handler: debounce(function(v) {
+                this.$emit('update:modelValue', v);
+            }, 300),
+            deep: true,
+        },
+    },
+    props: {
+        definition: {
+            type: Object,
+            require: true,
+        },
+        modelValue: {
+            type: Object,
+            default () {
+                return {
+                    operator: 'and',
+                    filters: [{
+                        operator: 'and',
+                        filters: [],
+                    }],
+                }
+            }
+        },
+    },
+    data() {
+        return {
+            model: JSON.parse(JSON.stringify(this.modelValue))
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.filter-builder {
+    background: rgba(#000, 0.1);
+    
+
+    .filters {
+        padding:0.7em;
+    }
+
+    .summary {
+        font-size: 0.8em;
+        opacity: 0.8;
+        padding:0.3em 0.7em;
+
+        .native-select {
+            display: inline-block;
+            border: 1px solid transparent;
+            border-radius: 0.3em;
+            padding: 0.2em;
+
+            &:hover {
+                background: #fff;
+                border-color: $primary;
+            }
+        }
+    }
+}
+</style>

package/src/filter/FilterCondition.vue

@@ -0,0 +1,335 @@
+<template>
+    <div class="filter-condition" v-if="comparators">
+        <flex-row>
+            <flex-cell>
+                <native-select title="Select field" v-model="model.key" :field="keyField" />
+            </flex-cell>
+            <flex-cell v-if="model.key">
+                <native-select title="Select comparator" v-model="model.comparator" :field="comparatorField" />
+            </flex-cell>
+            <flex-cell v-if="model.comparator">
+                <div v-if="inputType == 'array'">
+                    <text-field :field="arrayField" v-model="model.values" />
+                </div>
+                <div v-if="inputType == 'range'">
+                    <text-field :field="normalField" v-model="model.value" />
+                    And
+                    <text-field :field="normalField" v-model="model.value2" />
+                </div>
+                <div v-if="inputType == 'daterelative'">
+                    <flex-row>
+                        <flex-cell style="width:80px">
+                            <text-field :field="relativeNumberField" v-model="model.value" />
+                        </flex-cell>
+                        <flex-cell>
+                            <native-select v-model="model.value2" :field="relativePeriodField" />
+                            <!-- <text-field :field="relativePeriodField" v-model="model.value" /> -->
+                        </flex-cell>
+                    </flex-row>
+                </div>
+                <div v-if="inputType == 'daterange'">
+                    <date-field :field="dateField" v-model="model.value" />
+                    And
+                    <date-field :field="dateField" v-model="model.value2" />
+                </div>
+                <div v-if="inputType == 'date'">
+                    <date-field :field="dateField" v-model="model.value" />
+                </div>
+                <div v-if="inputType == 'reference'">
+                    <content-select :field="singleReferenceField" v-model="model.value" />
+                </div>
+                <div v-if="inputType == 'multireference'">
+                    <content-select :field="multiReferenceField" v-model="model.values" />
+                </div>
+                <div v-if="inputType == 'boolean'">
+                    <input type="checkbox" v-model="model.value" />
+                </div>
+                <div v-if="inputType == 'none'">
+                </div>
+                <div v-if="inputType == 'number'">
+                    <text-field :field="normalField" v-model="model.value" />
+                </div>
+                <div v-if="inputType == 'normal'">
+                    <text-field :field="normalField" v-model="model.value" />
+                </div>
+                <!-- <pre>{{inputType}}</pre> -->
+                <!-- <pre>{{comparator}}</pre>
+            <native-select v-model="model.value" :field="comparatorField">
+                {{model.comparator || 'Select Value'}}
+            </native-select> -->
+            </flex-cell>
+            <flex-cell shrink v-if="enableRemove">
+                <ux-button icon @click="$emit('remove')">
+                    <ux-icon icon="fa-times" />
+                </ux-button>
+            </flex-cell>
+        </flex-row>
+    </div>
+</template>
+<script>
+import DateField from '../form/inputs/datefield.vue';
+import TextField from '../form/inputs/textfield.vue';
+import NativeSelect from '../form/inputs/select.vue';
+
+export default {
+    props: {
+        fields: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        enableRemove: {
+            type: Boolean,
+        },
+        modelValue: {
+            type: Object,
+            default () {
+                return {
+                    key: '',
+                    comparator: '',
+                    value: null,
+                    value2: null,
+                    values: [],
+                }
+            }
+        },
+    },
+    watch: {
+        modelValue(m) {
+            if (m != this.model) {
+                this.model = m;
+            }
+        }
+    },
+    async created() {
+        this.comparators = await this.$qik.content.comparators();
+    },
+    data() {
+        return {
+            comparators: null,
+            model: this.modelValue,
+        }
+    },
+    computed: {
+        fieldHash() {
+            return this.fields.reduce(function(set, field) {
+
+                set[field.path] = field;
+                return set;
+            }, {})
+        },
+        keyOptions() {
+            return this.fields.reduce(function(set, entry) {
+                switch (entry.type) {
+                    case 'group':
+                        break;
+                    default:
+                        set.push({
+                            title: entry.titles.join(' > '),
+                            value: entry.path || entry.key,
+                        })
+                        break;
+                }
+
+
+                return set;
+
+            }, [])
+        },
+
+        keyField() {
+            return {
+                minimum: 1,
+                maximum: 1,
+                options: this.keyOptions,
+            }
+        },
+        field() {
+            return this.fieldHash[this.model.key];
+        },
+        fieldType() {
+            if (!this.field) {
+                return;
+            }
+
+            return this.field.type;
+        },
+        inputType() {
+            if (!this.comparator) {
+                return;
+            }
+
+            var inputType = this.comparator.inputType;
+
+            switch (inputType) {
+                case 'none':
+                case 'range':
+                case 'daterange':
+                case 'daterelative':
+                    break;
+                case 'array':
+                    switch (this.fieldType) {
+                        case 'reference':
+                            inputType = 'multireference';
+                            break;
+                    }
+                    break;
+                default:
+
+                    inputType = 'normal';
+                    switch (this.fieldType) {
+                        case 'reference':
+                        case 'boolean':
+                        case 'date':
+                            inputType = this.fieldType;
+                            break;
+                        case 'integer':
+                        case 'decimal':
+                        case 'float':
+                        case 'number':
+                            inputType = 'number';
+                            break;
+                    }
+                    break;
+            }
+
+            return inputType;
+        },
+        comparator() {
+            return this.comparatorLookup[this.model.comparator];
+        },
+        comparatorLookup() {
+            return this.comparators.hash;
+        },
+        comparatorOptions() {
+            if (!this.fieldType) {
+                return [];
+            }
+
+            var relevantComparators = this.comparators.available[this.fieldType] || [];
+            var options = relevantComparators.map(function(entry) {
+                return {
+                    title: entry.title,
+                    value: entry.operator,
+                }
+            })
+
+            return options;
+
+        },
+
+        comparatorField() {
+            return {
+                minimum: 1,
+                maximum: 1,
+                options: this.comparatorOptions,
+            }
+        },
+        referenceType() {
+            if (!this.field) {
+                return;
+            }
+
+            return this.field.referenceType;
+        },
+        relativeNumberField() {
+            return {
+                type: 'integer',
+                maximum: 1,
+                minimum: 1,
+                placeholder: '0',
+            }
+        },
+        relativePeriodField() {
+            return {
+                type: 'string',
+                maximum: 1,
+                minimum: 1,
+                widget: 'select',
+                options: [{
+                        title: 'Minutes',
+                        value: 'minutes',
+                    },
+                    {
+                        title: 'Hours',
+                        value: 'hours',
+                    },
+                    {
+                        title: 'Days',
+                        value: 'days',
+                    },
+                    {
+                        title: 'Weeks',
+                        value: 'weeks',
+                    },
+                    {
+                        title: 'Months',
+                        value: 'months',
+                    },
+                    {
+                        title: 'Years',
+                        value: 'years',
+                    }
+                ]
+            }
+        },
+        dateField() {
+            return {
+                type: this.fieldType,
+                maximum: 1,
+                minimum: 1,
+                placeholder: this.field.title,
+            }
+        },
+        normalField() {
+            return {
+                type: this.fieldType,
+                maximum: 1,
+                minimum: 1,
+                placeholder: this.field.title,
+            }
+        },
+        arrayField() {
+            return {
+                title: this.field.title,
+                type: this.fieldType,
+                maximum: 0,
+                minimum: 1,
+            }
+        },
+        singleReferenceField() {
+            return {
+                type: 'reference',
+                referenceType,
+                maximum: 1,
+                minimum: 1,
+            }
+        },
+        multiReferenceField() {
+            return {
+                type: 'reference',
+                referenceType,
+                maximum: 0,
+                minimum: 1,
+            }
+        },
+    },
+    methods: {},
+
+    components: {
+        TextField,
+        DateField,
+        NativeSelect,
+    },
+}
+</script>
+<style lang="scss">
+.filter-condition {
+    padding: 0.2em;
+    border-radius: 0.3em;
+    background: #fff;
+    border: 1px solid rgba(#000, 0.1);
+    margin: 0.5em;
+}
+</style>