added support for remote files from d4s workspace
This commit is contained in:
dcore94
parent
d354e27b8d
commit
6911ba7c9d
|
|
@ -29,6 +29,9 @@ class CCPInputWidgetController extends HTMLElement {
|
|||
}else if(this.isFile()){
|
||||
this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-file>`
|
||||
|
||||
}else if(this.isRemoteFile()){
|
||||
this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
|
||||
|
||||
}else if(this.isSecret()){
|
||||
this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-secret>`
|
||||
|
||||
|
|
@ -80,6 +83,13 @@ class CCPInputWidgetController extends HTMLElement {
|
|||
(this.#data.schema.format.toLowerCase() === "file")
|
||||
}
|
||||
|
||||
isRemoteFile(){
|
||||
return (this.#data.schema.type === "string") &&
|
||||
("format" in this.#data.schema) &&
|
||||
(this.#data.schema.format != null) &&
|
||||
(this.#data.schema.format.toLowerCase() === "remotefile")
|
||||
}
|
||||
|
||||
isDateTime(){
|
||||
return (this.#data.schema.type === "string") &&
|
||||
("format" in this.#data.schema) &&
|
||||
|
|
@ -196,30 +206,52 @@ class CCPBaseInputWidgetController extends HTMLElement{
|
|||
return this.#type
|
||||
}
|
||||
|
||||
renderPlusMinus(){
|
||||
this.rootdoc.querySelector("div[name=plusminus]").innerHTML = `
|
||||
${this.isIncrementable() ? `<span name="plus" title="add one" class="badge text-success border-success btn">+</span>` : ``}
|
||||
${this.isDecrementable() ? `<span name="minus" title="remove one" class="badge border border-danger text-danger btn">-</span>` : ``}
|
||||
`
|
||||
}
|
||||
|
||||
renderContent(){
|
||||
this.rootdoc.querySelector("div[name=content]").innerHTML = this.content()
|
||||
}
|
||||
|
||||
render(){
|
||||
this.rootdoc.innerHTML = `
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<div name="root" class="my-3 ccp-input-widget form-field row">
|
||||
<label class="form-label">
|
||||
${this.required ? `<span title="Required" class="p-1 text-danger">*</span>` : ``}
|
||||
${this.title}
|
||||
<span class="badge text-primary" title="${this.#description}" alt="${this.#description}">?</span>
|
||||
<div style="float:right">
|
||||
${this.isIncrementable() ? `<span name="plus" title="add one" class="badge text-success border-success btn">+</span>` : ``}
|
||||
${this.isDecrementable() ? `<span name="minus" title="remove one" class="badge border border-danger text-danger btn">-</span>` : ``}
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
${this.required ? `<span title="Required" class="p-1 text-danger">*</span>` : ``}
|
||||
${this.title}
|
||||
<span class="badge text-primary" title="${this.#description}" alt="${this.#description}">?</span>
|
||||
</div>
|
||||
<div name="tools" class="d-flex" style="gap:2px">
|
||||
<div name="plusminus">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div name="content">
|
||||
</div>
|
||||
${this.content()}
|
||||
</label>
|
||||
</div>
|
||||
`
|
||||
|
||||
this.renderPlusMinus()
|
||||
this.renderContent()
|
||||
|
||||
this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev=>{
|
||||
const src = ev.target.getAttribute("name")
|
||||
if(src === "plus"){
|
||||
this.#value.push(this.#default)
|
||||
this.render()
|
||||
this.renderPlusMinus()
|
||||
this.renderContent()
|
||||
}else if(src === "minus"){
|
||||
this.#value.pop()
|
||||
this.render()
|
||||
this.renderPlusMinus()
|
||||
this.renderContent()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -418,6 +450,82 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
|
|||
}
|
||||
window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController);
|
||||
|
||||
class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
|
||||
|
||||
#iss = null;
|
||||
#addresses = {
|
||||
"https://accounts.dev.d4science.org/auth/realms/d4science" : "https://workspace-repository.dev.d4science.org/storagehub/workspace",
|
||||
"https://accounts.pre.d4science.org/auth/realms/d4science" : "https://pre.d4science.org/workspace",
|
||||
"https://accounts.d4science.org/auth/realms/d4science" : "https://api.d4science.org/workspace"
|
||||
};
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
this.#iss = document.querySelector("d4s-boot-2").loginToken.iss
|
||||
}
|
||||
|
||||
get baseurl(){
|
||||
return this.#addresses[this.#iss]
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
this.rootdoc.addEventListener("input", ev=>{
|
||||
if(ev.target.getAttribute("name") === this.name){
|
||||
const index = Number(ev.target.getAttribute("data-index"))
|
||||
this.value[index] = ev.target.value
|
||||
}
|
||||
})
|
||||
this.rootdoc.querySelector("div[name=tools]").innerHTML += `
|
||||
<svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960">
|
||||
<path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z"/>
|
||||
</svg>
|
||||
<d4s-storage-tree
|
||||
class="d-none position-absolute shadow border border-primary bg-light"
|
||||
style="left: 100%; margin: 0 0 0 -.5rem;min-width:350px; max-width:500px;z-index:1000; line-height:1.5rem;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem; padding:5px;"
|
||||
base-url="${this.baseurl}"
|
||||
file-download-enabled="true"
|
||||
show-files="true"
|
||||
allow-drag="true"/>
|
||||
`
|
||||
const ws = this.rootdoc.querySelector("d4s-storage-tree")
|
||||
this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev=>{
|
||||
ws.classList.toggle("d-none")
|
||||
})
|
||||
|
||||
this.addEventListener("dragover", ev=>{
|
||||
ev.preventDefault()
|
||||
})
|
||||
|
||||
this.addEventListener("drop", ev=>{
|
||||
ev.stopPropagation()
|
||||
if(ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null){
|
||||
const index = Number(ev.target.getAttribute("data-index"))
|
||||
ev.target.value = ev.dataTransfer.getData("text/plain+downloadlink")
|
||||
this.value[index] = ev.target.value
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener("keydown", ev=>{
|
||||
if(ev.code == 'Escape' ) ws.classList.add("d-none");
|
||||
})
|
||||
}
|
||||
|
||||
content(){
|
||||
if(this.value.length <= 1){
|
||||
return `
|
||||
<input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>`
|
||||
}
|
||||
var out =
|
||||
this.value.map((c,i)=>{
|
||||
return `
|
||||
<input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
|
||||
`
|
||||
}).join("\n")
|
||||
return out
|
||||
}
|
||||
}
|
||||
window.customElements.define('d4s-ccp-input-remotefile', CCPRemoteFileInputWidgetController);
|
||||
|
||||
class CCPSecretInputWidgetController extends CCPBaseInputWidgetController{
|
||||
|
||||
constructor(){
|
||||
|
|
|
|||
|
|
@ -121,6 +121,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
|||
<option value="dateTime" ${this.isSelectedFormat('dateTime') ? "selected" : ""}>Date time</option>
|
||||
<option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
|
||||
<option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
|
||||
<option value="remotefile" ${this.isSelectedFormat('file') ? "selected" : ""}>Remote file</option>
|
||||
<option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
|
||||
<option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
|
||||
</select>
|
||||
|
|
|
|||
Loading…
Reference in New Issue