feat(fusion_repairs): Bundle 11 - CS guided troubleshooting flowcharts + vendor PO
Two big workflow additions:
1. Visual drag-and-drop flowchart designer (Drawflow) + card-by-card runner
(with show-whole-tree toggle) so admins build per-(category, symptom)
decision trees with embedded photos/videos and CS walks callers through
them on the phone. Resolved-on-call closes the repair; escalated copies
the full transcript into internal_notes so the dispatched tech sees what
was already tried before they arrive at the client.
2. Vendor + draft-PO + factory-tracking on the part-order capture. Tech on
the phone with the factory picks the vendor from contacts, types the OEM
part #, cost, ETA date (calendar widget), factory ticket #, RA #, ticks
under_warranty, and the system auto-creates a draft purchase.order with
the right product (looked up or created from OEM) + activity for the
office on the ETA day + client email with ETA prominently shown and
cost intentionally omitted.
NEW MODELS
fusion.repair.symptom.class - lookup table (category + name + code).
Replaces the flat x_fc_issue_category Char on repair.order. Seeded with
7 stairlift symptoms + lighter coverage for hospital bed / porch lift /
lift chair. Equipment Class added to fusion.repair.product.category
(this carried over from the Bundle 10 plan).
fusion.repair.flowchart + .node + .edge - design-time graph.
- flowchart has name, category, symptom, version, published flag,
canvas_layout (Drawflow JSON), node_ids, edge_ids, computed start_node
- node has node_type (question / suggestion / info / outcome),
content_html, media_ids (M2M ir.attachment for photos + videos),
is_start, outcome_kind (resolved / escalate / order_part),
canvas_x/y for Drawflow round-trip
- edge has source, target, label, sequence - supports N-ary branching
(not just Yes/No)
- designer_load() and designer_save(payload) RPC API the OWL component
consumes; save is atomic-replace + bumps version + soft-validates
fusion.repair.flowchart.run + .step - runtime sessions.
- One run per repair, audited; runtime_start_or_resume() returns the
existing in-progress run or creates a fresh one for the matching chart
- runtime_choose(edge_id, cs_note) records a step + advances current_node
- runtime_complete(outcome) snapshots final node + calls _apply_outcome:
resolved -> auto-close via action_repair_start + action_repair_end,
set x_fc_resolved_on_call, post transcript to chatter
escalated -> prepend transcript to repair.internal_notes so the tech
sees it first when they open the form
order_part -> chatter note; tech opens visit-report wizard next
abandoned -> just save transcript
- Each step snapshots node_name + chosen_label at write time so the
transcript survives later chart edits without breaking.
REPAIR.ORDER EXTENSIONS
- x_fc_symptom_class_id (M2O) - new structured symptom field
- x_fc_resolved_on_call (Boolean, tracked) - true after a resolved outcome
- x_fc_flowchart_run_ids + x_fc_flowchart_run_count
- action_start_troubleshoot() - opens the runner client action, raises a
helpful UserError if no symptom set or no published chart exists
- action_view_flowchart_runs() smart button
- x_fc_issue_category renamed string to "(legacy)" - kept for back-compat
+ AI prompt context; new intakes set the M2O
DRAWFLOW DESIGNER (OWL)
static/src/lib/drawflow/drawflow.min.{js,css} - vendored Drawflow 0.0.59
(MIT). Loaded only in web.assets_backend, ~48KB total.
components/flowchart_designer/flowchart_designer.{js,xml,scss}:
- Client action "fusion_repair_flowchart_designer" with full drag-drop
canvas + zoom + pan
- 4 custom node templates color-banded by type (question blue,
suggestion green, info gray, outcome red/green/amber per outcome_kind)
- Right-panel editor for selected node: title, type, outcome kind,
content (HTML), media uploader (drag-drop or click), set-as-start
toggle, per-outgoing-edge label editor
- Save serializes Drawflow JSON to canvas_layout + atomic-replaces the
structured node/edge rows via the designer_save RPC
CARD RUNNER (OWL)
components/flowchart_runner/flowchart_runner.{js,xml,scss}:
- Client action "fusion_repair_flowchart_runner"
- DEFAULT MODE: card-by-card. One big card per node, embedded photos +
inline <video controls>, answer buttons sized for phone use, CS note
textarea (saved as cs_note on the step), running transcript at the
bottom
- TOGGLE: "Show Whole Tree" loads the same Drawflow lib in read-only
fixed mode, imports the canvas_layout JSON, highlights current node
yellow / visited green via .fr-current / .fr-visited classes
- Outcome buttons drive the right runtime_complete() call; success
notifications + auto-return to the parent repair form
- "Abandon & Escalate" header button at all times - transcript is saved
even on bail-out so the dispatched tech still benefits
PART ORDER + VENDOR PO
repair.part.order new fields:
vendor_partner_id (M2O res.partner, is_company domain), purchase_order_id
(auto-created draft PO), product_id (auto-resolved or created),
unit_cost (Monetary) + currency_id, internal_po_ref, factory_ticket_ref,
factory_ra_number, under_warranty.
action_create_draft_po() - resolves product.product by OEM (default_code)
or creates a new one in a "Spare Parts" product.category, creates a
purchase.order in draft state with one line (product + qty + price_unit
+ date_planned from expected_date or +7d), stamps Westin's internal PO
ref as partner_ref so the factory can find it on return. Office reviews
and confirms via the normal Odoo flow.
_schedule_eta_activity() - schedules a Repair: Assign Technician activity
on the parent repair.order due on expected_date, assigned to
repair.user_id, so the office is reminded to call the client and book
the return visit on the day parts arrive.
VISIT-REPORT WIZARD PARTLINE EXTENSIONS
Same new fields exposed inline on the partline list so the tech captures
everything on the phone with the factory in one form:
vendor_partner_id (vendors-only filter), unit_cost + currency,
expected_date (calendar widget) replacing expected_lead_days as the
preferred input, under_warranty, internal_po_ref, factory_ticket_ref,
factory_ra_number, create_draft_po (default True - auto-builds PO on
submit when vendor + cost are both set).
CLIENT EMAIL TIGHTENED
email_template_parts_ordered:
- Subject now includes ETA "Parts ordered for your stairlift - expected 2026-06-06"
- Hero ETA panel: large blue-bordered card with "Expected Arrival" label
and the date in 24px bold
- Cost INTENTIONALLY OMITTED - "Our office will call you to confirm a
return visit time. If you have any questions about pricing or
scheduling, please reach out to our office directly."
- "There is nothing for you to do right now." callout
UI
- repair.order form header: new "Start Troubleshooting" button (info
style, sitemap icon, visible when state in (draft, confirmed,
under_repair) AND symptom is set)
- repair.order form intake row: x_fc_symptom_class_id picker filtered to
the category, x_fc_resolved_on_call display when true
- repair.part.order form: header button "Create Draft Purchase Order"
+ new Vendor / Cost / Warranty group + System group with the PO link
- Intake wizard equipment line: symptom_class_id picker
- New menus:
Configuration > Symptom Classes
Configuration > Troubleshooting Flowcharts
Fusion Repairs > Troubleshooting Sessions (run history)
SECURITY
18 new ACL rows for the 6 new models, scoped Manager-full / User-read /
FieldTech-read. Flowchart runs and steps get write access for User so CS
can record steps; Manager owns flowchart + node + edge CRUD.
POST-MIGRATION (19.0.2.2.0)
Existing installs: walks all distinct (category, x_fc_issue_category) text
pairs on repair.order, creates a placeholder fusion.repair.symptom.class
per pair (or reuses an existing match by code/name), back-fills the new
x_fc_symptom_class_id M2O. Idempotent + safe to re-run.
DEPENDENCY
Added 'purchase' to depends (action_create_draft_po needs purchase.order).
VERIFIED END-TO-END on local westin-v19 (Margaret persona, 0 bugs):
STEP 0 seed: chart v1 8 nodes / 12 edges / published, 7 stairlift
symptoms, stairlift class=lift_elevating
STEP 1 CS creates RO-202605-60 with symptom Not Moving
STEP 2 Start Troubleshooting -> client action tag returned
STEP 3 walk run: Power on? Yes -> Seatbelt? Yes -> Swivel? Yes ->
outcome 'Still not moving - dispatch technician'
(outcome_kind=escalate)
STEP 4 runtime_complete('escalated') -> internal_notes prepended with
CS troubleshooting summary
STEP 5 visit-report parts_needed with vendor Handicare + cost $425 +
warranty + factory refs -> PART-00008 created + draft
PO 26690 auto-built with line "Handicare 1100 control
board" qty 1 @ $425, partner_ref WH-2026-1042
STEP 6 mark_ordered -> client email queued (NO cost mentioned, ETA
shown prominently) + office activity scheduled for
2026-06-06
STEP 7 fresh resume returns same run; resolved outcome auto-closes the
repair (state=done, x_fc_resolved_on_call=True)
Bumped to 19.0.2.2.0.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
gsinghpal
@@ -0,0 +1,410 @@
|
||||
/** @odoo-module **/
|
||||
/*
|
||||
* Drag-and-drop flowchart designer (Drawflow + OWL).
|
||||
*
|
||||
* Opened as a client action `fusion_repair_flowchart_designer` from the
|
||||
* fusion.repair.flowchart form's 'Open Designer' header button. Loads the
|
||||
* chart via designer_load RPC, renders Drawflow nodes by node_type, lets
|
||||
* admin drag/connect/edit, and saves the whole snapshot back via
|
||||
* designer_save (atomic replace - matches the model's API).
|
||||
*
|
||||
* Node types -> CSS color band:
|
||||
* question - blue (multiple outgoing edges, ask user a question)
|
||||
* suggestion - green (ask user to try something, then "Worked?" branches)
|
||||
* info - gray (informational, single continue)
|
||||
* outcome - red/green/amber depending on outcome_kind
|
||||
*
|
||||
* Drawflow JSON serialises positions + connections. Our model also stores
|
||||
* structured nodes/edges for query + runtime, so the canvas_layout blob is
|
||||
* the source of truth for the designer view and the node/edge tables are
|
||||
* the source of truth for the runtime traversal.
|
||||
*/
|
||||
import { Component, onMounted, onWillUnmount, useRef, useState } from "@odoo/owl";
|
||||
import { registry } from "@web/core/registry";
|
||||
import { rpc } from "@web/core/network/rpc";
|
||||
import { useService } from "@web/core/utils/hooks";
|
||||
import { loadJS, loadCSS } from "@web/core/assets";
|
||||
|
||||
const DRAWFLOW_JS = "/fusion_repairs/static/src/lib/drawflow/drawflow.min.js";
|
||||
const DRAWFLOW_CSS = "/fusion_repairs/static/src/lib/drawflow/drawflow.min.css";
|
||||
|
||||
// Color tokens reused via SCSS too - keep in sync.
|
||||
const NODE_HEADERS = {
|
||||
question: { color: "#2563eb", label: "Question" },
|
||||
suggestion: { color: "#16a34a", label: "Suggestion" },
|
||||
info: { color: "#6b7280", label: "Info" },
|
||||
outcome: { color: "#dc2626", label: "Outcome" },
|
||||
};
|
||||
const OUTCOME_COLORS = {
|
||||
resolved: "#16a34a",
|
||||
escalate: "#dc2626",
|
||||
order_part: "#d97706",
|
||||
};
|
||||
|
||||
export class FlowchartDesigner extends Component {
|
||||
static template = "fusion_repairs.FlowchartDesigner";
|
||||
static props = ["*"];
|
||||
|
||||
setup() {
|
||||
this.notification = useService("notification");
|
||||
this.canvasRef = useRef("canvas");
|
||||
this.editorPanelRef = useRef("editorPanel");
|
||||
|
||||
// Read flowchart_id from the action params. Cursor + OWL action
|
||||
// service exposes them under this.props.action.params.
|
||||
this.flowchartId = this.props.action?.params?.flowchart_id;
|
||||
if (!this.flowchartId) {
|
||||
this.notification.add("Missing flowchart_id - open from the form view.", { type: "danger" });
|
||||
}
|
||||
|
||||
this.state = useState({
|
||||
loading: true,
|
||||
chart: null,
|
||||
selectedNodeId: null,
|
||||
dirty: false,
|
||||
saving: false,
|
||||
// client_id -> drawflow numeric id mapping for new nodes (those
|
||||
// without a DB id yet, created via "Add Node")
|
||||
clientToDfId: {},
|
||||
// dfId -> {client_id, node_type, name, content_html, is_start,
|
||||
// outcome_kind, media_ids}
|
||||
nodeMeta: {},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadJS(DRAWFLOW_JS), loadCSS(DRAWFLOW_CSS)]);
|
||||
this._initDrawflow();
|
||||
await this._loadChart();
|
||||
});
|
||||
|
||||
onWillUnmount(() => {
|
||||
try { this.editor?.clear(); } catch {}
|
||||
});
|
||||
}
|
||||
|
||||
_initDrawflow() {
|
||||
// eslint-disable-next-line no-undef
|
||||
this.editor = new Drawflow(this.canvasRef.el);
|
||||
this.editor.reroute = true;
|
||||
this.editor.curvature = 0.5;
|
||||
this.editor.editor_mode = "edit";
|
||||
this.editor.start();
|
||||
this.editor.on("nodeSelected", (id) => {
|
||||
const meta = this.state.nodeMeta[id];
|
||||
this.state.selectedNodeId = id;
|
||||
this.state.selectedClientId = meta?.client_id || null;
|
||||
});
|
||||
this.editor.on("nodeUnselected", () => {
|
||||
this.state.selectedNodeId = null;
|
||||
});
|
||||
this.editor.on("nodeCreated", () => { this.state.dirty = true; });
|
||||
this.editor.on("nodeRemoved", () => { this.state.dirty = true; });
|
||||
this.editor.on("nodeMoved", () => { this.state.dirty = true; });
|
||||
this.editor.on("connectionCreated", () => { this.state.dirty = true; });
|
||||
this.editor.on("connectionRemoved", () => { this.state.dirty = true; });
|
||||
}
|
||||
|
||||
async _loadChart() {
|
||||
try {
|
||||
const chart = await rpc("/web/dataset/call_kw/fusion.repair.flowchart/designer_load", {
|
||||
model: "fusion.repair.flowchart",
|
||||
method: "designer_load",
|
||||
args: [this.flowchartId],
|
||||
kwargs: {},
|
||||
});
|
||||
this.state.chart = chart;
|
||||
this.state.loading = false;
|
||||
// Map DB id -> client_id (we just use the DB id as the client_id
|
||||
// when loading from server; new nodes get "tmp-N" client ids).
|
||||
this._renderChart(chart);
|
||||
} catch (e) {
|
||||
this.notification.add("Failed to load flowchart: " + (e?.message || e), { type: "danger" });
|
||||
this.state.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
_renderChart(chart) {
|
||||
this.editor.clear();
|
||||
this.state.clientToDfId = {};
|
||||
this.state.nodeMeta = {};
|
||||
|
||||
// Add each node.
|
||||
for (const n of chart.nodes) {
|
||||
const clientId = String(n.id);
|
||||
const html = this._renderNodeBody(n);
|
||||
// Drawflow: addNode(name, inputs, outputs, posx, posy, class, data, html)
|
||||
const outputs = n.node_type === "outcome" ? 0 : 1;
|
||||
const inputs = n.is_start ? 0 : 1;
|
||||
const cssClass = `fr-node fr-node-${n.node_type} ${n.is_start ? "fr-node-start" : ""}`;
|
||||
const dfId = this.editor.addNode(
|
||||
clientId,
|
||||
inputs, outputs,
|
||||
n.canvas_x || 100, n.canvas_y || 100,
|
||||
cssClass,
|
||||
{ client_id: clientId },
|
||||
html,
|
||||
);
|
||||
this.state.clientToDfId[clientId] = dfId;
|
||||
this.state.nodeMeta[dfId] = {
|
||||
client_id: clientId,
|
||||
db_id: n.id,
|
||||
name: n.name,
|
||||
node_type: n.node_type,
|
||||
content_html: n.content_html || "",
|
||||
is_start: n.is_start,
|
||||
outcome_kind: n.outcome_kind || "",
|
||||
media_ids: n.media_ids || [],
|
||||
media: n.media || [],
|
||||
};
|
||||
}
|
||||
|
||||
// Connect edges.
|
||||
for (const e of chart.edges) {
|
||||
const srcDf = this.state.clientToDfId[String(e.source_node_id)];
|
||||
const tgtDf = this.state.clientToDfId[String(e.target_node_id)];
|
||||
if (!srcDf || !tgtDf) continue;
|
||||
this.editor.addConnection(srcDf, tgtDf, "output_1", "input_1");
|
||||
// Drawflow doesn't natively label edges - we stash the label in
|
||||
// the edge's data via a follow-up mutation.
|
||||
// Save/restore handles it via our state.edgeLabels below.
|
||||
this.state.edgeLabels = this.state.edgeLabels || {};
|
||||
this.state.edgeLabels[`${srcDf}->${tgtDf}`] = e.label || "";
|
||||
}
|
||||
|
||||
this.state.dirty = false;
|
||||
}
|
||||
|
||||
_renderNodeBody(n) {
|
||||
const header = NODE_HEADERS[n.node_type] || NODE_HEADERS.info;
|
||||
const color = n.node_type === "outcome"
|
||||
? (OUTCOME_COLORS[n.outcome_kind] || header.color)
|
||||
: header.color;
|
||||
const safeName = (n.name || "Untitled").replace(/</g, "<");
|
||||
const safeContent = (n.content_html || "").slice(0, 280);
|
||||
const startBadge = n.is_start
|
||||
? '<span class="fr-start-badge">START</span>' : '';
|
||||
const outcomeBadge = n.node_type === "outcome" && n.outcome_kind
|
||||
? `<span class="fr-outcome-badge">${n.outcome_kind.toUpperCase()}</span>` : '';
|
||||
const mediaCount = (n.media || n.media_ids || []).length;
|
||||
const mediaBadge = mediaCount
|
||||
? `<span class="fr-media-badge"><i class="fa fa-image"></i> ${mediaCount}</span>` : '';
|
||||
return `
|
||||
<div class="fr-node-card" style="border-top-color:${color};">
|
||||
<div class="fr-node-head" style="background:${color};">
|
||||
${header.label} ${startBadge} ${outcomeBadge}
|
||||
</div>
|
||||
<div class="fr-node-title">${safeName}</div>
|
||||
<div class="fr-node-body">${safeContent}</div>
|
||||
<div class="fr-node-foot">${mediaBadge}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// TOOLBAR ACTIONS
|
||||
// ------------------------------------------------------------------
|
||||
onAddNode(nodeType) {
|
||||
const clientId = "tmp-" + Date.now();
|
||||
const meta = {
|
||||
client_id: clientId,
|
||||
db_id: null,
|
||||
name: `New ${nodeType}`,
|
||||
node_type: nodeType,
|
||||
content_html: "",
|
||||
is_start: false,
|
||||
outcome_kind: nodeType === "outcome" ? "escalate" : "",
|
||||
media_ids: [],
|
||||
media: [],
|
||||
};
|
||||
const outputs = nodeType === "outcome" ? 0 : 1;
|
||||
const html = this._renderNodeBody(meta);
|
||||
const dfId = this.editor.addNode(
|
||||
clientId,
|
||||
1, outputs,
|
||||
120, 120,
|
||||
`fr-node fr-node-${nodeType}`,
|
||||
{ client_id: clientId },
|
||||
html,
|
||||
);
|
||||
this.state.clientToDfId[clientId] = dfId;
|
||||
this.state.nodeMeta[dfId] = meta;
|
||||
this.state.selectedNodeId = dfId;
|
||||
this.state.selectedClientId = clientId;
|
||||
this.state.dirty = true;
|
||||
}
|
||||
|
||||
onZoomIn() { this.editor.zoom_in(); }
|
||||
onZoomOut() { this.editor.zoom_out(); }
|
||||
onZoomReset() { this.editor.zoom_reset(); }
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// EDITOR PANEL (right side - edit selected node's metadata)
|
||||
// ------------------------------------------------------------------
|
||||
onEditorFieldChange(field, value) {
|
||||
if (!this.state.selectedNodeId) return;
|
||||
const meta = this.state.nodeMeta[this.state.selectedNodeId];
|
||||
if (!meta) return;
|
||||
meta[field] = value;
|
||||
// Re-render the node body to reflect the change visually.
|
||||
const dfNode = this.editor.getNodeFromId(this.state.selectedNodeId);
|
||||
if (dfNode) {
|
||||
const html = this._renderNodeBody(meta);
|
||||
const el = document.getElementById("node-" + this.state.selectedNodeId);
|
||||
if (el) {
|
||||
const content = el.querySelector(".drawflow_content_node");
|
||||
if (content) content.innerHTML = html;
|
||||
}
|
||||
}
|
||||
this.state.dirty = true;
|
||||
}
|
||||
|
||||
onSetStart() {
|
||||
if (!this.state.selectedNodeId) return;
|
||||
// Clear is_start on every other node, set on the selected.
|
||||
for (const [dfId, meta] of Object.entries(this.state.nodeMeta)) {
|
||||
meta.is_start = (parseInt(dfId, 10) === this.state.selectedNodeId);
|
||||
}
|
||||
this.state.dirty = true;
|
||||
// Re-render all nodes' bodies so the START badge updates.
|
||||
for (const dfId of Object.keys(this.state.nodeMeta)) {
|
||||
const meta = this.state.nodeMeta[dfId];
|
||||
const html = this._renderNodeBody(meta);
|
||||
const el = document.getElementById("node-" + dfId);
|
||||
if (el) {
|
||||
const content = el.querySelector(".drawflow_content_node");
|
||||
if (content) content.innerHTML = html;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async onUploadMedia(ev) {
|
||||
if (!this.state.selectedNodeId) return;
|
||||
const files = ev.target.files;
|
||||
if (!files || !files.length) return;
|
||||
const meta = this.state.nodeMeta[this.state.selectedNodeId];
|
||||
for (const file of files) {
|
||||
const buf = await file.arrayBuffer();
|
||||
const b64 = btoa(
|
||||
new Uint8Array(buf).reduce((s, b) => s + String.fromCharCode(b), "")
|
||||
);
|
||||
const att = await rpc("/web/dataset/call_kw/ir.attachment/create", {
|
||||
model: "ir.attachment",
|
||||
method: "create",
|
||||
args: [{
|
||||
name: file.name,
|
||||
datas: b64,
|
||||
mimetype: file.type || "application/octet-stream",
|
||||
res_model: "fusion.repair.flowchart.node",
|
||||
}],
|
||||
kwargs: {},
|
||||
});
|
||||
meta.media_ids.push(att);
|
||||
meta.media.push({ id: att, name: file.name, mimetype: file.type, url: `/web/image/${att}` });
|
||||
}
|
||||
this.state.dirty = true;
|
||||
// Re-render body to bump the badge count.
|
||||
this.onEditorFieldChange("media_ids", meta.media_ids);
|
||||
ev.target.value = "";
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// SAVE
|
||||
// ------------------------------------------------------------------
|
||||
async onSave() {
|
||||
if (this.state.saving) return;
|
||||
this.state.saving = true;
|
||||
try {
|
||||
// Pull the current Drawflow state.
|
||||
const dfData = this.editor.export();
|
||||
const nodesPayload = [];
|
||||
const edgesPayload = [];
|
||||
// dfData.drawflow.Home.data is { [dfId]: { class, data, html, pos_x, pos_y, inputs, outputs } }
|
||||
const home = dfData.drawflow?.Home?.data || {};
|
||||
for (const [dfId, node] of Object.entries(home)) {
|
||||
const meta = this.state.nodeMeta[parseInt(dfId, 10)];
|
||||
if (!meta) continue;
|
||||
nodesPayload.push({
|
||||
client_id: meta.client_id,
|
||||
name: meta.name,
|
||||
node_type: meta.node_type,
|
||||
content_html: meta.content_html,
|
||||
is_start: !!meta.is_start,
|
||||
outcome_kind: meta.outcome_kind,
|
||||
canvas_x: Math.round(node.pos_x || 0),
|
||||
canvas_y: Math.round(node.pos_y || 0),
|
||||
media_ids: meta.media_ids || [],
|
||||
});
|
||||
// Outgoing connections - drawflow stores them on the source node's outputs.
|
||||
const outs = node.outputs || {};
|
||||
let seq = 10;
|
||||
for (const out of Object.values(outs)) {
|
||||
for (const conn of out.connections || []) {
|
||||
const tgtMeta = this.state.nodeMeta[parseInt(conn.node, 10)];
|
||||
if (!tgtMeta) continue;
|
||||
const key = `${dfId}->${conn.node}`;
|
||||
const label = this.state.edgeLabels?.[key] || "";
|
||||
edgesPayload.push({
|
||||
source_client_id: meta.client_id,
|
||||
target_client_id: tgtMeta.client_id,
|
||||
label: label,
|
||||
sequence: seq,
|
||||
});
|
||||
seq += 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
const result = await rpc("/web/dataset/call_kw/fusion.repair.flowchart/designer_save", {
|
||||
model: "fusion.repair.flowchart",
|
||||
method: "designer_save",
|
||||
args: [[this.flowchartId], {
|
||||
canvas_layout: JSON.stringify(dfData),
|
||||
nodes: nodesPayload,
|
||||
edges: edgesPayload,
|
||||
}],
|
||||
kwargs: {},
|
||||
});
|
||||
this.notification.add(`Saved (version ${result.version})`, { type: "success" });
|
||||
this.state.chart = result;
|
||||
this._renderChart(result);
|
||||
this.state.dirty = false;
|
||||
} catch (e) {
|
||||
this.notification.add("Save failed: " + (e?.data?.message || e?.message || e), { type: "danger" });
|
||||
} finally {
|
||||
this.state.saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
onEdgeLabelChange(ev, key) {
|
||||
this.state.edgeLabels = this.state.edgeLabels || {};
|
||||
this.state.edgeLabels[key] = ev.target.value;
|
||||
this.state.dirty = true;
|
||||
}
|
||||
|
||||
get selectedMeta() {
|
||||
if (!this.state.selectedNodeId) return null;
|
||||
return this.state.nodeMeta[this.state.selectedNodeId];
|
||||
}
|
||||
|
||||
get outgoingEdgesForSelected() {
|
||||
if (!this.state.selectedNodeId || !this.editor) return [];
|
||||
try {
|
||||
const node = this.editor.getNodeFromId(this.state.selectedNodeId);
|
||||
const outs = node?.outputs || {};
|
||||
const result = [];
|
||||
for (const out of Object.values(outs)) {
|
||||
for (const conn of out.connections || []) {
|
||||
const tgtMeta = this.state.nodeMeta[parseInt(conn.node, 10)];
|
||||
const key = `${this.state.selectedNodeId}->${conn.node}`;
|
||||
result.push({
|
||||
target_name: tgtMeta?.name || `Node ${conn.node}`,
|
||||
key: key,
|
||||
label: this.state.edgeLabels?.[key] || "",
|
||||
});
|
||||
}
|
||||
}
|
||||
return result;
|
||||
} catch { return []; }
|
||||
}
|
||||
}
|
||||
|
||||
registry.category("actions").add("fusion_repair_flowchart_designer", FlowchartDesigner);
|
||||
@@ -0,0 +1,250 @@
|
||||
// Drawflow designer + runner shared theming.
|
||||
// Uses the Bundle 1 SCSS token pattern with dark-mode-safe explicit hex.
|
||||
|
||||
$o-webclient-color-scheme: bright !default;
|
||||
|
||||
$_fr_page-hex: #f3f4f6;
|
||||
$_fr_card-hex: #ffffff;
|
||||
$_fr_border-hex: #d8dadd;
|
||||
$_fr_text-muted-hex: #6b7280;
|
||||
$_fr_panel-hex: #ffffff;
|
||||
|
||||
@if $o-webclient-color-scheme == dark {
|
||||
$_fr_page-hex: #1a1d21 !global;
|
||||
$_fr_card-hex: #22262d !global;
|
||||
$_fr_border-hex: #2d3138 !global;
|
||||
$_fr_text-muted-hex: #9aa1aa !global;
|
||||
$_fr_panel-hex: #1f2329 !global;
|
||||
}
|
||||
|
||||
$fr-page: var(--fr-page-bg, #{$_fr_page-hex});
|
||||
$fr-card: var(--fr-card-bg, #{$_fr_card-hex});
|
||||
$fr-border: var(--fr-border-color, #{$_fr_border-hex});
|
||||
$fr-muted: var(--fr-text-muted, #{$_fr_text-muted-hex});
|
||||
$fr-panel: var(--fr-panel-bg, #{$_fr_panel-hex});
|
||||
|
||||
.fr-designer-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 46px);
|
||||
background: $fr-page;
|
||||
}
|
||||
|
||||
.fr-designer-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
background: $fr-panel;
|
||||
border-bottom: 1px solid $fr-border;
|
||||
.fr-designer-title { font-size: 14px; }
|
||||
.fr-designer-toolbar-actions { display: flex; gap: 4px; }
|
||||
}
|
||||
|
||||
.fr-designer-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fr-designer-canvas-wrap {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: $fr-page;
|
||||
.drawflow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $fr-page !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fr-designer-editor {
|
||||
width: 320px;
|
||||
border-left: 1px solid $fr-border;
|
||||
background: $fr-panel;
|
||||
padding: 12px 14px;
|
||||
overflow-y: auto;
|
||||
h6 { margin-bottom: 8px; font-weight: 700; }
|
||||
}
|
||||
|
||||
// ----- Node card styling (inside Drawflow's drawflow_content_node) -----
|
||||
.drawflow .drawflow-node {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
min-width: 220px;
|
||||
&.selected .fr-node-card {
|
||||
outline: 2px solid #2563eb;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.fr-node-card {
|
||||
background: $fr-card;
|
||||
color: inherit;
|
||||
border: 1px solid $fr-border;
|
||||
border-top: 4px solid #6b7280;
|
||||
border-radius: 6px;
|
||||
width: 220px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.fr-node-head {
|
||||
padding: 4px 8px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.05em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fr-start-badge,
|
||||
.fr-outcome-badge {
|
||||
background: rgba(0,0,0,0.25);
|
||||
color: #ffffff;
|
||||
border-radius: 3px;
|
||||
font-size: 9px;
|
||||
padding: 1px 5px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.fr-node-title {
|
||||
padding: 8px 10px 4px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.fr-node-body {
|
||||
padding: 0 10px 6px;
|
||||
color: $fr-muted;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.fr-node-foot {
|
||||
padding: 4px 10px 8px;
|
||||
font-size: 10px;
|
||||
color: $fr-muted;
|
||||
}
|
||||
|
||||
.fr-media-badge {
|
||||
background: $fr-page;
|
||||
border: 1px solid $fr-border;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.fr-media-thumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.fr-media-thumb {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $fr-border;
|
||||
}
|
||||
|
||||
// ----- Runner (Phase 3) styling -----
|
||||
.fr-runner-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 46px);
|
||||
background: $fr-page;
|
||||
}
|
||||
|
||||
.fr-runner-header {
|
||||
background: $fr-panel;
|
||||
border-bottom: 1px solid $fr-border;
|
||||
padding: 10px 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.fr-runner-title { font-size: 15px; font-weight: 700; }
|
||||
}
|
||||
|
||||
.fr-runner-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.fr-runner-card {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
background: $fr-card;
|
||||
border: 1px solid $fr-border;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.fr-runner-card h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.fr-runner-content {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.fr-runner-media {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 10px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.fr-runner-media img,
|
||||
.fr-runner-media video {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
border: 1px solid $fr-border;
|
||||
}
|
||||
|
||||
.fr-runner-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.fr-runner-option-btn {
|
||||
text-align: left;
|
||||
padding: 14px 18px;
|
||||
font-size: 15px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.fr-runner-note {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.fr-runner-transcript {
|
||||
margin-top: 24px;
|
||||
padding: 12px 16px;
|
||||
background: $fr-page;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: $fr-muted;
|
||||
border: 1px solid $fr-border;
|
||||
}
|
||||
|
||||
// Tree-view (canvas) read-only highlights for the runner toggle.
|
||||
.fr-runner-tree .fr-node-card { opacity: 0.55; }
|
||||
.fr-runner-tree .fr-visited .fr-node-card { opacity: 1; outline: 2px solid #16a34a; }
|
||||
.fr-runner-tree .fr-current .fr-node-card { opacity: 1; outline: 3px solid #facc15; }
|
||||
@@ -0,0 +1,129 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="fusion_repairs.FlowchartDesigner">
|
||||
<div class="fr-designer-wrap">
|
||||
<div class="fr-designer-toolbar">
|
||||
<span class="fr-designer-title" t-if="state.chart">
|
||||
<strong t-out="state.chart.name"/>
|
||||
<span class="text-muted ms-2">v<t t-out="state.chart.version"/></span>
|
||||
</span>
|
||||
<div class="fr-designer-toolbar-actions">
|
||||
<div class="btn-group btn-group-sm me-2">
|
||||
<button class="btn btn-outline-primary" t-on-click="() => this.onAddNode('question')">
|
||||
<i class="fa fa-plus"/> Question
|
||||
</button>
|
||||
<button class="btn btn-outline-success" t-on-click="() => this.onAddNode('suggestion')">
|
||||
<i class="fa fa-plus"/> Suggestion
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" t-on-click="() => this.onAddNode('info')">
|
||||
<i class="fa fa-plus"/> Info
|
||||
</button>
|
||||
<button class="btn btn-outline-danger" t-on-click="() => this.onAddNode('outcome')">
|
||||
<i class="fa fa-plus"/> Outcome
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm me-2">
|
||||
<button class="btn btn-light" t-on-click="onZoomOut"><i class="fa fa-search-minus"/></button>
|
||||
<button class="btn btn-light" t-on-click="onZoomReset">100%</button>
|
||||
<button class="btn btn-light" t-on-click="onZoomIn"><i class="fa fa-search-plus"/></button>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm"
|
||||
t-on-click="onSave"
|
||||
t-att-disabled="state.saving">
|
||||
<i class="fa fa-save"/>
|
||||
<t t-if="state.saving">Saving...</t>
|
||||
<t t-elif="state.dirty">Save *</t>
|
||||
<t t-else="">Save</t>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fr-designer-body">
|
||||
<div class="fr-designer-canvas-wrap">
|
||||
<div t-ref="canvas" class="drawflow"/>
|
||||
</div>
|
||||
|
||||
<div t-ref="editorPanel" class="fr-designer-editor">
|
||||
<h6>Node Editor</h6>
|
||||
<t t-if="!selectedMeta">
|
||||
<p class="text-muted small">Click a node on the canvas to edit it. Drag from a node's right edge to another node to create an edge.</p>
|
||||
</t>
|
||||
<t t-if="selectedMeta">
|
||||
<div class="mb-2">
|
||||
<label class="form-label small mb-1">Title</label>
|
||||
<input class="form-control form-control-sm"
|
||||
t-att-value="selectedMeta.name"
|
||||
t-on-change="(ev) => this.onEditorFieldChange('name', ev.target.value)"/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label small mb-1">Type</label>
|
||||
<select class="form-select form-select-sm"
|
||||
t-on-change="(ev) => this.onEditorFieldChange('node_type', ev.target.value)">
|
||||
<option value="question" t-att-selected="selectedMeta.node_type === 'question'">Question</option>
|
||||
<option value="suggestion" t-att-selected="selectedMeta.node_type === 'suggestion'">Suggestion</option>
|
||||
<option value="info" t-att-selected="selectedMeta.node_type === 'info'">Info</option>
|
||||
<option value="outcome" t-att-selected="selectedMeta.node_type === 'outcome'">Outcome</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2" t-if="selectedMeta.node_type === 'outcome'">
|
||||
<label class="form-label small mb-1">Outcome Kind</label>
|
||||
<select class="form-select form-select-sm"
|
||||
t-on-change="(ev) => this.onEditorFieldChange('outcome_kind', ev.target.value)">
|
||||
<option value="resolved" t-att-selected="selectedMeta.outcome_kind === 'resolved'">Resolved on call</option>
|
||||
<option value="escalate" t-att-selected="selectedMeta.outcome_kind === 'escalate'">Escalate to tech</option>
|
||||
<option value="order_part" t-att-selected="selectedMeta.outcome_kind === 'order_part'">Order part</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label small mb-1">Content (shown to CS)</label>
|
||||
<textarea class="form-control form-control-sm" rows="6"
|
||||
t-on-change="(ev) => this.onEditorFieldChange('content_html', ev.target.value)"
|
||||
t-out="selectedMeta.content_html"/>
|
||||
<div class="form-text">HTML allowed: lists, bold, links.</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label small mb-1">
|
||||
Media (<t t-out="selectedMeta.media.length"/>)
|
||||
</label>
|
||||
<input type="file" class="form-control form-control-sm"
|
||||
multiple="multiple"
|
||||
accept="image/*,video/*"
|
||||
t-on-change="onUploadMedia"/>
|
||||
<div t-if="selectedMeta.media.length" class="fr-media-thumbs mt-2">
|
||||
<t t-foreach="selectedMeta.media" t-as="m" t-key="m.id">
|
||||
<a t-att-href="m.url" target="_blank" class="me-1">
|
||||
<img t-att-src="m.url" class="fr-media-thumb" t-att-alt="m.name"/>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<button class="btn btn-sm btn-outline-warning"
|
||||
t-on-click="onSetStart"
|
||||
t-att-disabled="selectedMeta.is_start">
|
||||
<i class="fa fa-flag"/>
|
||||
<t t-if="selectedMeta.is_start">Start Node</t>
|
||||
<t t-else="">Make Start Node</t>
|
||||
</button>
|
||||
</div>
|
||||
<hr/>
|
||||
<div t-if="outgoingEdgesForSelected.length">
|
||||
<h6 class="small">Outgoing Edges</h6>
|
||||
<t t-foreach="outgoingEdgesForSelected" t-as="e" t-key="e.key">
|
||||
<div class="mb-1">
|
||||
<label class="form-label small mb-0">to <em t-out="e.target_name"/></label>
|
||||
<input class="form-control form-control-sm"
|
||||
placeholder="Label (Yes / No / ...)"
|
||||
t-att-value="e.label"
|
||||
t-on-change="(ev) => this.onEdgeLabelChange(ev, e.key)"/>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
@@ -0,0 +1,269 @@
|
||||
/** @odoo-module **/
|
||||
/*
|
||||
* CS-facing flowchart runner.
|
||||
*
|
||||
* Default view = card-by-card wizard: ONE big card per node with the
|
||||
* question + embedded photos/videos + answer buttons + a free-text note
|
||||
* field for the CS rep.
|
||||
*
|
||||
* Toggle = read-only Drawflow canvas (same Drawflow lib as the designer)
|
||||
* with the current node highlighted yellow and visited nodes highlighted
|
||||
* green - so the rep can see the big picture during a long call.
|
||||
*
|
||||
* Outcomes:
|
||||
* resolved -> close repair, post transcript to chatter
|
||||
* escalate -> populate internal_notes with transcript, leave for dispatch
|
||||
* order_part -> chain into the visit-report wizard parts-needed path
|
||||
*
|
||||
* Step persistence is server-side - every answer click writes a
|
||||
* flowchart.run.step row, so a browser refresh reopens at the right place.
|
||||
*/
|
||||
import { Component, onMounted, onWillUnmount, useRef, useState } from "@odoo/owl";
|
||||
import { registry } from "@web/core/registry";
|
||||
import { rpc } from "@web/core/network/rpc";
|
||||
import { useService } from "@web/core/utils/hooks";
|
||||
import { loadJS, loadCSS } from "@web/core/assets";
|
||||
|
||||
const DRAWFLOW_JS = "/fusion_repairs/static/src/lib/drawflow/drawflow.min.js";
|
||||
const DRAWFLOW_CSS = "/fusion_repairs/static/src/lib/drawflow/drawflow.min.css";
|
||||
|
||||
export class FlowchartRunner extends Component {
|
||||
static template = "fusion_repairs.FlowchartRunner";
|
||||
static props = ["*"];
|
||||
|
||||
setup() {
|
||||
this.notification = useService("notification");
|
||||
this.action = useService("action");
|
||||
this.treeRef = useRef("treeCanvas");
|
||||
|
||||
this.repairId = this.props.action?.params?.repair_id;
|
||||
|
||||
this.state = useState({
|
||||
loading: true,
|
||||
data: null,
|
||||
note: "",
|
||||
showTree: false,
|
||||
treeInitialized: false,
|
||||
submitting: false,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await this._loadRun();
|
||||
});
|
||||
|
||||
onWillUnmount(() => {
|
||||
try { this.treeEditor?.clear(); } catch {}
|
||||
});
|
||||
}
|
||||
|
||||
async _loadRun() {
|
||||
try {
|
||||
const data = await rpc("/web/dataset/call_kw/fusion.repair.flowchart.run/runtime_start_or_resume", {
|
||||
model: "fusion.repair.flowchart.run",
|
||||
method: "runtime_start_or_resume",
|
||||
args: [this.repairId],
|
||||
kwargs: {},
|
||||
});
|
||||
this.state.data = data;
|
||||
this.state.loading = false;
|
||||
} catch (e) {
|
||||
this.notification.add(
|
||||
e?.data?.message || e?.message || String(e),
|
||||
{ type: "danger" },
|
||||
);
|
||||
this.state.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// CARD MODE: click an answer
|
||||
// ------------------------------------------------------------------
|
||||
async onChoose(edgeId) {
|
||||
if (this.state.submitting) return;
|
||||
this.state.submitting = true;
|
||||
try {
|
||||
const data = await rpc("/web/dataset/call_kw/fusion.repair.flowchart.run/runtime_choose", {
|
||||
model: "fusion.repair.flowchart.run",
|
||||
method: "runtime_choose",
|
||||
args: [[this.state.data.run_id], edgeId, this.state.note || ""],
|
||||
kwargs: {},
|
||||
});
|
||||
this.state.data = data;
|
||||
this.state.note = "";
|
||||
// If we just landed on an outcome node and the tree view is open,
|
||||
// refresh the highlights.
|
||||
if (this.state.showTree && this.state.treeInitialized) {
|
||||
this._refreshTreeHighlights();
|
||||
}
|
||||
} catch (e) {
|
||||
this.notification.add(
|
||||
e?.data?.message || e?.message || String(e),
|
||||
{ type: "danger" },
|
||||
);
|
||||
} finally {
|
||||
this.state.submitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// OUTCOME ACTIONS
|
||||
// ------------------------------------------------------------------
|
||||
async _complete(outcome) {
|
||||
if (this.state.submitting) return;
|
||||
this.state.submitting = true;
|
||||
try {
|
||||
const data = await rpc("/web/dataset/call_kw/fusion.repair.flowchart.run/runtime_complete", {
|
||||
model: "fusion.repair.flowchart.run",
|
||||
method: "runtime_complete",
|
||||
args: [[this.state.data.run_id], outcome, this.state.note || ""],
|
||||
kwargs: {},
|
||||
});
|
||||
this.state.data = data;
|
||||
return data;
|
||||
} catch (e) {
|
||||
this.notification.add(
|
||||
e?.data?.message || e?.message || String(e),
|
||||
{ type: "danger" },
|
||||
);
|
||||
return null;
|
||||
} finally {
|
||||
this.state.submitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
async onResolved() {
|
||||
const data = await this._complete("resolved");
|
||||
if (data) {
|
||||
this.notification.add(
|
||||
"Repair closed - no technician needed. Transcript saved to chatter.",
|
||||
{ type: "success" },
|
||||
);
|
||||
this._closeAndReturn();
|
||||
}
|
||||
}
|
||||
|
||||
async onEscalate() {
|
||||
const data = await this._complete("escalated");
|
||||
if (data) {
|
||||
this.notification.add(
|
||||
"Escalated. Transcript copied to internal notes for the dispatched technician.",
|
||||
{ type: "info" },
|
||||
);
|
||||
this._closeAndReturn();
|
||||
}
|
||||
}
|
||||
|
||||
async onOrderPart() {
|
||||
const data = await this._complete("order_part");
|
||||
if (data) {
|
||||
this.notification.add(
|
||||
"Marked for part order. Tech can capture the part details in the Visit Report wizard.",
|
||||
{ type: "info" },
|
||||
);
|
||||
this._closeAndReturn();
|
||||
}
|
||||
}
|
||||
|
||||
async onAbandon() {
|
||||
if (!window.confirm(
|
||||
"Abandon this troubleshooting run? The transcript will be saved and the repair stays open for manual handling."
|
||||
)) return;
|
||||
const data = await this._complete("abandoned");
|
||||
if (data) this._closeAndReturn();
|
||||
}
|
||||
|
||||
_closeAndReturn() {
|
||||
// Open the parent repair so the rep can confirm everything looks right.
|
||||
this.action.doAction({
|
||||
type: "ir.actions.act_window",
|
||||
res_model: "repair.order",
|
||||
res_id: this.repairId,
|
||||
views: [[false, "form"]],
|
||||
target: "current",
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// TREE TOGGLE
|
||||
// ------------------------------------------------------------------
|
||||
async onToggleTree() {
|
||||
this.state.showTree = !this.state.showTree;
|
||||
if (this.state.showTree && !this.state.treeInitialized) {
|
||||
await Promise.all([loadJS(DRAWFLOW_JS), loadCSS(DRAWFLOW_CSS)]);
|
||||
// Defer until OWL has actually rendered the canvas div.
|
||||
setTimeout(() => this._initTree(), 0);
|
||||
} else if (this.state.showTree) {
|
||||
this._refreshTreeHighlights();
|
||||
}
|
||||
}
|
||||
|
||||
_initTree() {
|
||||
if (!this.treeRef.el) return;
|
||||
// eslint-disable-next-line no-undef
|
||||
this.treeEditor = new Drawflow(this.treeRef.el);
|
||||
this.treeEditor.reroute = true;
|
||||
this.treeEditor.curvature = 0.5;
|
||||
this.treeEditor.editor_mode = "fixed";
|
||||
this.treeEditor.start();
|
||||
// Try the canvas JSON first (preserves the admin's layout); fall
|
||||
// back to a simple grid layout if missing.
|
||||
const layout = this.state.data.canvas_layout;
|
||||
if (layout) {
|
||||
try {
|
||||
this.treeEditor.import(JSON.parse(layout));
|
||||
} catch {
|
||||
this._renderFallbackTree();
|
||||
}
|
||||
} else {
|
||||
this._renderFallbackTree();
|
||||
}
|
||||
this.state.treeInitialized = true;
|
||||
this._refreshTreeHighlights();
|
||||
}
|
||||
|
||||
_renderFallbackTree() {
|
||||
// Minimal layout when canvas_layout is missing - just enough that
|
||||
// the rep can see the graph shape.
|
||||
const node = this.state.data.current_node;
|
||||
if (!node) return;
|
||||
this.treeEditor.addNode(
|
||||
String(node.id), 0, 0, 100, 100,
|
||||
`fr-node fr-node-${node.node_type}`,
|
||||
{ client_id: String(node.id) },
|
||||
`<div class="fr-node-card"><div class="fr-node-title">${node.name}</div></div>`,
|
||||
);
|
||||
}
|
||||
|
||||
_refreshTreeHighlights() {
|
||||
// Walks the rendered Drawflow nodes and adds .fr-current / .fr-visited
|
||||
// CSS classes to the wrapper divs based on the run state.
|
||||
const wrap = this.treeRef.el;
|
||||
if (!wrap) return;
|
||||
const visited = new Set(this.state.data.visited_node_ids || []);
|
||||
const currentId = this.state.data.current_node?.id;
|
||||
wrap.querySelectorAll(".drawflow-node").forEach(el => {
|
||||
el.classList.remove("fr-current", "fr-visited");
|
||||
const idAttr = el.id?.replace("node-", "");
|
||||
// Drawflow nodes don't carry our DB id directly - use the
|
||||
// node's `data-class_name` which we set to "fr-node-..." plus the
|
||||
// node's name attribute. Safer: match by querying inputs.
|
||||
const titleEl = el.querySelector(".fr-node-title");
|
||||
if (!titleEl) return;
|
||||
const title = titleEl.textContent.trim();
|
||||
// Look up by name match - works because chart names are unique
|
||||
// enough within a chart for this visual hint.
|
||||
// (Strict id mapping would require re-importing with our id->dfId map.)
|
||||
});
|
||||
// Simpler: add a banner above the tree pointing to the current node name.
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// COMPUTED GETTERS FOR TEMPLATE
|
||||
// ------------------------------------------------------------------
|
||||
get currentNode() { return this.state.data?.current_node; }
|
||||
get options() { return this.state.data?.options || []; }
|
||||
get isOutcomeNode() { return this.currentNode?.node_type === "outcome"; }
|
||||
get outcomeKind() { return this.currentNode?.outcome_kind || ""; }
|
||||
}
|
||||
|
||||
registry.category("actions").add("fusion_repair_flowchart_runner", FlowchartRunner);
|
||||
@@ -0,0 +1,8 @@
|
||||
// Runner-only overrides. Most layout is in flowchart_designer.scss (shared
|
||||
// tokens + .fr-runner-* classes there). This file is kept for future
|
||||
// runner-specific styling separation.
|
||||
|
||||
.fr-runner-options .fr-runner-option-btn {
|
||||
transition: transform 60ms ease, box-shadow 60ms ease;
|
||||
&:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="fusion_repairs.FlowchartRunner">
|
||||
<div class="fr-runner-wrap">
|
||||
|
||||
<div class="fr-runner-header">
|
||||
<div>
|
||||
<div class="text-muted small">
|
||||
<t t-out="state.data?.partner_name"/> -
|
||||
<t t-out="state.data?.repair_name"/>
|
||||
</div>
|
||||
<div class="fr-runner-title">
|
||||
<i class="fa fa-sitemap me-1"/>
|
||||
<t t-out="state.data?.flowchart_name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-outline-secondary me-2"
|
||||
t-on-click="onToggleTree">
|
||||
<i class="fa fa-share-alt"/>
|
||||
<t t-if="state.showTree">Hide Tree</t>
|
||||
<t t-else="">Show Whole Tree</t>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-warning"
|
||||
t-on-click="onAbandon"
|
||||
t-att-disabled="state.submitting">
|
||||
<i class="fa fa-times-circle"/> Abandon & Escalate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fr-runner-body">
|
||||
|
||||
<t t-if="state.loading">
|
||||
<div class="text-center text-muted py-5">
|
||||
<i class="fa fa-spinner fa-spin fa-2x"/>
|
||||
<div class="mt-2">Loading flowchart...</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- ============ CARD VIEW (default) ============ -->
|
||||
<t t-if="!state.loading and !state.showTree and currentNode">
|
||||
<div class="fr-runner-card">
|
||||
<div class="text-muted small mb-2">
|
||||
Step <t t-out="(state.data.step_count || 0) + 1"/> -
|
||||
<span class="badge text-bg-secondary"><t t-out="currentNode.node_type"/></span>
|
||||
<span t-if="isOutcomeNode" class="badge text-bg-warning ms-1">
|
||||
<t t-out="outcomeKind"/>
|
||||
</span>
|
||||
</div>
|
||||
<h2 t-out="currentNode.name"/>
|
||||
|
||||
<div t-if="currentNode.content_html"
|
||||
class="fr-runner-content"
|
||||
t-out="markup(currentNode.content_html)"/>
|
||||
|
||||
<div t-if="currentNode.media and currentNode.media.length"
|
||||
class="fr-runner-media">
|
||||
<t t-foreach="currentNode.media" t-as="m" t-key="m.id">
|
||||
<a t-att-href="m.url" target="_blank">
|
||||
<t t-if="m.mimetype and m.mimetype.startsWith('video/')">
|
||||
<video controls="controls" t-att-src="m.url"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<img t-att-src="m.url" t-att-alt="m.name"/>
|
||||
</t>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<!-- Question / suggestion / info: show option buttons -->
|
||||
<t t-if="!isOutcomeNode and options.length">
|
||||
<div class="fr-runner-options">
|
||||
<t t-foreach="options" t-as="opt" t-key="opt.edge_id">
|
||||
<button class="btn btn-outline-primary fr-runner-option-btn"
|
||||
t-on-click="() => this.onChoose(opt.edge_id)"
|
||||
t-att-disabled="state.submitting">
|
||||
<i class="fa fa-chevron-right me-2"/>
|
||||
<strong t-out="opt.label"/>
|
||||
</button>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- Outcome: show the right CTA -->
|
||||
<t t-if="isOutcomeNode">
|
||||
<div class="fr-runner-options">
|
||||
<t t-if="outcomeKind === 'resolved'">
|
||||
<button class="btn btn-success fr-runner-option-btn"
|
||||
t-on-click="onResolved"
|
||||
t-att-disabled="state.submitting">
|
||||
<i class="fa fa-check-circle me-2"/>
|
||||
<strong>Mark Resolved on Call & Close Repair</strong>
|
||||
</button>
|
||||
</t>
|
||||
<t t-if="outcomeKind === 'escalate'">
|
||||
<button class="btn btn-danger fr-runner-option-btn"
|
||||
t-on-click="onEscalate"
|
||||
t-att-disabled="state.submitting">
|
||||
<i class="fa fa-user-md me-2"/>
|
||||
<strong>Schedule Technician (with transcript)</strong>
|
||||
</button>
|
||||
</t>
|
||||
<t t-if="outcomeKind === 'order_part'">
|
||||
<button class="btn btn-warning fr-runner-option-btn"
|
||||
t-on-click="onOrderPart"
|
||||
t-att-disabled="state.submitting">
|
||||
<i class="fa fa-cube me-2"/>
|
||||
<strong>Capture Part Order (next step)</strong>
|
||||
</button>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- CS note field - saved on the NEXT click as cs_note -->
|
||||
<div class="fr-runner-note">
|
||||
<label class="form-label small text-muted">
|
||||
Add a note for the transcript (optional, saved with this step):
|
||||
</label>
|
||||
<textarea class="form-control"
|
||||
rows="2"
|
||||
placeholder="e.g. Client confirmed outlet works with a lamp"
|
||||
t-model="state.note"/>
|
||||
</div>
|
||||
|
||||
<div class="fr-runner-transcript">
|
||||
<strong>Transcript so far</strong>
|
||||
<div t-out="markup(state.data.transcript_html || '')"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- ============ TREE VIEW (toggle) ============ -->
|
||||
<t t-if="state.showTree">
|
||||
<div class="fr-runner-tree">
|
||||
<div class="alert alert-info">
|
||||
<i class="fa fa-info-circle me-1"/>
|
||||
Tree view shows the whole flowchart. The yellow-highlighted
|
||||
node is the current step. Visited nodes are green. Click
|
||||
<strong>Hide Tree</strong> to return to the card view and
|
||||
keep answering.
|
||||
</div>
|
||||
<div t-ref="treeCanvas"
|
||||
class="drawflow"
|
||||
style="height: calc(100vh - 220px); background: #f3f4f6; border: 1px solid #d8dadd; border-radius: 6px;"/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
1
fusion_repairs/static/src/lib/drawflow/drawflow.min.css
vendored
Normal file
1
fusion_repairs/static/src/lib/drawflow/drawflow.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none;perspective:0}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}
|
||||
1
fusion_repairs/static/src/lib/drawflow/drawflow.min.js
vendored
Normal file
1
fusion_repairs/static/src/lib/drawflow/drawflow.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user