mediacube-ui 0.1.7

package/src/patterns/McFilter/McFilterChip/McFilterChip.stories.js

@@ -0,0 +1,59 @@
+import { boolean, object } from '@storybook/addon-knobs'
+import { action } from "@storybook/addon-actions"
+
+import McFilterChip from './McFilterChip'
+
+export default {
+  title: 'Patterns/McFilter/McFilterChip',
+  component: McFilterChip,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1801%3A5024',
+    },
+  },
+}
+
+const getUniqueProps = key => {
+  return {
+    tag: {
+      default: object('to', { title: 'Tag name', categoryName: 'categoryName' }, key),
+    },
+    closable: {
+      default: boolean('closable', true, key),
+    },
+    isActive: {
+      default: boolean('isActive', false, key),
+    },
+  }
+}
+
+const getCommonTags = ctx => {
+  return {
+    tag: ctx.tag,
+    closable: ctx.closable,
+    isActive: ctx.isActive,
+  }
+}
+
+const actionsData = {
+  handleClose: action('closed'),
+  handleClick: action('clicked'),
+}
+
+// mc-chip default
+export const Default = () => ({
+  components: { McFilterChip },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    ...getUniqueProps('default'),
+  },
+  methods: actionsData,
+  template: `<mc-filter-chip v-bind="tagBind" @close="handleClose" @click.native="handleClick" />`,
+})
+

package/src/patterns/McFilter/McFilterChip/McFilterChip.vue

@@ -0,0 +1,83 @@
+<template>
+    <mc-chip :closable="closable" :variation="computedVariation" :class="classes" size="s" @click="handleChipClick">
+        <mc-title v-if="tag.categoryName" weight="semi-bold">{{ computedCategory }}</mc-title>
+        <mc-title v-if="tag.title">{{ tag.title }}</mc-title>
+    </mc-chip>
+</template>
+<script>
+import McTitle from '../../../elements/McTitle/McTitle'
+import McChip from '../../../elements/McChip/McChip'
+export default {
+    name: 'McFilterChip',
+    components: { McChip, McTitle },
+    props: {
+        /**
+         *  Объект тэга
+         */
+        tag: {
+            type: Object,
+            required: true,
+        },
+        /**
+         *  Закрывающийся
+         */
+        closable: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Активный
+         */
+        isActive: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        computedCategory() {
+            const append = this.tag.title ? ':' : ''
+            return `${this.tag.categoryName}${append}`
+        },
+        computedVariation() {
+            return this.closable ? 'purple-invert' : 'hover-gray'
+        },
+        classes() {
+            return {
+                'mc-filter-chip': true,
+                'mc-filter-chip--closable': this.closable,
+                'mc-filter-chip--is-active': this.isActive,
+            }
+        },
+    },
+    methods: {
+        handleChipClick(e) {
+            /**
+             * Событие по закрытию тэга
+             */
+            this.$emit('close')
+            e.stopPropagation()
+        },
+    },
+}
+</script>
+<style lang="scss">
+.mc-filter-chip {
+    $block-name: &;
+    border-radius: $space-50;
+
+    &--closable {
+        border-radius: $space-150;
+        &:hover {
+            cursor: pointer;
+            background-color: fade-out($color-purple, 0.6);
+        }
+    }
+    &--is-active {
+        background-color: fade-out($color-purple, 0.6);
+    }
+
+    .mc-title {
+        width: auto;
+    }
+}
+</style>

package/src/patterns/McFilter/McFilterTags/McFilterTags.stories.js

@@ -0,0 +1,83 @@
+import { value, filters, placeholders } from '../../../mocks/filterMocks'
+import { handleConfirmAction } from '../../../helpers/delayedAction'
+import _isEqual from "lodash/isEqual"
+import _cloneDeep from "lodash/cloneDeep"
+
+import McFilterTags from './McFilterTags'
+import _isEmpty from "lodash/isEmpty"
+
+export default {
+  title: 'Patterns/McFilter/McFilterTags',
+  component: McFilterTags,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1801%3A5024',
+    },
+  },
+}
+
+const getCommonTags = ctx => {
+  return {
+    value: ctx.valuesName,
+    filters: ctx.filters,
+    placeholders: ctx.placeholders,
+    activeTag: ctx.activeTag,
+  }
+}
+
+export const Default = () => ({
+  components: { McFilterTags },
+  data() {
+    return {
+      valuesName: value.filter_name,
+      activeTag: null,
+      temporaryValuesName: {},
+    }
+  },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    },
+  },
+  props: {
+    filters: {
+      default: filters,
+    },
+    placeholders: {
+      default: placeholders,
+    },
+  },
+  methods: {
+    onTagsChange(val) {
+      if (_isEmpty(val)) {
+        this.valuesName = {}
+        return
+      }
+      this.valuesName = _cloneDeep(val)
+    },
+    onTagClick(tag) {
+      this.activeTag = _isEqual(this.activeTag, tag) ? null : tag
+      console.log('onTagClick', this.activeTag && this.activeTag.title)
+    },
+    allTagsClear() {
+      this.temporaryValuesName = _cloneDeep(this.valuesName)
+      this.valuesName = {}
+
+      handleConfirmAction(
+        this.clearTemporaryValues,
+        this.revertClearedValues,
+        this.placeholders.messages.accidentally_cleared
+      )
+    },
+    clearTemporaryValues() {
+      this.temporaryValuesName = {}
+    },
+    revertClearedValues() {
+      this.valuesName = _cloneDeep(this.temporaryValuesName)
+    },
+  },
+  template: `<mc-filter-tags v-bind="tagBind" @tag-change="onTagsChange" @tag-click="onTagClick" @clear="allTagsClear" />`,
+})
+

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

@@ -0,0 +1,356 @@
+<template>
+    <div class="mc-filter-tags">
+        <mc-title>{{ placeholders.added_filters }}</mc-title>
+        <div class="mc-filter-tags__body">
+            <div class="mc-filter-tags__body-left">
+                <mc-grid-row v-if="tagsWithoutFast.length" :gutter-x="4" :gutter-y="8">
+                    <mc-grid-col v-for="tag in tagsWithoutFast" :key="tag.id">
+                        <mc-filter-chip
+                            :tag="tag"
+                            :is-active="checkTagIsActive(tag)"
+                            closable
+                            @click.native="() => onTagClick(tag)"
+                            @close="() => onTagClose(tag)"
+                        />
+                    </mc-grid-col>
+                </mc-grid-row>
+                <template v-if="relationRows.length">
+                    <mc-grid-row v-for="(row, index) in relationRows" :key="index" :gutter-x="4" :gutter-y="8">
+                        <mc-grid-col v-for="tag in row" :key="tag.id">
+                            <mc-filter-chip
+                                :tag="tag"
+                                :is-active="checkTagIsActive(tag)"
+                                :closable="tag.closable"
+                                @click.native="() => onTagClick(tag)"
+                                @close="() => onTagClose(tag, row[0].relationKey)"
+                            />
+                        </mc-grid-col>
+                    </mc-grid-row>
+                </template>
+                <mc-grid-row v-if="fastFilterTags.length" :gutter-x="4" :gutter-y="8">
+                    <mc-grid-col v-for="tag in fastFilterTags" :key="tag.id">
+                        <mc-tooltip :content="tag.description || ''" placement="top" size="s">
+                            <mc-filter-chip :tag="tag" closable @close="() => onTagClose(tag)" />
+                        </mc-tooltip>
+                    </mc-grid-col>
+                </mc-grid-row>
+            </div>
+            <div class="mc-filter-tags__body-right">
+                <mc-button v-if="hasButtonClear" variation="dark-gray-outline" @click="handleClear">
+                    {{ placeholders.actions.clear }}
+                </mc-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import _XEUtils from 'xe-utils'
+import _isEqual from 'lodash/isEqual'
+import _isEmpty from 'lodash/isEmpty'
+import _cloneDeep from 'lodash/cloneDeep'
+
+import McButton from '../../../elements/McButton/McButton'
+import McTooltip from '../../../elements/McTooltip/McTooltip'
+import McTitle from '../../../elements/McTitle/McTitle'
+import McGridRow from '../../../patterns/McGrid/McGridRow/McGridRow'
+import McGridCol from '../../../patterns/McGrid/McGridCol/McGridCol'
+import McFilterChip from '../McFilterChip/McFilterChip'
+export default {
+    name: 'McFilterTags',
+    components: {
+        McFilterChip,
+        McButton,
+        McTooltip,
+        McTitle,
+        McGridRow,
+        McGridCol,
+    },
+    props: {
+        /**
+         *  Данные фильтра
+         */
+        value: {
+            type: Object,
+            default: () => {},
+        },
+        /**
+       *  Типы фильтров
+       *
+       *  [{
+                name: Filter title,
+                value: [String] - Filter value(key),
+                type: [String] - Filter type(relation / date / text / fast),
+                options: [Array] - Filter options,
+                getAjaxOne: [Function] - Method for get selected options when filter initialize,
+                getAjaxOptions: [Function] - Method for get options by API,
+                [default]: [String, Number, Boolean] - Only for fast filter type. Fast filter haven't options, we set default value
+                [description]: [String] - Only for fast filter type. Description of fast filter
+            }, ...]
+       */
+        filters: {
+            type: Array,
+            required: true,
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true,
+        },
+        /**
+         *  Активный тэг
+         */
+        activeTag: {
+            type: Object,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            simpleValues: {},
+            relationValues: {},
+            prettyActiveTag: null,
+        }
+    },
+    computed: {
+        fastFilterTags() {
+            return this.simpleTags.filter(st => st && st.type === 'fast')
+        },
+        tagsWithoutFast() {
+            return this.simpleTags.filter(st => st && st.type !== 'fast')
+        },
+        simpleTags() {
+            const tags = []
+            !_isEmpty(this.simpleValues) &&
+                Object.entries(this.simpleValues).forEach(([key, value]) => {
+                    const filter = this.filters.find(f => f.value === key)
+                    if (filter && filter.type === 'fast') {
+                        tags.push({
+                            id: _XEUtils.uniqueId(),
+                            categoryName: filter?.name,
+                            category: key,
+                            type: 'fast',
+                            ...filter,
+                        })
+                    } else if (filter) {
+                        const from = value.more
+                            ? `${this.placeholders.from} ${this.getFormattedVal(value.more, filter)}`
+                            : ''
+                        const to = value.less
+                            ? `${this.placeholders.to} ${this.getFormattedVal(
+                                  filter.type === 'date' && filter.useTimezone
+                                      ? this.$moment(value.less)
+                                            .subtract(1, 'days')
+                                            .format()
+                                      : value.less,
+                                  filter,
+                              )}`
+                            : ''
+                        const space = from && to ? ' ' : ''
+                        const title = typeof value === 'object' ? `${from}${space}${to}`.toLowerCase() : value
+                        tags.push({
+                            id: _XEUtils.uniqueId(),
+                            categoryName: filter?.name,
+                            title,
+                            value,
+                            category: key,
+                        })
+                    }
+                })
+            return tags
+        },
+        relationRows() {
+            let tags = []
+            if (!_isEmpty(this.relationValues)) {
+                tags = Object.entries(this.relationValues).map(([relationKey, relationVal]) => {
+                    if (relationKey === 'exists') {
+                        const empties = Object.keys(relationVal).map(key => {
+                            const filter = this.filters.find(f => f.value === key)
+                            return {
+                                id: _XEUtils.uniqueId(),
+                                categoryName: filter?.name,
+                                value: key,
+                                category: key,
+                                relationKey,
+                                closable: true,
+                            }
+                        })
+                        const head = {
+                            id: _XEUtils.uniqueId(),
+                            categoryName: this.placeholders.actions.empty,
+                            relationKey: 'exists',
+                        }
+                        return [head, ...empties]
+                    }
+                    const values = []
+                    Object.entries(relationVal).forEach(([categoryKey, categoryVal]) => {
+                        const filter = this.filters.find(f => f.value === categoryKey)
+                        Object.entries(categoryVal).forEach(([key, val]) => {
+                            values.push({
+                                id: _XEUtils.uniqueId(),
+                                categoryName: filter?.name,
+                                title: val,
+                                value: key,
+                                category: categoryKey,
+                                relationKey,
+                                closable: true,
+                            })
+                        })
+                    })
+                    const head = {
+                        id: _XEUtils.uniqueId(),
+                        categoryName: this.placeholders.actions[relationKey],
+                        relationKey,
+                    }
+                    return [head, ...values]
+                })
+            }
+            return tags.filter(t => t.length > 1)
+        },
+        hasButtonClear() {
+            return this.relationRows.length || this.simpleTags.length
+        },
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.splitTags(val)
+            },
+            immediate: true,
+            deep: true,
+        },
+        activeTag: {
+            handler(val) {
+                this.prettyActiveTag = val
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        splitTags(value) {
+            this.simpleValues = {}
+            this.relationValues = {}
+            if (_isEmpty(value)) return
+            this.addInitTags(value)
+        },
+        addInitTags(parentVal, parentKey = null) {
+            const relationKeys = ['is', 'is_not', 'exists']
+            for (let [key, val] of Object.entries(parentVal)) {
+                if (relationKeys.includes(key)) {
+                    const relationValuesKey = {
+                        ...(key in this.relationValues ? this.relationValues[key] : {}),
+                        ...(parentKey ? { [parentKey]: val } : {}),
+                    }
+                    this.$set(this.relationValues, key, relationValuesKey)
+                    continue
+                }
+                if (typeof val !== 'object' && parentKey) {
+                    this.$set(this.simpleValues, parentKey, parentVal)
+                    continue
+                }
+                const filter = this.filters.find(f => f.value === key)
+                if (filter && filter.type === 'fast') {
+                    this.$set(this.simpleValues, key, { value: key })
+                    continue
+                }
+                val && this.addInitTags(val, key)
+            }
+        },
+        onTagClick(tag) {
+            this.prettyActiveTag = _isEqual(this.prettyActiveTag, tag) ? null : tag
+            /**
+             * Событие по клику на тэг
+             */
+            this.$emit('tag-click', tag)
+        },
+        onTagClose(tag, relationKey = null) {
+            const value = _cloneDeep(this.value)
+            switch (relationKey) {
+                case 'exists':
+                    delete value[tag.category][relationKey]
+                    break
+                case 'is':
+                case 'is_not':
+                    delete value[tag.category][relationKey][tag.value]
+                    if (_isEmpty(value[tag.category][relationKey])) {
+                        delete value[tag.category][relationKey]
+                    }
+                    break
+                default:
+                    delete value[tag.category]
+                    break
+            }
+
+            if (_isEmpty(value[tag.category])) {
+                delete value[tag.category]
+            }
+            /**
+             * Событие по изменению набора тэгов
+             */
+            this.$emit('tag-change', value)
+        },
+        handleClear() {
+            /**
+             * Событие по очистке всех тэгов
+             */
+            this.$emit('clear')
+        },
+        getFormattedVal(val, filter) {
+            switch (filter.type) {
+                case 'date':
+                    return this.$moment ? this.$moment(val).format('DD.MM.YYYY') : val
+                case 'range':
+                    return this.getFormattedNum(val)
+                default:
+                    return val
+            }
+        },
+        getFormattedNum(num) {
+            const numeral = require('numeral')
+            if (!numeral) return num
+            let decimalsString = ''.padStart(0, '0')
+            return numeral(num)
+                .format('0,0.' + decimalsString)
+                .replace(/,/g, ' ')
+        },
+        checkTagIsActive(tag) {
+            return _isEqual(this.prettyActiveTag, tag)
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-filter-tags {
+    $block-name: &;
+
+    @include child-indent-bottom($space-100);
+    &__body {
+        display: flex;
+        justify-content: space-between;
+        padding: $space-100;
+        border: 1px solid $color-outline-gray;
+        border-radius: $radius-100;
+        background-color: $color-white;
+        min-height: $space-500;
+        &-left {
+            flex-grow: 1;
+        }
+        &-right {
+            margin-left: $space-100;
+            .mc-button {
+                padding: $space-50 $space-150;
+                height: $space-300;
+            }
+        }
+
+        .mc-grid-row {
+            &:not(:last-child) {
+                margin-bottom: $space-50 !important;
+            }
+        }
+    }
+}
+</style>

package/src/patterns/McFilter/McFilterTypeDate/McFilterTypeDate.stories.js

@@ -0,0 +1,50 @@
+import { filters, placeholders } from '../../../mocks/filterMocks'
+
+import McFilterTypeDate from './McFilterTypeDate'
+
+export default {
+  title: 'Patterns/McFilter/McFilterTypeDate',
+  component: McFilterTypeDate,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1801%3A5024',
+    },
+  },
+}
+
+const getCommonTags = ctx => {
+  return {
+    value: ctx.value,
+    filter: ctx.filter,
+    placeholders: ctx.placeholders,
+  }
+}
+
+export const Default = () => ({
+  components: { McFilterTypeDate },
+  data() {
+    return {
+      value: null,
+      filter: filters.find(f => f.type === 'date'),
+    }
+  },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    },
+  },
+  props: {
+    placeholders: {
+      default: placeholders,
+    },
+  },
+  methods: {
+    onDateChange(val) {
+      this.value = val
+    },
+  },
+  template: `<mc-filter-type-date v-bind="tagBind" @input="onDateChange" />`,
+})
+

