Directory search (#32)

* adds directory search by name of directory * adds in a notice for no files in the filtered files pages * adds directory search gif * adds production JS for directory search
cdowdy · Oct 8, 2018 · 14f20f4 · 14f20f4
1 parent 579b1d2
commit 14f20f4
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 38 deletions.
diff --git a/assets/js/components/TinypngDirectoryList.vue b/assets/js/components/TinypngDirectoryList.vue
@@ -18,7 +18,7 @@
             >
                 <span role="button"
                       tabindex="0"
-                      class="tinypng-table-header--button" >
+                      class="tinypng-table-header--button">
                     Directory
                     <i class="fa"
                        :class=" sortedIcons ">
@@ -31,37 +31,69 @@
                 Subdirectory
             </th>
         </tr>
+        <!-- TODO abstract this into its own component because this is getting "large" -->
+        <tr role="row">
+            <th scope="col"
+                role="columnheader">
+                <form action="">
+                    <div class="form-group ">
+                        <label for="directorySearch"
+                               class="control-label">
+                            Search By Directory Name:
+                        </label>
+                        <input type="search"
+                               id="directorySearch"
+                               class="form-control"
+                               aria-describedby="DirectorySearchDescription"
+                               placeholder="Search For Directory Name"
+                               v-model="filteredDirectories">
+                        <span class="sr-only"
+                              id="DirectorySearchDescription">Search for Directory</span>
+                    </div>
+                </form>
+            </th>
+            <th>
+                &nbsp;
+            </th>
+        </tr>
         </thead>
         <tbody>
-           <template v-for="directory in sortedDirectories" >
-               <template v-if="directory.subdirectory.length < 1">
-                   <tr role="row">
-                       <td>
-                           <a :href="directory.route ">
-                               {{ directory.path }}
-                           </a>
-                       </td>
-                       <td></td>
-                   </tr>
-               </template>
-               <template v-else>
-                   <tr role="row"
-                       :rowspan="directory.subdirectory.length">
-                       <td>
-                           <a :href="directory.route ">
-                               {{ directory.path }}
-                           </a>
-                       </td>
-                       <td>
-                           <p v-for="dir in directory.subdirectory" v-if="dir.path">
-                               <a :href="dir.route">
-                                   {{ dir.path }}
-                               </a>
-                           </p>
-                       </td>
-                   </tr>
-               </template>
-           </template>
+        <template v-if="sortedDirectories.length < 1 ">
+            <tr>
+                <td>
+                    No Directory Here
+                </td>
+            </tr>
+        </template> <!-- ./ length less than 1 -->
+        <template v-for="directory in sortedDirectories">
+            <template v-if="directory.subdirectory.length < 1">
+                <tr role="row">
+                    <td>
+                        <a :href="directory.route ">
+                            {{ directory.path }}
+                        </a>
+                    </td>
+                    <td></td>
+                </tr>
+            </template>  <!-- ./ subdirectory greater than 1 -->
+            <template v-else>
+                <tr role="row"
+                    :rowspan="directory.subdirectory.length">
+                    <td>
+                        <a :href="directory.route ">
+                            {{ directory.path }}
+                        </a>
+                    </td>
+                    <td>
+                        <p v-for="dir in directory.subdirectory" v-if="dir.path">
+                            <a :href="dir.route">
+                                {{ dir.path }}
+                            </a>
+                        </p>
+                    </td>
+                </tr>
+            </template>
+        </template> <!-- ./ for directory in sortedDirectories -->
         </tbody>
     </table>
 </template>
@@ -95,6 +127,8 @@
             return {
                 captionVisible: false,
 
+                filteredDirectories:    '',
+
                 sort: {
                     sortBy: 'path',
                     activeDirection: '',
@@ -133,15 +167,20 @@
             sortedDirectories() {
 
                 let direction = 'asc';
+                // this is for the text based search for filtering by name
+                let  dirfilter = new RegExp(this.filteredDirectories, 'i');
 
                 if (this.sort.activeDirection === 'descending' ) {
                     direction = 'desc';
                 }
 
-                return orderBy( this.directoriesList, [ this.sort.sortBy ], [ direction ] );
+                let directoryList = this.directoriesList.filter( el => el.path.match(dirfilter));
+
+                return orderBy( directoryList, [ this.sort.sortBy ], [ direction ] );
 
             },
 
+
             // should refactor this to use props or data instead of returning the
             // icon name in a string
             sortedIcons() {

diff --git a/assets/js/components/TinypngFilelisting.vue b/assets/js/components/TinypngFilelisting.vue
@@ -110,6 +110,11 @@
             </tr>
             </thead>
             <tbody slot="table-body">
+            <template v-if="filterFiles.length < 1 ">
+                <tr>
+                    <td>NO PNG/JPG Images In This Directory</td>
+                </tr>
+            </template>
             <template v-if="fileList && Object.keys(fileList).length >= 1">
                 <tr is="tinypng-file"
                     v-for="(file, index) in filterFiles "
@@ -161,11 +166,6 @@
                     </template>
                 </tr>
             </template>
-            <template v-else>
-                <tr>
-                    <td>NO PNG/JPG Images In This Directory</td>
-                </tr>
-            </template>
             </tbody>
         </table>
     </form>

diff --git a/composer.json b/composer.json
@@ -45,6 +45,7 @@
             "screenshots/tinypng-upload.png",
             "screenshots/tinypng-dropdown_0323017.png",
             "screenshots/tinypng-directories.png",
+            "screenshots/tinypng-directory-search.gif",
             "screenshots/tinypng-rename.png",
             "screenshots/tinypng-spinner.png"
         ]

diff --git a/screenshots/tinypng-directory-search.gif b/screenshots/tinypng-directory-search.gif
diff --git a/web/tinypng.optimize.js b/web/tinypng.optimize.js