PoC of new query pagination

This commit is contained in:
Matej Bačo 2022-08-31 09:22:43 +00:00
parent f6a0949d14
commit 3ba8ee4ec8
9 changed files with 38 additions and 23 deletions

View file

@ -81,7 +81,7 @@ const APP_EMAIL_SECURITY = ''; // Default security email address
const APP_USERAGENT = APP_NAME . '-Server v%s. Please report abuse at %s';
const APP_MODE_DEFAULT = 'default';
const APP_MODE_ADMIN = 'admin';
const APP_PAGING_LIMIT = 12;
const APP_PAGING_LIMIT = 1;
const APP_LIMIT_COUNT = 5000;
const APP_LIMIT_USERS = 10000;
const APP_LIMIT_ANTIVIRUS = 20000000; //20MB

View file

@ -16,12 +16,11 @@
data-service="databases.list"
data-event="load,databases.create,databases.update,databases.delete"
data-param-search="{{router.params.search}}"
data-param-order-type="ASC"
data-param-queries="limit(<?php echo APP_PAGING_LIMIT; ?>),offset({{router.params.offset ?? 0}})"
data-param-queries="orderAsc(''),limit(<?php echo APP_PAGING_LIMIT; ?>),offset({{router.params.offset|orZero}})"
data-param-queries-cast-to="array"
data-param-queries-cast-from="csv"
data-scope="sdk"
data-name="project-databases">
<!-- Problem here (line 20) is that with no param in offset, it is offset() instead of offset(0), causing error on API side -->
<div data-ls-if="(!{{project-databases.total}})" class="box dashboard margin-bottom">
<div class="margin-bottom-small margin-top-small margin-end margin-start">
@ -48,13 +47,12 @@
data-service="databases.list"
data-event="submit"
data-param-search="{{router.params.search}}"
data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
data-param-order-type="ASC"
data-scope="sdk"
data-name="project-databases"
data-success="state"
data-success-param-state-keys="search,offset">
<button name="offset" data-paging-back data-offset="{{router.params.offset}}" data-total="{{project-databases.total}}" class="margin-end round small" aria-label="Back"><i class="icon-left-open"></i></button>
<input type="hidden" name="offset">
<button name="queries" data-cast-to="array" data-cast-from="csv" data-paging-back data-offset="{{router.params.offset}}" data-total="{{project-databases.total}}" class="margin-end round small" aria-label="Back"><i class="icon-left-open"></i></button>
</form>
<span data-ls-bind="{{router.params.offset|pageCurrent}} / {{project-databases.total|pageTotal}}"></span>
@ -63,13 +61,12 @@
data-service="databases.list"
data-event="submit"
data-param-search="{{router.params.search}}"
data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
data-param-order-type="ASC"
data-scope="sdk"
data-name="project-databases"
data-success="state"
data-success-param-state-keys="search,offset">
<button name="offset" data-paging-next data-offset="{{router.params.offset}}" data-total="{{project-databases.total}}" class="margin-start round small" aria-label="Next"><i class="icon-right-open"></i></button>
<input type="hidden" name="offset">
<button name="queries" data-cast-to="array" data-cast-from="csv" data-paging-next data-offset="{{router.params.offset}}" data-total="{{project-databases.total}}" class="margin-start round small" aria-label="Next"><i class="icon-right-open"></i></button>
</form>
</div>

8
composer.lock generated
View file

