custom id component in project id
This commit is contained in:
parent
75fdc8c0e7
commit
9ec39ad3b8
5 changed files with 80 additions and 3 deletions
|
@ -213,7 +213,12 @@
|
||||||
<p>Appwrite projects are containers for your resources and apps across different platforms.</p>
|
<p>Appwrite projects are containers for your resources and apps across different platforms.</p>
|
||||||
|
|
||||||
<label>ID</label>
|
<label>ID</label>
|
||||||
<input type="text" class="full-width margin-bottom-xl" name="projectId" required autocomplete="off" maxlength="128" />
|
<input
|
||||||
|
type="hidden"
|
||||||
|
data-custom-id
|
||||||
|
id-type="custom"
|
||||||
|
name="projectId"
|
||||||
|
class="" required maxlength="36" />
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<button type="submit">Create</button> <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
|
<button type="submit">Create</button> <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
|
||||||
|
|
|
@ -44,6 +44,7 @@ const configApp = {
|
||||||
'public/scripts/views/forms/code.js',
|
'public/scripts/views/forms/code.js',
|
||||||
'public/scripts/views/forms/color.js',
|
'public/scripts/views/forms/color.js',
|
||||||
'public/scripts/views/forms/copy.js',
|
'public/scripts/views/forms/copy.js',
|
||||||
|
'public/scripts/views/forms/custom-id.js',
|
||||||
'public/scripts/views/forms/document.js',
|
'public/scripts/views/forms/document.js',
|
||||||
'public/scripts/views/forms/document-preview.js',
|
'public/scripts/views/forms/document-preview.js',
|
||||||
'public/scripts/views/forms/filter.js',
|
'public/scripts/views/forms/filter.js',
|
||||||
|
|
5
public/dist/scripts/app-all.js
vendored
5
public/dist/scripts/app-all.js
vendored
|
@ -2340,7 +2340,10 @@ code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addE
|
||||||
function syncA(){element.value=picker.value;update();}
|
function syncA(){element.value=picker.value;update();}
|
||||||
function syncB(){picker.value=element.value;}
|
function syncB(){picker.value=element.value;}
|
||||||
element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-copy",controller:function(element,alerts,document,window){var button=window.document.createElement("i");button.type="button";button.className="icon-docs note copy";button.style.cursor="pointer";element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){let disabled=element.disabled;element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-copy",controller:function(element,alerts,document,window){var button=window.document.createElement("i");button.type="button";button.className="icon-docs note copy";button.style.cursor="pointer";element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){let disabled=element.disabled;element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
||||||
element.disabled=disabled;element.blur();alerts.add({text:"Copied to clipboard",class:""},3000);};button.addEventListener("click",copy);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document",controller:function(element,container,search){var formsDocument=(element.dataset["formsDocument"]||'');var searchButton=(element.dataset["search"]||0);let path=container.scope(searchButton);element.addEventListener('click',function(){search.selected=element.value;search.path=path;document.dispatchEvent(new CustomEvent(formsDocument,{bubbles:false,cancelable:true}));});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document-preview",controller:function(element,container,search){element.addEventListener('change',function(){console.log(element.value);});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-forms-filter",controller:function(document,container,expression,element,form,di){let name=element.dataset["formsFilter"]||"";let events=element.dataset["event"]||"";let serialize=function(obj,prefix){let str=[],p;for(p in obj){if(obj.hasOwnProperty(p)){let k=prefix?prefix+"["+p+"]":p,v=obj[p];if(v===""){continue;}
|
element.disabled=disabled;element.blur();alerts.add({text:"Copied to clipboard",class:""},3000);};button.addEventListener("click",copy);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-custom-id",controller:function(element){var prevData="";let idType=element.getAttribute('id-type');var div=window.document.createElement("div");div.className="input-copy";var button=window.document.createElement("i");button.type="button";button.className=idType=="custom"?"icon-cog copy":"icon-edit copy";button.style.cursor="pointer";var writer=document.createElement("input");writer.type="text";writer.className="";div.appendChild(writer);div.appendChild(button);element.parentNode.insertBefore(div,element);writer.autofocus;var switchType=function(event){if(idType=="custom"){idType="auto";element.setAttribute('id-type',idType);prevData=writer.value;writer.disabled=true;writer.value='auto-generated';element.value='unique()';}else{idType="custom";element.setAttribute('id-type',idType);writer.value=prevData;writer.disabled=false;element.value=prevData;writer.focus();}
|
||||||
|
button.className=idType=="custom"?"icon-cog copy":"icon-edit copy";}
|
||||||
|
var sync=function(event){if(element.value!=='unique()'){writer.value=element.value;}}
|
||||||
|
sync();button.addEventListener("click",switchType);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document",controller:function(element,container,search){var formsDocument=(element.dataset["formsDocument"]||'');var searchButton=(element.dataset["search"]||0);let path=container.scope(searchButton);element.addEventListener('click',function(){search.selected=element.value;search.path=path;document.dispatchEvent(new CustomEvent(formsDocument,{bubbles:false,cancelable:true}));});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document-preview",controller:function(element,container,search){element.addEventListener('change',function(){console.log(element.value);});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-forms-filter",controller:function(document,container,expression,element,form,di){let name=element.dataset["formsFilter"]||"";let events=element.dataset["event"]||"";let serialize=function(obj,prefix){let str=[],p;for(p in obj){if(obj.hasOwnProperty(p)){let k=prefix?prefix+"["+p+"]":p,v=obj[p];if(v===""){continue;}
|
||||||
str.push(v!==null&&typeof v==="object"?serialize(v,k):encodeURIComponent(k)+"="+encodeURIComponent(v));}}
|
str.push(v!==null&&typeof v==="object"?serialize(v,k):encodeURIComponent(k)+"="+encodeURIComponent(v));}}
|
||||||
return str.join("&");};let parse=function(filter){if(filter===""){return null;}
|
return str.join("&");};let parse=function(filter){if(filter===""){return null;}
|
||||||
let operatorsMap=["!=",">=","<=","=",">","<"];let operator=null;for(let key=0;key<operatorsMap.length;key++){if(filter.indexOf(operatorsMap[key])>-1){operator=operatorsMap[key];}}
|
let operatorsMap=["!=",">=","<=","=",">","<"];let operator=null;for(let key=0;key<operatorsMap.length;key++){if(filter.indexOf(operatorsMap[key])>-1){operator=operatorsMap[key];}}
|
||||||
|
|
5
public/dist/scripts/app.js
vendored
5
public/dist/scripts/app.js
vendored
|
@ -356,7 +356,10 @@ code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addE
|
||||||
function syncA(){element.value=picker.value;update();}
|
function syncA(){element.value=picker.value;update();}
|
||||||
function syncB(){picker.value=element.value;}
|
function syncB(){picker.value=element.value;}
|
||||||
element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-copy",controller:function(element,alerts,document,window){var button=window.document.createElement("i");button.type="button";button.className="icon-docs note copy";button.style.cursor="pointer";element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){let disabled=element.disabled;element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-copy",controller:function(element,alerts,document,window){var button=window.document.createElement("i");button.type="button";button.className="icon-docs note copy";button.style.cursor="pointer";element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){let disabled=element.disabled;element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
||||||
element.disabled=disabled;element.blur();alerts.add({text:"Copied to clipboard",class:""},3000);};button.addEventListener("click",copy);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document",controller:function(element,container,search){var formsDocument=(element.dataset["formsDocument"]||'');var searchButton=(element.dataset["search"]||0);let path=container.scope(searchButton);element.addEventListener('click',function(){search.selected=element.value;search.path=path;document.dispatchEvent(new CustomEvent(formsDocument,{bubbles:false,cancelable:true}));});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document-preview",controller:function(element,container,search){element.addEventListener('change',function(){console.log(element.value);});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-forms-filter",controller:function(document,container,expression,element,form,di){let name=element.dataset["formsFilter"]||"";let events=element.dataset["event"]||"";let serialize=function(obj,prefix){let str=[],p;for(p in obj){if(obj.hasOwnProperty(p)){let k=prefix?prefix+"["+p+"]":p,v=obj[p];if(v===""){continue;}
|
element.disabled=disabled;element.blur();alerts.add({text:"Copied to clipboard",class:""},3000);};button.addEventListener("click",copy);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-custom-id",controller:function(element){var prevData="";let idType=element.getAttribute('id-type');var div=window.document.createElement("div");div.className="input-copy";var button=window.document.createElement("i");button.type="button";button.className=idType=="custom"?"icon-cog copy":"icon-edit copy";button.style.cursor="pointer";var writer=document.createElement("input");writer.type="text";writer.className="";div.appendChild(writer);div.appendChild(button);element.parentNode.insertBefore(div,element);writer.autofocus;var switchType=function(event){if(idType=="custom"){idType="auto";element.setAttribute('id-type',idType);prevData=writer.value;writer.disabled=true;writer.value='auto-generated';element.value='unique()';}else{idType="custom";element.setAttribute('id-type',idType);writer.value=prevData;writer.disabled=false;element.value=prevData;writer.focus();}
|
||||||
|
button.className=idType=="custom"?"icon-cog copy":"icon-edit copy";}
|
||||||
|
var sync=function(event){if(element.value!=='unique()'){writer.value=element.value;}}
|
||||||
|
sync();button.addEventListener("click",switchType);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document",controller:function(element,container,search){var formsDocument=(element.dataset["formsDocument"]||'');var searchButton=(element.dataset["search"]||0);let path=container.scope(searchButton);element.addEventListener('click',function(){search.selected=element.value;search.path=path;document.dispatchEvent(new CustomEvent(formsDocument,{bubbles:false,cancelable:true}));});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document-preview",controller:function(element,container,search){element.addEventListener('change',function(){console.log(element.value);});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-forms-filter",controller:function(document,container,expression,element,form,di){let name=element.dataset["formsFilter"]||"";let events=element.dataset["event"]||"";let serialize=function(obj,prefix){let str=[],p;for(p in obj){if(obj.hasOwnProperty(p)){let k=prefix?prefix+"["+p+"]":p,v=obj[p];if(v===""){continue;}
|
||||||
str.push(v!==null&&typeof v==="object"?serialize(v,k):encodeURIComponent(k)+"="+encodeURIComponent(v));}}
|
str.push(v!==null&&typeof v==="object"?serialize(v,k):encodeURIComponent(k)+"="+encodeURIComponent(v));}}
|
||||||
return str.join("&");};let parse=function(filter){if(filter===""){return null;}
|
return str.join("&");};let parse=function(filter){if(filter===""){return null;}
|
||||||
let operatorsMap=["!=",">=","<=","=",">","<"];let operator=null;for(let key=0;key<operatorsMap.length;key++){if(filter.indexOf(operatorsMap[key])>-1){operator=operatorsMap[key];}}
|
let operatorsMap=["!=",">=","<=","=",">","<"];let operator=null;for(let key=0;key<operatorsMap.length;key++){if(filter.indexOf(operatorsMap[key])>-1){operator=operatorsMap[key];}}
|
||||||
|
|
65
public/scripts/views/forms/custom-id.js
Normal file
65
public/scripts/views/forms/custom-id.js
Normal file
|
@ -0,0 +1,65 @@
|
||||||
|
(function(window) {
|
||||||
|
"use strict";
|
||||||
|
//note field below field to validation errors
|
||||||
|
//2021-07-25-17-47-59.png
|
||||||
|
//validation rule
|
||||||
|
window.ls.container.get("view").add({
|
||||||
|
selector: "data-custom-id",
|
||||||
|
controller: function(element) {
|
||||||
|
var prevData = "";
|
||||||
|
let idType = element.getAttribute('id-type');
|
||||||
|
|
||||||
|
var div = window.document.createElement("div");
|
||||||
|
|
||||||
|
div.className = "input-copy";
|
||||||
|
|
||||||
|
var button = window.document.createElement("i");
|
||||||
|
|
||||||
|
button.type = "button";
|
||||||
|
button.className = idType == "custom" ? "icon-cog copy" : "icon-edit copy";
|
||||||
|
button.style.cursor = "pointer";
|
||||||
|
|
||||||
|
|
||||||
|
var writer = document.createElement("input");
|
||||||
|
writer.type = "text";
|
||||||
|
writer.className = "";
|
||||||
|
|
||||||
|
|
||||||
|
div.appendChild(writer);
|
||||||
|
div.appendChild(button);
|
||||||
|
element.parentNode.insertBefore(div, element);
|
||||||
|
writer.autofocus;
|
||||||
|
|
||||||
|
var switchType = function(event) {
|
||||||
|
if(idType == "custom") {
|
||||||
|
idType = "auto";
|
||||||
|
element.setAttribute('id-type', idType);
|
||||||
|
prevData = writer.value;
|
||||||
|
writer.disabled = true;
|
||||||
|
writer.value = 'auto-generated';
|
||||||
|
element.value = 'unique()';
|
||||||
|
} else {
|
||||||
|
idType = "custom";
|
||||||
|
element.setAttribute('id-type', idType);
|
||||||
|
writer.value = prevData;
|
||||||
|
writer.disabled = false;
|
||||||
|
element.value = prevData;
|
||||||
|
writer.focus();
|
||||||
|
}
|
||||||
|
button.className = idType == "custom" ? "icon-cog copy" : "icon-edit copy";
|
||||||
|
}
|
||||||
|
|
||||||
|
var sync = function(event) {
|
||||||
|
if(element.value !== 'unique()') {
|
||||||
|
writer.value = element.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sync();
|
||||||
|
|
||||||
|
button.addEventListener("click", switchType);
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})(window);
|
||||||
|
|
Loading…
Reference in a new issue