[US-6-9] Refactoring filter

[felisa13]

Problem statement/business needs:

Фильтры работают немного наоборот, нужно поправить логику

Definitions of Done:

1. Новый созданный РО открывается с пустым или дефолтным набором фильтров
2. Но, если нет дефолтного сета, то умолчанию фильтры не выбраны, 0 фильтров = отсутствие фильтров и мы показываем все локаторы
3. Смена иконки на кнопку с бейдж-цифрами
4. Вместо "Select all" текстовая кнопка "Clear" с соответствующим функционалом
5. Кнопка фильтров с текстом

---

Дизайн

Для начала, из-за добавления кнопки, надо немного подвигать хедер плагина
Можете смотреть тут в девмоде, или

Figma
component UI-Kit
prototype

• clear очищает все чекбоксы и дефолтный сет, мы показываем все типы локаторов
• clear = select all, так как пустое состояние = выбрано всё
• выкл Default set делает предыдущее состояние или, если его нет, выполняет Clear фильтров

1. По умолчанию открывается с дефолтным сетом, это определённый набор включенных чекбоксов для фильтров

2. Если ещё выбираем доп чекбокс, то ДефолтСет выключаем

3. Если дефолтный сет не в разработке, то открываем фильтр в пустом состоянии

пустое состояние = выбрано всё
если мы прочекаем все фильтры, результат будет такой же

4. Если активных чекбоксов +1 то на бейдж добавляем цифру (это то где синяя точка сейчас). Если выбрано ноль или выбраны все, то бейдж не показываем, просто иконка фильтра. При увеличении цифра должна уходить/двигаться влево

(компонент и ант)

6. Последний выбор фильтров сохраняется для конкретного РО, при каждом его следующем открытии они не должны сбрасываться

7. Новый созданный РО открывается с пустым или дефолтным набором фильтров

Comments:

Комментарии для дизайнера:

• При выборе фильтров показывать заголовок, что предоставлен результат таких-то фильтров с кнопкой быстрого сброса.
• иконка справа, что при растягивании по горизонтали уносит её в другой конец
• дефолтный сет
• сброс
• пустое состояние =выбрать всё
• нельзя делать пустые страницы
• сбрасывать фильтр до дефолтного в следующем РО

[AlexeyGirin]

Аня должна посмотреть - если это трудоёмко - будем делать вариант который предлагает Семён - костыль

[Iogsotot]

To define a default set for each library (HTML, MUI, etc):
https://jdi-family.atlassian.net/wiki/spaces/JDN/pages/57508276/Mapping+Tables

[Iogsotot]

Пункт 6 и 7 из ТЗ устарели, ожидаемое поведение такое:

[Iogsotot]

В ходе уточнения ТЗ была определена и имплементирована следующая логика:

[Iogsotot]

Vuetify Classes:
alert = 'Alert', appBar = 'AppBar', aspectRatios = 'AspectRatios', autocomplete = 'Autocomplete', // no rule avatar = 'Avatar', badge = 'Badge', banner = 'Banner', bottomnavigation = 'BottomNavigation', bottomsheet = 'BottomSheet', breadcrumbs = 'Breadcrumbs', button = 'VuetifyButton', buttonGroup = 'ButtonGroup', calendar = 'Calendar', card = 'Card', carousel = 'Carousel', checkbox = 'VueCheckbox', chip = 'Chip', chipgroup = 'ChipGroup', colorpicker = 'ColorPicker', combobox = 'Combobox', dataIterator = 'DataIterator', dataTableV2 = 'DataTable', dataTableV3 = 'DataTable', datePicker = 'DatePicker', datePickerMonth = 'DatePickerMonth', dialog = 'Dialog', divider = 'Divider', expansionPanel = 'ExpansionPanel', expansionPanels = 'ExpansionPanels', fileInput = 'FileInput', footer = 'Footer', grid = 'Grid', icon = 'Icon', image = 'Image', input = 'Input', itemGroup = 'ItemGroup', listItem = 'ListItem', listItemGroups = 'ListItemGroups', list = 'VuetifyList', listGroup = 'VuetifyListGroup', menu = 'Menu', navigationDrawer = 'NavigationDrawer', otpInput = 'OtpInput', overflowButton = 'OverflowButton', overlay = 'Overlay', pagination = 'Pagination', paginationPage = 'PaginationPage', parallax = 'Parallax', progressCircular = 'ProgressCircular', progressLinear = 'ProgressLinear', radiobutton = 'RadioButton', radiobuttons = 'RadioButtons', rangeSlider = 'RangeSlider', rating = 'Rating', select = 'Select', simpleTable = 'SimpleTable', skeletonLoader = 'SkeletonLoader', sliderV2 = 'Slider', sliderV3 = 'Slider', slideGroup = 'SlideGroup', sheet = 'Sheet', snackbar = 'Snackbar', sparkline = 'Sparkline', // no rule step = 'Step', stepper = 'Stepper', subheader = 'Subheader', switch = 'Switch', systembar = 'SystemBar', table = 'SimpleTable', tableCheckbox = 'TableCheckbox', tabs = 'VuetifyTabs', text = 'Text', textArea = 'TextArea', textfield = 'TextField', timeline = 'TimeLine', timepicker = 'TimePicker', toolbar = 'ToolBar', tooltip = 'Tooltip', treeview = 'TreeView', virtualscroller = 'VirtualScroller', windows = 'Windows',