@ -2841,12 +2841,12 @@
"source": {
"type": "git",
"url": "https://github.com/appwrite/sdk-generator.git",
"reference": "6e630a62f522ac68a7056bebf81cd032c7a053ba"
"reference": "6597948263e88f73dbdd5c70259dd54aff2dfcf8"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/appwrite/sdk-generator/zipball/6e630a62f522ac68a7056bebf81cd032c7a053ba",
"reference": "6e630a62f522ac68a7056bebf81cd032c7a053ba",
"url": "https://api.github.com/repos/appwrite/sdk-generator/zipball/6597948263e88f73dbdd5c70259dd54aff2dfcf8",
"reference": "6597948263e88f73dbdd5c70259dd54aff2dfcf8",
"shasum": ""
},
"require": {
@ -2884,7 +2884,7 @@
"issues": "https://github.com/appwrite/sdk-generator/issues",
"source": "https://github.com/appwrite/sdk-generator/tree/master"
},
"time": "2022-08-29T10:43:33+00:00"
"time": "2022-08-30T18:29:13+00:00"
},
{
"name": "doctrine/instantiator",

View file

@ -3997,7 +3997,7 @@ return'';}).add("runtimeVersion",function($value,env){if(env&&env.RUNTIMES&&env.
return'';}).add("indexAttributes",function($value){let output='';for(let i=0;i<$value.attributes.length;i++){output+=$value.attributes[i]+' ('+$value.orders[i]+'), '}
return output.slice(0,-2);}).add("collectionAttributes",function($value){if(!Array.isArray($value)){return[];}
$value.unshift({$id:'$id'});return $value;}).add("documentAttribute",function($value,attribute){if(attribute.key in $value){return $value[attribute.key];}
return null;}).add("accessProject",function($value,router){return($value&&$value.hasOwnProperty(router.params.project))?$value[router.params.project]:0;}).add("first",function($value){return $value[0].$id;}).add("last",function($value){return $value[$value.length-1].$id;});function abbreviate(number,maxPlaces,forcePlaces,forceLetter){number=Number(number);forceLetter=forceLetter||false;if(forceLetter!==false){return annotate(number,maxPlaces,forcePlaces,forceLetter);}
return null;}).add("accessProject",function($value,router){return($value&&$value.hasOwnProperty(router.params.project))?$value[router.params.project]:0;}).add("first",function($value){return $value[0].$id;}).add("last",function($value){return $value[$value.length-1].$id;}).add("orZero",function($value){return $value?$value:0;});function abbreviate(number,maxPlaces,forcePlaces,forceLetter){number=Number(number);forceLetter=forceLetter||false;if(forceLetter!==false){return annotate(number,maxPlaces,forcePlaces,forceLetter);}
let abbr;if(number>=1e12){abbr="T";}else if(number>=1e9){abbr="B";}else if(number>=1e6){abbr="M";}else if(number>=1e3){abbr="K";}else{abbr="";}
return annotate(number,maxPlaces,forcePlaces,abbr);}
function annotate(number,maxPlaces,forcePlaces,abbr){let rounded=0;switch(abbr){case"T":rounded=number/1e12;break;case"B":rounded=number/1e9;break;case"M":rounded=number/1e6;break;case"K":rounded=number/1e3;break;case"":rounded=number;break;}
@ -4037,7 +4037,7 @@ if(element.array){document[element.key]=[];}}}}}};let getParams=function getPara
functionAsString=functionAsString.replaceAll('={}',"");functionAsString=functionAsString.replaceAll('=[]',"");functionAsString=functionAsString.replace(REGEX_COMMENTS,"");functionAsString=functionAsString.match(REGEX_FUNCTION_PARAMS)[1];if(functionAsString.charAt(0)==="("){functionAsString=functionAsString.slice(1,-1);}
while((match=REGEX_PARAMETERS_VALUES.exec(functionAsString))){params.push(match[1]);}
return params;};let getValue=function(key,prefix,data){let result=null;if(!key){return null;}
let attrKey=prefix+key.charAt(0).toUpperCase()+key.slice(1);if(element.dataset[attrKey]){result=expression.parse(element.dataset[attrKey]);if(element.dataset[attrKey+"CastTo"]==="array"){result=result.split(",");}}
let attrKey=prefix+key.charAt(0).toUpperCase()+key.slice(1);if(element.dataset[attrKey]){result=element.dataset[attrKey];if(element.dataset[attrKey+"CastTo"]==="array"){result=result.split(",");result=result.map(function(r){return expression.parse(r);});}else{result=expression.parse(result);}}
if(typeof data[key]!=='undefined'){result=data[key];}
if(typeof result==='undefined'){result="";}
return result;};let resolve=function(target,prefix="param",data={}){if(!target){return function(){};}
@ -4164,7 +4164,7 @@ for(var i=0;i<newParts.length;i++){const a=parseInt(newParts[i])||0
const b=parseInt(oldParts[i])||0
if(a>b)return true
if(a<b)return false}
return false}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-back",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());if(offset-limit<0){element.disabled=true;}else{element.disabled=false;element.value=offset-limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-next",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());let total=parseInt(expression.parse(element.dataset["total"])||"0");paths=paths.concat(expression.getPaths());if(offset+limit>=total){element.disabled=true;}else{element.disabled=false;element.value=offset+limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-highlight",controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName("a");let selected=null;let list=[];for(let i=0;i<links.length;i++){list.push(links[i]);}
return false}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-back",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());if(offset-limit<0){element.disabled=true;}else{const newOffset=offset-limit;element.disabled=false;element.value='orderAsc(\'\'),limit('+limit+'),offset('+newOffset+')';try{element.parentElement.querySelector('input[name="offset"]').value=newOffset+'';}catch(err){}}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-next",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());let total=parseInt(expression.parse(element.dataset["total"])||"0");paths=paths.concat(expression.getPaths());if(offset+limit>=total){element.disabled=true;}else{const newOffset=offset+limit;element.disabled=false;element.value='orderAsc(\'\'),limit('+limit+'),offset('+newOffset+')';try{element.parentElement.querySelector('input[name="offset"]').value=newOffset;}catch(err){}}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-highlight",controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName("a");let selected=null;let list=[];for(let i=0;i<links.length;i++){list.push(links[i]);}
list.sort(function(a,b){return a.pathname.length-b.pathname.length;});if(selected&&list[selected].dataset["selected"]){let parent=element.querySelector("a[href='"+list[selected].dataset["selected"]+"']");if(parent){parent.classList.remove("selected");}}
for(let i=0;i<list.length;i++){let path=list[i].pathname;if(path===window.location.pathname.substring(0,path.length)){list[i].classList.add("selected");if(selected!==null){list[selected].classList.remove("selected");}
selected=i;}else{list[i].classList.remove("selected");}}

