Muzaara

by andrey90vs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-row inventory-filters-wrapper" id="inventoryFilters">
                                        <label class="form-label">Inventory filter</label>
                                        <div class="form-checkbox">
                                            <input type="radio" name="inventory_filtered" value="1" id="inventory_filtered_yes">
                                            <label for="inventory_filtered_yes">Yes</label>
                                            <input type="radio" name="inventory_filtered" value="0" id="inventory_filtered_no" checked>
                                            <label for="inventory_filtered_no">No</label>
                                        </div>
                                        <div class="filter-select-wrapper" id="filters-select">
                                            <div class="inventory-filter-row">
                                                <select class="form-control primary-select"></select>
                                                <select class="form-control secondary-select"></select>
                                                <input type="text" class="form-control secondary-text">
                                                <i class="fa fa-lock" aria-hidden="true"></i>
                                                <div class="show-on-last-item">
                                                    <i class="fa fa-times remove-filter-row" aria-hidden="true"></i>
                                                    <div class="add-filter-wrapper">
                                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                                    </div>
                                           ...

SCSS

.inventory-filters-wrapper {
  display: block !important;
}
.inventory-filters-wrapper .form-checkbox {
  background-color: transparent !important;
  display: inline !important;
}
.inventory-filters-wrapper .form-checkbox label {
  padding: 0 5px;
  margin-right: 10px;
}
.inventory-filters-wrapper .form-checkbox label:last-child {
  margin-right: 0;
}
.filter-select-wrapper {
  margin-top: 15px;
  margin-left: 131px;
  padding: 18px 10px 10px;
  border: 1px solid #eeeeee;
  display: none;
}
.filter-select-wrapper .fa {
  cursor: pointer;
  color: #959595;
}

.add-filter-wrapper {
  float: right;
  padding: 8px 15px;
  background-color: #eeeeee;
  height: 34px;
  margin-left: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.add-filter-wrapper:hover {
  background-color: #dcdbdb;
}
.inventory-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.inventory-filter-row .form-control {
  margin: 0 10px;
}
.inventory-filter-row:not(:last-child) .show-on-last-item {
  display: none;
}
.inventory-filter-row:first-child .show-on-last-item .remove-filter-row {
  display: none;
}
.inventory-filter-row:not(:last-child) select,
.inventory-filter-row:not(:last-child) input {
  pointer-events: none;
  cursor: not-allowed;
  background-color: #eee;
}
.inventory-filter-row:last-child .fa.fa-lock {
  display: none;
}
.show-on-last-item {
  display: flex;
  align-items: center;
}
.form-control.secondary-text {
  display: none;
}
.primary-select option[data-show="0"] {
  display: none;
}
.secondary-text.error-text {
  border: 1px solid red;
}

JavaScript

/* inventory filters */
	var inventory_filters = [
		{
			name: "Category (1st level)",
			value: "category_1st_level",
			show: 1,
			category: true
		},
		{
			name: "Category (2nd level)",
			value: "category_2nd_level",
			show: 0,
			category: true
		},
		{
			name: "Category (3rd level)",
			value: "category_3rd_level",
			show: 0,
			category: true
		},
		{
			name: "Category (4th level)",
			value: "category_4th_level",
			show: 0,
			category: true
		},
		{
			name: "Category (5th level)",
			value: "category_5th_level",
			show: 0,
			category: true
		},
		{
			name: "Brand",
			value: "brand",
			show: 1
		},
		{
			name: "Item ID",
			value: "item_id",
			show: 1
		},
		{
			name: "Condition",
			value: "condition",
			show: 1
		},
		{
			name: "Product type (1st level)",
			value: "product_type_1",
			show: 1,
			product: true
		},
		{
			name: "Product type (2st level)",
			value: "product_type_2",
			show: 0,
			product: true
		},
		{
			name: "Product type (3st level)",
			value: "product_type_3",
			show: 0,
			product: true
		},
		{
			name: "Product type (4st level)",
			value: "product_type_4",
			show: 0,
			product: true
		},
		{
			name: "Product type (5st level)",
			value: "product_type_5",
			show: 0,
			product: true
		},
		{
			name: "Custom label 0",
			value: "custom_label_0",
			show: 1
		},
		{
			name: "Custom label 1",
			value: "custom_label_1",
			show: 1
		},
		{
			name: "Custom label 2",
			value: "custom_label_2",
			show: 1
		},
		{
			name: "Custom label 3",
			value: "custom_label_3",
			show: 1
		},
		{
			name: "Custom label 4",
			value: "custom_label_4",
			show: 1
		},
		{
			name: "Channel",
			value: "channel",
			show: 1
		},
		{
			name: "Channel exclusivity",
			value: "channel_exclusivity",
			show: 1
		}
	];

	$('input[type=radio][name=inventory_filtered]').change(function() {
		if (this.value == 1) {
			$('.filter-select-wrapper').show();
		} else...