kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-26 00:51:26 -05:00
Code Issues Projects Releases Packages Wiki Activity

Implement optional edit-list filter support

Browse source
This commit is contained in:
Kevin MacMartin 2016-12-22 00:20:44 -05:00
parent 6ec9531074
commit 6e42a86ad2
6 changed files with 87 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
bower.json
View file

@ -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"
} }
} }

1
gulpfile.js
View file

@ -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"
]; ];

7
readme.md
View file

@ -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

15
resources/assets/js/dashboard.js
View file

@ -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
View file

@ -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;
}
} }
} }
} }

70
resources/views/dashboard/edit-list.blade.php
View file

@ -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