12519: Updated search box placeholder message
[arvados.git] / apps / workbench / app / assets / javascripts / components / collections.js
index 0c821e98c6c6e01d88ec53d098d32df29007a50f..b1233d0ce8f0b5fc6b8e365365eb0ec7d4cc6669 100644 (file)
@@ -2,9 +2,41 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-window.components = window.components || {}
-window.components.collection_table_narrow = {
+window.CollectionsTable = {
+    maybeLoadMore: function(dom) {
+        var loader = this.loader
+        if (loader.state != loader.READY)
+            // Can't start getting more items anyway: no point in
+            // checking anything else.
+            return
+        var contentRect = dom.getBoundingClientRect()
+        var scroller = window // TODO: use dom's nearest ancestor with scrollbars
+        if (contentRect.bottom < 2 * scroller.innerHeight) {
+            // We have less than 1 page worth of content available
+            // below the visible area. Load more.
+            loader.loadMore()
+            // Indicate loading is in progress.
+            window.requestAnimationFrame(m.redraw)
+        }
+    },
+    oncreate: function(vnode) {
+        vnode.state.maybeLoadMore = vnode.state.maybeLoadMore.bind(vnode.state, vnode.dom)
+        window.addEventListener('scroll', vnode.state.maybeLoadMore)
+        window.addEventListener('resize', vnode.state.maybeLoadMore)
+        vnode.state.timer = window.setInterval(vnode.state.maybeLoadMore, 200)
+        vnode.state.loader = vnode.attrs.loader
+        vnode.state.onupdate(vnode)
+    },
+    onupdate: function(vnode) {
+        vnode.state.loader = vnode.attrs.loader
+    },
+    onremove: function(vnode) {
+        window.clearInterval(vnode.state.timer)
+        window.removeEventListener('scroll', vnode.state.maybeLoadMore)
+        window.removeEventListener('resize', vnode.state.maybeLoadMore)
+    },
     view: function(vnode) {
+        var loader = vnode.attrs.loader
         return m('table.table.table-condensed', [
             m('thead', m('tr', [
                 m('th'),
@@ -13,83 +45,109 @@ window.components.collection_table_narrow = {
                 m('th', 'last modified'),
             ])),
             m('tbody', [
-                vnode.attrs.items.map(function(item) {
+                loader.items().map(function(item) {
                     return m('tr', [
-                        m('td', m('a.btn.btn-xs.btn-default', {href: item.session.baseURL.replace('://', '://workbench.')+'/collections/'+item.uuid}, 'Show')),
-                        m('td', item.uuid),
+                        m('td', [
+                            item.workbenchBaseURL() &&
+                                m('a.btn.btn-xs.btn-default', {
+                                    title: 'Show '+item.objectType.description,
+                                    href: item.workbenchBaseURL()+'/'+item.objectType.wb_path+'/'+item.uuid,
+                                }, item.objectType.label),
+                        ]),
+                        m('td.arvados-uuid', item.uuid),
                         m('td', item.name || '(unnamed)'),
-                        m('td', m(window.components.datetime, {parse: item.modified_at})),
+                        m('td', m(LocalizedDateTime, {parse: item.modified_at})),
                     ])
                 }),
             ]),
+            loader.state == loader.DONE ? null : m('tfoot', m('tr', [
+                m('th[colspan=4]', m('button.btn.btn-xs', {
+                    className: loader.state == loader.LOADING ? 'btn-default' : 'btn-primary',
+                    style: {
+                        display: 'block',
+                        width: '12em',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                    },
+                    disabled: loader.state == loader.LOADING,
+                    onclick: function() {
+                        loader.loadMore()
+                        return false
+                    },
+                }, loader.state == loader.LOADING ? '(loading)' : 'Load more')),
+            ])),
         ])
     },
 }
 
-function Pager(loadFunc) {
-    // loadFunc(filters) returns a promise for a page of results.
-    var pager = this
-    Object.assign(pager, {
-        done: false,
-        items: m.stream(),
-        lastModifiedAt: null,
-        loadNextPage: function() {
-            // Get the next page, if there are any more items to get.
-            if (pager.done)
-                return
-            var filters = pager.lastModifiedAt ? [["modified_at", "<=", pager.lastModifiedAt]] : []
-            loadFunc(filters).then(function(resp) {
-                var items = pager.items() || []
-                Array.prototype.push.apply(items, resp.items)
-                if (resp.items.length == 0)
-                    pager.done = true
-                else
-                    pager.lastModifiedAt = resp.items[resp.items.length-1].modified_at
-                pager.items(items)
-            })
-        },
-    })
-}
-
-window.components.collection_search = {
+window.CollectionsSearch = {
     oninit: function(vnode) {
-        vnode.state.sessionDB = new window.models.SessionDB()
-        vnode.state.searchEntered = m.stream('')
-        vnode.state.searchStart = m.stream('')
-        // items ready to display
-        vnode.state.displayItems = m.stream([])
-        // {sessionKey -> Pager}
-        vnode.state.pagers = {}
-        vnode.state.searchStart.map(function(q) {
-            var sessions = vnode.state.sessionDB.loadAll()
-            var cookie = (new Date()).getTime()
-            var displayItems = m.stream([])
-            vnode.state.displayItems = displayItems
-            m.stream.merge(Object.keys(sessions).map(function(key) {
-                var pager = new Pager(function(filters) {
-                    if (q)
-                        filters.push(['any', '@@', q+':*'])
-                    return vnode.state.sessionDB.request(sessions[key], 'arvados/v1/collections', {
-                        data: {
-                            filters: JSON.stringify(filters),
-                            count: 'none',
+        vnode.state.sessionDB = new SessionDB()
+        vnode.state.searchEntered = m.stream()
+        vnode.state.searchActive = m.stream()
+        // When searchActive changes (e.g., when restoring state
+        // after navigation), update the text field too.
+        vnode.state.searchActive.map(vnode.state.searchEntered)
+        // When searchActive changes, create a new loader that filters
+        // with the given search term.
+        vnode.state.searchActive.map(function(q) {
+            var sessions = vnode.state.sessionDB.loadActive()
+            vnode.state.loader = new MergingLoader({
+                children: Object.keys(sessions).map(function(key) {
+                    var session = sessions[key]
+                    var workbenchBaseURL = function() {
+                        return vnode.state.sessionDB.workbenchBaseURL(session)
+                    }
+                    var searchable_objects = [
+                        {
+                            wb_path: 'groups',
+                            api_path: 'arvados/v1/groups',
+                            filters: [['group_class', '=', 'project']],
+                            label: 'P',
+                            description: 'Project',
                         },
+                        {
+                            wb_path: 'collections',
+                            api_path: 'arvados/v1/collections',
+                            filters: [],
+                            label: 'C',
+                            description: 'Collection',
+                        },
+                    ]
+                    return new MergingLoader({
+                        sessionKey: key,
+                        // For every session, search for every object type
+                        children: searchable_objects.map(function(obj_type){
+                            return new MultipageLoader({
+                                sessionKey: key,
+                                objectKind: obj_type.label,
+                                loadFunc: function(filters) {
+                                    var tsquery = to_tsquery(q)
+                                    if (tsquery) {
+                                        filters = filters.slice(0)
+                                        filters.push(['any', '@@', tsquery])
+                                    }
+                                    // Apply additional type dependant filters, if any.
+                                    for (var f of obj_type.filters) {
+                                        filters.push(f)
+                                    }
+                                    return vnode.state.sessionDB.request(session, obj_type.api_path, {
+                                        data: {
+                                            filters: JSON.stringify(filters),
+                                            count: 'none',
+                                        },
+                                    }).then(function(resp) {
+                                        resp.items.map(function(item) {
+                                            item.workbenchBaseURL = workbenchBaseURL
+                                            item.objectType = obj_type
+                                        })
+                                        return resp
+                                    })
+                                },
+                            })
+                        })
                     })
                 })
-                vnode.state.pagers[key] = pager
-                pager.loadNextPage()
-                return pager.items.map(function() { return key })
-            })).map(function(keys) {
-                var combined = []
-                keys.forEach(function(key) {
-                    vnode.state.pagers[key].items().forEach(function(item) {
-                        item.session = sessions[key]
-                        combined.push(item)
-                    })
-                })
-                displayItems(combined.sort(function(a, b) {
-                    return a.modified_at < b.modified_at ? 1 : -1
-                }))
             })
         })
     },
@@ -97,37 +155,47 @@ window.components.collection_search = {
         var sessions = vnode.state.sessionDB.loadAll()
         return m('form', {
             onsubmit: function() {
-                vnode.state.searchStart(vnode.state.searchEntered())
+                vnode.state.searchActive(vnode.state.searchEntered())
+                vnode.state.forgetSavedHeight = true
                 return false
             },
         }, [
-            m('.row', [
-                m('.col-md-6', [
-                    m('.input-group', [
-                        m('input#search.form-control[placeholder=Search]', {
-                            oninput: m.withAttr('value', vnode.state.searchEntered),
-                        }),
-                        m('.input-group-btn', [
-                            m('input.btn.btn-primary[type=submit][value="Search"]'),
+            m(SaveUIState, {
+                defaultState: '',
+                currentState: vnode.state.searchActive,
+                forgetSavedHeight: vnode.state.forgetSavedHeight,
+                saveBodyHeight: true,
+            }),
+            vnode.state.loader && [
+                m('.row', [
+                    m('.col-md-6', [
+                        m('.input-group', [
+                            m('input#search.form-control[placeholder=Search collections and projects]', {
+                                oninput: m.withAttr('value', vnode.state.searchEntered),
+                                value: vnode.state.searchEntered(),
+                            }),
+                            m('.input-group-btn', [
+                                m('input.btn.btn-primary[type=submit][value="Search"]'),
+                            ]),
                         ]),
                     ]),
+                    m('.col-md-6', [
+                        'Searching sites: ',
+                        vnode.state.loader.children.length == 0
+                            ? m('span.label.label-xs.label-danger', 'none')
+                            : vnode.state.loader.children.map(function(child) {
+                                return [m('span.label.label-xs', {
+                                    className: child.state == child.LOADING ? 'label-warning' : 'label-success',
+                                }, child.sessionKey), ' ']
+                            }),
+                        ' ',
+                        m('a[href="/sessions"]', 'Add/remove sites'),
+                    ]),
                 ]),
-                m('.col-md-6', [
-                    'Searching sites: ',
-                    Object.keys(sessions).length == 0
-                        ? m('span.label.label-xs.label-danger', 'none')
-                        : Object.keys(sessions).sort().map(function(key) {
-                            return [m('span.label.label-xs', {
-                                className: vnode.state.pagers[key].items() ? 'label-info' : 'label-default',
-                            }, key), ' ']
-                        }),
-                    ' ',
-                    m('a[href="/sessions"]', 'Add/remove sites'),
-                ]),
-            ]),
-            m(window.components.collection_table_narrow, {
-                items: vnode.state.displayItems(),
-            }),
+                m(CollectionsTable, {
+                    loader: vnode.state.loader,
+                }),
+            ],
         ])
     },
 }