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

Checkbox Support Added

This commit is contained in:
Devansh 2022-04-19 12:53:57 +05:30
parent 2c7cf3a220
commit 1b5d311044
7 changed files with 224 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/Webkul/Admin/src/DataGrids/OrderDataGrid.php
View File

@ -105,7 +105,7 @@ class OrderDataGrid extends DataGrid
$this->addColumn([
'index' => 'status',
'label' => trans('admin::app.datagrid.status'),
'type' => 'string',
'type' => 'checkbox',
'options' => [
'processing' => trans('shop::app.customer.account.order.index.processing'),
'completed' => trans('shop::app.customer.account.order.index.completed'),

2
packages/Webkul/Ui/publishable/assets/js/ui.js vendored
View File

File diff suppressed because one or more lines are too long

2
packages/Webkul/Ui/publishable/assets/mix-manifest.json
View File

@ -1,4 +1,4 @@
{
"/js/ui.js": "/js/ui.js?id=a2b05e91c1d8facc7948",
"/js/ui.js": "/js/ui.js?id=85048dc57c04d00314ed",
"/css/ui.css": "/css/ui.css?id=243871695aaf4bd7cf12"
}

4
packages/Webkul/Ui/src/DataGrid/Traits/ProvideCollection.php
View File

@ -204,7 +204,9 @@ trait ProvideCollection
$condition = ($condition === 'undefined') ? '=' : $condition;
if ($columnType === 'datetime') {
if ($columnType === 'checkbox') {
$this->resolve($collection, $columnName, $condition, $filterValue, 'whereIn', 'resolveCheckboxQuery');
} else if ($columnType === 'datetime') {
$this->resolve($collection, $columnName, $condition, $filterValue, 'whereDate');
} else if ($columnType === 'boolean') {
$this->resolve($collection, $columnName, $condition, $filterValue, 'where', 'resolveBooleanQuery');

1
packages/Webkul/Ui/src/DataGrid/Traits/ProvideDataGridPlus.php
View File

@ -154,6 +154,7 @@ trait ProvideDataGridPlus
'recordsFound' => __('admin::app.admin.system.records-found'),
'norecords' => __('ui::app.datagrid.no-records'),
'massActionDelete' => __('ui::app.datagrid.massaction.delete'),
'select' => __('ui::form.select-attribute', ['attribute' => '']),
];
}
}

24
packages/Webkul/Ui/src/DataGrid/Traits/ProvideQueryResolver.php
View File

@ -65,6 +65,26 @@ trait ProvideQueryResolver
}
}
/**
* Resolve checkbox query.
*
* @param \Illuminate\Support\Collection $collection
* @param string $columnName
* @param string $condition
* @param string $filterValue
* @return void
*/
private function resolveCheckboxQuery($collection, $columnName, $condition, $filterValue)
{
$filterValue = explode(',', $filterValue);
if ($this->operators[$condition] == '=') {
$collection->whereIn($columnName, $filterValue);
} else {
$collection->whereNotIn($columnName, $filterValue);
}
}
/**
* Resolve filter query.
*
@ -77,7 +97,7 @@ trait ProvideQueryResolver
*/
private function resolveFilterQuery($collection, $columnName, $condition, $filterValue, $nullCheck = null)
{
$clause = is_null($nullCheck) ? null : ( $nullCheck ? 'orWhereNull' : 'whereNotNull' );
$clause = is_null($nullCheck) ? null : ($nullCheck ? 'orWhereNull' : 'whereNotNull');
$collection->where(function ($query) use ($columnName, $condition, $filterValue, $clause) {
$this->resolveQuery($query, $columnName, $condition, $filterValue);
@ -104,4 +124,4 @@ trait ProvideQueryResolver
? $this->resolveFilterQuery($collection, $columnName, $condition, $filterValue, $nullCheck)
: $this->resolveFilterQuery($collection, $columnName, $condition, $filterValue, ! $nullCheck);
}
}
}

232
packages/Webkul/Ui/src/Resources/assets/js/components/datagrid/filters/column-filter.vue
View File

