114 lines
4.0 KiB
Python
114 lines
4.0 KiB
Python
from fasthtml.common import *
|
|
from dataclasses import dataclass
|
|
|
|
from components.BaseComponent import BaseComponent
|
|
|
|
|
|
@dataclass
|
|
class DesignerLayout:
|
|
input_width: int
|
|
properties_width: int
|
|
output_width: int
|
|
|
|
|
|
class WorkflowDesignerProperties(BaseComponent):
|
|
def __init__(self, session, instance_id, owner):
|
|
super().__init__(session, instance_id)
|
|
self._owner = owner
|
|
self._boundaries = self._owner.get_boundaries()
|
|
self._commands = self._owner.commands
|
|
self.layout = self.compute_layout()
|
|
|
|
def update_layout(self):
|
|
self.layout = self.compute_layout()
|
|
|
|
def compute_layout(self) -> DesignerLayout:
|
|
if self._owner.get_state().properties_input_width is None:
|
|
input_width = self._boundaries["width"] // 3
|
|
properties_width = self._boundaries["width"] // 3
|
|
output_width = self._boundaries["width"] - input_width - properties_width - 10
|
|
else:
|
|
input_width = self._owner.get_state().properties_input_width
|
|
properties_width = self._owner.get_state().properties_properties_width
|
|
output_width = self._owner.get_state().properties_output_width
|
|
|
|
return DesignerLayout(
|
|
input_width=input_width,
|
|
properties_width=properties_width,
|
|
output_width=output_width
|
|
)
|
|
|
|
def refresh(self, oob=True):
|
|
return self.__ft__(oob=oob)
|
|
|
|
def _mk_input(self):
|
|
return Div(
|
|
"Input",
|
|
id=f"pi_{self._id}",
|
|
style=f"width: {self.layout.input_width}px; height: {self._boundaries['height']}px; background-color: #f0f0f0; border: 1px solid #ccc; display: inline-block; vertical-align: top; padding: 10px; box-sizing: border-box;"
|
|
)
|
|
|
|
def _mk_output(self):
|
|
return Div(
|
|
"Output",
|
|
id=f"po_{self._id}",
|
|
style=f"width: {self.layout.output_width}px; height: {self._boundaries['height']}px; background-color: #f0f0f0; border: 1px solid #ccc; display: inline-block; vertical-align: top; padding: 10px; box-sizing: border-box;"
|
|
)
|
|
|
|
def _mk_properties(self):
|
|
return Div(
|
|
# Drag handle (20px height)
|
|
Div(
|
|
"Properties",
|
|
id=f"ppt_{self._id}",
|
|
style="height: 20px; background-color: #ddd; cursor: move; text-align: center; line-height: 20px; font-weight: bold; font-size: 12px; border-bottom: 1px solid #bbb;"
|
|
),
|
|
|
|
# Properties content
|
|
Div(
|
|
Input(placeholder="output name", style="width: 100%; margin-bottom: 10px;"),
|
|
Select(
|
|
Option("Repository", value="repository"),
|
|
Option("Jira", value="jira"),
|
|
style="width: 100%; margin-bottom: 10px;"
|
|
),
|
|
Div(
|
|
Button("Save", **self._commands.on_save(), style="margin-right: 5px; padding: 5px 10px;"),
|
|
Button("Cancel", **self._commands.on_cancel(), style="padding: 5px 10px;"),
|
|
style="text-align: center;"
|
|
),
|
|
style=f"padding: 10px; height: {self._boundaries['height'] - 20}px; box-sizing: border-box;"
|
|
),
|
|
|
|
# Left resize handle
|
|
Div(
|
|
id=f"ppl_{self._id}",
|
|
style="position: absolute; left: 0; top: 0; width: 5px; height: 100%; cursor: ew-resize; background-color: transparent;"
|
|
),
|
|
|
|
# Right resize handle
|
|
Div(
|
|
id=f"ppr_{self._id}",
|
|
style="position: absolute; right: 0; top: 0; width: 5px; height: 100%; cursor: ew-resize; background-color: transparent;"
|
|
),
|
|
|
|
id=f"pp_{self._id}",
|
|
style=f"width: {self.layout.properties_width}px; height: {self._boundaries['height']}px; background-color: #f8f8f8; border: 1px solid #ccc; display: inline-block; vertical-align: top; position: relative; box-sizing: border-box;"
|
|
)
|
|
|
|
def _mk_layout(self):
|
|
return Div(
|
|
self._mk_input(),
|
|
self._mk_properties(),
|
|
self._mk_output(),
|
|
)
|
|
|
|
def __ft__(self, oob=False):
|
|
# return self.render()
|
|
return Div(
|
|
self._mk_layout(),
|
|
style=f"height: {self._boundaries['height']}px; border: 2px solid #333; position: relative; font-family: Arial, sans-serif;",
|
|
id=f"p_{self._id}",
|
|
hx_swap_oob='true' if oob else None,
|
|
)
|