mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 11:16:39 -05:00
Implement optional edit-list filter support
This commit is contained in:
parent
6ec9531074
commit
6e42a86ad2
6 changed files with 87 additions and 35 deletions
|
@ -15,6 +15,7 @@
|
||||||
"datetimepicker": "~2.5.4",
|
"datetimepicker": "~2.5.4",
|
||||||
"SpinKit": "~1.2.5",
|
"SpinKit": "~1.2.5",
|
||||||
"jQuery.stickyFooter": "https://github.com/miWebb/jQuery.stickyFooter.git#~1.2.3",
|
"jQuery.stickyFooter": "https://github.com/miWebb/jQuery.stickyFooter.git#~1.2.3",
|
||||||
"bootstrap-sass": "^3.3.7"
|
"bootstrap-sass": "^3.3.7",
|
||||||
|
"list.js": "^1.3.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -47,6 +47,7 @@ const jsDashboardLibs = [
|
||||||
"bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
|
"bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
|
||||||
"bower_components/Sortable/Sortable.js",
|
"bower_components/Sortable/Sortable.js",
|
||||||
"bower_components/datetimepicker/build/jquery.datetimepicker.full.js",
|
"bower_components/datetimepicker/build/jquery.datetimepicker.full.js",
|
||||||
|
"bower_components/list.js/dist/list.js",
|
||||||
"bower_components/simplemde/dist/simplemde.min.js"
|
"bower_components/simplemde/dist/simplemde.min.js"
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -51,7 +51,8 @@ First add a function to generate the page:
|
||||||
'sortcol' => false,
|
'sortcol' => false,
|
||||||
'delete' => true,
|
'delete' => true,
|
||||||
'create' => true,
|
'create' => true,
|
||||||
'export' => true
|
'export' => true,
|
||||||
|
'filter' => true
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -71,7 +72,8 @@ First add a function to generate the page:
|
||||||
'sortcol' => 'order',
|
'sortcol' => 'order',
|
||||||
'delete' => false,
|
'delete' => false,
|
||||||
'create' => true,
|
'create' => true,
|
||||||
'export' => true
|
'export' => true,
|
||||||
|
'filter' => true
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -84,6 +86,7 @@ First add a function to generate the page:
|
||||||
* `delete`: A `delete` button will appear in the list if this is set to `true`
|
* `delete`: A `delete` button will appear in the list if this is set to `true`
|
||||||
* `create`: A `new` button will appear in the heading if this is set to `true`
|
* `create`: A `new` button will appear in the heading if this is set to `true`
|
||||||
* `export`: An `export` button will appear in the heading if this is set to `true`
|
* `export`: An `export` button will appear in the heading if this is set to `true`
|
||||||
|
* `filter`: An input box will appear below the heading that can filter rows by input if this is set to `true`
|
||||||
|
|
||||||
#### Editable Item
|
#### Editable Item
|
||||||
|
|
||||||
|
|
|
@ -193,10 +193,25 @@ function editListInit() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// initialize filter functionality if the filter-input element exists
|
||||||
|
const filterInputInit = function() {
|
||||||
|
const $filter = $("#filter-input");
|
||||||
|
|
||||||
|
if ($filter.length) {
|
||||||
|
// empty the filter
|
||||||
|
$filter.val("");
|
||||||
|
|
||||||
|
const filterList = new List("edit-list-wrapper", {
|
||||||
|
valueNames: [ "title" ]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
newButtonInit();
|
newButtonInit();
|
||||||
editButtonInit();
|
editButtonInit();
|
||||||
deleteButtonInit();
|
deleteButtonInit();
|
||||||
sortRowInit();
|
sortRowInit();
|
||||||
|
filterInputInit();
|
||||||
}
|
}
|
||||||
|
|
||||||
function editItemInit() {
|
function editItemInit() {
|
||||||
|
|
26
resources/assets/sass/dashboard.scss
vendored
26
resources/assets/sass/dashboard.scss
vendored
|
@ -23,7 +23,7 @@ $fa-font-path: "/fonts";
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@include font-sans;
|
@include font-sans;
|
||||||
min-width: 350px;
|
min-width: 440px;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
@ -87,6 +87,19 @@ body {
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
background-color: lighten($c-dashboard-light, 1%);
|
background-color: lighten($c-dashboard-light, 1%);
|
||||||
|
|
||||||
|
@media (max-width: $screen-xs-max) {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (max-width: $screen-xs-max) {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.help-text {
|
.help-text {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
@ -246,11 +259,16 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-column {
|
.title-column {
|
||||||
|
float: left;
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
padding-left: 0px;
|
padding-left: 0px;
|
||||||
font-family: "Lucida Console", Monaco, monospace;
|
font-family: "Lucida Console", Monaco, monospace;
|
||||||
|
|
||||||
|
@media (max-width: $screen-xs-max) {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
@ -258,6 +276,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-column {
|
.button-column {
|
||||||
|
float: right;
|
||||||
padding-right: 0px;
|
padding-right: 0px;
|
||||||
padding-left: 0px;
|
padding-left: 0px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@ -268,6 +287,11 @@ body {
|
||||||
height: 26px;
|
height: 26px;
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
|
|
||||||
|
@media (max-width: $screen-xs-max) {
|
||||||
|
height: 20px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,51 +1,59 @@
|
||||||
@extends('dashboard.core')
|
@extends('dashboard.core')
|
||||||
|
|
||||||
@section('dashboard-heading')
|
@section('dashboard-heading')
|
||||||
@if($export == true)
|
@if($export)
|
||||||
<a href="/dashboard/export/{{ $model }}"><button type="button" class="btn btn-default">Export</button></a>
|
<a href="/dashboard/export/{{ $model }}"><button type="button" class="btn btn-default">Export</button></a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if($create == true)
|
@if($create)
|
||||||
<button type="button" class="new-button btn btn-default">New</button>
|
<button type="button" class="new-button btn btn-default">New</button>
|
||||||
@endif
|
@endif
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('dashboard-body')
|
@section('dashboard-body')
|
||||||
<ul id="edit-list" class="list-group edit-list" data-model="{{ $model }}" {{ $sortcol != false ? "data-sort=$sortcol" : '' }}>
|
<div id="edit-list-wrapper">
|
||||||
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
|
@if($filter)
|
||||||
|
<input id="filter-input" class="search" placeholder="Filter" />
|
||||||
|
@endif
|
||||||
|
|
||||||
@foreach($rows as $row)
|
<ul id="edit-list" class="list-group edit-list list" data-model="{{ $model }}" {{ $sortcol != false ? "data-sort=$sortcol" : '' }}>
|
||||||
<li class="list-group-item" data-id="{{ $row['id'] }}">
|
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-9 title-column">
|
|
||||||
@if($sortcol != false)
|
|
||||||
<i class="fa fa-bars sort-icon" title="Click and drag to reorder"></i>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@if(is_array($column))
|
@foreach($rows as $row)
|
||||||
@foreach($column as $col)
|
<li class="list-group-item" data-id="{{ $row['id'] }}">
|
||||||
<div class="column">{{ $row[$col] }}</div>
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="title-column">
|
||||||
|
@if($sortcol != false)
|
||||||
|
<i class="fa fa-bars sort-icon" title="Click and drag to reorder"></i>
|
||||||
|
@endif
|
||||||
|
|
||||||
@if(!$loop->last)
|
<div class="title">
|
||||||
<div class="column">|</div>
|
@if(is_array($column))
|
||||||
|
@foreach($column as $col)
|
||||||
|
<div class="column">{{ $row[$col] }}</div>
|
||||||
|
|
||||||
|
@if(!$loop->last)
|
||||||
|
<div class="column">|</div>
|
||||||
|
@endif
|
||||||
|
@endforeach
|
||||||
|
@else
|
||||||
|
{{ $row[$column] }}
|
||||||
@endif
|
@endif
|
||||||
@endforeach
|
</div>
|
||||||
@else
|
</div>
|
||||||
{{ $row[$column] }}
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-3 button-column">
|
<div class="button-column">
|
||||||
<button type="button" class="edit-button btn btn-warning">Edit</button>
|
<button type="button" class="edit-button btn btn-warning">Edit</button>
|
||||||
|
|
||||||
@if($delete == true)
|
@if($delete)
|
||||||
<button type="button" class="delete-button btn btn-danger">Delete</button>
|
<button type="button" class="delete-button btn btn-danger">Delete</button>
|
||||||
@endif
|
@endif
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
@endforeach
|
||||||
@endforeach
|
</ul>
|
||||||
</ul>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
Loading…
Reference in a new issue