Add popover to the search result (tags list and full file name)

Author: Volmarg

public/assets/app.css

@@ -80,6 +80,8 @@ export default (function () {
 
                         $(fileSearchResultWrapper).empty();
                         $(fileSearchResultWrapper).append(searchResultsList);
+                        ui.widgets.popover.init();
+
                         bootstrap_notifications.notify("Found " + resultsCount + " matching file/s", 'success');
 
 
@@ -95,17 +97,33 @@ export default (function () {
             let ul = $('<ul>');
 
             $.each(data, (index, result) => {
+                let tagsJson        = result['tags'];
+                let arrayOfTags     = JSON.parse(tagsJson);
+                let tagsList        = '';
                 let module          = result['module'];
                 let filename        = result['filename'];
                 let filePath        = result['fullFilePath'];
                 let directoryPath   = result['directoryPath'];
                 let shortFilename   = filename;
                 let shortLen        = 16;
 
+                // build list of tags
+                $.each(arrayOfTags, (idx, tag) => {
+
+                    tagsList += tag;
+
+                    if( idx < ( arrayOfTags.length - 1 ) ){
+                        tagsList += ', ';
+                    }
+
+                });
+
+                // build shortname
                 if( filename.length > shortLen ) {
                    shortFilename   = filename.substr(0, shortLen) + '...';
                 }
 
+                // build download form
                 let form = $('<form>');
                 $(form).attr('method', "POST");
                 $(form).attr('action', "/download/file");
@@ -145,6 +163,24 @@ export default (function () {
                 $(link).append(moduleIcon);
                 $(link).append(name);
 
+                //add popover to link
+                $(link).attr('data-trigger', "hover");
+
+                $(link).attr('data-html', "true");
+                $(link).attr('data-toggle-popover', 'true');
+
+                $(link).attr(
+                    'data-content',
+                    `<p style='display: flex;'>
+                        <span style='font-weight: bold; '>
+                            Tags:&nbsp;
+                        </span> 
+                        <span style='word-break: break-all;'>` + tagsList + `</span>
+                    </p>`
+                );
+                $(link).attr('title', filename);
+
+                // combine list elements
                 let li = $('<li>');
                 $(li).append(link);
                 $(li).append(form);

public/assets/app.js

@@ -33,6 +33,7 @@ export default (function () {
             this.callModalOnWidgetPlusIcon();
             this.addMonthlyPaymentSummaryToAccordinHeader();
             this.removeFolderOnFolderRemovalIconClick();
+            this.popover.init();
 
             $(document).ready(function(){
                 ui.widgets.fixAccordions();
@@ -258,6 +259,11 @@ export default (function () {
                 });
 
             }
+        },
+        popover: {
+            init: function(){
+                $('[data-toggle-popover="true"]').popover();
+            }
         }
 
     };

src/assets/scripts/ui/filesSearch.js

@@ -18,6 +18,7 @@
 
 @import 'app.css';
 @import 'libs/customization-for-liblaries/fontawesome';
+@import 'libs/customization-for-liblaries/popover.scss';
 
 /* My-scsses */
 

src/assets/scripts/ui/widgets.js

@@ -0,0 +1,7 @@
+.popover-header {
+  font-size: 12px;
+}
+
+.popover-body {
+  font-size: 13px;
+}

src/scss/index.scss

@@ -5,9 +5,7 @@
     </a>
 </li>
 <li class="search-input">
-    {# TODO: prevent overwriting the styles by selectizejs #}
     <input class="form-control tags" type="text" data-value="" placeholder="Search for files by tags..." id="filesSearchByTags">
     <div id="searchResultListWrapper">
-
     </div>
 </li>