mediacube-ui 0.1.332 → 0.1.334

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.334](https://github.com/MediaCubeCo/mcui/compare/v0.1.333...v0.1.334) (2024-11-14)
+
+### [0.1.333](https://github.com/MediaCubeCo/mcui/compare/v0.1.332...v0.1.333) (2024-11-14)
+
 ### [0.1.332](https://github.com/MediaCubeCo/mcui/compare/v0.1.331...v0.1.332) (2024-11-13)
 
 ### [0.1.331](https://github.com/MediaCubeCo/mcui/compare/v0.1.330...v0.1.331) (2024-11-12)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.332",
+  "version": "0.1.334",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,

package/src/patterns/McFilter/McFilter.vue

@@ -158,6 +158,7 @@ import McFilterTypeRelation from './McFilterTypeRelation/McFilterTypeRelation'
 import McFilterTypeText from './McFilterTypeText/McFilterTypeText'
 import McFilterTypeRange from './McFilterTypeRange/McFilterTypeRange'
 import McFilterTypeDate from './McFilterTypeDate/McFilterTypeDate'
+import McFilterTypeSimple from './McFilterTypeSimple/McFilterTypeSimple'
 import McFilterTags from './McFilterTags/McFilterTags'
 import McChip from '../../elements/McChip/McChip'
 
@@ -169,6 +170,7 @@ export default {
         McFilterTypeText,
         McFilterTypeRange,
         McFilterTypeDate,
+        McFilterTypeSimple,
         McSvgIcon,
         McButton,
         McTitle,
@@ -200,7 +202,7 @@ export default {
        *  [{
                 name: Filter title,
                 value: [String] - Filter value(key),
-                type: [String] - Filter type(relation / date / text / fast / labels),
+                type: [String] - Filter type(relation / date / text / fast / labels / simple),
                 options: [Array] - Filter options,
                 getAjaxOne: [Function] - Method for get selected options when filter initialize,
                 getAjaxOptions: [Function] - Method for get options by API,

package/src/patterns/McFilter/McFilterTags/McFilterTags.vue

@@ -131,7 +131,15 @@ export default {
             !_isEmpty(this.simpleValues) &&
                 Object.entries(this.simpleValues).forEach(([key, value]) => {
                     const filter = this.filters.find(f => f.value === key)
-                    if (filter && filter.type === 'fast') {
+                    if (filter && filter.type === 'simple') {
+                        tags.push({
+                            id: _XEUtils.uniqueId(),
+                            categoryName: filter?.name,
+                            category: key,
+                            ...filter,
+                            title: filter.options.find(o => String(o.value) === String(value))?.name,
+                        })
+                    } else if (filter && filter.type === 'fast') {
                         tags.push({
                             id: _XEUtils.uniqueId(),
                             categoryName: filter?.name,

package/src/patterns/McFilter/McFilterTypeSimple/McFilterTypeSimple.vue

@@ -0,0 +1,161 @@
+<template>
+    <mc-field-select
+        v-model="selectedOptionValue"
+        :options="computedOptions"
+        :internal-search="!isAjax"
+        :placeholder="computedPlaceholder"
+        :loading="loading"
+        class="mc-filter-type-simple"
+        name="simple_select"
+        @search-change="handleSearchChange"
+    >
+        <div slot="header" class="mc-filter-type-simple__header">
+            <mc-title>{{ placeholders.simple }}</mc-title>
+        </div>
+    </mc-field-select>
+</template>
+
+<script>
+import _uniqWith from 'lodash/uniqWith'
+import _isEqual from 'lodash/isEqual'
+import _debounce from 'lodash/debounce'
+import _isEmpty from 'lodash/isEmpty'
+import McTitle from '../../../elements/McTitle/McTitle'
+import McFieldSelect from '../../../elements/McField/McFieldSelect/McFieldSelect'
+
+export default {
+    name: 'McFilterTypeSimple',
+    components: {
+        McTitle,
+        McFieldSelect,
+    },
+    props: {
+        /**
+         *  Значение
+         */
+        value: {
+            // type: [String, Number],
+            default: null,
+        },
+        /**
+         *  Объект выбранного
+         *  фильтра
+         */
+        filter: {
+            type: Object,
+            default: () => {},
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true,
+        },
+        /**
+         *  Текущее значение
+         *  добавленных фильтров
+         */
+        currentValues: {
+            type: Object,
+            default: () => {},
+        },
+        asd: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data() {
+        return {
+            ajaxOptions: [],
+            loading: false,
+        }
+    },
+    computed: {
+        computedPlaceholder() {
+            return this.filter.placeholder || this.filter.is_text ? this.placeholders.enter : this.placeholders.choose
+        },
+        computedOptions() {
+            let options = this.isAjax ? this.ajaxOptions : this.filter.options || []
+
+            if (!_isEmpty(this.currentValues) && this.filter.value in this.currentValues) {
+                const category = this.currentValues[this.filter.value]
+                let selected = []
+                for (let [key, val] of Object.entries(category)) {
+                    selected = [...selected, ...(Array.isArray(val) ? val : [[val]])]
+                }
+                options = options.filter(o => !selected.includes(String(o.value)))
+            }
+
+            return options
+        },
+        isAjax() {
+            return typeof this.filter.getAjaxOptions === 'function'
+        },
+        selectedOptionValue: {
+            get() {
+                let val = this.value
+                if (val) {
+                    if (this.isAjax && val) {
+                        this.addAjaxOption(val)
+                    }
+                }
+                return val
+            },
+            set(val) {
+                this.setValue(val)
+            },
+        },
+    },
+    watch: {
+        filter() {
+            this.$nextTick(() => (this.ajaxOptions = []))
+        },
+    },
+    methods: {
+        async setAjaxOptions(value) {
+            this.loading = true
+            this.ajaxOptions = await this.filter.getAjaxOptions(value)
+            this.loading = false
+        },
+        async addAjaxOption(value) {
+            const option = await this.filter.getAjaxOne(value)
+            this.ajaxOptions = _uniqWith([...this.ajaxOptions, option], _isEqual)
+        },
+        handleSearchChange(value) {
+            if (!this.isAjax || !value) return
+            this.debounceHandler(this.setAjaxOptions.bind(null, value))
+        },
+        debounceHandler: _debounce(method => method(), 500),
+        setValue(value) {
+            /**
+             * Событие по изменению значения
+             */
+            this.$emit('input', value, this.computedOptions.find(o => String(o.value) === String(value))?.name)
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../../styles/mixins';
+.mc-filter-type-simple {
+    $block-name: &;
+    width: 300px;
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: -$space-50;
+        margin-top: -$space-50;
+    }
+    &__buttons {
+        display: flex;
+        @include child-indent-right($space-50);
+        .mc-button {
+            height: $size-300;
+            padding: $space-50 $space-150;
+        }
+    }
+}
+</style>