merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Datagrid refactoring styling is complete, only mass actions are needed to be implemnented along with wrappers and callbacks

This commit is contained in:
Prashant Singh 2019-01-08 17:22:23 +05:30
parent f7f4395c20
commit d55bd0e115
2 changed files with 48 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/Webkul/Ui/src/Resources/assets/sass/components.scss vendored
View File

@ -67,7 +67,7 @@
justify-content: space-between;
align-items: center;
height: 36px;
width: 100px;
width: 202px;
border: 2px solid $control-border-color;
border-radius: 3px;
color: #8E8E8E;
@ -77,3 +77,27 @@
float: right;
}
}
.filter-tag {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 14px;
height: 28px;
width: 98px;
border-radius: 2px;
.wrapper {
margin-left: 10px;
padding: 0px 5px 0px 5px;
display: flex;
flex-direction: row;
align-items: center;
background: #E7E7E7;
font-size: 14px;
height: 28px;
color: #000311;
letter-spacing: -0.22px;
}
}

81
packages/Webkul/Ui/src/Resources/views/testgrid/table.blade.php
View File

@ -128,22 +128,17 @@
</div>
</div>
</div>
<div class="filter-row-two" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
{{-- <span class="filter-one">
<span class="filter-name">
Stock
<div class="filter-row-two">
<span class="filter-tag" v-if="filters.length > 0" v-for="filter in filters">
<span v-if="filter.column == 'sort'">@{{ filter.cond }}</span>
<span v-else-if="filter.column == 'search'">Search</span>
<span v-else>@{{ filter.column }}</span>
<span class="wrapper">
@{{ filter.val }}
<span class="icon cross-icon" v-on:click="removeFilter(filter)"></span>
</span>
<span class="filter-value">
Available
<span class="icon cross-icon"></span>
</span>
</span> --}}
<span class="filter-tag" v-if="filters.length > 0" v-for="filter in filters" style="height: 60px; width: 60px; background-color: red;">
<span class="col" v-if="filter.column == 'sort'">@{{ filter.cond }}</span>
<span class="col" v-else-if="filter.column == 'search'">Search</span>
<span class="col" v-else>@{{ filter.colum }}</span>
<span class="val">@{{ filter.val }}</span>
<span class="icon cross-icon"></span>
</span>
</div>
@ -152,7 +147,7 @@
<tr>
<th class="grid_head" id="mastercheckbox" style="width: 50px;">
<span class="checkbox">
<input type="checkbox" id="mastercheckbox">
<input type="checkbox" id="mastercheckbox" v-model="massselection">
<label class="checkbox-view" for="checkbox"></label>
</span>
</th>
@ -175,6 +170,7 @@
data: () => ({
url: new URL(window.location.href),
currentSort: null,
massselection: [],
sortDesc: 'desc',
sortAsc: 'asc',
isActive: false,
@ -442,7 +438,7 @@
var clean_uri = uri.substring(0, uri.indexOf("?")).trim();
window.location.href = clean_uri+newParams;
window.location.href = clean_uri + newParams;
},
//make the filter array from url after being redirected
@ -474,48 +470,17 @@
}
console.log(this.filters);
},
removeFilter(filter) {
for(i in this.filters) {
if(this.filters[i].col == filter.col && this.filters[i].cond == filter.cond && this.filters[i].val == filter.val) {
this.filters.splice(i, 1);
this.makeURL();
}
}
}
// //Use the label to prevent the display of column name on the body
// function makeTags() {
// var filterRepeat = 0;
// if(this.filters.length > 0)
// for(var i = 0;i<this.filters.length;i++) {
// if(this.filters[i].column == "sort") {
// col_label_tag = $('li[data-name="'+this.filters[i].cond+'"]').text();
// var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ this.filters[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
// sorted_col = this.filters[i].cond;
// var apply_on_column = $('th[data-column-name="'+sorted_col+'"]').children('.icon');
// if(this.filters[i].val == "asc") {
// apply_on_column.addClass('sort-down-icon');
// } else {
// apply_on_column.addClass('sort-up-icon');
// }
// $('.filter-row-two').append(filter_card);
// } else if(this.filters[i].column == "search") {
// col_label_tag = "Search";
// var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ this.filters[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
// $('.filter-row-two').append(filter_card);
// } else {
// col_label_tag = $('li[data-name="'+this.filters[i].column+'"]').text().trim();
// var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ this.filters[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
// $('.filter-row-two').append(filter_card);
// }
// }
// }
}
});
</script>