View file

@ -584,7 +584,7 @@ return'';}).add("runtimeVersion",function($value,env){if(env&&env.RUNTIMES&&env.
return'';}).add("indexAttributes",function($value){let output='';for(let i=0;i<$value.attributes.length;i++){output+=$value.attributes[i]+' ('+$value.orders[i]+'), '}
return output.slice(0,-2);}).add("collectionAttributes",function($value){if(!Array.isArray($value)){return[];}
$value.unshift({$id:'$id'});return $value;}).add("documentAttribute",function($value,attribute){if(attribute.key in $value){return $value[attribute.key];}
return null;}).add("accessProject",function($value,router){return($value&&$value.hasOwnProperty(router.params.project))?$value[router.params.project]:0;}).add("first",function($value){return $value[0].$id;}).add("last",function($value){return $value[$value.length-1].$id;});function abbreviate(number,maxPlaces,forcePlaces,forceLetter){number=Number(number);forceLetter=forceLetter||false;if(forceLetter!==false){return annotate(number,maxPlaces,forcePlaces,forceLetter);}
return null;}).add("accessProject",function($value,router){return($value&&$value.hasOwnProperty(router.params.project))?$value[router.params.project]:0;}).add("first",function($value){return $value[0].$id;}).add("last",function($value){return $value[$value.length-1].$id;}).add("orZero",function($value){return $value?$value:0;});function abbreviate(number,maxPlaces,forcePlaces,forceLetter){number=Number(number);forceLetter=forceLetter||false;if(forceLetter!==false){return annotate(number,maxPlaces,forcePlaces,forceLetter);}
let abbr;if(number>=1e12){abbr="T";}else if(number>=1e9){abbr="B";}else if(number>=1e6){abbr="M";}else if(number>=1e3){abbr="K";}else{abbr="";}
return annotate(number,maxPlaces,forcePlaces,abbr);}
function annotate(number,maxPlaces,forcePlaces,abbr){let rounded=0;switch(abbr){case"T":rounded=number/1e12;break;case"B":rounded=number/1e9;break;case"M":rounded=number/1e6;break;case"K":rounded=number/1e3;break;case"":rounded=number;break;}
@ -624,7 +624,7 @@ if(element.array){document[element.key]=[];}}}}}};let getParams=function getPara
functionAsString=functionAsString.replaceAll('={}',"");functionAsString=functionAsString.replaceAll('=[]',"");functionAsString=functionAsString.replace(REGEX_COMMENTS,"");functionAsString=functionAsString.match(REGEX_FUNCTION_PARAMS)[1];if(functionAsString.charAt(0)==="("){functionAsString=functionAsString.slice(1,-1);}
while((match=REGEX_PARAMETERS_VALUES.exec(functionAsString))){params.push(match[1]);}
return params;};let getValue=function(key,prefix,data){let result=null;if(!key){return null;}
let attrKey=prefix+key.charAt(0).toUpperCase()+key.slice(1);if(element.dataset[attrKey]){result=expression.parse(element.dataset[attrKey]);if(element.dataset[attrKey+"CastTo"]==="array"){result=result.split(",");}}
let attrKey=prefix+key.charAt(0).toUpperCase()+key.slice(1);if(element.dataset[attrKey]){result=element.dataset[attrKey];if(element.dataset[attrKey+"CastTo"]==="array"){result=result.split(",");result=result.map(function(r){return expression.parse(r);});}else{result=expression.parse(result);}}
if(typeof data[key]!=='undefined'){result=data[key];}
if(typeof result==='undefined'){result="";}
return result;};let resolve=function(target,prefix="param",data={}){if(!target){return function(){};}
@ -751,7 +751,7 @@ for(var i=0;i<newParts.length;i++){const a=parseInt(newParts[i])||0
const b=parseInt(oldParts[i])||0
if(a>b)return true
if(a<b)return false}
return false}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-back",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());if(offset-limit<0){element.disabled=true;}else{element.disabled=false;element.value=offset-limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-next",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());let total=parseInt(expression.parse(element.dataset["total"])||"0");paths=paths.concat(expression.getPaths());if(offset+limit>=total){element.disabled=true;}else{element.disabled=false;element.value=offset+limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-highlight",controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName("a");let selected=null;let list=[];for(let i=0;i<links.length;i++){list.push(links[i]);}
return false}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-back",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());if(offset-limit<0){element.disabled=true;}else{const newOffset=offset-limit;element.disabled=false;element.value='orderAsc(\'\'),limit('+limit+'),offset('+newOffset+')';try{element.parentElement.querySelector('input[name="offset"]').value=newOffset+'';}catch(err){}}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-next",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());let total=parseInt(expression.parse(element.dataset["total"])||"0");paths=paths.concat(expression.getPaths());if(offset+limit>=total){element.disabled=true;}else{const newOffset=offset+limit;element.disabled=false;element.value='orderAsc(\'\'),limit('+limit+'),offset('+newOffset+')';try{element.parentElement.querySelector('input[name="offset"]').value=newOffset;}catch(err){}}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-highlight",controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName("a");let selected=null;let list=[];for(let i=0;i<links.length;i++){list.push(links[i]);}
list.sort(function(a,b){return a.pathname.length-b.pathname.length;});if(selected&&list[selected].dataset["selected"]){let parent=element.querySelector("a[href='"+list[selected].dataset["selected"]+"']");if(parent){parent.classList.remove("selected");}}
for(let i=0;i<list.length;i++){let path=list[i].pathname;if(path===window.location.pathname.substring(0,path.length)){list[i].classList.add("selected");if(selected!==null){list[selected].classList.remove("selected");}
selected=i;}else{list[i].classList.remove("selected");}}

