Failed to execute template. Cause: [Access denied when checking [script] access to [xwiki:Collaboratory.UX.HbpSkin.WebHome] for user [xwiki:XWiki.Admin]]. Click on this message for details.

CLB Search Component - HBP Wiki

IAM21 instance, do not create collab nor modify a team, your changes will be lost


Changes for page CLB Search Component

Last modified by bougault on 2023/01/17 11:42
From version 3.1
edited by bougault
on 2023/01/13 12:06
Change comment: There is no comment for this version
To version 7.4
edited by bougault
on 2023/01/13 13:42
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,4 +1,4 @@
1 -{{html}}
1 +{{html clean="false"}}
2 2  <script>
3 3  class ClbComponent extends HTMLElement {
4 4   constructor() {
... ... @@ -14,6 +14,14 @@
14 14   template.innerHTML = htmlString;
15 15   return template;
16 16   }
17 +
18 + $(selector) {
19 + return this.shadowRoot.querySelector(selector);
20 + }
21 +
22 + $$(selector) {
23 + return this.shadowRoot.querySelectorAll(selector);
24 + }
17 17  }
18 18  
19 19  customElements.define('clb-simplified-search',
... ... @@ -32,32 +32,35 @@
32 32   }
33 33  
34 34  
35 - handleSearch() {
36 - // fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
37 - // .then(res => res.json())
38 - //.then(this.renderResults);
39 - const res = [{"id":"xwiki:Collabs.bougault.Collabs Search.WebHome_en","hidden":false,"wiki":"xwiki","name":"WebHome","space":"Collabs.bougault.Collabs Search","spaces":["Collabs","bougault","Collabs Search"],"locale":"en","language":"en","type":"DOCUMENT","fullname":"Collabs.bougault.Collabs Search.WebHome","title_en":["Collabs Search"],"title_":"Collabs Search","doccontentraw_en":["{{velocity output=\"false\"}}\r\n #set($displayContentFooter=false)\r\n #set($displayDocExtra=false)\r\n #set($displayContentMenu=false)\r\n $xwiki.ssx.use('Collaboratory.UX.SSX.noheader')\r\n\r\n #set ($clbaction = $request.getParameter(\"clbaction\"))\r\n #set ($isCreationForm = $clbaction.equals('create'))\r\n #set ($isAuthenticated = ($xcontext.user != 'XWiki.XWikiGuest'))\r\n #if($isCreationForm)\r\n #set ($moduleCSS = 'collab-settings.css')\r\n #set ($moduleJS = 'collab-settings.js')\r\n #else\r\n #set ($moduleCSS = 'collab-search.css')\r\n #set ($moduleJS = 'collab-search.js')\r\n #end\r\n{{/velocity}}\r\n\r\n{{velocity}}\r\n\r\n{{html wiki=\"true\"}}\r\n\r\n #if($isCreationForm)\r\n (% id=\"root\" %)((()))\r\n #else\r\n (% class=\"container\" %)\r\n (((\r\n #if($isAuthenticated)\r\n (% class=\"row\" %)\r\n (((\r\n (% class=\"col-md-6 pull-right\" %)\r\n (((\r\n {{html}}\r\n <a href=\"/bin/view/Collabs?clbaction=create\" class=\"btn btn-primary pull-right\">Create a collab</a>\r\n {{/html}}\r\n )))\r\n )))\r\n #end\r\n )))\r\n (% id=\"root\" %)((()))\r\n #end\r\n{{/html}}\r\n\r\n{{html clean=\"false\"}}\r\n <link rel=\"stylesheet\" type=\"text/css\" href=\"$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', $moduleCSS)\" />\r\n <script type=\"module\" src=\"$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', $moduleJS)\"></script>\r\n{{/html}}\r\n\r\n{{/velocity}}\r\n\r\n\r\n"],"doccontentraw_":"{{velocity output=\"false\"}}\r\n #set($displayContentFooter=false)\r\n #set($displayDocExtra=false)\r\n #set($displayContentMenu=false)\r\n $xwiki.ssx.use('Collaboratory.UX.SSX.noheader')\r\n\r\n #set ($clbaction = $request.getParameter(\"clbaction\"))\r\n #set ($isCreationForm = $clbaction.equals('create'))\r\n #set ($isAuthenticated = ($xcontext.user != 'XWiki.XWikiGuest'))\r\n #if($isCreationForm)\r\n #set ($moduleCSS = 'collab-settings.css')\r\n #set ($moduleJS = 'collab-settings.js')\r\n #else\r\n #set ($moduleCSS = 'collab-search.css')\r\n #set ($moduleJS = 'collab-search.js')\r\n #end\r\n{{/velocity}}\r\n\r\n{{velocity}}\r\n\r\n{{html wiki=\"true\"}}\r\n\r\n #if($isCreationForm)\r\n (% id=\"root\" %)((()))\r\n #else\r\n (% class=\"container\" %)\r\n (((\r\n #if($isAuthenticated)\r\n (% class=\"row\" %)\r\n (((\r\n (% class=\"col-md-6 pull-right\" %)\r\n (((\r\n {{html}}\r\n <a href=\"/bin/view/Collabs?clbaction=create\" class=\"btn btn-primary pull-right\">Create a collab</a>\r\n {{/html}}\r\n )))\r\n )))\r\n #end\r\n )))\r\n (% id=\"root\" %)((()))\r\n #end\r\n{{/html}}\r\n\r\n{{html clean=\"false\"}}\r\n <link rel=\"stylesheet\" type=\"text/css\" href=\"$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', $moduleCSS)\" />\r\n <script type=\"module\" src=\"$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', $moduleJS)\"></script>\r\n{{/html}}\r\n\r\n{{/velocity}}\r\n\r\n\r\n","doccontent_en":["\n\n"],"doccontent_":"\n\n","version":"28.1","doclocale":"","locales":["","en"],"lang":["","en"],"author":"xwiki:XWiki.bougault","author_display":"François B.","creator":"xwiki:XWiki.bougault","creator_display":"François B.","creationdate":1617976623000,"date":1618401384000,"_version_":1752657755570700288,"score":7.453887},{"id":"xwiki:Collabs.collab-dev.WebHome_en","hidden":false,"wiki":"xwiki","name":"WebHome","space":"Collabs.collab-dev","spaces":["Collabs","collab-dev"],"locale":"en","language":"en","type":"DOCUMENT","fullname":"Collabs.collab-dev.WebHome","title_en":["Collab dev"],"title_":"Collab dev","doccontentraw_en":["(% class=\"jumbotron\" %)\n(((\n(% class=\"container\" %)\n(((\n= My Collab's Extended Title =\n\nMy collab's subtitle\n)))\n)))\n\n(% class=\"row\" %)\n(((\n(% class=\"col-xs-12 col-sm-8\" %)\n(((\n= What can I find here? =\n\n* Notice how the table of contents on the right\n* is automatically updated\n* to hold this page's headers\n\n= Who has access? =\n\nDescribe the audience of this collab.\n)))\n\n\n(% class=\"col-xs-12 col-sm-4\" %)\n(((\n{{box title=\"**Contents**\"}}\n{{toc/}}\n{{/box}}\n\n \n)))\n)))"],"doccontentraw_":"(% class=\"jumbotron\" %)\n(((\n(% class=\"container\" %)\n(((\n= My Collab's Extended Title =\n\nMy collab's subtitle\n)))\n)))\n\n(% class=\"row\" %)\n(((\n(% class=\"col-xs-12 col-sm-8\" %)\n(((\n= What can I find here? =\n\n* Notice how the table of contents on the right\n* is automatically updated\n* to hold this page's headers\n\n= Who has access? =\n\nDescribe the audience of this collab.\n)))\n\n\n(% class=\"col-xs-12 col-sm-4\" %)\n(((\n{{box title=\"**Contents**\"}}\n{{toc/}}\n{{/box}}\n\n \n)))\n)))","doccontent_en":["My Collab's Extended Title\n\nMy collab's subtitle\n\nWhat can I find here?\n\nNotice how the table of contents on the right\nis automatically updated\nto hold this page's headers\n\nWho has access?\n\nDescribe the audience of this collab.\n\n\n "],"doccontent_":"My Collab's Extended Title\n\nMy collab's subtitle\n\nWhat can I find here?\n\nNotice how the table of contents on the right\nis automatically updated\nto hold this page's headers\n\nWho has access?\n\nDescribe the audience of this collab.\n\n\n ","version":"10.1","doclocale":"","locales":["","en"],"lang":["","en"],"author":"xwiki:XWiki.messines","author_display":"Axel M.","creator":"xwiki:XWiki.collaboratory","creator_display":"collaboratory","creationdate":1558605692000,"date":1663716732000,"property.Collaboratory.Apps.Collab.Code.CollabClass.chat_boolean":[false],"object.Collaboratory.Apps.Collab.Code.CollabClass_en":["false","","All usefull contents for collaboratory developers.","true","messines"],"objcontent_en":["chat : false","content : ","description : All usefull contents for collaboratory developers.","drive : true","menu : ","owner : messines","public : false","title : ","allow : true","groups : Collabs.collab-dev._.groups.collab-collab-dev-viewer","levels : view,comment","users : ","groups : Collabs.collab-dev._.groups.collab-collab-dev-editor","levels : view,comment,edit","groups : Collabs.collab-dev._.groups.collab-collab-dev-administrator","levels : view,comment,edit,delete"],"property.Collaboratory.Apps.Collab.Code.CollabClass.content_string":[""],"property.Collaboratory.Apps.Collab.Code.CollabClass.description_en":["All usefull contents for collaboratory developers."],"property.Collaboratory.Apps.Collab.Code.CollabClass.drive_boolean":[true],"property.Collaboratory.Apps.Collab.Code.CollabClass.menu_string":[""],"property.Collaboratory.Apps.Collab.Code.CollabClass.owner_en":["messines"],"property.Collaboratory.Apps.Collab.Code.CollabClass.owner_string":["messines"],"property.Collaboratory.Apps.Collab.Code.CollabClass.public_boolean":[false],"property.Collaboratory.Apps.Collab.Code.CollabClass.title_string":[""],"class":["Collaboratory.Apps.Collab.Code.CollabClass","XWiki.XWikiRights"],"property.XWiki.XWikiRights.allow_boolean":[true,true,true],"object.XWiki.XWikiRights_en":["true","Collabs.collab-dev._.groups.collab-collab-dev-viewer","view,comment","","Collabs.collab-dev._.groups.collab-collab-dev-editor","view,comment,edit","Collabs.collab-dev._.groups.collab-collab-dev-administrator","view,comment,edit,delete"],"property.XWiki.XWikiRights.groups_string":["Collabs.collab-dev._.groups.collab-collab-dev-viewer","Collabs.collab-dev._.groups.collab-collab-dev-editor","Collabs.collab-dev._.groups.collab-collab-dev-administrator"],"property.XWiki.XWikiRights.levels_string":["view,comment","view,comment,edit","view,comment,edit,delete"],"property.XWiki.XWikiRights.users_string":["","",""],"_version_":1752657767917682688,"score":7.453887}];
40 - this.renderResults(res);
43 + handleSearch = () => {
44 + fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
45 + .then(res => res.json())
46 + .then(this.renderResults);
47 +
41 41   }
42 42  
43 43   get searchInput() {
44 - return this.shadowRoot.querySelector('input[type="text"]');
51 + return this.$('input[type="text"]');
45 45   }
46 46  
47 47   get searchButton() {
48 - return this.shadowRoot.querySelector('button');
55 + return this.$('#button');
49 49   }
50 50  
58 +
51 51   get searchInputTemplate() {
52 - return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
60 + return this.createTemplate(`
61 + <div>
62 + <input type="text"><button id="search">Search</button>
63 + <div id="results"></div>
64 + <button id="prev">prev</button>
65 + <button id="next">next</button>
66 + </div>
67 + `);
53 53   }
54 54  
55 - resultsContainer = () => {
56 - return this.shadowRoot.querySelector('#results');
57 - }
58 -
59 59   renderResults(results) {
60 - const resultsContainer = this.shadowRoot.querySelector('#results');
71 + const resultsContainer = this.$('#results');
61 61   resultsContainer.replaceChildren();
62 62   for(let i = 0, j = results.length; i < j; i++) {
63 63   const { title_, spaces, doccontent_en } = results[i];
... ... @@ -106,4 +106,5 @@
106 106   }
107 107  );
108 108  </script>
120 +<clb-simplified-search></clb-simplified-search>
109 109  {{/html}}