'+ '

'+ ''+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){ 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 the first sprint */ var activeSprint=window._picardActiveSprint; var sprintId=(activeSprint&&activeSprint!=="all") ? activeSprint : (sps.length>0?sps[0].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"; } } }); } /* ── 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"}; }); 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; } 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){ 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")||"" ); pd.justOpened=true; } } 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; col.appendChild(wrapper); 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; } /* Full reload so React, burndown chart, and all derived stats reflect new status */ 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(); } }); /* ── 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