View file

@ -318,6 +318,9 @@ window.ls.filter
.add("last", function ($value) {
return $value[$value.length - 1].$id;
})
.add("orZero", function ($value) {
return $value ? $value : 0;
})
;
function abbreviate(number, maxPlaces, forcePlaces, forceLetter) {

View file

@ -15,8 +15,13 @@
if (offset - limit < 0) {
element.disabled = true;
} else {
const newOffset = offset - limit;
element.disabled = false;
element.value = offset - limit;
element.value = 'orderAsc(\'\'),limit(' + limit + '),offset(' + newOffset + ')';
try {
element.parentElement.querySelector('input[name="offset"]').value = newOffset + '';
} catch(err) {} // Initial load can fail
}
};

View file

@ -19,8 +19,13 @@
if (offset + limit >= total) {
element.disabled = true;
} else {
const newOffset = offset + limit;
element.disabled = false;
element.value = offset + limit;
element.value = 'orderAsc(\'\'),limit(' + limit + '),offset(' + newOffset + ')';
try {
element.parentElement.querySelector('input[name="offset"]').value = newOffset;
} catch(err) {} // Initial load can fail
}
};

View file

@ -239,10 +239,15 @@
* 2. Get from element form object-*
*/
if (element.dataset[attrKey]) {
result = expression.parse(element.dataset[attrKey]);
result = element.dataset[attrKey];
if (element.dataset[attrKey + "CastTo"] === "array") {
result = result.split(",");
result = result.map(function(r) {
return expression.parse(r);
});
} else {
result = expression.parse(result);
}
}