From 1d43eda21f96b223a560d617023e7e54658c180d Mon Sep 17 00:00:00 2001
From: snipe <snipe@snipe.net>
Date: Wed, 21 Apr 2021 20:16:17 -0700
Subject: [PATCH] Features: improved UI for importer (#9467)

* Small UI improvements for importer

Signed-off-by: snipe <snipe@snipe.net>

* And UI backup improvements

Signed-off-by: snipe <snipe@snipe.net>
---
 public/js/build/app.js                        | Bin 447561 -> 447622 bytes
 public/js/dist/all.js                         | Bin 1068803 -> 1068864 bytes
 public/mix-manifest.json                      |   4 +-
 .../js/components/importer/importer-file.vue  |   9 +-
 resources/views/importer/import.blade.php     | 110 +++++++++---------
 resources/views/settings/backups.blade.php    |  17 ++-
 6 files changed, 81 insertions(+), 59 deletions(-)

diff --git a/public/js/build/app.js b/public/js/build/app.js
index 772d4f2ab9cc763ea6310f7dd631602944fc951f..7f36b2e30df8fd93d4256310860958ee43fa42d0 100644
GIT binary patch
delta 211
zcmX@PLb`3Gbi)?LO&eG&OOsrtH%Kx`O%K?}=*?78H2vT%MzQIUy)3fR{j=C~WNLMy
z^E8x7Qj~P66H7{pimj@X^K*&|67#H-OsD%BvPw_izn77H`-CjEXeRbd=Zw_kY=!Nw
zbJ!Z$rx$Ex<eYw>l1*khry8r^_IV|2(yY^E4nqY+6cm&+V>PWx^x{)BfQ(ojBhA?9
z7w58xZL4DIVQJsEff0zAfS4JGS+;N7z{<FDdv6_Es6HFW)k>PvSCzA9ZWmm~W}yZE
DlD<h^

delta 160
zcmV;R0AK%xsT;|t8-TO{vakg~FJ&ttm+`FzB!~0G0f+O&0*CX(1Bdg)1h@0W1=qL(
zIWjVrL7oO_mvY$w6qhrx0Z9QYm$A436t}vu0b2r>rnUhlw?ec5TL+h)y8$Pc{m20e
zmrJ1r4Y%OC0S*P1{mB6bm-oN{9GA$u0SyCPEHalcNCj4xu)_gBx4*#w3Iw;weg;-A
O1Zz1mGPfhH24g0w3qb?`

diff --git a/public/js/dist/all.js b/public/js/dist/all.js
index 6b2d9e08afb88228ca0dfbca9b6a59306b34c7d8..fcace549957496c7985dc3f7e349de0c407f941d 100644
GIT binary patch
delta 498
zcmXAlJxmi}7{_yW@B5rw1?uoN!D53KO(?BJNgO2cqv)U{q(x~kfr{8xdIIg)JBCsk
zR1%G%g44rbSWHYzjDwm!0}jT)L}f5qBj|wQ;?l&;L5;qR!*BTgpReSZTaG?oj$V4I
ze0<CgOr1Ms;<kB~R^0;r$-+o$IXq;wn{L_+mquN;;B=Q#`3c7!&2^jmv41c3qy0+J
zk-5-{UmVzhvy;$*#ogSC@etomH48Qr-8!1hq{iE5bsR41=<VPQIN(4V{$7Gcnsva>
zaX9in44_d_JbE&i40i>S7`w%M80q3YxG)VzC{+Z5ff?=0giO41gYBw3Q67X8gS=@^
z2dDSnl=Ws3MbAku{ngZ^L0Q2e)hFnYt-ctOX0NFsL3e9vxo#~9ZA#F>1udSHw((B8
zD5(FtHb15s79QS&0R4)wQ-Wd{HYfWrw$A)iTV=z7dN<kC`ii$FcvdJD{?Ncj@ezJy
zf*a@ag?0?BF+VQeXFxyS@PweguRLELcy=600&n{?phIUMVNk9N1D&k?dwTg0Uhk22
z7C*r~Jo^EfsOK~E&dB8Epnjcvr}fDhVYpe#iKGj8+s>p9?%Wp)n^q22s(RpBrK(G|
VNE#%D#3R`%X_PckrP|y#{SRE{vTOhV

delta 423
zcmX>w&#`%)W5X84>zlT}KhAhbd%D41CYJ4iDcowT+u!_PyvfhVwf!gu)2sCD8w!}j
zM1j0xtxSi~w|Bl}(gyLiFfrGrZ#T+fE(P(H*E0uXZ2$3`xe&z5{L9>(&X_qpQI=J1
zyGSZaFi0@HilsSyy8k;CiS5jfSmHrKN#9x8(zm~iW6c2Z0!vtD=1l(|&&sj=^8?l*
zQBJPh#EQ(^(p;<QAHK3mY;XO>>Yu*-YAjndNOeFlTQnE5rIFF}{RT{ulM|R_r^hc~
zF`3S?n^Aar#AZfMMxE(_POKu^?{8*|W}1F_2cz2d^lgmM?9<nuVPu~!bC^+X`|G`o
z8m!Yr4>KxH*R*2gW{jPDk6B_m$0fGV=>|K1iryauYI<^*k&9*fs#>;CeYR|%eM*|s
z&v&zEZr5AOHeYx8-p6d-(<N`SMF5>t2&8JJp9*L11ag8S*mG+{OENNx^-_xR3kp(G
vY!wYPb-0u=^QQl}!Y<eT`3gG_a{w_X5OV=BHxTmxF)tAFZU20Q-?s_?35KJ4

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 2c21d995bd..3d993150e4 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/js/build/app.js": "/js/build/app.js?id=dbeda4a18809e6247c2a",
+    "/js/build/app.js": "/js/build/app.js?id=b23ec8d1be42f9d3d810",
     "/css/build/AdminLTE.css": "/css/build/AdminLTE.css?id=59413334823616b81341",
     "/css/build/app.css": "/css/build/app.css?id=032fd8c3fce99c7fd862",
     "/css/build/overrides.css": "/css/build/overrides.css?id=0b4aefd7ef0c117ef23a",
@@ -34,5 +34,5 @@
     "/css/dist/bootstrap-table.css": "/css/dist/bootstrap-table.css?id=1e77fde04b3f42432581",
     "/js/build/vendor.js": "/js/build/vendor.js?id=b93877b4a88a76e1b18b",
     "/js/dist/bootstrap-table.js": "/js/dist/bootstrap-table.js?id=fd6e727609678bf04984",
-    "/js/dist/all.js": "/js/dist/all.js?id=0efed60df4636f215a73"
+    "/js/dist/all.js": "/js/dist/all.js?id=dde965016a515da2f8d2"
 }
diff --git a/resources/assets/js/components/importer/importer-file.vue b/resources/assets/js/components/importer/importer-file.vue
index 02553009c8..17313aae06 100644
--- a/resources/assets/js/components/importer/importer-file.vue
+++ b/resources/assets/js/components/importer/importer-file.vue
@@ -1,6 +1,7 @@
 <template>
-
-    <div v-show="processDetail" class="col-md-12">
+  <tr v-show="processDetail">
+    <td colspan="5">
+    <div class="col-md-12">
 
             <div class="row">
                 <div class="dynamic-form-row">
@@ -20,7 +21,7 @@
                         <label for="import-update">Update Existing Values?:</label>
                     </div>
                     <div class="col-md-7 col-xs-12">
-                        <input type="checkbox" class="minimal" name="import-update" v-model="options.update">
+                        <input type="checkbox" class="iCheck minimal" name="import-update" v-model="options.update">
                     </div>
                 </div><!-- /dynamic-form-row -->
 
@@ -94,6 +95,8 @@
 
     </div><!-- /div v-show -->
 
+    </td>
+  </tr>
 </template>
 
 <script>
diff --git a/resources/views/importer/import.blade.php b/resources/views/importer/import.blade.php
index 281b2ef87d..a3b4cd2bd2 100644
--- a/resources/views/importer/import.blade.php
+++ b/resources/views/importer/import.blade.php
@@ -14,20 +14,6 @@
             display:none;
         }
 
-        /* Rules for the div table */
-        .tbl_head {
-            font-weight: bold;
-        }
-        .div_tbl {
-            display: table;
-        }
-        .div_tbl_row {
-            display: table-row;
-        }
-        .div_tbl_cell {
-            display: table-cell;
-            padding: 2px
-        }
     </style>
 
 <div id="app">
@@ -40,59 +26,77 @@
                 <div class="box">
                     <div class="box-body">
                         <div class="row">
-                            <div class="col-md-3 pull-right">
 
-                                <!-- The fileinput-button span is used to style the file input field as button -->
-                                @if (!config('app.lock_passwords'))
-                                <span class="btn btn-primary fileinput-button">
-                                    <span>Select Import File...</span>
-                                    <!-- The file input field used as target for the file upload widget -->
-                                    <label for="files[]"><span class="sr-only">Select file</span></label>
-                                    <input id="fileupload" type="file" name="files[]" data-url="{{ route('api.imports.index') }}" accept="text/csv" aria-label="files[]">
-                                </span>
-                                 @endif
+                            <div class="col-md-12">
 
-                            </div>
-                            <div class="col-md-9" v-show="progress.visible" style="padding-bottom:20px">
-                                <div class="col-md-11">
+                                <div class="col-md-9" v-show="progress.visible" style="padding-bottom:20px">
                                     <div class="progress progress-striped-active" style="margin-top: 8px">
                                         <div class="progress-bar" :class="progress.currentClass" role="progressbar" :style="progressWidth">
                                             <span>@{{ progress.statusText }}</span>
                                         </div>
                                     </div>
                                 </div>
+
+                                <div class="col-md-3 text-right pull-right">
+
+                                    <!-- The fileinput-button span is used to style the file input field as button -->
+                                    @if (!config('app.lock_passwords'))
+                                        <span class="btn btn-primary fileinput-button">
+                                        <span>Select Import File...</span>
+                                         <!-- The file input field used as target for the file upload widget -->
+                                        <label for="files[]"><span class="sr-only">Select file</span></label>
+                                        <input id="fileupload" type="file" name="files[]" data-url="{{ route('api.imports.index') }}" accept="text/csv" aria-label="files[]">
+                                        </span>
+                                    @endif
+
+                                </div>
+
                             </div>
+
+
+
                         </div>
                         <div class="row">
-                            <div class="col-md-12" style="padding-top: 30px;">
-                                <div class="table table-striped" id="upload-table">
-                                    <div class="div_tbl_row col-md-12">
-                                        <div class="tbl_head col-md-5">File</div>
-                                        <div class="tbl_head col-md-3">Created</div>
-                                        <div class="tbl_head col-md-2">Size</div>
-                                        <div class="tbl_head col-md-2"></div>
-                                    </div>
+                            <div class="col-md-12 table-responsive" style="padding-top: 30px;">
+
+                                <table data-pagination="true"
+                                        data-id-table="upload-table"
+                                        data-search="true"
+                                        data-side-pagination="client"
+                                        id="upload-table"
+                                        class="col-md-12 table table-striped snipe-table">
+
+                                    <tr>
+                                        <th class="col-md-6">File</th>
+                                        <th class="col-md-3">Created</th>
+                                        <th class="col-md-1">Size</th>
+                                        <th class="col-md-1 text-right"><span class="sr-only">Process</span></th>
+                                        <th class="col-md-1 text-right"><span class="sr-only">Delete</span></th>
+                                    </tr>
 
                                     <template v-for="currentFile in files">
-                                    		<div class="div_tbl_row col-md-12">
-                                    			<div class="div_tbl_cell col-md-5">@{{ currentFile.file_path }}</div>
-                                    			<div class="div_tbl_cell col-md-3">@{{ currentFile.created_at }} </div>
-                                    			<div class="div_tbl_cell col-md-2">@{{ currentFile.filesize }}</div>
-
-                                                <div class="div_tbl_cell col-md-2">
-                                    			    <button class="btn btn-sm btn-info" @click="toggleEvent(currentFile.id)">Process</button>
-                                                    <button class="btn btn-sm btn-danger" @click="deleteFile(currentFile)"><i class="fa fa-trash icon-white"></i></button>
-                                    			</div>
-                                    		</div>
-
-                                            <import-file
-                                                :key="currentFile.id"
-                                                :file="currentFile"
-                                                :custom-fields="customFields"
-                                                @alert="updateAlert(alert)">
-                                            </import-file>
+                                    		<tr>
+                                    			<td class="col-md-6">@{{ currentFile.file_path }}</td>
+                                    			<td class="col-md-3">@{{ currentFile.created_at }} </td>
+                                    			<td class="col-md-1">@{{ currentFile.filesize }}</td>
+                                                <td class="col-md-1 text-right">
+                                                    <button class="btn btn-sm btn-info" @click="toggleEvent(currentFile.id)">
+                                                        Process
+                                                    </button>
+                                                </td>
+                                                <td class="col-md-1 text-right">
+                                                    <button class="btn btn-sm btn-danger" @click="deleteFile(currentFile)">
+                                                        <i class="fa fa-trash icon-white" aria-hidden="true"></i><span class="sr-only"></span></button>
+                                    			</td>
+                                    		</tr>
+                                                <import-file
+                                                    :key="currentFile.id"
+                                                    :file="currentFile"
+                                                    :custom-fields="customFields"
+                                                    @alert="updateAlert(alert)">
+                                                </import-file>
                                     </template>
-                                </div>
+                                </table>
                             </div>
                         </div>
                     </div>
diff --git a/resources/views/settings/backups.blade.php b/resources/views/settings/backups.blade.php
index 538583d65c..3af4d8ba96 100644
--- a/resources/views/settings/backups.blade.php
+++ b/resources/views/settings/backups.blade.php
@@ -19,7 +19,17 @@
     <div class="box box-default">
       <div class="box-body">
         <div class="table-responsive">
-          <table class="table table-striped">
+            <table
+                    data-cookie="true"
+                    data-cookie-id-table="system-backups"
+                    data-pagination="true"
+                    data-id-table="system-backups"
+                    data-search="true"
+                    data-side-pagination="client"
+                    data-sort-order="asc"
+                    id="system-backups"
+                    class="table table-striped snipe-table">
+                <thead>
             <thead>
               <th>File</th>
               <th>Created</th>
@@ -78,3 +88,8 @@
 
 
 @stop
+
+@section('moar_scripts')
+    @include ('partials.bootstrap-table')
+@stop
+