'+ '

'+ ''+uName+''+ ' changed '+(FIELD_LBL[e.field]||e.field)+''+ ' from '+esc(fv(e.field,e.oldValue))+''+ ' to '+esc(fv(e.field,e.newValue))+''+ '

'+ '

'+ds+' at '+ts+'

'+ '

'; }).join(""); } /* ── Switch between Details / Audit Trail tabs ── */ window.picardSwitchTab = function(tab){ var dBody=document.getElementById("picard-tab-details"); var aBody=document.getElementById("picard-tab-audit"); var dBtn =document.getElementById("picard-tbtn-details"); var aBtn =document.getElementById("picard-tbtn-audit"); var footer=document.getElementById("picard-panel-footer"); if(!dBody||!aBody) return; var activeTab='padding:10px 18px;font-size:0.8125rem;font-weight:700;color:#0d1f3c;border:none;background:transparent;cursor:pointer;font-family:inherit;border-bottom:2px solid #3B7DD8;'; var inactiveTab='padding:10px 18px;font-size:0.8125rem;font-weight:500;color:#94a3b8;border:none;background:transparent;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;'; if(tab==="details"){ dBody.style.display="flex"; dBody.style.flexDirection="column"; aBody.style.display="none"; if(dBtn) dBtn.setAttribute("style",activeTab); if(aBtn) aBtn.setAttribute("style",inactiveTab); if(footer) footer.style.display="flex"; } else { dBody.style.display="none"; aBody.style.display="flex"; aBody.style.flexDirection="column"; if(dBtn) dBtn.setAttribute("style",inactiveTab); if(aBtn) aBtn.setAttribute("style",activeTab); if(footer) footer.style.display="none"; /* Lazy-load the full trail on first open */ var box=document.getElementById("picard-audit-full"); if(box&&box.getAttribute("data-loaded")!=="1"){ box.setAttribute("data-loaded","1"); box.innerHTML='

Loading…

'; var url="/picard/api/delivery-plans/"+_ps.planId+"/stories/"+_ps.sid+"/audit"; fetch(url,{credentials:"include"}) .then(function(r){ if(!r.ok) throw new Error("HTTP "+r.status); return r.json(); }) .then(function(data){ var b2=document.getElementById("picard-audit-full"); if(!b2) return; b2.innerHTML=_renderAuditEntries(data.entries||[]); }) .catch(function(){ var b2=document.getElementById("picard-audit-full"); if(!b2) return; b2.innerHTML='Could not load audit trail.'; }); } } }; window.picardShowPanel = function(sid, name, col, sprint, pts, planId, colsJson, spsJson, assignedId, description, ac, placeholder){ ensureStoryPanel(); var panel=document.getElementById("picard-shared-edit-panel"); if(!panel) return; var bd=document.getElementById("picard-story-backdrop"); var cols=[]; try{ cols=JSON.parse(colsJson||"[]"); }catch(e){} var sps=[]; try{ sps=JSON.parse(spsJson||"[]"); }catch(e){} var m2=getBoardMeta(); var team=[]; try{ team=JSON.parse((m2&&m2.teamJson)||"[]"); }catch(e){} var readOnly=(m2&&m2.canPlan==="0"); _ps={ col:col||null, sprint:sprint||"backlog", pts:pts?parseInt(pts,10):null, sid:sid, planId:planId, sps:sps }; /* ── Last-7 activity from board-embedded map ── */ var _auditEntries=[]; try{ var _am=JSON.parse((m2&&m2.auditMapJson)||"{}"); if(sid&&_am[sid]) _auditEntries=_am[sid]; }catch(e){} var auditHtml=_renderAuditEntries(_auditEntries); var ptsBtns=[1,2,3,5,8,13].map(function(p){ return mkBtn(p, p===_ps.pts, "pts-val", p, PTS_COLORS[p]||"#0d1f3c"); }).join(""); var colBtns=cols.map(function(c,i){ return mkBtn(c.name, c.status===col, "col-val", c.status, EDIT_COL_PAL[i%EDIT_COL_PAL.length]); }).join(""); var spOpts=''; spOpts+=sps.map(function(s){ return ''; }).join(""); var userOpts=''; team.forEach(function(u){ userOpts+=''; }); var sectionLbl='font-size:0.6rem;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px;display:block;'; var divider='margin-bottom:16px;'; var fieldBorder='1.5px solid #e8ecf4'; var fieldRadius='10px'; var fieldBg='#f8fafc'; var roField='border:'+fieldBorder+';border-radius:'+fieldRadius+';background:#f1f5f9;color:#64748b;cursor:default;'; var rwField='border:'+fieldBorder+';border-radius:'+fieldRadius+';background:'+fieldBg+';color:#111827;cursor:pointer;'; var activeTab='padding:10px 18px;font-size:0.8125rem;font-weight:700;color:#0d1f3c;border:none;background:transparent;cursor:pointer;font-family:inherit;border-bottom:2px solid #3B7DD8;'; var inactiveTab='padding:10px 18px;font-size:0.8125rem;font-weight:500;color:#94a3b8;border:none;background:transparent;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;'; var sprintLabel=(function(){ if(!sprint||sprint==="backlog") return "Backlog"; for(var i=0;i'+ /* header */ '

'+ '

Story

'+ ''+ '

'+ /* ── tab bar ── */ '

'+ ''+ ''+ '

'+ /* ── DETAILS tab body ── */ '

'+ '

'+ 'Story Points'+ '

'+ptsBtns+'

'+ '

'+ (team.length>0 ?'

'+ 'Resource'+ (readOnly ?'

'+esc(assigneeLabel)+'

' :'' )+ '

' :'

')+ '

'+ '

'+ 'Column'+ '

'+colBtns+'

'+ '

'+ 'Sprint'+ (readOnly ?'

'+esc(sprintLabel)+'

' :'' )+ '

'+ '

'+ 'Description'+ ''+ '

'+ '

'+ 'Acceptance Criteria'+ ''+ '

'+ '

'+ 'Recent Activity'+ '

'+auditHtml+'

'+ (_auditEntries.length>0 ?'' :'')+ '

'+ '

'+ /* ── AUDIT TRAIL tab body ── */ ''+ /* footer (hidden on audit tab) */ '

'+ (readOnly ?'' :''+ '' )+ '

'; attachPanelListeners(panel); panel.style.display="flex"; if(bd) bd.style.display="block"; }; /* ── board helpers ── */ function getBoard(){ return document.querySelector("[data-picard-board]"); } function getBoardMeta(){ var b=getBoard(); if(!b) return null; return { planId: b.getAttribute("data-picard-plan-id")||"", colsJson: b.getAttribute("data-picard-columns")||"[]", spsJson: b.getAttribute("data-picard-sprints")||"[]", teamJson: b.getAttribute("data-picard-team")||"[]", featuresJson:b.getAttribute("data-picard-features")||"[]", canPlan: b.getAttribute("data-picard-can-plan")||"1", auditMapJson:b.getAttribute("data-picard-audit-map")||"{}" }; } /* ── Add Story: POST a new story then open the panel to let the user fill it in ── */ window.picardAddStory = function(){ var m=getBoardMeta(); if(!m) return; var cols=[]; try{ cols=JSON.parse(m.colsJson); }catch(e){} var sps=[]; try{ sps=JSON.parse(m.spsJson); }catch(e){} /* Capture board URL NOW — before any async; used to navigate back after save even if the user navigates away while the PATCH is in-flight. */ var capturedBoardUrl=window.location.href; /* Use the currently-filtered sprint if one is selected, else prefer the OPEN sprint, then the first non-closed sprint, then the first sprint in order */ var activeSprint=window._picardActiveSprint; var sprintId; if(activeSprint&&activeSprint!=="all"){ sprintId=activeSprint; } else { var openSp=sps.find(function(s){return s.status==="OPEN";}); var firstNonClosed=sps.find(function(s){return s.status!=="CLOSED"&&s.status!=="COMPLETED";}); var fallback=sps.length>0?sps[0]:null; sprintId=(openSp||firstNonClosed||fallback)?((openSp||firstNonClosed||fallback).id):null; } var firstColStatus=cols.length>0?cols[0].status:"NOT_STARTED"; var btn=document.querySelector("[data-picard-add-story]"); if(btn){ btn.textContent="Creating…"; btn.disabled=true; } fetch("/picard/api/delivery-plans/"+m.planId+"/stories",{ method:"POST", credentials:"include", headers:{"Content-Type":"application/json"}, body:JSON.stringify({ name:"New Story", sprintId:sprintId, status:firstColStatus }) }).then(function(r){ return r.json(); }).then(function(data){ if(btn){ btn.textContent="+ Add Story"; btn.disabled=false; } if(!data.story){ alert("Failed to create story"); return; } picardShowPanel( data.story.id, data.story.name, firstColStatus, sprintId||"backlog", null, /* pts — user will set in panel */ m.planId, m.colsJson, m.spsJson, null, /* assignedUserId */ "", /* description */ "" /* acceptanceCriteria */ ); /* Set isNew + boardUrl AFTER picardShowPanel — picardShowPanel overwrites _ps so any flag set before the call is lost. */ _ps.isNew=true; _ps.boardUrl=capturedBoardUrl; }).catch(function(e){ if(btn){ btn.textContent="+ Add Story"; btn.disabled=false; } alert("Failed to create story: "+e); }); }; function colAtPoint(x,y){ var b=getBoard(); if(!b) return null; var cols=b.querySelectorAll(".picard-col"); for(var i=0;i=r.left&&x<=r.right&&y>=r.top&&y<=r.bottom) return cols[i]; } return null; } /* ── column count badge update (called after drag-drop) ── */ function updateColCounts(){ var b=getBoard(); if(!b) return; b.querySelectorAll(".picard-col").forEach(function(colEl){ var badge=colEl.querySelector("[data-col-count]"); var ptsBadge=colEl.querySelector("[data-col-pts]"); var cards=colEl.querySelectorAll(".picard-card"); if(badge) badge.textContent=String(cards.length); if(ptsBadge){ var pts=0; cards.forEach(function(c){ pts+=parseInt(c.getAttribute("data-story-pts")||"0",10); }); if(pts>0){ ptsBadge.textContent=pts+"pt"; ptsBadge.style.display=""; } else { ptsBadge.style.display="none"; } } }); } /* Insert a cross-column Story where the server-rendered board will place it. Story order is global within its feature, so preserving that value avoids the card briefly appearing at the bottom before the refresh restores it. */ function pdInsertInSavedOrder(col,wrapper,card){ var cardsHost=col.querySelector("[data-col-cards]")||col; var movingOrder=parseInt(card.getAttribute("data-story-order")||"0",10); var wrappers=Array.from(cardsHost.querySelectorAll(":scope > [data-card-sprint]")) .filter(function(w){return w!==wrapper;}); var before=wrappers.find(function(w){ var other=w.querySelector("[data-story-id]"); return other&&parseInt(other.getAttribute("data-story-order")||"0",10)>movingOrder; }); if(before) cardsHost.insertBefore(wrapper,before); else cardsHost.appendChild(wrapper); } /* ── PCM (column config) overlay ── */ var PCM_PAL=["#4f46e5","#0891b2","#059669","#d97706","#dc2626","#7c3aed","#db2777"]; function picardCloseColConfig(){ var p=document.getElementById("picard-col-config"); if(p) p.style.display="none"; var bd=document.getElementById("picard-col-backdrop"); if(bd) bd.style.display="none"; } /* Expose as global so inline onclick="picardCloseColConfig()" works */ window.picardCloseColConfig = picardCloseColConfig; /* Global wrappers used by inline onclick attributes on dynamically-rendered buttons */ window.picardPcmSave = function(){ var p=document.getElementById("picard-col-config"); if(p) pcmSave(p); }; window.picardPcmRemove = function(btn){ pcmRemoveRow(btn); }; function pcmSave(pcmPanel){ var pcmPlan=pcmPanel.getAttribute("data-pcm-plan"); var toSave=Array.from(pcmPanel.querySelectorAll(".pcm-row")).map(function(row){ var inp=row.querySelector("[data-pcm-input]"); return{id:row.getAttribute("data-pcm-row"),status:row.getAttribute("data-pcm-status"),name:(inp?inp.value.trim():"")||"Column",definitionOfDone:row.getAttribute("data-pcm-dod")||null}; }); var sv=pcmPanel.querySelector("[data-pcm-save]"); if(sv){ sv.textContent="Saving…"; sv.disabled=true; } fetch("/picard/api/delivery-plans/"+pcmPlan,{ method:"PATCH",credentials:"include", headers:{"Content-Type":"application/json"}, body:JSON.stringify({boardColumns:JSON.stringify(toSave)}) }).then(function(r){ if(r.ok){ picardCloseColConfig(); /* Reload the page so the board immediately shows the new columns. React state updates (setPlan/setBoardKey) proved unreliable in the Replit proxy environment; a navigation is the guaranteed path. */ window.location.reload(); } else{ if(sv){sv.textContent="Save Columns";sv.disabled=false;} r.text().then(function(msg){alert("Save failed: "+msg);}); } }).catch(function(err){ if(sv){sv.textContent="Save Columns";sv.disabled=false;} alert("Network error: "+err); }); } /* ── Remove a PCM row — warns if the column still has stories ── */ function pcmRemoveRow(btn){ var panel=document.getElementById("picard-col-config"); if(!panel) return; var rd=panel.querySelector(".pcm-rows"); if(!rd) return; var row=btn.closest(".pcm-row"); if(!row) return; var rows=rd.querySelectorAll(".pcm-row"); if(rows.length<=1) return; /* count stories with this column's status currently on the board */ var colStatus=row.getAttribute("data-pcm-status")||""; var storyCount=0; document.querySelectorAll(".picard-card").forEach(function(c){ if(c.getAttribute("data-current-status")===colStatus) storyCount++; }); if(storyCount>0){ alert("Cannot delete this column — it still contains "+storyCount+" "+(storyCount===1?"story":"stories")+". Move all stories to another column first."); return; } row.remove(); var rem=Array.from(rd.querySelectorAll(".pcm-row")); rem.forEach(function(r,i){ var dot=r.querySelector("span[style*='border-radius:50%']"); if(dot) dot.style.background=(i===rem.length-1)?"#059669":PCM_PAL[i%PCM_PAL.length]; }); var cnt=panel.querySelector(".pcm-count"); if(cnt) cnt.textContent=rem.length+"/7"; var addBtn=panel.querySelector("[data-pcm-add]"); if(addBtn) addBtn.style.display=""; } function pcmRow(c,i,total){ var isDone=i===total-1; var handle=isDone ? "🔒" : "⡀"; /* ✕ button uses inline onclick so it always works regardless of when innerHTML was last set */ var rmBtn=isDone ? "" : ""; return "

"+ handle+ ""+ ""+ rmBtn+ "

"; } function pcmRender(panel,cols){ var rows=cols.map(function(c,i){ return pcmRow(c,i,cols.length); }).join(""); panel.innerHTML= "

"+ "

Configure Board Columns

"+ "

"+cols.length+"/7

"+ "

"+rows+"

"+ /* inline onclick on every action button — no addEventListener needed */ ""+ "

"+ ""+ ""+ "

"; } function ensureStoryPanel(){ /* Create story panel elements as direct children of so React can never wipe their innerHTML on router.refresh() re-renders. */ if(!document.getElementById("picard-story-backdrop")){ var bd=document.createElement("div"); bd.id="picard-story-backdrop"; document.body.appendChild(bd); } if(!document.getElementById("picard-shared-edit-panel")){ var ep=document.createElement("div"); ep.id="picard-shared-edit-panel"; document.body.appendChild(ep); } } function ensurePcmOverlays(){ /* Create overlay elements as direct children of so React never owns or clears them. All button actions are handled by inline onclick attributes — no listeners needed here. */ if(!document.getElementById("picard-col-backdrop")){ var bd=document.createElement("div"); bd.id="picard-col-backdrop"; bd.style.cssText="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9998;cursor:pointer;"; bd.onclick=function(){ picardCloseColConfig(); }; document.body.appendChild(bd); } if(!document.getElementById("picard-col-config")){ var cfg=document.createElement("div"); cfg.id="picard-col-config"; cfg.style.cssText="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;width:380px;max-width:calc(100vw - 40px);background:#fff;border-radius:14px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,0.22),0 4px 16px rgba(0,0,0,0.10);"; document.body.appendChild(cfg); } } function picardOpenColConfig(){ ensurePcmOverlays(); var m=getBoardMeta(); if(!m) return; var cols; try{ cols=JSON.parse(m.colsJson); }catch(e){ return; } var panel=document.getElementById("picard-col-config"); if(!panel) return; panel.setAttribute("data-pcm-plan",m.planId); pcmRender(panel,cols); /* No attachPcmListeners needed — delegation listener is on the panel element itself */ panel.style.display="block"; var bd=document.getElementById("picard-col-backdrop"); if(bd) bd.style.display="block"; } window.picardPcmAdd = function(){ var panel=document.getElementById("picard-col-config"); if(!panel) return; var rd=panel.querySelector(".pcm-rows"); if(!rd) return; var rows=rd.querySelectorAll(".pcm-row"); if(rows.length>=7) return; var nid="c_"+Math.random().toString(36).slice(2,7); var nst="ST_"+Math.random().toString(36).slice(2,7).toUpperCase(); var ni=rows.length-1; var nr=document.createElement("div"); nr.className="pcm-row"; nr.setAttribute("data-pcm-row",nid); nr.setAttribute("data-pcm-status",nst); nr.style.cssText="display:flex;align-items:center;gap:8px;margin-bottom:7px;border-radius:5px;padding:2px 0;"; nr.innerHTML= "⡀"+ ""+ ""+ ""; var doneRow=rd.querySelector(".pcm-row:last-child"); rd.insertBefore(nr,doneRow); var nowCount=rd.querySelectorAll(".pcm-row").length; var addBtn=panel.querySelector("[data-pcm-add]"); if(nowCount>=7&&addBtn) addBtn.style.display="none"; var rem=Array.from(rd.querySelectorAll(".pcm-row")); rem.forEach(function(r,i){ var dot=r.querySelector("span[style*='border-radius:50%']"); if(dot) dot.style.background=(i===rem.length-1)?"#059669":PCM_PAL[i%PCM_PAL.length]; }); var cnt=panel.querySelector(".pcm-count"); if(cnt) cnt.textContent=nowCount+"/7"; }; /* ── drag state ── */ var pd = { active:false, card:null, ghost:null, overCol:null, startX:0, startY:0, moved:false, justOpened:false, dropBefore:null }; var pcmDrag = { active:false, el:null, ghost:null, srcIdx:-1, tgtIdx:-1, startY:0, moved:false }; function pdClearIndicators(){ document.querySelectorAll("[data-card-sprint]").forEach(function(w){ w.style.borderTop=""; w.style.borderBottom=""; }); } function pdCleanup(){ if(pd.ghost){ pd.ghost.remove(); pd.ghost=null; } if(pd.card) pd.card.style.opacity=""; if(pd.overCol){ pd.overCol.removeAttribute("data-dragover"); pd.overCol=null; } pdClearIndicators(); pd.active=false; pd.card=null; pd.moved=false; pd.dropBefore=null; } /* Story dragging is controlled by the owning React board. Filtered boards deliberately set data-picard-can-plan="0" so their partial DOM must never be used to derive or persist a new story order. */ function pdDragAllowed(card){ var board=card&&card.closest("[data-picard-can-plan]"); return !!board&&board.getAttribute("data-picard-can-plan")==="1"; } function pcmDragCleanup(){ if(pcmDrag.ghost){ pcmDrag.ghost.remove(); pcmDrag.ghost=null; } if(pcmDrag.el){ pcmDrag.el.style.opacity=""; } var rd=document.querySelector("#picard-col-config .pcm-rows"); if(rd) rd.querySelectorAll(".pcm-row").forEach(function(r){ r.style.outline=""; r.style.borderTop=""; }); pcmDrag.active=false; pcmDrag.el=null; pcmDrag.moved=false; pcmDrag.srcIdx=-1; pcmDrag.tgtIdx=-1; } /* ── Sprint filter click (delegated) ── */ document.addEventListener("click", function(e){ var fp=e.target.closest("[data-filter-sprint]"); if(fp) picardSetSprint(fp.getAttribute("data-filter-sprint")); }); /* ── mousedown — start drag or start click tracking ── */ document.addEventListener("mousedown", function(e){ if(e.button!==0) return; var t=e.target; /* anything inside the story edit panel: handled by its own listeners */ if(t.closest("#picard-shared-edit-panel")) return; /* PCM panel: only initiate row-drag on the grab handle */ if(t.closest("#picard-col-config")){ var handle=t.closest("[data-pcm-handle]"); if(handle){ var rowEl=handle.closest(".pcm-row"); var rd=document.querySelector("#picard-col-config .pcm-rows"); if(rowEl&&rd){ var rows=Array.from(rd.querySelectorAll(".pcm-row")); var idx=rows.indexOf(rowEl); if(idx>=0 && idx0) nonDragged[nonDragged.length-1].style.borderBottom="2px solid #3B7DD8"; } } else { pd.dropBefore=null; } }); /* ── mouseup ── */ window.addEventListener("mouseup", function(e){ if(pcmDrag.active){ var el=pcmDrag.el, moved=pcmDrag.moved, src=pcmDrag.srcIdx, tgt=pcmDrag.tgtIdx; pcmDragCleanup(); if(moved && src!==tgt && el){ var rd=document.querySelector("#picard-col-config .pcm-rows"); if(rd){ rd.removeChild(el); var ar=Array.from(rd.querySelectorAll(".pcm-row")); var insertAt=Math.min(tgt,ar.length-1); rd.insertBefore(el,ar[insertAt]); var allRows=Array.from(rd.querySelectorAll(".pcm-row")); allRows.forEach(function(row,i){ var dot=row.querySelector("span[style*='border-radius:50%']"); if(!dot) return; dot.style.background=(i===allRows.length-1)?"#059669":PCM_PAL[i%PCM_PAL.length]; }); } } return; } if(!pd.active) return; if(!pd.moved){ var card=pd.card; pdCleanup(); if(card){ if(typeof window.__picardOpenStoryDrawer==="function"){ window.__picardOpenStoryDrawer(card); pd.justOpened=true; return; } var m=getBoardMeta(); if(m){ picardShowPanel( card.getAttribute("data-story-id"), card.getAttribute("data-story-name"), card.getAttribute("data-current-status"), card.getAttribute("data-story-sprint"), card.getAttribute("data-story-pts"), m.planId, m.colsJson, m.spsJson, card.getAttribute("data-story-assigned")||"", card.getAttribute("data-story-description")||"", card.getAttribute("data-story-ac")||"", card.getAttribute("data-story-placeholder")||"" ); pd.justOpened=true; } } return; } if(!pdDragAllowed(pd.card)){ pdCleanup(); return; } var col=pd.overCol||colAtPoint(e.clientX,e.clientY); var card2=pd.card; var sid=card2?card2.getAttribute("data-story-id"):""; var newStatus=col?col.getAttribute("data-col-status"):""; var oldStatus=card2?card2.getAttribute("data-current-status"):""; var m2=getBoardMeta(); var dropBefore=pd.dropBefore; /* capture before cleanup clears it */ pdCleanup(); if(col&&sid&&newStatus&&newStatus!==oldStatus&&m2){ /* ── cross-column drop: change status ── */ /* Move card immediately for instant visual feedback */ var wrapper=card2.closest("[data-card-sprint]")||card2; pdInsertInSavedOrder(col,wrapper,card2); card2.setAttribute("data-current-status",newStatus); updateColCounts(); var _dragPlanId=m2.planId; fetch("/picard/api/delivery-plans/"+_dragPlanId+"/stories/"+sid,{ method:"PATCH",credentials:"include", headers:{"Content-Type":"application/json"}, body:JSON.stringify({status:newStatus}) }).then(function(r){ if(!r.ok){ r.text().then(function(t){alert("Save failed: "+t);}); return; } /* Reload so React state is rebuilt from the server — avoids the removeChild crash that occurs when router.refresh() reconciles a DOM that was already manually mutated. Card has been moved optimistically so the user sees instant feedback; the reload completes before they notice any delay. */ window.location.reload(); }).catch(function(err){alert("Network error: "+err);}); } else if(col&&sid&&newStatus&&newStatus===oldStatus&&m2){ /* ── same-column vertical reorder ── */ var wrapper2=card2.closest("[data-card-sprint]")||card2; if(dropBefore && dropBefore!==wrapper2){ col.insertBefore(wrapper2,dropBefore); } else if(!dropBefore){ col.appendChild(wrapper2); } /* collect new story order from DOM and PATCH to server */ var colWrappers=Array.from(col.querySelectorAll("[data-card-sprint]")); var storyIds=colWrappers.map(function(w){ var c=w.querySelector("[data-story-id]"); return c?c.getAttribute("data-story-id"):null; }).filter(Boolean); if(storyIds.length>0){ fetch("/picard/api/delivery-plans/"+m2.planId+"/stories/reorder",{ method:"PATCH",credentials:"include", headers:{"Content-Type":"application/json"}, body:JSON.stringify({storyIds:storyIds}) }).catch(function(err){console.error("Reorder error:",err);}); } } }); document.addEventListener("keydown",function(e){ if(e.key==="Escape"){ if(pd.active) pdCleanup(); picardClosePanel(); picardCloseColConfig(); } }); /* ── Touch drag support for mobile ─────────────────────────────────────── Mouse events don't fire for touch gestures on iOS/Android, so we mirror the mousedown/mousemove/mouseup logic using touch events. */ document.addEventListener("touchstart",function(e){ var touch=e.touches[0]; if(!touch) return; var t=document.elementFromPoint(touch.clientX,touch.clientY); if(!t) return; if(t.closest("#picard-shared-edit-panel")) return; if(t.closest("[data-filter-sprint]")) return; if(t.closest("[data-picard-config]")) return; var card=t.closest(".picard-card"); if(!card||!getBoard()) return; pd.active=true; pd.card=card; pd.noDrag=!!card.closest("[data-col-done]")||!pdDragAllowed(card); pd.startX=touch.clientX; pd.startY=touch.clientY; pd.moved=false; },{passive:true}); document.addEventListener("touchmove",function(e){ if(!pd.active) return; var touch=e.touches[0]; if(!touch) return; if(pd.noDrag) return; if(!pdDragAllowed(pd.card)){ pdCleanup(); return; } var dx=touch.clientX-pd.startX, dy=touch.clientY-pd.startY; if(!pd.moved && Math.sqrt(dx*dx+dy*dy)<8) return; e.preventDefault(); /* stop page scroll while dragging */ if(!pd.moved){ pd.moved=true; pd.card.style.opacity="0.38"; var g=document.createElement("div"); g.style.cssText="position:fixed;z-index:99999;pointer-events:none;background:#fff;border:2px solid #3B7DD8;border-radius:6px;padding:5px 12px;font-size:0.8rem;font-weight:600;color:#0d1f3c;box-shadow:0 8px 28px rgba(13,31,60,0.22);opacity:0.93;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;"; g.textContent=pd.card.getAttribute("data-story-name")||"Story"; document.body.appendChild(g); pd.ghost=g; } pd.ghost.style.left=(touch.clientX+14)+"px"; pd.ghost.style.top=(touch.clientY-12)+"px"; var col=colAtPoint(touch.clientX,touch.clientY); pd.overCol=col||null; /* highlight target column */ document.querySelectorAll(".picard-col").forEach(function(c){ c.removeAttribute("data-dragover"); }); if(col&&col!==pd.card.closest(".picard-col")) col.setAttribute("data-dragover","true"); },{passive:false}); window.addEventListener("touchend",function(e){ if(!pd.active) return; var touch=e.changedTouches[0]; if(!pd.moved){ /* tap — open panel */ var card=pd.card; pdCleanup(); if(card){ if(typeof window.__picardOpenStoryDrawer==="function"){ window.__picardOpenStoryDrawer(card); pd.justOpened=true; return; } var m=getBoardMeta(); if(m){ picardShowPanel( card.getAttribute("data-story-id"), card.getAttribute("data-story-name"), card.getAttribute("data-current-status"), card.getAttribute("data-story-sprint"), card.getAttribute("data-story-pts"), m.planId, m.colsJson, m.spsJson, card.getAttribute("data-story-assigned")||"", card.getAttribute("data-story-description")||"", card.getAttribute("data-story-ac")||"", card.getAttribute("data-story-placeholder")||"" ); pd.justOpened=true; } } return; } if(!pdDragAllowed(pd.card)){ pdCleanup(); return; } /* drop — change status if cross-column */ var col=touch?colAtPoint(touch.clientX,touch.clientY):pd.overCol; var card2=pd.card; var sid=card2?card2.getAttribute("data-story-id"):""; var newStatus=col?col.getAttribute("data-col-status"):""; var oldStatus=card2?card2.getAttribute("data-current-status"):""; var m2=getBoardMeta(); pdCleanup(); document.querySelectorAll(".picard-col").forEach(function(c){ c.removeAttribute("data-dragover"); }); if(col&&sid&&newStatus&&newStatus!==oldStatus&&m2){ var wrapper=card2.closest("[data-card-sprint]")||card2; pdInsertInSavedOrder(col,wrapper,card2); card2.setAttribute("data-current-status",newStatus); updateColCounts(); var _planId=m2.planId; fetch("/picard/api/delivery-plans/"+_planId+"/stories/"+sid,{ method:"PATCH",credentials:"include", headers:{"Content-Type":"application/json"}, body:JSON.stringify({status:newStatus}) }).then(function(r){ if(!r.ok){ r.text().then(function(t){alert("Save failed: "+t);}); } /* Do not trigger React reconciliation — same reason as mouseup handler above. */ if(r.ok){ window.location.reload(); } }).catch(function(err){alert("Network error: "+err);}); } }); /* cancel touch drag on touchcancel */ document.addEventListener("touchcancel",function(){ if(pd.active) pdCleanup(); document.querySelectorAll(".picard-col").forEach(function(c){ c.removeAttribute("data-dragover"); }); }); /* ── main document click handler — Columns toggle + backdrop + click-outside ── */ document.addEventListener("click",function(e){ if(pd.justOpened){ pd.justOpened=false; return; } if(e.target.id==="picard-col-backdrop"){ picardCloseColConfig(); return; } if(e.target.id==="picard-story-backdrop"){ picardClosePanel(); return; } if(e.target.closest("[data-picard-add-story]")){ if(typeof window.picardAddStory==="function") window.picardAddStory(); return; } if(e.target.closest("[data-picard-config]")){ /* Delegate to the React BoardColumnManager overlay — guaranteed to update React state */ if(typeof window.__picardOpenBoardConfig==="function"){ window.__picardOpenBoardConfig(); return; } /* Fallback: IIFE overlay (legacy) */ var cfg=document.getElementById("picard-col-config"); if(cfg && cfg.style.display==="block"){ picardCloseColConfig(); return; } picardOpenColConfig(); return; } var ep=document.getElementById("picard-shared-edit-panel"); if(ep && ep.style.display==="flex" && !e.target.closest("#picard-shared-edit-panel")) picardClosePanel(); }); })();

Restricted Access