package/src/patterns/McFilter/McFilterTypeDate/McFilterTypeDate.vue

@@ -0,0 +1,66 @@
+<template>
+    <mc-date-picker
+        v-model="period"
+        :placeholders="placeholders.calendar"
+        :placeholder="filter.placeholder || placeholders.choose"
+        :use-timezone="filter.useTimezone"
+        name="condition_dates"
+        class="mc-filter-type-date"
+        range
+    />
+</template>
+
+<script>
+import McDatePicker from '../../../elements/McDatePicker/McDatePicker'
+export default {
+    name: 'McFilterTypeDate',
+    components: {
+        McDatePicker,
+    },
+    props: {
+        /**
+         *  Значение
+         */
+        value: {
+            type: Object,
+            default: () => {},
+        },
+        /**
+         *  Объект выбранного
+         *  фильтра
+         */
+        filter: {
+            type: Object,
+            default: () => {},
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true,
+        },
+    },
+    computed: {
+        period: {
+            get() {
+                return this.value ? [this.value.more, this.value.less] : []
+            },
+            set(val) {
+                const period = (val || []).every(d => !!d?.trim()?.length) ? { more: val[0], less: val[1] } : {}
+                /**
+                 * Событие по изменению периода
+                 */
+                this.$emit('input', period)
+            },
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-filter-type-Date {
+    $block-name: &;
+    width: 300px;
+}
+</style>