n8n-editor-ui
Version:
Workflow Editor UI for n8n
4 lines (3 loc) • 12 kB
JavaScript
import{m as q}from"./pinia-6bf9956f.js";import"./axios-92f151e4.js";import{e as P,c as A,d as V,f as L,s as j,h as T,i as R}from"./index-906713a6.js";import{_ as O}from"./n8n-02caf295.js";import{M as B}from"./MappingPill-4d1fa3ff.js";import{d as F,b as w,o as r,f as l,n as o,g as n,M,a9 as E,e as c,w as d,l as k,t as b,k as H,c as W}from"./vendor-18a4b4e1.js";import"./flatted-8b14da7d.js";import"./@fortawesome/vue-fontawesome-f597912a.js";import"./@fortawesome/fontawesome-svg-core-984d6dde.js";import"./vue-i18n-c3b0f366.js";import"./uuid-cf522c50.js";import"./dateformat-8c1d9796.js";import"./lodash-es-876af2e5.js";import"./luxon-19e1de07.js";import"./@jsplumb/browser-ui-70b0a0d6.js";import"./@jsplumb/core-0a463c13.js";import"./@jsplumb/util-98a92a84.js";import"./@jsplumb/common-fe415eb9.js";import"./@jsplumb/connector-bezier-53998944.js";import"./@n8n/codemirror-lang-sql-9a304659.js";import"./codemirror-lang-n8n-expression-47e67c3a.js";import"./codemirror-lang-html-n8n-4223f8c7.js";import"./fast-json-stable-stringify-57a373c2.js";import"./prettier-51497383.js";import"./esprima-next-8c7e8ff9.js";import"./@vueuse/core-60457efe.js";import"./timeago.js-a9e71aec.js";import"./qrcode.vue-338130ab.js";import"./file-saver-0526b42c.js";import"./vue-json-pretty-95ec0e1b.js";import"./humanize-duration-6da291e3.js";import"./v3-infinite-loading-8fbfd594.js";import"./vue-agile-44d1a063.js";import"./copy-to-clipboard-4e2822ec.js";import"./vue3-touch-events-ee55ce04.js";import"./@fortawesome/free-solid-svg-icons-d79f1537.js";import"./@fortawesome/free-regular-svg-icons-74cb85f8.js";const _=40,J=F({name:"run-data-table",mixins:[P],components:{Draggable:A,MappingPill:B},props:{node:{type:Object},inputData:{type:Array},mappingEnabled:{type:Boolean},distanceFromActive:{type:Number},runIndex:{type:Number},outputIndex:{type:Number},totalRuns:{type:Number},pageOffset:{type:Number},hasDefaultHoverState:{type:Boolean}},data(){return{activeColumn:-1,forceShowGrip:!1,draggedColumn:!1,draggingPath:null,hoveringPath:null,mappingHintVisible:!1,activeRow:null,columnLimit:_,columnLimitExceeded:!1}},mounted(){if(this.tableData&&this.tableData.columns&&this.$refs.draggable){const e=this.$refs.draggable.$refs.wrapper;e&&this.$emit("mounted",{avgRowHeight:e.offsetHeight/this.tableData.data.length})}},computed:{...q(L,V),hoveringItem(){return this.ndvStore.hoveringItem},pairedItemMappings(){return this.workflowsStore.workflowExecutionPairedItemMappings},tableData(){return this.convertToTable(this.inputData)},focusedMappableInput(){return this.ndvStore.focusedMappableInput}},methods:{shorten:j,isHoveringRow(e){if(e===this.activeRow)return!0;const t=this.pageOffset+e;if(t===0&&!this.hoveringItem&&this.hasDefaultHoverState&&this.distanceFromActive===1)return!0;const a=T(this.node.name,this.runIndex||0,this.outputIndex||0,t);if(!this.hoveringItem||!this.pairedItemMappings[a])return!1;const g=T(this.hoveringItem.nodeName,this.hoveringItem.runIndex,this.hoveringItem.outputIndex,this.hoveringItem.itemIndex);return this.pairedItemMappings[a].has(g)},onMouseEnterCell(e){const t=e.target;if(t&&this.mappingEnabled){const a=t.dataset.col;a&&!isNaN(parseInt(a,10))&&(this.activeColumn=parseInt(a,10))}if(t){const a=t.dataset.row;a&&!isNaN(parseInt(a,10))&&(this.activeRow=parseInt(a,10),this.$emit("activeRowChanged",this.pageOffset+this.activeRow))}},onMouseLeaveCell(){this.activeColumn=-1,this.activeRow=null,this.$emit("activeRowChanged",null)},onMouseEnterKey(e,t){this.hoveringPath=this.getCellExpression(e,t)},onMouseLeaveKey(){this.hoveringPath=null},isHovering(e,t){const a=this.getCellExpression(e,t);return this.hoveringPath===a},getExpression(e){return this.node?R({nodeName:this.node.name,distanceFromActive:this.distanceFromActive,path:[e]}):""},getPathNameFromTarget(e){return e?e.dataset.name:""},getCellPathName(e,t){const a=e[e.length-1];return typeof a=="string"?a:e.length>1?`${e[e.length-2]}[${a}]`:`${this.tableData.columns[t]}[${a}]`},getCellExpression(e,t){if(!this.node)return"";const a=this.tableData.columns[t];return R({nodeName:this.node.name,distanceFromActive:this.distanceFromActive,path:[a,...e]})},isEmpty(e){return e===""||Array.isArray(e)&&e.length===0||typeof e=="object"&&e!==null&&Object.keys(e).length===0||e===null||e===void 0},getValueToRender(e){return e===""?this.$locale.baseText("runData.emptyString"):typeof e=="string"?e.replaceAll(`
`,"\\n"):Array.isArray(e)&&e.length===0?this.$locale.baseText("runData.emptyArray"):typeof e=="object"&&e!==null&&Object.keys(e).length===0?this.$locale.baseText("runData.emptyObject"):e??`[${e}]`},onDragStart(){this.draggedColumn=!0,this.ndvStore.resetMappingTelemetry()},onCellDragStart(e){e&&e.dataset.value&&(this.draggingPath=e.dataset.value),this.onDragStart()},onCellDragEnd(e){this.draggingPath=null,this.onDragEnd(e.dataset.name||"","tree",e.dataset.depth||"0")},isDraggingKey(e,t){if(this.draggingPath)return this.draggingPath===this.getCellExpression(e,t)},onDragEnd(e,t,a="0"){setTimeout(()=>{const g=this.ndvStore.mappingTelemetry,u={src_node_type:this.node.type,src_field_name:e,src_nodes_back:this.distanceFromActive,src_run_index:this.runIndex,src_runs_total:this.totalRuns,src_field_nest_level:parseInt(a,10),src_view:"table",src_element:t,success:!1,...g};this.$externalHooks().run("runDataTable.onDragEnd",u),this.$telemetry.track("User dragged data for mapping",u)},1e3)},isSimple(e){return typeof e!="object"||e===null||Array.isArray(e)&&e.length===0||typeof e=="object"&&Object.keys(e).length===0},hasJsonInColumn(e){return this.tableData.hasJson[this.tableData.columns[e]]},convertToTable(e){const t=[],a=[];let g,u,h;const C={};return e.forEach(y=>{if(!y.hasOwnProperty("json"))return;h=y.json,u=[];const D=Object.keys(h||{});D.length>_?(this.columnLimitExceeded=!0,g=D.slice(0,_)):g=D,a.forEach(s=>{h.hasOwnProperty(s)?(u.push(h[s]),g.splice(g.indexOf(s),1),C[s]=C[s]||typeof h[s]=="object"&&Object.keys(h[s]||{}).length>0||!1):u.push(void 0)}),g.forEach(s=>{a.push(s),u.push(h[s]),C[s]=C[s]||typeof h[s]=="object"&&Object.keys(h[s]||{}).length>0||!1}),t.push(u)}),t.forEach(y=>{a.length>y.length&&y.push(...new Array(a.length-y.length))}),{hasJson:C,columns:a,data:t}},switchToJsonView(){this.$emit("displayModeChange","json")}},watch:{focusedMappableInput(e){setTimeout(()=>{this.forceShowGrip=!!this.focusedMappableInput},e?300:150)}}}),G="/%7B%7BBASE_PATH%7D%7D/static/data-mapping-gif.gif",U="_dataDisplay_1krqo_5",z="_table_1krqo_18",X="_nodeClass_1krqo_66",Q="_emptyCell_1krqo_70",Y="_header_1krqo_74",Z="_draggableHeader_1krqo_86",x="_dragButton_1krqo_90",ee="_draggingHeader_1krqo_94",te="_activeHeader_1krqo_98",ae="_dataKey_1krqo_107",ne="_value_1krqo_116",oe="_nestedValue_1krqo_120 _value_1krqo_116",se="_mappable_1krqo_125",re="_empty_1krqo_70",ie="_limitColWidth_1krqo_133",le="_minColWidth_1krqo_137",de="_hoveringKey_1krqo_141",pe="_draggingKey_1krqo_145",ge="_tableRightMargin_1krqo_149",me="_hoveringRow_1krqo_157",ue="_warningTooltip_1krqo_162",he={dataDisplay:U,table:z,nodeClass:X,emptyCell:Q,header:Y,draggableHeader:Z,dragButton:x,draggingHeader:ee,activeHeader:te,dataKey:ae,value:ne,nestedValue:oe,mappable:se,empty:re,limitColWidth:ie,minColWidth:le,hoveringKey:de,draggingKey:pe,tableRightMargin:ge,hoveringRow:me,warningTooltip:ue},ce=["data-row"],ye=n("img",{src:G},null,-1),be=["data-test-id"],fe=["data-row","data-col"],ve=["onMouseenter","data-name","data-value","data-depth"],Ce={key:0};function we(e,t,a,g,u,h){const C=w("n8n-info-tip"),y=w("MappingPill"),D=w("font-awesome-icon"),s=w("draggable"),I=w("n8n-tooltip"),S=w("i18n-t"),K=w("n8n-tree");return r(),l("div",{class:o(e.$style.dataDisplay)},[e.tableData.columns&&e.tableData.columns.length===0?(r(),l("table",{key:0,class:o(e.$style.table)},[n("tr",null,[n("th",{class:o(e.$style.emptyCell)},null,2),n("th",{class:o(e.$style.tableRightMargin)},null,2)]),(r(!0),l(M,null,E(e.tableData.data,(m,p)=>(r(),l("tr",{key:p,class:o({[e.$style.hoveringRow]:e.isHoveringRow(p)})},[n("td",{"data-row":p,"data-col":0,onMouseenter:t[0]||(t[0]=(...i)=>e.onMouseEnterCell&&e.onMouseEnterCell(...i)),onMouseleave:t[1]||(t[1]=(...i)=>e.onMouseLeaveCell&&e.onMouseLeaveCell(...i))},[c(C,null,{default:d(()=>[k(b(e.$locale.baseText("runData.emptyItemHint")),1)]),_:1})],40,ce),n("td",{class:o(e.$style.tableRightMargin)},null,2)],2))),128))],2)):(r(),l("table",{key:1,class:o(e.$style.table)},[n("thead",null,[n("tr",null,[(r(!0),l(M,null,E(e.tableData.columns||[],(m,p)=>(r(),l("th",{key:m},[c(I,{placement:"bottom-start",disabled:!e.mappingEnabled,"show-after":1e3},{content:d(()=>[n("div",null,[ye,k(" "+b(e.$locale.baseText("dataMapping.dragColumnToFieldHint")),1)])]),default:d(()=>[c(s,{type:"mapping",data:e.getExpression(m),disabled:!e.mappingEnabled,onDragstart:e.onDragStart,onDragend:i=>e.onDragEnd(i,"column")},{preview:d(({canDrop:i})=>[c(y,{html:e.shorten(m,16,2),"can-drop":i},null,8,["html","can-drop"])]),default:d(({isDragging:i})=>[n("div",{class:o({[e.$style.header]:!0,[e.$style.draggableHeader]:e.mappingEnabled,[e.$style.activeHeader]:(p===e.activeColumn||e.forceShowGrip)&&e.mappingEnabled,[e.$style.draggingHeader]:i})},[n("span",null,b(m||" "),1),n("div",{class:o(e.$style.dragButton)},[c(D,{icon:"grip-vertical"})],2)],2)]),_:2},1032,["data","disabled","onDragstart","onDragend"])]),_:2},1032,["disabled"])]))),128)),e.columnLimitExceeded?(r(),l("th",{key:0,class:o(e.$style.header)},[c(I,{placement:"bottom-end"},{content:d(()=>[n("div",null,[c(S,{tag:"span",keypath:"dataMapping.tableView.tableColumnsExceeded.tooltip"},{columnLimit:d(()=>[k(b(e.columnLimit),1)]),link:d(()=>[n("a",{onClick:t[2]||(t[2]=(...m)=>e.switchToJsonView&&e.switchToJsonView(...m))},b(e.$locale.baseText("dataMapping.tableView.tableColumnsExceeded.tooltip.link")),1)]),_:1})])]),default:d(()=>[n("span",null,[c(D,{class:o(e.$style.warningTooltip),icon:"exclamation-triangle"},null,8,["class"]),k(" "+b(e.$locale.baseText("dataMapping.tableView.tableColumnsExceeded")),1)])]),_:1})],2)):H("",!0),n("th",{class:o(e.$style.tableRightMargin)},null,2)])]),c(s,{tag:"tbody",type:"mapping",targetDataKey:"mappable",disabled:!e.mappingEnabled,onDragstart:e.onCellDragStart,onDragend:e.onCellDragEnd,ref:"draggable"},{preview:d(({canDrop:m,el:p})=>[c(y,{html:e.shorten(e.getPathNameFromTarget(p)||"",16,2),"can-drop":m},null,8,["html","can-drop"])]),default:d(()=>[(r(!0),l(M,null,E(e.tableData.data,(m,p)=>(r(),l("tr",{key:p,class:o({[e.$style.hoveringRow]:e.isHoveringRow(p)}),"data-test-id":e.isHoveringRow(p)?"hovering-item":void 0},[(r(!0),l(M,null,E(m,(i,f)=>(r(),l("td",{key:f,"data-row":p,"data-col":f,onMouseenter:t[4]||(t[4]=(...v)=>e.onMouseEnterCell&&e.onMouseEnterCell(...v)),onMouseleave:t[5]||(t[5]=(...v)=>e.onMouseLeaveCell&&e.onMouseLeaveCell(...v)),class:o(e.hasJsonInColumn(f)?e.$style.minColWidth:e.$style.limitColWidth)},[e.isSimple(i)?(r(),l("span",{key:0,class:o({[e.$style.value]:!0,[e.$style.empty]:e.isEmpty(i)})},b(e.getValueToRender(i)),3)):(r(),W(K,{key:1,nodeClass:e.$style.nodeClass,value:i},{label:d(({label:v,path:$})=>[n("span",{onMouseenter:()=>e.onMouseEnterKey($,f),onMouseleave:t[3]||(t[3]=(...N)=>e.onMouseLeaveKey&&e.onMouseLeaveKey(...N)),class:o({[e.$style.hoveringKey]:e.mappingEnabled&&e.isHovering($,f),[e.$style.draggingKey]:e.isDraggingKey($,f),[e.$style.dataKey]:!0,[e.$style.mappable]:e.mappingEnabled}),"data-target":"mappable","data-name":e.getCellPathName($,f),"data-value":e.getCellExpression($,f),"data-depth":$.length},b(v||e.$locale.baseText("runData.unnamedField")),43,ve)]),value:d(({value:v})=>[n("span",{class:o({[e.$style.nestedValue]:!0,[e.$style.empty]:e.isEmpty(v)})},b(e.getValueToRender(v)),3)]),_:2},1032,["nodeClass","value"]))],42,fe))),128)),e.columnLimitExceeded?(r(),l("td",Ce)):H("",!0),n("td",{class:o(e.$style.tableRightMargin)},null,2)],10,be))),128))]),_:1},8,["disabled","onDragstart","onDragend"])],2))],2)}const De={$style:he},rt=O(J,[["render",we],["__cssModules",De]]);export{rt as default};
//# sourceMappingURL=RunDataTable-7d05e28a.js.map