Skip to content

Instantly share code, notes, and snippets.

@pateketrueke
Last active April 4, 2018 03:36
Show Gist options
  • Save pateketrueke/0a6693268093ceecd973aae49e55939e to your computer and use it in GitHub Desktop.
Save pateketrueke/0a6693268093ceecd973aae49e55939e to your computer and use it in GitHub Desktop.
JSON Schema Resource
hr,iframe{border:0}.is-loading,select{background-repeat:no-repeat}.button-group a,.field-item>a,a{text-decoration:none}.info-table,.json-table,table{border-collapse:collapse}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body,html{height:100%}blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}.json-form,hr{margin-bottom:12px}audio,embed,iframe,img,object,video{height:auto;max-width:100%}table{border-spacing:0}td,th{padding:0;text-align:left}a,body,button,input{font-family:Helvetica;color:#000}svg{max-width:1em;max-height:1em}svg.big{max-width:1.5em;max-height:1.5em}svg.small{max-width:.75em;max-height:.75em}small{color:#aaa;font-size:.8em}a{color:#999}a:hover{color:#000}a:hover svg{fill:#000}.has-icon>a svg,.has-icon>span svg,a svg{fill:#999}a svg{vertical-align:middle}hr{border-top:1px dashed #aaa;margin-top:12px}button,input[type=email],input[type=number],input[type=password],input[type=search],input[type=text],select,textarea{font-size:1em;min-height:30px;padding:6px;border:1px solid #aaa;background-color:#fff}button:hover,input[type=email]:hover,input[type=number]:hover,input[type=password]:hover,input[type=search]:hover,input[type=text]:hover,select:hover,textarea:hover{border-color:#999}button[disabled],input[type=email][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=text][disabled],select[disabled],textarea[disabled]{opacity:.5;cursor:not-allowed}button[readonly],input[type=email][readonly],input[type=number][readonly],input[type=password][readonly],input[type=search][readonly],input[type=text][readonly],select[readonly],textarea[readonly]{border:0;padding:0;box-shadow:none;min-height:auto;background-color:inherit}select{max-width:15em;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;position:relative;padding-right:24px;background-image:url('data:image/png; base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==');background-position:right 5px center}button~button,button~select,select~button,small~select,span~select{margin-left:6px}::-webkit-input-placeholder{color:#999}::-moz-placeholder{color:#999}:-ms-input-placeholder{color:#999}:-moz-placeholder{color:#999}.config-error{color:red!important}.config-error~pre{border:1px dashed red;xpadding:6px;xmargin-top:6px;white-space:pre-line;word-wrap:break-word}.is-loading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;height:100%;background-position:center center;background-image:url(../loader.gif)}@-webkit-keyframes blink{0%{background-color:transparent}33%{background-color:#e72533}66%{background-color:#701217}}@keyframes blink{0%{background-color:transparent}33%{background-color:#e72533}66%{background-color:#701217}}.json-form{background-color:#fff;margin-right:auto;margin-left:auto;max-width:720px}@media screen and (max-width:720px){.json-form{max-width:100%}}.form-group{margin:auto;max-width:720px}@media screen and (max-width:720px){.form-group{max-width:100%}}.form-group fieldset{border:0;padding:0}.form-group h3 button{background-color:transparent;border:0}.form-group label{color:#999;display:block;min-width:160px}.form-group label small{display:block}.form-group label~select{width:auto}.form-group label~*,.form-group label~* input{width:100%}a.destroy{color:red;font-weight:700}button.destroy:hover{color:#fff;background-color:red}button.change:hover{color:#fff;background-color:#0f0}button[disabled]:hover{background-color:#999}.button-group{border:1px solid #aaa;background-color:#fff;display:inline-block;white-space:nowrap}.button-group a{color:#999;padding:.3em;font-weight:400;display:inline-block}.button-group a,.button-group button{background-color:transparent;border:0}.button-group a button,.button-group a~a,.button-group button button,.button-group button~a{margin-left:1px;position:relative}.button-group a button::before,.button-group a~a::before,.button-group button button::before,.button-group button~a::before{background-color:#aaa;position:absolute;content:' ';width:1px;height:100%;left:-1px;top:0}.button-group a.active,.button-group button.active{color:#000;font-weight:700}.button-group:hover{border-color:#999}.button-group:hover a::before,.button-group:hover button::before{background-color:#999}.info-table td.blank,.info-table th.blank,.info-table tr.done{background-color:#fff}.field-group.inline{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.field-group.inline label{margin-bottom:0;min-width:auto;width:auto}@media screen and (min-width:33em){.field-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.field-group label{margin:0;text-align:right;padding-right:12px}}.field-list,.file-info{padding:0;list-style-type:none}.field-control .Select~span,.field-control select~span{display:block;margin-top:6px}.field-control ol~a,.field-control p~select,.field-control select~a{display:inline-block}.field-list{margin:0 0 24px;list-style-position:inside}.field-list small{display:block}.field-list li~li{margin-top:12px}.field-list~span{display:inline-block}.field-item>a{width:20px;height:20px;float:right;font-size:15px;text-align:center;border:1px solid #aaa}.field-item>a:hover{border-color:#999}.field-item>a:first-child{margin-left:6px}.file-info{color:#aaa;font-size:.8em}.has-icon{position:relative}.has-icon>a,.has-icon>span{position:absolute;margin:auto;top:0;bottom:0;height:1em}.json-table-filters>a,.json-table-settings input~select,.json-table-settings input~span,.json-table-settings label~select{margin-left:12px}.has-icon>a{right:.5em}.has-icon>a.filled{right:1.5em}.has-icon>span{left:.5em}.has-icon>input{width:100%;padding-left:1.8em}.info-table td,.info-table th{padding:6px}.info-table tr{border-bottom:1px dashed #aaa}.info-table tr.success{background-color:rgba(0,255,0,.05)}.info-table tr.errored{background-color:rgba(255,0,0,.05)}.info-table tr.pending,.info-table tr.scanned{background-color:rgba(0,0,255,.05)}.info-table tr.validating{background-color:rgba(0,255,255,.05)}.info-table tr.processing,.info-table tr.scanning{background-color:rgba(0,0,0,.1)}.json-table{width:100%;margin-bottom:12px}.json-table-filters,.json-table-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin-bottom:12px}.json-table-filters>:first-child,.json-table-pagination>:first-child{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.json-table-settings{background-color:#fff;padding:12px;position:absolute;right:-6px;top:2.33em;min-width:200px;font-weight:400;z-index:1;visibility:hidden;transition:.3s;opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.json-table-settings.show{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;visibility:visible}.json-table-settings li~li{margin-top:6px}.json-table-settings select{min-height:auto;color:#999;border:0;padding:0 24px 0 0}.json-table tbody tr.group th{background-color:#999;font-weight:400;color:#fff}.json-table tbody tr.group th span{float:right}.json-table tbody td ul{list-style-position:inside;list-style-type:square;padding:0;margin:0}.json-table tbody tr.row:nth-child(odd){background:#EEE}.json-table tbody tr.row:nth-child(even){background:#fff}.json-table tbody tr.row:hover{background-color:rgba(0,0,0,.1)}.json-table th{text-align:left;position:relative;background-color:#aaa}.json-table th>em{top:6px;right:0;font-size:10px;position:absolute;-webkit-transform:rotate(90deg);transform:rotate(90deg);color:#ccc;background-color:#aaa}.error-detail,.error-detail::before{background-color:red;border-top:1px dashed #aaa}.json-table th>em.active{color:#999}.json-table th>em .active{color:#000}.json-table td~td,.json-table th~th{border-left:1px solid rgba(0,0,0,.033)}.json-table td,.json-table th{padding:6px}.json-table td h2,.json-table td h3,.json-table td h4,.json-table td h6,.json-table th h2,.json-table th h3,.json-table th h4,.json-table th h6{clear:both}.json-table~a{margin-top:12px;display:inline-block}@media screen and (max-width:479px){.json-table{box-shadow:none}.json-table.responsive tbody tr td,.json-table.responsive tbody tr th{border:0}.json-table.responsive tbody tr,.json-table.responsive tbody tr td{display:block}.json-table.responsive tbody tr.row{position:relative;padding:6px}.json-table.responsive tbody tr.row td{padding:0}.json-table.responsive tbody tr.row td.min-width{position:absolute;right:18px;top:6px}.json-table.responsive tbody tr.empty td,.json-table.responsive tfoot td{text-align:left}.json-table>tbody td::before{float:left;font-weight:700;margin-right:12px;content:attr(data-prop)}.json-table>tbody td.nolabel::before{content:''}.json-table>thead>tr>th{display:none}.json-table .lg-show,.json-table .md-show,.json-table .sm-show,.json-table .xl-show{display:block}}.error-detail{padding:6px;list-style-type:none;color:#fff;position:relative}.error-detail li::before{content:'⚠ '}.error-detail::before,.layer{content:' ';right:0;bottom:0}.error-detail::before{position:absolute;width:10px;height:10px;top:-6px;left:154px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-left:1px dashed #aaa}@media screen and (min-width:33em){.error-detail{padding-left:172px}}.field-description{margin-top:-6px;padding-bottom:12px;padding-right:12px;padding-left:12px;font-size:.8em;color:#aaa;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.form-title{border-bottom:1px dashed #aaa;padding:12px}.form-group{position:relative}@media screen and (max-width:33em){.form-group .field-group.checkbox>*{display:inline-block;min-width:auto;width:auto}.form-group .field-group.checkbox>:last-child{margin-left:6px}.form-group .field-group.checkbox .field-label{padding:0}}.form-group .form-group.field:hover{background-color:rgba(0,0,0,.03)}.form-group .form-group .field-group{padding:12px}.form-group .field-label{padding-bottom:6px}.form-group .field-label.is-required{color:#000}.rjsf>.form-group:last-child{border-top:1px dashed #aaa;padding:12px}@media screen and (min-width:33em){.field-description{padding-left:172px}.form-group .field-label{padding-bottom:0}}.layer{position:absolute;transition:.3s;top:-33.3%;z-index:1;left:0;opacity:0;visibility:hidden;padding:12px}.layer>*{position:relative;z-index:2}.layer.overlay{display:flex}.layer.overlay::after{top:0;left:0;right:0;padding:12px;color:#FFF;position:absolute;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;content:'✖ ' attr(data-title);background-color:rgba(2,2,2,.7);text-shadow:1px 1px 1px rgba(0,0,0,.7)}.layer.overlay>*{border:0;z-index:1;margin:auto;max-width:100%;position:relative;transition:opacity .5s}.layer::before{z-index:1;content:' ';position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.3)}@media screen and (min-width:720px){.layer::before{left:200px}}.layer.active{top:0;opacity:1;visibility:visible}
!function(){function e(e){return Promise.resolve().then(function(){if(!c[e]){var n=document.createElement("link");n.rel="stylesheet",n.type="text/css",n.href=e,o.appendChild(n)}})}function n(t){if(c[t])return Promise.resolve(c[t].context);var i=Promise.resolve();return new Promise(function(s,a){var l=document.createElement("script");l.onload=function(){return c[t]={loaded:new Date,context:l.exports},delete l["import"],delete l.exports,o.removeChild(l),Promise.resolve(i).then(function(){return s(c[t].context)})["catch"](function(e){return l.onerror(e)})},l.onerror=function(e){console.log(e.stack),a(e)},l["import"]=function(t){var o=function(){return Promise.resolve().then(function(){return t=!Array.isArray(t)&&t?[t]:t,t.reduce(function(t,o){return t.then(function(){return-1===o.indexOf("//")&&-1===o.indexOf(".js")&&(o=r+"-"+o+".js"),(o.indexOf(".css")>-1?e(o):n(o))["catch"](function(){return console.log("ERROR LOADING",o)})})},Promise.resolve())})};return i=i.then(function(){return o()})},c[t]={loaded:null,context:null},l.src=t,o.appendChild(l)})}var t=document.currentScript.src.split("/").slice(0,-1).join("/"),o=document.getElementsByTagName("head")[0],r=t+"/components",c={},i=[].slice.call(document.querySelectorAll("[data-component]"));i.forEach(function(e){console.log("Component declaration found",e.dataset.component);var t=document.createElement("SCRIPT"!==e.tagName?e.tagName:"DIV");t.classList.add("is-loading"),e.parentNode.insertBefore(t,e),e.parentNode.removeChild(e),n(r+"-"+e.dataset.component+"-index.js").then(function(n){console.log("Component",e.dataset.component,"loaded");var o;try{o=JSON.parse(e.innerText)}catch(r){o={}}return n?(t.classList.remove("is-loading"),console.log("Component init",o),n.init(t,o)):void 0})})}();
!function(){var e,c=document.currentScript.import;window.process={env:"development"},c(["//cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js","//cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js","//unpkg.com/[email protected]/dist/react-jsonschema-form.js","//unpkg.com/[email protected]/index.js","//unpkg.com/[email protected]/prop-types.js","//unpkg.com/[email protected]/dist/react-input-autosize.js","//unpkg.com/react-select/dist/react-select.js","//unpkg.com/react-select/dist/react-select.css","//cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js","//cdnjs.cloudflare.com/ajax/libs/react-datetime/2.10.3/react-datetime.js","//cdnjs.cloudflare.com/ajax/libs/react-datetime/2.10.3/css/react-datetime.css"]),c("jsonschema-form-resource").then(function(c){e=c}),document.currentScript.exports={init:function(c,t){if(t.failure)c.innerHTML="<p>"+t.failure+"</p>";else switch(t.action){case"show":break;case"index":e.initTable(c,t);break;case"edit":case"new":e.initForm(c,t);break;default:e.initJsonForm(c,t)}}}}();
!function(){function e(e){if(location.search){var t=location.search.split("?")[1];return e+(-1===e.indexOf("?")?"?":"&")+t}return e}function t(e,t){return React.createElement("svg",{className:t,dangerouslySetInnerHTML:{__html:'<use xlink:href="#x-'+e+'" />'}})}function r(e){return Array.prototype.slice.call(arguments,1).forEach(function(t){t&&Object.keys(t).forEach(function(r){void 0===e[r]&&(e[r]=t[r])})}),e}function a(e,t){var r=[];return t&&Object.keys(t).forEach(function(e){r.push(r.length?"&":"?"),"object"==typeof t[e]?r.push(e+"="+function e(t){var r=[];return Object.keys(t).forEach(function(a){"object"==typeof t[a]?r.push(a+":"+e(t[a])):r.push(a+":"+t[a])}),r.join(";")}(t[e])):r.push(e+"="+t[e])}),fetch(""+e.path+r.join(""),{credentials:"same-origin",headers:v}).then(function(e){return e.json()})}function n(t,r,a,n){return fetch(e(t.path.replace(a,r[n])),{credentials:"same-origin",method:"POST",headers:v,body:JSON.stringify({payload:r,_method:t.verb})}).then(function(e){return e.json()})}function i(e,t,r){if(Array.isArray(t))return function e(t,r,a){if(Array.isArray(t)){if("string"==typeof t[0]){var n=t[0],s="object"!=typeof t[1]||Array.isArray(t[1])?null:t[1];s&&Object.keys(s).forEach(function(e){s[e]=i(r,s[e],a)});var o=e(t[2]||t[1],r,a);return"input"===n?React.createElement(n,s):React.createElement(n,s,o)}if(Array.isArray(t[0]))return t.map(function(t){return e(t,r,a)})}return"string"==typeof t||"number"==typeof t||"boolean"==typeof t?i(r,t,a):React.createElement("div",null,[React.createElement("span",null,["Invalid template syntax"]),React.createElement("pre",null,[JSON.stringify(t,null,2)])])}(t,e,r);if("string"==typeof t){var a,n=t,s=[];do{a=n.match(u),a&&(s.push({expression:a[1],property:(a[2]||"").split(",").filter(function(e){return e}),operator:a[3],value:a[4]}),n=n.replace(a[0],"\0"))}while(a);for(var o=n.split("\0"),l=[];s.length||o.length;)l.push(o.shift()),l.push(s.shift());return l.filter(function(e){return e}).reduce(function(t,a,n){if("string"==typeof a)t.push(a);else{var i;if("@"===a.expression.charAt()){var s=a.property.map(function(t){return c(e,t)||a.value});try{i=g[a.expression.substr(1)](e,s,r)}catch(e){t.push(React.createElement("div",{key:"err_"+n},"Error in expression:",React.createElement("pre",null,JSON.stringify(a,null,2))))}}else i=c(e,a.expression);if(void 0===i&&"|"===a.operator)i=c(e,a.value);else if(!i&&"!"===a.operator)return t.push(a.value),t;void 0!==i&&null!==i&&("?"===a.operator&&(i=a.value),"object"==typeof i&&(i=React.isValidElement(i)?null===i.key?React.createElement("div",{key:"expr_"+n},i):i:React.createElement("pre",{key:"obj_"+n},JSON.stringify(i,null,2))),t.push(i))}return t},[])}return t}function s(e){var t=e.id,r=e.classNames,a=e.label,n=e.help,i=e.hidden,s=e.required,o=e.description,c=e.errors,l=e.children,p=e.displayLabel;return i||!p?React.createElement("div",{className:r},l,c,n):React.createElement("div",{className:r},React.createElement("div",{className:"field-group"},React.createElement("label",{className:["field-label"].concat(s?"is-required":[]).join(" "),htmlFor:t},a,s?null:React.createElement("small",null,"optional")),l),o,c,n)}function o(e){var t=e.id,r=e.readonly,a=e.label,n=e.value,i=e.disabled,s=e.required,o=e.autofocus,c=e.onChange,l=e.options.description||e.schema.description;return React.createElement("div",null,React.createElement("div",{className:"field-group checkbox "+(i||r?"disabled":"")},React.createElement("label",{className:["field-label"].concat(s?"is-required":[]).join(" "),htmlFor:t},e.options.title||a),React.createElement("input",{type:"checkbox",id:t,checked:void 0!==n&&n,required:s,disabled:i||r,autoFocus:o,onChange:function(e){return c(e.target.checked)}})),l&&React.createElement("p",{className:"field-description"},l))}function c(e,t){if(!t)return null;var r,a=t.split("."),n=e;try{for(var i=function(e){if(!a.length)return"break";if(r=a.shift(),n=n[r],Array.isArray(n)){if("*"===a[e])return{v:n.map(function(t){return c(t,a.slice(e+1).join("."))})};n=n[0]}s=++e},s=0;;){var o=i(s);if("break"===o)break;if(o)return o.v}}catch(e){return null}return n}function l(e){return Array.isArray(e)?e.map(l):e&&"object"==typeof e?Object.keys(e).map(function(t){return l(e[t])}).join("\n"):e}function p(e,t,r){var a=t.refs[t.model||t.schema.id];Object.keys(t.schema.properties).forEach(function(e){if(t.result){var r=t.schema.properties[e],a=t.uiSchema[e];null===t.result[e]?("string"===r.type&&(t.result[e]=""),"number"===r.type&&(t.result[e]=void 0),"boolean"===r.type&&(t.result[e]=!1)):("number"===r.type&&(t.result[e]=parseFloat(t.result[e])||void 0),"integer"===r.type&&(t.result[e]=parseInt(t.result[e],10)||void 0)),(""===t.result[e]||void 0===t.result[e])&&delete t.result[e],a&&a["ui:prop"]&&t.result[a["ui:prop"]]&&(t.result[e]=t.result[a["ui:prop"]])}}),ReactDOM.render(React.createElement("div",{className:"json-form"},React.createElement("h2",{className:"form-title"},t.title?t.title:React.createElement("span",null,t.isNew?"New":"Editing"," ",a.singular)),new b(e,t,r)),e)}var u=/\{(?:(@?[\w.]+)(?::([\w,.]+))?([|?!])?(.*?))\}/,h=/^data:(.+?);base64,/,m=/^\d+/,d=/\s+/,f=/\W+/g,v={Accept:"application/json","Content-Type":"application/json"},y=[],g={debug:function(e,t,r){return React.createElement("pre",null,JSON.stringify(t||e,null,2))},embed:function(e,t,r){var a;return t.length?(a=t[0].indexOf("data:")>-1?t[0].match(h)[1].split(";")[1].split("name=")[1]:t[0],t[1]&&(a=t[1]),React.createElement("span",null,React.createElement("a",{href:t[0],target:"_blank",onClick:function(e){function n(e){e&&e.target!==i||(y.splice(s,1),r.removeChild(i))}if(!e.metaKey&&!e.ctrlKey){e.preventDefault();var i=document.createElement("div");r.appendChild(i),i.setAttribute("data-title",a),i.classList.add("layer"),i.classList.add("overlay");var s=y.length;i.addEventListener("click",n),y.push(function(){return n()}),setTimeout(function(){i.classList.add("active"),setTimeout(function(){var e=t[0].match(/\.(svg|gif|png|jpe?g)$/)?document.createElement("img"):document.createElement("iframe");"IFRAME"===e.tagName&&(e.setAttribute("width",853),e.setAttribute("height",505)),e.style.opacity=0,e.src=t[0],i.appendChild(e),setTimeout(function(){e.style.opacity=1},100)},100)})}}},a))):"NOIMG"}},E=function(t){function r(e,r){if(t.call(this,e),this._form=r,this.state={options:[],value:[]},this.propSchema=this._form.options.uiSchema[this.props.schema.prop]||{},this.uiSchema=(this._form.options.refs[this.props.schema.prop]||{}).uiSchema||(this._form.options.refs[this.props.schema.ref.model]||{}).uiSchema||{},this.enabled=!(this.propSchema["ui:disabled"]||"hidden"===this.propSchema["ui:widget"]),this.template=this.propSchema["ui:template"]||this.uiSchema["ui:template"],this.ref=this._form.options.refs[this.props.schema.prop],this.model=this._form.options.refs[this.ref.model]||{},this.pk=this.ref.references.primaryKey,this.fk=this.ref.references.foreignKey,this.actions=this._form.options.actions[this.ref.model],this.attributes=this._form.options.attributes||{},this.ref.references.primaryKey?(this.property=this.ref.references.primaryKey.prop,this.placeholder=":"+this.property):(this.property="key",this.placeholder=":key"),!this.actions&&!this.model.virtual)throw new Error("Missing actions for '"+this.ref.model+"' resource");this._form.options.result&&this._form.options.result[this.props.schema.prop]&&(this.state.value=this._form.options.result[this.props.schema.prop])}return t&&(r.__proto__=t),r.prototype=Object.create(t&&t.prototype),r.prototype.constructor=r,r.prototype.componentDidMount=function(){var t=this;if(this.enabled&&!this.model.virtual){var r=this.props.schema.ref.rel.indexOf("Many")>-1;if(!r||!this._form.options.isNew){var n={};this.attributes.where&&this.attributes.where[this.props.name]&&(n.where=this.attributes.where[this.props.name]),r&&this._form.options.result&&this._form.options.result[this.pk.prop]&&(n.where=n.where||{},n.where[this.fk.prop]=this._form.options.result[this.pk.prop]),a(e(this.actions.index),n).then(function(e){var a;"ok"===e.status&&t.setState(((a={})[r?"value":"options"]=e.result,a))})}}},r.prototype.openLayer=function(e){function t(e){e.target===r&&a.onClose()}var r=document.createElement("div");this._form.el.parentNode.appendChild(r),r.classList.add("layer");var a,n=y.length;a=e(r,function(e){r.classList.add("active"),r.addEventListener("click",t),y.push(function(){return a.onClose()}),e(a)},function(e){e&&e.preventDefault(),y.splice(n,1),r.classList.remove("active"),r.removeEventListener("click",t),ReactDOM.unmountComponentAtNode(r),r.parentNode.removeChild(r)})},r.prototype.editVirtual=function(e,t){var r=this;e.preventDefault(),this.openLayer(function(e,a,n){return setTimeout(function(){a(function(a){delete r._form.options.uiSchema[r.props.schema.prop]["ui:field"],p(e,{model:r.props.schema.prop,actions:r._form.options.actions,isNew:void 0===t,refs:r._form.options.refs,result:(r.props.formData||{})[t],schema:r._form.options.refs[r.props.schema.ref.id],uiSchema:r._form.options.uiSchema[r.props.schema.prop]||{}},a)})},100),{onPayload:function(e){if(r._form.options.uiSchema[r.props.schema.prop]["ui:field"]="Reference",t>=0)return r.state.value[t]=e,r.setState({state:r.state}),r.props.onChange(r.state.value),void setTimeout(n);var a="array"===r.props.schema.type?(r.state.value||[]).concat(e):e;r.setState({value:a}),r.props.onChange(a),n()},onDelete:function(e){console.log("DELETE"),n(e)},onSubmit:function(){console.log("SUBMIT")},onClose:function(e){n(e)}}})},r.prototype.openFrame=function(t,r){var n=this;t.preventDefault();var i=document.createElement("div");this._form.el.parentNode.appendChild(i),i.classList.add("layer"),a({path:e(t.target.href)}).then(function(e){function t(e){e.target===i&&o.onClose()}i.classList.add("active");var a=y.length,s=e.result||{},o={};n.props.schema.ref.rel.indexOf("Many")>-1&&(o.onPayload=function(e){o.onClose(),void 0!==r&&n.state.value.splice(r,1),n.setState({value:n.state.value.concat(e)}),n.props.onChange(n.state.value.concat(e))}),o.onDelete=function(){o.onClose(),n.props.schema.ref.rel.indexOf("Many")>-1?(n.state.value.splice(a,1),n.setState({value:n.state.value})):n.componentDidMount()},o.onSubmit=function(){o.onClose(),n.componentDidMount()},o.onClose=function(e){e&&e.preventDefault(),i.removeEventListener("click",t),i.classList.remove("active"),y.splice(a,1),setTimeout(function(){ReactDOM.unmountComponentAtNode(i),n._form.el.parentNode.removeChild(i)},200)},i.addEventListener("click",t),y.push(function(){return o.onClose()}),setTimeout(function(){return p(i,s,o)},100)})},r.prototype.hasAction=function(e){var t=this.propSchema["ui:actions"]||this.uiSchema["ui:actions"];return!t||t.indexOf(e)>-1},r.prototype.singleItem=function(e){return e||this._form.options.refs[this.props.schema.prop].singular},r.prototype.multipleItems=function(e){return e||this._form.options.refs[this.props.schema.prop].plural},r.prototype.renderActions=function(){var t=this;if(!1===this.propSchema["ui:editable"]||!1===this.uiSchema["ui:editable"])return null;var r=(this.propSchema["ui:placeholder"]||this.singleItem(this.uiSchema["ui:title"])).toLowerCase();return this.model.virtual?React.createElement("a",{href:"#",onClick:function(e){return t.editVirtual(e)}},"Add new ",r):this.hasAction("new")?React.createElement("span",null,React.createElement("a",{href:e(this.actions.new.path),onClick:function(e){return t.openFrame(e)}},"Add new ",r)):null},r.prototype.renderLabel=function(){return React.createElement("label",{className:["field-label"].concat(this.props.required?"is-required":[]).join(" "),htmlFor:this.props.idSchema.$id},this.singleItem(this.propSchema["ui:title"]),this.props.required?null:React.createElement("small",null,"optional"))},r.prototype.renderItems=function(){var e=this;return React.createElement("ol",{className:"field-list"},this.state.value.length?this.state.value.map(function(t,r){return React.createElement("li",{key:r,className:"field-item"},React.createElement("a",{href:"#",className:"destroy",onClick:function(t){t.preventDefault(),e.state.value.splice(r,1),e.setState({value:e.state.value})}},"×"),e.model.virtual&&React.createElement("a",{href:"#",onClick:function(t){return e.editVirtual(t,r)}},"✎"),t[e.property]?React.createElement("a",{href:e.actions.edit.path.replace(e.placeholder,t[e.property]),onClick:function(t){return e.openFrame(t,r)}},"✎"):null,i(t,e.template||"-",e._form.el))}):React.createElement("li",null,React.createElement("small",null,"No ",this.multipleItems(this.propSchema["ui:title"]).toLowerCase()," found")))},r.prototype.renderDesc=function(){var e=(this._form.options.uiSchema[this.props.schema.prop]||{})["ui:description"]||(this._form.options.schema[this.props.schema.prop]||{}).description;return e&&React.createElement("p",{className:"field-description"},e)},r.prototype.renderVirtual=function(){return React.createElement("div",null,React.createElement("div",{className:"field-group"},this.renderLabel(),React.createElement("div",{className:"field-control"},this.renderItems(),React.createElement("span",null,this.renderActions()))),this.renderDesc())},r.prototype.renderMany=function(){var e=this;return React.createElement("div",null,React.createElement("div",{className:"field-group"},this.renderLabel(),React.createElement("div",{className:"field-control"},this.renderItems(),this.state.options.length&&this.hasAction("select")?React.createElement(Select,{name:this.props.name,id:this.props.idSchema.$id,placeholder:"Search in "+this.multipleItems(this.propSchema["ui:title"]).toLowerCase()+"...",options:this.state.options.map(function(t,r){return{value:t[e.pk.prop],label:i(t,e.template||"-",e._form.el)}}),onChange:function(t){var r=t.value;("integer"===e.pk.type||"number"===e.pk.type)&&(r=parseInt(r,10));var a=e.state.options.filter(function(t){return t[e.pk.prop]===r})[0];e.setState({value:e.state.value.concat(a)}),e.props.onChange(e.state.value.concat(a))}}):null,React.createElement("span",null,this.renderActions()))),this.renderDesc())},r.prototype.renderOne=function(){var e=this;return React.createElement("div",null,React.createElement("div",{className:"field-group field"},this.renderLabel(),React.createElement("div",{className:"field-control"},this.hasAction("select")?React.createElement(Select,{name:this.props.name,id:this.props.idSchema.$id,value:this.state.value?this.state.value[this.pk.prop]:null,placeholder:"Search in "+this.multipleItems(this.propSchema["ui:title"]).toLowerCase()+"...",options:this.state.options.map(function(t){return{value:t[e.pk.prop],label:i(t,e.template||"-",e._form.el)}}),singleValue:!0,onChange:function(t){if(null===t)e.props.onChange(void 0),e.setState({value:void 0});else{var r=e.state.options.filter(function(r){return r[e.pk.prop]===t.value})[0];e.props.onChange(r),e.setState({value:r})}}}):null,this.renderActions())),this.renderDesc())},r.prototype.render=function(){return this.enabled?this.model.virtual?this.renderVirtual():this.ref.rel.indexOf("Many")>-1?this.renderMany():this.renderOne():null},r}(React.Component),R=function(e,t){return React.createElement(Datetime,{onChange:function(t){e.onChange(t.toDate().toISOString())},value:e.formData?new Date(e.formData):void 0,inputProps:{id:e.idSchema.$id},closeOnTab:!0,closeOnSelect:!0})},b=function(t,a,i){return React.createElement(JSONSchemaForm.default,{formData:(u=a,u.result&&Object.keys(u.schema.properties).forEach(function(e){null===u.result[e]&&delete u.result[e]}),u.result),schema:(p=a,Object.keys(p.schema.properties).forEach(function(e){var t=p.schema.properties[e],r=(t.items||t).$ref;if(r){var a=(t.items||t).virtual?p.refs[r]:p.refs[e];p.schema.properties[e]={type:t.type||"object",ref:a,prop:e},"array"===t.type?p.schema.properties[e].items={type:"object",properties:{}}:p.schema.properties[e].properties={}}}),p.schema),uiSchema:(c=a,l=c.refs[c.model||c.schema.id],c.uiSchema["ui:rootFieldId"]=l.singular,Object.keys(c.schema.properties).forEach(function(e){c.schema.properties[e].ref&&(c.uiSchema[e]=r({},c.uiSchema[e],c.refs[e].uiSchema),c.uiSchema[e]["ui:field"]="Reference"),("datetime"===c.schema.properties[e].format||"date-time"===c.schema.properties[e].format)&&(c.uiSchema[e]=r({},c.uiSchema[e],(c.refs[e]||{}).uiSchema),c.uiSchema[e]["ui:field"]="Datetime")}),c.uiSchema),widgets:{CheckboxWidget:o},fields:{Datetime:function(e){return n={el:t,options:a,callbacks:i},s=(r=e).uiSchema["ui:description"]||r.schema["ui:description"],o=r.uiSchema["ui:title"]||r.schema["ui:title"]||r.name,React.createElement("div",null,React.createElement("div",{className:"field-group field"},React.createElement("label",{htmlFor:r.idSchema.$id,className:["field-label"].concat(r.required?"is-required":[]).join(" ")},o),React.createElement("div",{className:"field-control"},new R(r,n))),s&&React.createElement("p",{className:"field-description"},s));var r,n,s,o},Reference:function(e){return new E(e,{el:t,options:a,callbacks:i})}},FieldTemplate:s,showErrorList:!1,noHtml5Validate:!0,onSubmit:function(r){var s=r.formData;if(i&&i.onPayload)i.onPayload(s);else{t.classList.add("pending");var o=a.refs[a.model||a.schema.id].references,c=o?o.primaryKey.prop:"id",l=":"+c;n(a.actions[a.model||a.schema.id][a.isNew?"create":"update"],s,l,c).then(function(r){if("ok"!==r.status)throw new Error(r.result);t.classList.add("success"),i&&i.onSubmit?i.onSubmit(r):setTimeout(function(){var t=a.actions[a.model||a.schema.id].index||{},n=e(r.redirect||t.path);n&&(location.href=n)},r.timeout||0)}).catch(function(e){alert(e.message),t.classList.add("errored")}).then(function(){return t.classList.remove("pending")})}},onChange:function(){t.classList.remove("errored"),t.classList.contains("pending")||t.classList.add("pending")},onError:function(e){t.classList.contains("errored")||(t.classList.add("errored"),console.log(e))},children:React.createElement("div",{className:"form-group"},!a.uiSchema["ui:actions"]||a.uiSchema["ui:actions"].indexOf("update")>-1||a.uiSchema["ui:actions"].indexOf("create")>-1?React.createElement("button",{type:"submit"},a.isNew?"Save":"Update"):null,i&&i.onClose?React.createElement("button",{onClick:function(e){return i.onClose(e)}},"Cancel"):null,a.isNew||a.uiSchema["ui:actions"]&&!(a.uiSchema["ui:actions"].indexOf("delete")>-1)?null:React.createElement("span",null,React.createElement("span",null," or ")," ",React.createElement("a",{href:"#",className:"destroy",onClick:function(r){if(r.preventDefault(),confirm("Are you sure?")){t.classList.add("pending");var s=a.refs[a.model||a.schema.id].references.primaryKey.prop,o=":"+s;n(a.actions[a.model||a.schema.id].destroy,a.result,o,s).then(function(r){t.classList.add("success"),i&&i.onDelete?i.onDelete(r):location.href=e(r.redirect||a.actions[a.model||a.schema.id].index.path)}).catch(function(e){alert(e.message),t.classList.add("errored")}).then(function(){return t.classList.remove("pending")})}}},"DELETE")))});var c,l,p,u},_=function(a){function n(e){a.call(this,e);var t=e.uiSchema["ui:fields"]||e.schema.required;if(!Array.isArray(t))throw new Error("Expecting ui:fields to be an array, given "+typeof t);this.params={},this.fields=t.map(function(t){var r="string"==typeof t?{prop:t}:t;return r.prop&&e.schema.properties[r.prop]&&(r.enum=e.schema.properties[r.prop].enum,r.value=null),r}),this.ref=e.refs[e.model||e.schema.id],this.total=(e.result||{}).length||0,this.current=1,this.items=10,this.property=this.ref.references.primaryKey.prop,this.placeholder=":"+this.property,this.state={fields:this.fields,data:[],pages:0}}return a&&(n.__proto__=a),n.prototype=Object.create(a&&a.prototype),n.prototype.constructor=n,n.prototype.componentDidMount=function(){this._doIndex(),this._doFocus(),this._doFiltering(),this._doPagination(),this._el=ReactDOM.findDOMNode(this)},n.prototype._assign=function(e,t,r){this.fields[e][t]=r},n.prototype._doIndex=function(){this.indexes=l(this.props.result)||[]},n.prototype._doFilter=function(){var e=this;this.setState({fields:this.fields.filter(function(t){return!1!==t.isShown&&(!t.prop||t.prop!==e._group)})}),this.params=this.fields.reduce(function(e,t){return t.prop&&null!==t.value&&(e[t.prop]=t.value),e},{}),this.current=1,this._doFiltering(),this._doPagination()},n.prototype._doFocus=function(){var e=this;setTimeout(function(){var t=e._search.value.length;e._search.focus(),e._search.setSelectionRange(t,t)},10)},n.prototype._doFiltering=function(){var e=this;this.keys=[],this.indexes.forEach(function(t,r){for(var a=Object.keys(e.params),n=0;n<a.length;n++){var i=a[n];if(e.params[i]&&e.params[i]!==e.props.result[r][i])return}if(e.search){for(var s=e.search.split(d).map(function(e){return e.replace(f,"").trim()}).filter(function(e){return e}),o=0;o<s.length;o++)if(new RegExp(s[o],"im").test(t)){e.keys.push(r);break}}else e.keys.push(r)}),(this._sort||this._group)&&this.keys.sort(function(t,r){var a=c(e.props.result[t],e._sort||e._group),n=c(e.props.result[r],e._sort||e._group),i=0;return Array.isArray(a)&&Array.isArray(n)?i=a.length-n.length:((!a||m.test(a)||n>a)&&(i=-1),(!n||m.test(n)||a>n)&&(i=1)),e._desc&&(i*=-1),i})},n.prototype._doPagination=function(){var e=this,t=Math.floor(this.keys.length/this.items),a=this.items*this.current,n={};this.keys.slice(a-this.items,a).forEach(function(t){var a=r({},e.props.result[t]),i=e._group&&c(e.props.result[t],e._group)||"default";n[i]||(n[i]=[]),n[i].push(a)});var i={data:n,pages:t,total:this.keys.length,items:this.items,search:this.search,current:this.current};void 0===this.state?this.state=i:this.setState(i)},n.prototype.doPaginate=function(e){var t=this;Object.keys(e).forEach(function(r){t[r]=parseInt(e[r],10)}),this._doPagination()},n.prototype.searchIn=function(e){this.search=e,this._doFilter()},n.prototype.toggleOpts=function(){this._opts&&(this._opts.classList.toggle("show"),this._doFocus())},n.prototype.openFrame=function(e,t,r){},n.prototype.sortBy=function(e){this._sort===e?this._desc?(this._asc=void 0,this._desc=void 0):this._asc?(this._asc=void 0,this._desc=!0):(this._asc=!0,this._desc=void 0):(this._asc=!0,this._desc=void 0),this._sort=e,this._doFilter()},n.prototype.renderItem=function(e){return"string"==typeof e&&/^https?:\/\//.test(e)?React.createElement("a",{href:e,target:"_blank"},e):e},n.prototype.render=function(){for(var r=this,a=[],n=0;n<this.state.pages;n++)a.push(n+1);var s=this.props.actions[this.props.schema.id].new?e(this.props.actions[this.props.schema.id].new.path):"#add",o=this.props.refs[this.props.schema.id].singular,l=!this.props.uiSchema["ui:actions"]||this.props.uiSchema["ui:actions"].indexOf("add")>-1;return React.createElement("div",{className:"json-table-container"},React.createElement("div",{className:"json-table-filters"},React.createElement("label",{className:"has-icon"},React.createElement("span",null,t("magnifying-glass")),React.createElement("input",{type:"search",ref:function(e){r._search=e},value:this.state.search,onInput:function(e){r.searchIn(e.target.value)},placeholder:"Search"}),React.createElement("a",{href:"#",className:this.state.search?"filled":"",onClick:function(e){e.preventDefault(),r.toggleOpts()}},t("magic-wand"))),l&&s?React.createElement("a",{href:s},"Add ",o," ",t("plus-circle")):null,React.createElement("div",{className:"json-table-settings",ref:function(e){r._opts=e}},React.createElement("ul",{className:"reset"},this.fields.map(function(e,t){return React.createElement("li",{key:t},e.enum?React.createElement("span",null,React.createElement("label",null,React.createElement("input",{type:"checkbox",checked:!1!==e.isShown,onChange:function(e){r._assign(t,"isShown",e.target.checked),r._doFocus(),r._doFilter()}}),React.createElement("span",null,e.title||e.prop)),React.createElement("select",{value:e.selected,onChange:function(e){r._assign(t,"value","ALL"===e.target.value?null:e.target.value),r._doFocus(),r._doFilter()}},React.createElement("option",{value:null},"ALL"),e.enum.map(function(e){return React.createElement("option",{key:e,value:e},e)}))):React.createElement("label",null,React.createElement("input",{type:"checkbox",checked:!1!==e.isShown,onChange:function(e){r._assign(t,"isShown",e.target.checked),r._doFocus(),r._doFilter()}}),React.createElement("span",null,e.title||e.prop)))})),React.createElement("hr",null),React.createElement("label",null,React.createElement("span",null,"Group by"),React.createElement("select",{onChange:function(e){r._group=e.target.value,r._doFocus(),r._doFilter()}},React.createElement("option",{value:null},"NONE"),this.fields.filter(function(e){return void 0!==e.prop&&!1!==e.filter}).map(function(e){return React.createElement("option",{key:e.prop,value:e.prop},e.title||e.prop)}))))),React.createElement("table",{className:"json-table responsive"},React.createElement("thead",null,React.createElement("tr",null,this.state.fields.map(function(e,t){return React.createElement("th",{key:t,className:e.className,onClick:function(t){e.prop&&!r._group&&r.sortBy(e.prop)}},e.title||e.prop," ",e.prop&&!r._group?React.createElement("em",{className:r._sort===e.prop?"active":null},React.createElement("span",{className:r._sort===e.prop&&r._asc?"active":null},"◀"),React.createElement("span",{className:r._sort===e.prop&&r._desc?"active":null},"▶")):null)}),React.createElement("th",null))),Object.keys(this.state.data).map(function(t){return React.createElement("tbody",{key:t},"default"!==t?React.createElement("tr",{className:"group",key:t},React.createElement("th",{colSpan:"99"},t," ",React.createElement("span",null,r.state.data[t].length))):null,r.state.data[t].map(function(a,n){return React.createElement("tr",{key:n,className:"row"},r.state.fields.map(function(e,t){var s=function(){for(var e=Array.prototype.slice.call(arguments),t=0;t<e.length;t+=1)if(null!==e[t]&&void 0!==e[t])return e[t]}(i(a,e.template,r._el),c(a,e.getter),c(a,e.prop),"-");return React.createElement("td",{key:n+"_"+(e.prop||t),className:e.className,"data-prop":e.title||e.prop},r.renderItem(s))}),React.createElement("td",{className:"min-width"},!r.props.uiSchema["ui:actions"]||r.props.uiSchema["ui:actions"].indexOf("edit")>-1?React.createElement("a",{href:e(r.props.actions[r.ref.model].edit.path.replace(r.placeholder,a[r.property])),onClick:function(e){return r.openFrame(e,n,t)}},"✎"):null))}))})),React.createElement("div",{className:"json-table-pagination"},React.createElement("div",null,React.createElement("select",{value:this.state.current,disabled:!this.state.pages,onChange:function(e){r.doPaginate({current:e.target.value})}},a.map(function(e){return React.createElement("option",{value:e,key:e},e)})),React.createElement("button",{onClick:function(){r.doPaginate({current:Math.max(0,r.state.current-1)})},disabled:1===this.state.current},"Prev"),React.createElement("button",{onClick:function(){r.doPaginate({current:Math.min(r.state.pages,r.state.current+1)})},disabled:this.state.current>=this.state.pages},"Next")),React.createElement("div",null,React.createElement("small",null,"Page ",this.current," ",this.state.pages?React.createElement("span",null," / ",this.state.pages):null),React.createElement("select",{value:this.state.items,onChange:function(e){r.doPaginate({current:1,items:e.target.value})}},React.createElement("option",{value:"10"},"10"),React.createElement("option",{value:"20"},"20"),React.createElement("option",{value:"30"},"30"),React.createElement("option",{value:"50"},"50"),React.createElement("option",{value:"100"},"100")))))},n}(React.Component);window.addEventListener("keyup",function(e){if(console.log(e.keyCode),27===e.keyCode){var t=y.pop();t&&t()}}),document.currentScript.exports={initForm:p,initTable:function(e,t){ReactDOM.render(React.createElement(_,t),e)},initJsonForm:function(e,t,r){p(e,{action:"new",actions:{Object:{create:{verb:(t.endpoint?t.endpoint.method:null)||"POST",path:(t.endpoint?t.endpoint.url:null)||location.pathname}}},isNew:!0,model:"Object",refs:{Object:{plural:"Object",singular:"Object"}},result:t.defaults,title:t.title,schema:t.schema||{},uiSchema:t.uiSchema||{}},r)}}}();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment