ihp-ide-1.5.0: IHP/IDE/SchemaDesigner/View/Columns/NewForeignKey.hs
module IHP.IDE.SchemaDesigner.View.Columns.NewForeignKey (NewForeignKeyView (..), foreignKeyFormModal) where
import IHP.ViewPrelude
import IHP.Postgres.Types
import IHP.IDE.ToolServer.Types
import IHP.IDE.SchemaDesigner.View.Layout
data NewForeignKeyView = NewForeignKeyView
{ statements :: [Statement]
, tableName :: Text
, columnName :: Text
, tableNames :: [Text]
}
instance View NewForeignKeyView where
html NewForeignKeyView { .. } = [hsx|
<div class="row g-0 bg-white" id="schema-designer-viewer">
{renderObjectSelector (zip [0..] statements) (Just tableName)}
{renderColumnSelector tableName (zip [0..] columns) statements}
</div>
{migrationStatus}
{renderModal modal}
|]
where
columns = getTableColumns tableName statements
modal = foreignKeyFormModal
(pathTo CreateForeignKeyAction)
tableName
columnName
tableNames
(tableName <> "_ref_" <> columnName)
Nothing
"NoAction"
"Add Constraint"
"New Foreign Key Constraint"
-- | Shared form modal for creating and editing foreign key constraints.
foreignKeyFormModal
:: (?context :: ControllerContext, ?request :: Request)
=> Text -- ^ Form action URL
-> Text -- ^ Table name
-> Text -- ^ Column name
-> [Text] -- ^ Available table names
-> Text -- ^ Constraint name value
-> Maybe Text -- ^ Selected reference table (Nothing = no preselection)
-> Text -- ^ Selected onDelete value
-> Text -- ^ Button text
-> Text -- ^ Modal title
-> Modal
foreignKeyFormModal formAction tableName columnName tableNames constraintNameValue selectedReferenceTable selectedOnDelete buttonText modalTitle =
Modal { modalContent, modalFooter, modalCloseUrl, modalTitle }
where
modalContent = [hsx|
<form method="POST" action={formAction}>
<input type="hidden" name="tableName" value={tableName}/>
<input type="hidden" name="columnName" value={columnName}/>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Reference Table:</label>
<div class="col-sm-10">
<select name="referenceTable" class="form-control select2" autofocus="autofocus">
{forEach tableNames renderTableNameSelector}
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Name:</label>
<div class="col-sm-10">
<input name="constraintName" type="text" class="form-control" value={constraintNameValue}/>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">On Delete:</label>
<div class="col-sm-10">
<select name="onDelete" class="form-control select2">
{onDeleteSelector "NoAction"}
{onDeleteSelector "Restrict"}
{onDeleteSelector "SetNull"}
{onDeleteSelector "SetDefault"}
{onDeleteSelector "Cascade"}
</select>
</div>
</div>
<div class="text-end">
<button type="submit" class="btn btn-primary">{buttonText}</button>
</div>
</form>
{select2}
|]
where
renderTableNameSelector name = case selectedReferenceTable of
Just selected | name == selected ->
preEscapedToHtml [plain|<option selected>#{name}</option>|]
_ -> preEscapedToHtml [plain|<option>#{name}</option>|]
onDeleteSelector option = if option == selectedOnDelete
then preEscapedToHtml [plain|<option selected>#{option}</option>|]
else preEscapedToHtml [plain|<option>#{option}</option>|]
select2 = preEscapedToHtml [plain|
<script>
$('.select2').select2();
</script>
|]
modalFooter = mempty
modalCloseUrl = pathTo ShowTableAction { tableName }