@ -69,22 +69,7 @@
</li>
<li v-if="stringCondition != null">
<div
class="control-group"
v-if="isCurrentFilterColumnHasOptions()"
>
<select class="control" v-model="stringValue">
<option
:key="key"
v-text="option"
v-value="key"
v-for="(option,
key) in this.getCurrentFilterOptions()"
></option>
</select>
</div>
<div class="control-group" v-else>
<div class="control-group">
<input
type="text"
class="control response-string"
@ -192,6 +177,109 @@
</div>
</li>
<li v-if="dropdownConditionSelect">
<div class="control-group">
<select class="control" v-model="dropdownCondition">
<option
v-text="translations.condition"
selected
disabled
></option>
<option
v-text="translations.equals"
value="eq"
></option>
<option
v-text="translations.nequals"
value="neqs"
></option>
</select>
</div>
</li>
<li v-if="dropdownCondition != null">
<div class="control-group">
<select class="control" v-model="dropdownValue">
<option
:key="key"
v-text="option"
v-value="key"
v-for="(option,
key) in this.getCurrentFilterOptions()"
></option>
</select>
</div>
</li>
<li v-if="checkboxConditionSelect">
<div class="control-group">
<select class="control" v-model="checkboxCondition">
<option
v-text="translations.condition"
selected
disabled
></option>
<option
v-text="translations.equals"
value="eq"
></option>
<option
v-text="translations.nequals"
value="neqs"
></option>
</select>
</div>
</li>
<li v-if="checkboxCondition != null">
<div class="control-group">
<button
style="width: 100%;"
type="button"
class="dropdown-btn"
@click="toggleCheckboxDropdown"
>
{{ translations.select }}
<i class="icon arrow-down-icon"></i>
</button>
<div
ref="checkboxOptions"
class="dropdown-list"
style="display: none;"
>
<div class="dropdown-container">
<ul>
<li
:key="key"
v-for="(option,
key) in this.getCurrentFilterOptions()"
>
<span class="checkbox">
<input
type="checkbox"
v-model="checkboxValue"
:value="option"
/>
<label
class="checkbox-view"
></label>
{{ option }}
</span>
</li>
</ul>
</div>
</div>
</div>
</li>
<li v-if="datetimeConditionSelect">
<div class="control-group">
<select class="control" v-model="datetimeCondition">
@ -272,16 +360,22 @@ export default {
stringConditionSelect: false,
numberConditionSelect: false,
booleanConditionSelect: false,
dropdownConditionSelect: false,
checkboxConditionSelect: false,
datetimeConditionSelect: false,
stringCondition: null,
numberCondition: null,
booleanCondition: null,
dropdownCondition: null,
checkboxCondition: null,
datetimeCondition: null,
stringValue: null,
numberValue: 0,
booleanValue: null,
dropdownValue: null,
checkboxValue: [],
datetimeValue: '2000-01-01'
};
},
@ -310,7 +404,7 @@ export default {
return this.getCurrentFilterColumn().options ?? [];
}
throw "Options are not defined. Don't use this method if options are not available.";
throw 'Options are not defined.';
},
getColumnOrAlias(columnOrAlias) {
@ -325,26 +419,8 @@ export default {
this.stringConditionSelect = true;
this.numberConditionSelect = false;
this.booleanConditionSelect = false;
this.datetimeConditionSelect = false;
this.nullify();
break;
}
case 'datetime': {
this.stringConditionSelect = false;
this.numberConditionSelect = false;
this.booleanConditionSelect = false;
this.datetimeConditionSelect = true;
this.nullify();
break;
}
case 'boolean': {
this.stringConditionSelect = false;
this.numberConditionSelect = false;
this.booleanConditionSelect = true;
this.dropdownConditionSelect = false;
this.checkboxConditionSelect = false;
this.datetimeConditionSelect = false;
this.nullify();
@ -355,16 +431,68 @@ export default {
this.stringConditionSelect = false;
this.numberConditionSelect = true;
this.booleanConditionSelect = false;
this.dropdownConditionSelect = false;
this.checkboxConditionSelect = false;
this.datetimeConditionSelect = false;
this.nullify();
break;
}
case 'boolean': {
this.stringConditionSelect = false;
this.numberConditionSelect = false;
this.booleanConditionSelect = true;
this.dropdownConditionSelect = false;
this.checkboxConditionSelect = false;
this.datetimeConditionSelect = false;
this.nullify();
break;
}
case 'dropdown': {
this.stringConditionSelect = false;
this.numberConditionSelect = false;
this.booleanConditionSelect = false;
this.dropdownConditionSelect = true;
this.checkboxConditionSelect = false;
this.datetimeConditionSelect = false;
this.nullify();
break;
}
case 'checkbox': {
this.stringConditionSelect = false;
this.numberConditionSelect = false;
this.booleanConditionSelect = false;
this.dropdownConditionSelect = false;
this.checkboxConditionSelect = true;
this.datetimeConditionSelect = false;
this.nullify();
break;
}
case 'datetime': {
this.stringConditionSelect = false;
this.numberConditionSelect = false;
this.booleanConditionSelect = false;
this.dropdownConditionSelect = false;
this.checkboxConditionSelect = false;
this.datetimeConditionSelect = true;
this.nullify();
break;
}
case 'price': {
this.stringConditionSelect = false;
this.numberConditionSelect = true;
this.booleanConditionSelect = false;
this.dropdownConditionSelect = false;
this.checkboxConditionSelect = false;
this.datetimeConditionSelect = false;
this.nullify();
@ -425,6 +553,24 @@ export default {
label
}
});
} else if (this.type === 'dropdown') {
this.$emit('onFilter', {
data: {
column: this.columnOrAlias,
condition: this.dropdownCondition,
response: this.dropdownValue,
label
}
});
} else if (this.type === 'checkbox') {
this.$emit('onFilter', {
data: {
column: this.columnOrAlias,
condition: this.checkboxCondition,
response: this.checkboxValue,
label
}
});
} else if (this.type === 'datetime') {
this.$emit('onFilter', {
data: {
@ -450,7 +596,19 @@ export default {
this.stringCondition = null;
this.datetimeCondition = null;
this.booleanCondition = null;
this.dropdownCondition = null;
this.numberCondition = null;
},
toggleCheckboxDropdown() {
const display = this.$refs.checkboxOptions.style.display;
if (display === 'none') {
this.$refs.checkboxOptions.style.display = 'block';
return;
}
this.$refs.checkboxOptions.style.display = 'none';
}
}
};