Added search format in the format list page (#223)

Notes: suggestions are not dynamically updated according to table content
clarin-eric · Aug 15, 2023 · 4505328 · 4505328
1 parent 9cc336c
commit 4505328
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 10 deletions.
diff --git a/SIS/clarin/modules/format.xql b/SIS/clarin/modules/format.xql
@@ -23,10 +23,30 @@ declare function fm:count-defined-formats() {
     return count($formats)
 };
 
+declare function fm:list-search-suggestion(){
+    let $formats := $format:formats
+    let $format-name := $formats/titleStmt/title/text()
+    let $format-abbr := $formats/titleStmt/abbr/text()
+    (:let $mime-types := distinct-values($formats/mimeType)
+    let $file-exts := distinct-values($formats/fileExt):)
+
+    let $union := 
+        for $item in ($format-name,$format-abbr)
+        (:,$mime-types,$file-exts):) 
+        order by fn:lower-case($item) 
+        return $item 
+
+    return fn:string-join($union,",")
+
+};
+
 (: Generate the list of formats :)
-declare function fm:list-formats($keyword) {
-    let $formats := 
-        if ($keyword) then $format:formats[keyword=$keyword]
+declare function fm:list-formats($keyword,$searchItem) {
+    let $formats :=
+        if ($searchItem) 
+            then $format:formats[titleStmt/abbr/text()=$searchItem or 
+                titleStmt/title/text()=$searchItem]
+        else if ($keyword) then $format:formats[keyword=$keyword]
         else $format:formats
 
     for $format in $formats

diff --git a/SIS/clarin/views/list-formats.xq b/SIS/clarin/views/list-formats.xq
@@ -10,6 +10,7 @@ import module namespace rf = "http://clarin.ids-mannheim.de/standards/recommende
 
 let $reset := request:get-parameter('resetButton', '')
 let $keyword := if ($reset) then () else request:get-parameter('keyword', '')
+let $searchItem := if ($reset) then () else request:get-parameter('searchFormat', '')
 
 return
 (: 
@@ -20,9 +21,24 @@ return
     <head>
         <title>Data Deposition Formats</title>
         <link rel="stylesheet" type="text/css" href="{app:resource("style.css", "css")}"/>
+        <link rel="stylesheet" type="text/css" href="{app:resource("autocomplete.css", "css")}"/>
         <script type="text/javascript" src="{app:resource("edit.js", "js")}"/>
         <script type="text/javascript" src="{app:resource("utils.js", "js")}"/>
+        <script type="text/javascript" src="{app:resource("autocomplete.js", "js")}"/>
         <script type="text/javascript" src="{app:resource("session.js", "js")}"/>
+        <script>
+            var searchSuggestion = '{fm:list-search-suggestion()}';
+
+            document.addEventListener('DOMContentLoaded', function() {{
+                window.onload = init();
+            }});
+
+             function init(){{
+                 checkActiveRI();
+                 suggestion('searchId', searchSuggestion)
+             }}
+
+        </script>
     </head>
     <body>
         <div id="all">
@@ -72,34 +88,51 @@ return
                     <p>By clicking on the icon next to the format name, you can copy the format ID, which may be useful for editing or adding 
                        centre recommendations.</p>
 
-                       <form method="get" action="{app:link("views/list-formats.xq#defined")}">
+                       <form id="filter" method="get" action="{app:link("views/list-formats.xq#filter")}"
+                            style="border: solid 1px #c0c0c0; border-radius:4px;padding:3px;
+                            background-color:#c3d3e3;width:500px;">
                             <table style="margin:0;">
                                 <tr>
-                                    <td><span class="heading3">Keyword</span>:
-                                        <select name="keyword" class="inputSelect" style="width:185px;">
+                                    <td><!--<span class="heading3">Keyword</span>-->
+                                        <select name="keyword" class="inputSelect" 
+                                        style="width:310px;height:25px;background-color:white;">
                                             {rf:print-option("select", "", "Select keyword ...")}
                                             {rf:print-keywords($keyword)}
                                         </select>
                                     </td>
                                     <td>
-                                        <input name="searchButton" class="button"
-                                        style="margin:0;height:25px;" type="submit" value="Search"/>
+                                        <input name="filterButton" class="button"
+                                        style="margin:0;height:25px;" type="submit" value="Filter"/>
                                     </td>
                                     <td>
                                         <input name="resetButton" class="button"
                                         style="margin-bottom:5px;height:25px;" type="submit" value="Reset"/>
                                     </td>
                                 </tr>
+                                <tr>
+                                <td class ="autocomplete">
+                                         <input id="searchId" name="searchFormat" 
+                                         style="width:300px;padding-left:5px" 
+                                        class="inputText" type="text" 
+                                        placeholder="Search format ..." value="{$searchItem}"/>
+                                </td>
+                                <td>
+                                    <input name="searchButton" class="button"
+                                    style="margin:0;height:25px;vertical-align:top;" type="submit" value="Search"/>
+                                </td>
+                                <td>
+                                </td>
+                            </tr>
                             </table>
                        </form>
                 </div>
                 <table>
                     <tr>
-                        <th style="width:60%">Format</th>
+                        <th style="width:60%;min-width:400px">Format</th>
                         <th style="width:20%">MIME types</th>
                         <th style="width:20%">File Extensions</th>
                     </tr>
-                    {fm:list-formats($keyword)}
+                    {fm:list-formats($keyword,$searchItem)}
                 </table>
             </div>
             <div