changes
This commit is contained in:
gsinghpal
@@ -0,0 +1,415 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════════════
|
||||
FlowDesignerAction — Main layout
|
||||
All colours use Bootstrap/Odoo CSS custom properties so
|
||||
light + dark mode work automatically.
|
||||
Node-type accent colours (green, red, amber…) are intentional
|
||||
design tokens — they stay the same across themes.
|
||||
══════════════════════════════════════════════════════════════════ -->
|
||||
<t t-name="fusion_quotations.FlowDesignerAction">
|
||||
<div class="fd-designer d-flex flex-column h-100">
|
||||
<!-- ── Top Toolbar ── -->
|
||||
<div class="fd-toolbar d-flex align-items-center gap-2 px-3 py-2">
|
||||
<button class="btn btn-sm btn-outline-secondary" t-on-click="onBack">
|
||||
<i class="fa fa-arrow-left me-1"/>Back
|
||||
</button>
|
||||
<div class="fd-toolbar-title fw-bold text-truncate ms-2" t-esc="state.flowName"/>
|
||||
<span class="badge bg-secondary-subtle text-body-secondary ms-1" t-esc="state.equipmentType"/>
|
||||
|
||||
<div class="flex-grow-1"/>
|
||||
|
||||
<!-- Add Node Buttons -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-success" data-node-type="start" t-on-click="onAddNode"
|
||||
title="Add Start Node">
|
||||
<i class="fa fa-play me-1"/>Start
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-warning" data-node-type="decision" t-on-click="onAddNode"
|
||||
title="Add Decision Node">
|
||||
<i class="fa fa-code-fork me-1"/>Decision
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-primary" data-node-type="option_group" t-on-click="onAddNode"
|
||||
title="Add Option Group">
|
||||
<i class="fa fa-list-ul me-1"/>Options
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-info" data-node-type="action" t-on-click="onAddNode"
|
||||
title="Add Action Node">
|
||||
<i class="fa fa-bolt me-1"/>Action
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-secondary fd-btn-measure"
|
||||
data-node-type="measurement_check" t-on-click="onAddNode"
|
||||
title="Add Measurement Check">
|
||||
<i class="fa fa-tachometer me-1"/>Measure
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger" data-node-type="end" t-on-click="onAddNode"
|
||||
title="Add End Node">
|
||||
<i class="fa fa-stop me-1"/>End
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="vr mx-1"/>
|
||||
|
||||
<!-- Zoom Controls -->
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button class="btn btn-outline-secondary" t-on-click="onZoomOut" title="Zoom Out">
|
||||
<i class="fa fa-search-minus"/>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" t-on-click="onZoomReset" title="Reset Zoom"
|
||||
style="min-width:55px;">
|
||||
<t t-esc="Math.round(state.zoom * 100)"/>%
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" t-on-click="onZoomIn" title="Zoom In">
|
||||
<i class="fa fa-search-plus"/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="vr mx-1"/>
|
||||
|
||||
<button class="btn btn-sm btn-outline-danger" t-on-click="onDeleteSelected"
|
||||
t-att-disabled="!state.selectedNodeId and !state.selectedConnectionId"
|
||||
title="Delete Selected (Del)">
|
||||
<i class="fa fa-trash"/>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-sm btn-primary" t-on-click="onSave"
|
||||
t-att-disabled="state.saving or !state.dirty">
|
||||
<i class="fa fa-save me-1"/>
|
||||
<t t-if="state.saving">Saving...</t>
|
||||
<t t-else="">Save</t>
|
||||
</button>
|
||||
|
||||
<t t-if="state.dirty">
|
||||
<span class="badge bg-warning text-dark ms-1">Unsaved</span>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<!-- ── Canvas + Panel ── -->
|
||||
<div class="fd-canvas-wrapper d-flex flex-grow-1 overflow-hidden position-relative">
|
||||
|
||||
<!-- SVG Canvas -->
|
||||
<svg class="fd-svg-canvas flex-grow-1" t-ref="svgCanvas" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Grid Pattern -->
|
||||
<defs>
|
||||
<pattern id="fd-grid" width="20" height="20" patternUnits="userSpaceOnUse"
|
||||
t-att-x="state.viewX" t-att-y="state.viewY"
|
||||
t-att-patternTransform="'scale(' + state.zoom + ')'">
|
||||
<circle cx="10" cy="10" r="1" class="fd-grid-dot"/>
|
||||
</pattern>
|
||||
<!-- Arrow markers — fill set as attribute because CSS custom
|
||||
properties don't cascade into SVG marker rendering contexts -->
|
||||
<marker id="fd-arrow" viewBox="0 0 10 6" refX="10" refY="3"
|
||||
markerWidth="8" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M0,0 L10,3 L0,6 z" fill="#8b95a1"/>
|
||||
</marker>
|
||||
<marker id="fd-arrow-selected" viewBox="0 0 10 6" refX="10" refY="3"
|
||||
markerWidth="8" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M0,0 L10,3 L0,6 z" fill="var(--bs-primary, #3b82f6)"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<rect width="100%" height="100%" fill="url(#fd-grid)"/>
|
||||
|
||||
<!-- Transform group for zoom/pan -->
|
||||
<g t-ref="canvasGroup" class="fd-canvas-group" t-att-transform="transformStr">
|
||||
|
||||
<!-- Connections -->
|
||||
<t t-foreach="connectionPaths" t-as="conn" t-key="conn.id">
|
||||
<!-- Invisible fat hit area for click detection -->
|
||||
<path t-att-d="conn.path" fill="none" stroke="transparent" stroke-width="14"
|
||||
class="fd-connection-hit" t-att-data-conn-id="conn.id"
|
||||
style="cursor:pointer;"/>
|
||||
<!-- Visible bezier line — stroke set as SVG attr for guaranteed rendering -->
|
||||
<path t-att-d="conn.path"
|
||||
class="fd-connection-path"
|
||||
t-att-stroke="conn.isSelected ? 'var(--bs-primary)' : 'var(--fd-conn-stroke, #8b95a1)'"
|
||||
t-att-stroke-width="conn.isSelected ? '3.5' : '2.5'"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
t-att-marker-end="conn.isSelected ? 'url(#fd-arrow-selected)' : 'url(#fd-arrow)'"
|
||||
t-att-data-conn-id="conn.id"
|
||||
style="pointer-events:none;"/>
|
||||
<!-- Connection label with background pill -->
|
||||
<t t-if="conn.label">
|
||||
<rect t-att-x="conn.midX - conn.labelW / 2"
|
||||
t-att-y="conn.midY - 18"
|
||||
t-att-width="conn.labelW" height="20" rx="10"
|
||||
class="fd-conn-label-bg"/>
|
||||
<text t-att-x="conn.midX" t-att-y="conn.midY - 5"
|
||||
text-anchor="middle" font-size="11" font-weight="600"
|
||||
class="fd-conn-label">
|
||||
<t t-esc="conn.label"/>
|
||||
</text>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<!-- Nodes -->
|
||||
<t t-foreach="nodesWithPorts" t-as="node" t-key="node.id">
|
||||
<g class="fd-node-group" t-att-data-node-id="node.id"
|
||||
t-att-transform="'translate(' + node.pos_x + ',' + node.pos_y + ')'"
|
||||
style="cursor:grab;">
|
||||
|
||||
<!-- Node body — accent color fill is a design token, stays fixed -->
|
||||
<rect x="0" y="0" t-att-width="node.width" t-att-height="node.height"
|
||||
t-att-rx="node.node_type === 'start' or node.node_type === 'end' ? node.height / 2 : 8"
|
||||
t-att-fill="node.meta.color + '18'"
|
||||
t-att-stroke="node.isSelected ? 'var(--bs-primary)' : node.meta.color"
|
||||
t-att-stroke-width="node.isSelected ? '3' : '2'"
|
||||
class="fd-node-rect"/>
|
||||
|
||||
<!-- Icon + Name — pointer-events:none so clicks pass through to ports/rect -->
|
||||
<foreignObject x="0" y="0" t-att-width="node.width" t-att-height="node.height"
|
||||
style="pointer-events:none;">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" class="fd-node-content"
|
||||
t-att-style="'display:flex;flex-direction:column;justify-content:center;height:' + node.height + 'px;padding:0 14px;overflow:hidden;pointer-events:none;'">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<i t-att-class="'fa ' + (node.icon || 'fa-circle')"
|
||||
t-att-style="'color:' + node.meta.color + ';font-size:14px;flex-shrink:0;'"/>
|
||||
<span class="fd-node-name" t-esc="node.name"/>
|
||||
</div>
|
||||
<t t-if="node.node_type === 'decision' and node.decision_field">
|
||||
<div class="fd-node-detail">
|
||||
<t t-esc="node.decision_field"/>
|
||||
<t t-if="node.decision_operator"> <t t-esc="node.decision_operator"/> </t>
|
||||
<t t-if="node.decision_value"> <t t-esc="node.decision_value"/></t>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="node.node_type === 'action' and node.action_type">
|
||||
<div class="fd-node-detail">
|
||||
<t t-esc="node.action_type"/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="node.node_type === 'measurement_check' and node.measurement_field">
|
||||
<div class="fd-node-detail">
|
||||
<t t-esc="node.measurement_field"/>
|
||||
<t t-if="node.comparison"> <t t-esc="node.comparison"/> </t>
|
||||
<t t-if="node.threshold_value"> <t t-esc="node.threshold_value"/></t>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="node.section_name">
|
||||
<div class="fd-node-detail">
|
||||
<i class="fa fa-folder-o me-1"/><t t-esc="node.section_name"/>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</foreignObject>
|
||||
|
||||
<!-- Ports -->
|
||||
<t t-foreach="node.ports" t-as="port" t-key="port.key">
|
||||
<!-- Invisible hit area — detected by elementsFromPoint in JS -->
|
||||
<circle t-att-cx="port.x" t-att-cy="port.y" r="15"
|
||||
fill="transparent" stroke="none"
|
||||
pointer-events="all"
|
||||
class="fd-port-hit fd-port"
|
||||
t-att-data-port-key="port.key"
|
||||
t-att-data-port-type="port.type"
|
||||
t-att-data-node-id="'' + node.id"
|
||||
style="cursor:crosshair;"/>
|
||||
<!-- Visible port circle — concrete fill for both types -->
|
||||
<circle t-att-cx="port.x" t-att-cy="port.y" r="7"
|
||||
t-att-fill="port.type !== 'input' ? node.meta.color : '#8b95a1'"
|
||||
class="fd-port-visual"
|
||||
style="pointer-events:none;"/>
|
||||
<t t-if="port.label">
|
||||
<text t-att-x="port.x + (port.type === 'output' ? 12 : -12)"
|
||||
t-att-y="port.y + 4"
|
||||
t-att-text-anchor="port.type === 'output' ? 'start' : 'end'"
|
||||
class="fd-port-label"
|
||||
fill="#8b95a1">
|
||||
<t t-esc="port.label"/>
|
||||
</text>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
</g>
|
||||
</t>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- ── Properties Panel (right side) ── -->
|
||||
<t t-if="state.panelOpen and selectedNode">
|
||||
<div class="fd-properties-panel">
|
||||
<div class="fd-panel-header d-flex align-items-center justify-content-between px-3 py-2">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i t-att-class="'fa ' + (selectedNode.icon || 'fa-circle')"
|
||||
t-att-style="'color:' + (selectedNode.color || '#3b82f6')"/>
|
||||
<span class="fw-bold" t-esc="getNodeTypeLabel(selectedNode.node_type)"/>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-link text-body-secondary p-0" t-on-click="onPanelClose">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="fd-panel-body p-3">
|
||||
<!-- Common: Name -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label fd-label">Name</label>
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
data-field="name" t-att-value="selectedNode.name"
|
||||
t-on-change="onNodeFieldChange"/>
|
||||
</div>
|
||||
|
||||
<!-- Decision Fields -->
|
||||
<t t-if="selectedNode.node_type === 'decision'">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fd-label">Decision Field</label>
|
||||
<select class="form-select form-select-sm" data-field="decision_field"
|
||||
t-on-change="onNodeFieldChange">
|
||||
<option value="">-- Select --</option>
|
||||
<option value="equipment_type" t-att-selected="selectedNode.decision_field === 'equipment_type'">Equipment Type</option>
|
||||
<option value="wheelchair_type" t-att-selected="selectedNode.decision_field === 'wheelchair_type'">Wheelchair Category</option>
|
||||
<option value="powerchair_type" t-att-selected="selectedNode.decision_field === 'powerchair_type'">Power Chair Category</option>
|
||||
<option value="build_type" t-att-selected="selectedNode.decision_field === 'build_type'">Build Type</option>
|
||||
<option value="client_type" t-att-selected="selectedNode.decision_field === 'client_type'">Client Type</option>
|
||||
<option value="reason_for_application" t-att-selected="selectedNode.decision_field === 'reason_for_application'">Reason for Application</option>
|
||||
<option value="seat_width" t-att-selected="selectedNode.decision_field === 'seat_width'">Seat Width</option>
|
||||
<option value="seat_depth" t-att-selected="selectedNode.decision_field === 'seat_depth'">Seat Depth</option>
|
||||
<option value="client_weight" t-att-selected="selectedNode.decision_field === 'client_weight'">Client Weight</option>
|
||||
<option value="back_height" t-att-selected="selectedNode.decision_field === 'back_height'">Back Height</option>
|
||||
<option value="seat_to_floor" t-att-selected="selectedNode.decision_field === 'seat_to_floor'">Seat to Floor</option>
|
||||
<option value="leg_rest_length" t-att-selected="selectedNode.decision_field === 'leg_rest_length'">Leg Rest Length</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fd-label">Operator</label>
|
||||
<select class="form-select form-select-sm" data-field="decision_operator"
|
||||
t-on-change="onNodeFieldChange">
|
||||
<option value="">-- Select --</option>
|
||||
<option value="eq" t-att-selected="selectedNode.decision_operator === 'eq'">=</option>
|
||||
<option value="neq" t-att-selected="selectedNode.decision_operator === 'neq'">≠</option>
|
||||
<option value="gt" t-att-selected="selectedNode.decision_operator === 'gt'">></option>
|
||||
<option value="gte" t-att-selected="selectedNode.decision_operator === 'gte'">≥</option>
|
||||
<option value="lt" t-att-selected="selectedNode.decision_operator === 'lt'"><</option>
|
||||
<option value="lte" t-att-selected="selectedNode.decision_operator === 'lte'">≤</option>
|
||||
<option value="in" t-att-selected="selectedNode.decision_operator === 'in'">In List</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fd-label">Expected Value</label>
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
data-field="decision_value" t-att-value="selectedNode.decision_value"
|
||||
t-on-change="onNodeFieldChange"
|
||||
placeholder="For 'In List' use comma-separated"/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- Measurement Check Fields -->
|
||||
<t t-if="selectedNode.node_type === 'measurement_check'">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fd-label">Measurement</label>
|
||||
<select class="form-select form-select-sm" data-field="measurement_field"
|
||||
t-on-change="onNodeFieldChange">
|
||||
<option value="">-- Select --</option>
|
||||
<option value="seat_width" t-att-selected="selectedNode.measurement_field === 'seat_width'">Seat Width</option>
|
||||
<option value="seat_depth" t-att-selected="selectedNode.measurement_field === 'seat_depth'">Seat Depth</option>
|
||||
<option value="back_width" t-att-selected="selectedNode.measurement_field === 'back_width'">Backrest Width</option>
|
||||
<option value="back_height" t-att-selected="selectedNode.measurement_field === 'back_height'">Back Height</option>
|
||||
<option value="seat_to_floor" t-att-selected="selectedNode.measurement_field === 'seat_to_floor'">Seat to Floor</option>
|
||||
<option value="leg_rest_length" t-att-selected="selectedNode.measurement_field === 'leg_rest_length'">Leg Rest Length</option>
|
||||
<option value="client_weight" t-att-selected="selectedNode.measurement_field === 'client_weight'">Client Weight</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fd-label">Comparison</label>
|
||||
<select class="form-select form-select-sm" data-field="comparison"
|
||||
t-on-change="onNodeFieldChange">
|
||||
<option value="">-- Select --</option>
|
||||
<option value="gt" t-att-selected="selectedNode.comparison === 'gt'">Greater Than</option>
|
||||
<option value="gte" t-att-selected="selectedNode.comparison === 'gte'">Greater Than or Equal</option>
|
||||
<option value="lt" t-att-selected="selectedNode.comparison === 'lt'">Less Than</option>
|
||||
<option value="eq" t-att-selected="selectedNode.comparison === 'eq'">Equal To</option>
|
||||
<option value="neq" t-att-selected="selectedNode.comparison === 'neq'">Not Equal To</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fd-label">Threshold</label>
|
||||
<input type="number" class="form-control form-control-sm"
|
||||
data-field="threshold_value"
|
||||
t-att-value="selectedNode.threshold_value"
|
||||
t-on-change="onNodeNumberChange" step="0.1"/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- Action Fields -->
|
||||
<t t-if="selectedNode.node_type === 'action'">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fd-label">Action Type</label>
|
||||
<select class="form-select form-select-sm" data-field="action_type"
|
||||
t-on-change="onNodeFieldChange">
|
||||
<option value="">-- Select --</option>
|
||||
<option value="enable" t-att-selected="selectedNode.action_type === 'enable'">Enable Options</option>
|
||||
<option value="disable" t-att-selected="selectedNode.action_type === 'disable'">Disable Options</option>
|
||||
<option value="require" t-att-selected="selectedNode.action_type === 'require'">Require Options</option>
|
||||
<option value="skip_step" t-att-selected="selectedNode.action_type === 'skip_step'">Skip Portal Step</option>
|
||||
<option value="set_value" t-att-selected="selectedNode.action_type === 'set_value'">Set Field Value</option>
|
||||
</select>
|
||||
</div>
|
||||
<t t-if="selectedNode.action_type === 'skip_step'">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fd-label">Target Step</label>
|
||||
<input type="number" class="form-control form-control-sm"
|
||||
data-field="target_step"
|
||||
t-att-value="selectedNode.target_step"
|
||||
t-on-change="onNodeNumberChange" min="1" max="10"/>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<!-- Option Group — options list -->
|
||||
<t t-if="selectedNode.node_type === 'option_group'">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||
<label class="form-label fd-label mb-0">Options</label>
|
||||
<button class="btn btn-sm btn-outline-primary" t-on-click="onAddNodeOption">
|
||||
<i class="fa fa-plus me-1"/>Add
|
||||
</button>
|
||||
</div>
|
||||
<t t-if="selectedNode.node_options and selectedNode.node_options.length">
|
||||
<t t-foreach="selectedNode.node_options" t-as="opt" t-key="opt.id">
|
||||
<div class="fd-option-row d-flex align-items-center gap-2 mb-2">
|
||||
<span class="fd-option-bullet" t-att-style="'background:' + (selectedNode.color || '#3b82f6')"/>
|
||||
<input type="text" class="form-control form-control-sm flex-grow-1"
|
||||
t-att-value="opt.name"
|
||||
t-att-data-index="opt_index"
|
||||
t-on-change="onNodeOptionNameChange"/>
|
||||
<button class="btn btn-sm btn-link text-danger p-0"
|
||||
t-att-data-index="opt_index"
|
||||
t-on-click="onRemoveNodeOption">
|
||||
<i class="fa fa-trash-o"/>
|
||||
</button>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="text-body-secondary small fst-italic">No options yet. Click "Add" to create one.</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- Node info footer -->
|
||||
<div class="mt-4 pt-3 border-top">
|
||||
<div class="text-body-secondary small">
|
||||
<div><strong>ID:</strong> <t t-esc="selectedNode.id"/></div>
|
||||
<div><strong>Position:</strong> (<t t-esc="Math.round(selectedNode.pos_x)"/>, <t t-esc="Math.round(selectedNode.pos_y)"/>)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- Loading overlay -->
|
||||
<t t-if="state.loading">
|
||||
<div class="fd-loading-overlay d-flex align-items-center justify-content-center">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-spinner fa-spin fa-2x text-primary mb-2"/>
|
||||
<div class="text-body-secondary">Loading flow...</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
Reference in New Issue
Block a user