Vuetify Default Set:
VuetifyClasses.alert, VuetifyClasses.bottomnavigation, VuetifyClasses.bottomsheet, VuetifyClasses.button, VuetifyClasses.calendar, VuetifyClasses.card, VuetifyClasses.carousel, VuetifyClasses.checkbox, VuetifyClasses.combobox, VuetifyClasses.dataIterator, VuetifyClasses.dataTableV2, VuetifyClasses.dataTableV3, VuetifyClasses.datePicker, VuetifyClasses.datePickerMonth, VuetifyClasses.dialog, VuetifyClasses.icon, VuetifyClasses.input, VuetifyClasses.list, VuetifyClasses.menu, VuetifyClasses.pagination, VuetifyClasses.radiobutton, VuetifyClasses.rangeSlider, VuetifyClasses.toolbar, VuetifyClasses.select, VuetifyClasses.simpleTable, VuetifyClasses.sliderV2, VuetifyClasses.sliderV3, VuetifyClasses.switch, VuetifyClasses.textfield, VuetifyClasses.timepicker,

MUI Classes:
accordion = 'Accordion', badge = 'Badge', 'bottom-navigation' = 'BottomNavigation', button = 'Button', 'button-group' = 'ButtonGroup', breadcrumbs = 'Breadcrumbs', checkbox = 'Checkbox', chip = 'Chip', dialog = 'Dialog', drawer = 'Drawer', link = 'Link', list = 'List', menu = 'Menu', progress = 'ProgressBar', radiogroup = 'RadioButtons', select = 'Select', slider = 'Slider', snackbar = 'Snackbar', stepper = 'Stepper', switch = 'Switch', tabs = 'Tabs', table = 'Table', 'textarea-autosize' = 'TextArea', 'text-field' = 'TextField', card = 'Card', modal = 'Modal',

MUI Default Set:
MUIclasses.button, MUIclasses['button-group'], MUIclasses.checkbox, MUIclasses.radiogroup, MUIclasses.select, MUIclasses.slider, MUIclasses.switch, MUIclasses['text-field'], MUIclasses['bottom-navigation'], MUIclasses.breadcrumbs, MUIclasses.drawer, MUIclasses.link, MUIclasses.menu, MUIclasses.stepper, MUIclasses.progress, MUIclasses.dialog, MUIclasses.snackbar, MUIclasses.accordion, MUIclasses.card, MUIclasses.badge, MUIclasses.chip, MUIclasses.list, MUIclasses.table, MUIclasses.modal, MUIclasses['textarea-autosize'],

HTML5 Classes:
button = 'Button', checkbox = 'Checkbox', checklist = 'Checklist', colorpicker = 'ColorPicker', datalist = 'Combobox', datetimeselector = 'DateTimeSelector', dropdown = 'Dropdown', fileinput = 'FileInput', label = 'Label', link = 'Link', multidropdown = 'MultiSelector', multiselector = 'MultiSelector', numberselector = 'NumberSelector', progressbar = 'ProgressBar', radiobuttongroup = 'RadioButtons', range = 'Range', table = 'Table', text = 'Text', textarea = 'TextArea', textfield = 'TextField', title = 'Title', combobox = 'Combobox', form = 'Form',

HTML5 Default Set:
HTML5classes.label, HTML5classes.checkbox, HTML5classes.button, HTML5classes.colorpicker, HTML5classes.datetimeselector, HTML5classes.fileinput, HTML5classes.numberselector, HTML5classes.progressbar, HTML5classes.link, HTML5classes.range, HTML5classes.text, HTML5classes.textfield, HTML5classes.textarea, HTML5classes.title, HTML5classes.radiobuttongroup, HTML5classes.table, HTML5classes.dropdown, HTML5classes.multidropdown, HTML5classes.checklist, HTML5classes.table, HTML5classes.multiselector, HTML5classes.combobox, HTML5classes.form,

[Iogsotot]

#1766
3.16.4