From a407a63d65e16c44bd48391269107ada41050370 Mon Sep 17 00:00:00 2001
From: Kurniandha Sukma Yunastrian <13516106@std.stei.itb.ac.id>
Date: Wed, 19 May 2021 22:01:48 +0700
Subject: [PATCH] Add sort requirement by number and score
---
resources/views/layouts/app.blade.php | 1 +
resources/views/project.blade.php | 33 ++++++++++++++++++++++++---
2 files changed, 31 insertions(+), 3 deletions(-)
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 985f888..c7613c3 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -11,6 +11,7 @@
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
diff --git a/resources/views/project.blade.php b/resources/views/project.blade.php
index ac44f50..2afd939 100644
--- a/resources/views/project.blade.php
+++ b/resources/views/project.blade.php
@@ -18,9 +18,16 @@
<div class="card-body">
Project name: <span class="font-weight-bold">{{ $project->name }}</span>
@if(count($requirements) == 0)
- There is no requirements
+ <br>There is no requirements
@else
- <table class="table mt-3">
+ <div class="form-group mt-4 col-md-4">
+ <label for="sortby">Sort by:</label>
+ <select class="form-control" id="sortby">
+ <option value="1" selected>Number</option>
+ <option value="2">Score</option>
+ </select>
+ </div>
+ <table id="requirementsTable" class="table mt-3">
<thead>
<tr>
<th scope="col">#</th>
@@ -28,7 +35,7 @@
<th scope="col">Score</th>
</tr>
</thead>
- <tbody>
+ <tbody id="requirementsTableBody">
@foreach($requirements as $requirement)
<tr>
<th scope="row" class="align-middle">R{{ $requirement->number + 1 }}</th>
@@ -247,4 +254,24 @@
</div>
</div>
</div>
+
+<script type="text/javascript">
+ $(document).ready(function() {
+ $("#sortby").change(function(){
+ if (this.value == 1) {
+ var tbody =$('#requirementsTableBody');
+
+ tbody.find('tr').sort(function(a, b) {
+ return $('td:first', a).text().localeCompare($('td:first', b).text());
+ }).appendTo(tbody);
+ } else {
+ var tbody =$('#requirementsTableBody');
+
+ tbody.find('tr').sort(function(a, b) {
+ return $('td:last', b).text().localeCompare($('td:last', a).text());
+ }).appendTo(tbody);
+ }
+ });
+ });
+</script>
@endsection
--
GitLab