module IHP.IDE.Data.View.EditValue where import IHP.ViewPrelude import IHP.IDE.ToolServer.Types import IHP.IDE.Data.View.ShowDatabase import IHP.IDE.Data.View.Layout import Data.Maybe data EditValueView = EditValueView { EditValueView -> [Text] tableNames :: [Text] , EditValueView -> Text tableName :: Text , EditValueView -> [[DynamicField]] rows :: [[DynamicField]] , EditValueView -> Text targetName :: Text , EditValueView -> Text targetId :: Text } instance View EditValueView where html :: (?context::ControllerContext, ?view::EditValueView) => EditValueView -> Html html EditValueView { [[DynamicField]] [Text] Text $sel:tableNames:EditValueView :: EditValueView -> [Text] $sel:tableName:EditValueView :: EditValueView -> Text $sel:rows:EditValueView :: EditValueView -> [[DynamicField]] $sel:targetName:EditValueView :: EditValueView -> Text $sel:targetId:EditValueView :: EditValueView -> Text tableNames :: [Text] tableName :: Text rows :: [[DynamicField]] targetName :: Text targetId :: Text .. } = [hsx| <div class="h-100"> {headerNav} <div class="h-100 row no-gutters"> {renderTableSelector tableNames tableName} <div class="col" style="overflow: scroll; max-height: 80vh"> {renderRows rows tableBody tableName} <div class="text-muted context-menu-notice">Press Enter to save your changes or click somewhere else to discard them.</div> </div> </div> </div> {script} |] where tableBody :: Html tableBody = [hsx|<tbody>{forEach rows renderRow}</tbody>|] renderRow :: [DynamicField] -> Html renderRow [DynamicField] fields = [hsx|<tr oncontextmenu={"showContextMenu('" <> contextMenuId <> "');"}>{forEach fields (renderField id)} </tr> <div class="custom-menu menu-for-column shadow backdrop-blur" id={contextMenuId}> <a href={EditRowAction tableName id}>Edit Row</a> <a href={DeleteEntryAction tableName id} class="js-delete">Delete Row</a> <div></div> <a href={NewRowAction tableName}>Add Row</a> </div>|] where contextMenuId :: Text contextMenuId = Text "context-menu-column-" Text -> Text -> Text forall a. Semigroup a => a -> a -> a <> Text -> Text forall a. Show a => a -> Text tshow Text id id :: Text id = (ByteString -> Text forall a b. ConvertibleStrings a b => a -> b cs (ByteString -> Maybe ByteString -> ByteString forall a. a -> Maybe a -> a fromMaybe ByteString "" ((Maybe DynamicField -> DynamicField forall a. HasCallStack => Maybe a -> a fromJust ([DynamicField] -> Maybe DynamicField forall a. [a] -> Maybe a headMay [DynamicField] fields)).fieldValue))) renderField :: Text -> DynamicField -> Html renderField Text id DynamicField { Maybe ByteString ByteString fieldValue :: Maybe ByteString fieldName :: ByteString $sel:fieldValue:DynamicField :: DynamicField -> Maybe ByteString $sel:fieldName:DynamicField :: DynamicField -> ByteString .. } | (Text -> Text forall a. Show a => a -> Text tshow Text targetName) Text -> Text -> Bool forall a. Eq a => a -> a -> Bool == (ByteString -> Text forall a. Show a => a -> Text tshow ByteString fieldName) Bool -> Bool -> Bool && Text targetId Text -> Text -> Bool forall a. Eq a => a -> a -> Bool == Text id = [hsx|<td> <form id="fieldForm" method="POST" action={UpdateValueAction}> <input id="editField" class="form-control" autofocus="autofocus" type="text" name="targetValue" value={fromMaybe "" fieldValue}/> <input id="inputField" type="hidden" name="tableName" value={tableName}/> <input type="hidden" name="id" value={id}/> <input type="hidden" name="targetName" value={targetName}/> </form></td>|] renderField Text id DynamicField { Maybe ByteString ByteString $sel:fieldValue:DynamicField :: DynamicField -> Maybe ByteString $sel:fieldName:DynamicField :: DynamicField -> ByteString fieldValue :: Maybe ByteString fieldName :: ByteString .. } | ByteString fieldName ByteString -> ByteString -> Bool forall a. Eq a => a -> a -> Bool == ByteString "id" = [hsx|<td><span data-fieldname={fieldName}><a class="no-link border rounded p-1" href={EditRowValueAction tableName (cs fieldName) id}>{renderId (sqlValueToText fieldValue)}</a></span></td>|] renderField Text id DynamicField { Maybe ByteString ByteString $sel:fieldValue:DynamicField :: DynamicField -> Maybe ByteString $sel:fieldName:DynamicField :: DynamicField -> ByteString fieldValue :: Maybe ByteString fieldName :: ByteString .. } = [hsx|<td><span data-fieldname={fieldName}><a class="no-link" href={EditRowValueAction tableName (cs fieldName) id}>{sqlValueToText fieldValue}</a></span></td>|] script :: Html script = String -> Html forall a. ToMarkup a => a -> Html preEscapedToHtml [plain| <script> onClickHandler = () => { window.location = "#{pathTo (ShowTableRowsAction tableName)}"; } document.addEventListener('click', onClickHandler); var editField = document.getElementById("editField"); editField.addEventListener('click', function (event) {event.stopPropagation();}); var input = document.getElementById("inputField"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { var form = document.getElementById("fieldForm"); window.submit(form); } }); </script> |]