refactor(ui): change type cardModal to cardForm
- Change type cardModal to cardForm because it is a Form and not a Modal. - Text the card's details directly from the form items when the Save button is pressed instead of updating fields in the cardForm value every time a change is made to the input fields.
This commit is contained in:
parent
e961bfc756
commit
d921231017
3 changed files with 140 additions and 135 deletions
120
internal/ui/cardform.go
Normal file
120
internal/ui/cardform.go
Normal file
|
@ -0,0 +1,120 @@
|
||||||
|
package ui
|
||||||
|
|
||||||
|
import (
|
||||||
|
"github.com/gdamore/tcell/v2"
|
||||||
|
"github.com/rivo/tview"
|
||||||
|
)
|
||||||
|
|
||||||
|
type cardFormMode int
|
||||||
|
|
||||||
|
const (
|
||||||
|
create cardFormMode = iota
|
||||||
|
edit
|
||||||
|
)
|
||||||
|
|
||||||
|
type cardForm struct {
|
||||||
|
*tview.Form
|
||||||
|
frame *tview.Frame
|
||||||
|
titleLabel string
|
||||||
|
descLabel string
|
||||||
|
done func(string, string, bool, cardFormMode)
|
||||||
|
mode cardFormMode
|
||||||
|
}
|
||||||
|
|
||||||
|
func newCardForm() *cardForm {
|
||||||
|
var (
|
||||||
|
background = tcell.ColorBlack.TrueColor()
|
||||||
|
buttonBackground = tcell.ColorBlueViolet.TrueColor()
|
||||||
|
textColour = tcell.ColorWhite.TrueColor()
|
||||||
|
fieldBackground = tcell.ColorGrey.TrueColor()
|
||||||
|
labelColour = tcell.ColorGreen.TrueColor()
|
||||||
|
|
||||||
|
form = tview.NewForm()
|
||||||
|
)
|
||||||
|
|
||||||
|
c := cardForm{
|
||||||
|
Form: form,
|
||||||
|
frame: tview.NewFrame(form),
|
||||||
|
done: nil,
|
||||||
|
mode: create,
|
||||||
|
titleLabel: "Title",
|
||||||
|
descLabel: "Description",
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stylise the buttons
|
||||||
|
c.SetButtonsAlign(tview.AlignCenter).
|
||||||
|
SetButtonBackgroundColor(buttonBackground).
|
||||||
|
SetButtonTextColor(textColour).
|
||||||
|
SetBorderPadding(0, 0, 0, 0)
|
||||||
|
|
||||||
|
// Stylise the form
|
||||||
|
c.SetLabelColor(labelColour).
|
||||||
|
SetFieldBackgroundColor(fieldBackground).
|
||||||
|
SetFieldTextColor(textColour).
|
||||||
|
SetBackgroundColor(background)
|
||||||
|
|
||||||
|
// Stylise the frame around the form
|
||||||
|
c.frame.SetBorders(0, 0, 1, 0, 0, 0).
|
||||||
|
SetBorder(true).
|
||||||
|
SetBorderColor(tcell.ColorOrangeRed.TrueColor()).
|
||||||
|
SetBackgroundColor(background).
|
||||||
|
SetBorderPadding(1, 1, 1, 1)
|
||||||
|
|
||||||
|
c.AddButton("Save", func() {
|
||||||
|
if c.done != nil {
|
||||||
|
title, ok := c.GetFormItemByLabel(c.titleLabel).(*tview.InputField)
|
||||||
|
if !ok {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
description, ok := c.GetFormItemByLabel(c.descLabel).(*tview.TextArea)
|
||||||
|
if !ok {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
c.done(title.GetText(), description.GetText(), true, c.mode)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
c.AddButton("Cancel", func() {
|
||||||
|
if c.done != nil {
|
||||||
|
c.done("", "", false, c.mode)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return &c
|
||||||
|
}
|
||||||
|
|
||||||
|
func (c *cardForm) updateInputFields(title, description string) {
|
||||||
|
c.Clear(false)
|
||||||
|
c.AddInputField(c.titleLabel, title, 60, nil, nil)
|
||||||
|
c.AddTextArea(c.descLabel, description, 60, 10, 0, nil)
|
||||||
|
}
|
||||||
|
|
||||||
|
func (c *cardForm) setDoneFunc(handler func(string, string, bool, cardFormMode)) *cardForm {
|
||||||
|
c.done = handler
|
||||||
|
|
||||||
|
return c
|
||||||
|
}
|
||||||
|
|
||||||
|
func (c *cardForm) Draw(screen tcell.Screen) {
|
||||||
|
buttonsWidth := 20
|
||||||
|
screenWidth, screenHeight := screen.Size()
|
||||||
|
width := screenWidth / 3
|
||||||
|
|
||||||
|
if width < buttonsWidth {
|
||||||
|
width = buttonsWidth
|
||||||
|
}
|
||||||
|
|
||||||
|
height := 20
|
||||||
|
width += 4
|
||||||
|
|
||||||
|
// Set the form's position and size.
|
||||||
|
x := (screenWidth - width) / 2
|
||||||
|
y := (screenHeight - height) / 2
|
||||||
|
c.SetRect(x, y, width, height)
|
||||||
|
|
||||||
|
// Draw the frame.
|
||||||
|
c.frame.SetRect(x, y, width, height)
|
||||||
|
c.frame.Draw(screen)
|
||||||
|
}
|
|
@ -1,115 +0,0 @@
|
||||||
package ui
|
|
||||||
|
|
||||||
import (
|
|
||||||
"github.com/gdamore/tcell/v2"
|
|
||||||
"github.com/rivo/tview"
|
|
||||||
)
|
|
||||||
|
|
||||||
type cardModalMode int
|
|
||||||
|
|
||||||
const (
|
|
||||||
create cardModalMode = iota
|
|
||||||
edit
|
|
||||||
)
|
|
||||||
|
|
||||||
type cardModal struct {
|
|
||||||
*tview.Form
|
|
||||||
frame *tview.Frame
|
|
||||||
title string
|
|
||||||
description string
|
|
||||||
done func(string, string, bool, cardModalMode)
|
|
||||||
mode cardModalMode
|
|
||||||
}
|
|
||||||
|
|
||||||
func newCardModal() *cardModal {
|
|
||||||
var (
|
|
||||||
background = tcell.ColorBlack.TrueColor()
|
|
||||||
buttonBackground = tcell.ColorBlueViolet.TrueColor()
|
|
||||||
textColour = tcell.ColorWhite.TrueColor()
|
|
||||||
fieldBackground = tcell.ColorGrey.TrueColor()
|
|
||||||
labelColour = tcell.ColorGreen.TrueColor()
|
|
||||||
|
|
||||||
form = tview.NewForm()
|
|
||||||
)
|
|
||||||
|
|
||||||
modal := cardModal{
|
|
||||||
Form: form,
|
|
||||||
frame: tview.NewFrame(form),
|
|
||||||
title: "",
|
|
||||||
description: "",
|
|
||||||
done: nil,
|
|
||||||
mode: create,
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stylise the buttons
|
|
||||||
modal.SetButtonsAlign(tview.AlignCenter).
|
|
||||||
SetButtonBackgroundColor(buttonBackground).
|
|
||||||
SetButtonTextColor(textColour).
|
|
||||||
SetBorderPadding(0, 0, 0, 0)
|
|
||||||
|
|
||||||
// Stylise the form
|
|
||||||
modal.SetLabelColor(labelColour).
|
|
||||||
SetFieldBackgroundColor(fieldBackground).
|
|
||||||
SetFieldTextColor(textColour).
|
|
||||||
SetBackgroundColor(background)
|
|
||||||
|
|
||||||
// Stylise the frame around the form
|
|
||||||
modal.frame.SetBorders(0, 0, 1, 0, 0, 0).
|
|
||||||
SetBorder(true).
|
|
||||||
SetBorderColor(tcell.ColorOrangeRed.TrueColor()).
|
|
||||||
SetBackgroundColor(background).
|
|
||||||
SetBorderPadding(1, 1, 1, 1)
|
|
||||||
|
|
||||||
modal.AddButton("Save", func() {
|
|
||||||
if modal.done != nil {
|
|
||||||
modal.done(modal.title, modal.description, true, modal.mode)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
modal.AddButton("Cancel", func() {
|
|
||||||
if modal.done != nil {
|
|
||||||
modal.done(modal.title, modal.description, false, modal.mode)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return &modal
|
|
||||||
}
|
|
||||||
|
|
||||||
func (m *cardModal) updateInputFields(title, description string) {
|
|
||||||
m.Clear(false)
|
|
||||||
m.AddInputField("Title", title, 60, nil, func(text string) {
|
|
||||||
m.title = text
|
|
||||||
})
|
|
||||||
|
|
||||||
m.AddTextArea("Description", description, 60, 10, 0, func(text string) {
|
|
||||||
m.description = text
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (m *cardModal) setDoneFunc(handler func(string, string, bool, cardModalMode)) *cardModal {
|
|
||||||
m.done = handler
|
|
||||||
|
|
||||||
return m
|
|
||||||
}
|
|
||||||
|
|
||||||
func (m *cardModal) Draw(screen tcell.Screen) {
|
|
||||||
buttonsWidth := 20
|
|
||||||
screenWidth, screenHeight := screen.Size()
|
|
||||||
width := screenWidth / 3
|
|
||||||
|
|
||||||
if width < buttonsWidth {
|
|
||||||
width = buttonsWidth
|
|
||||||
}
|
|
||||||
|
|
||||||
height := 20
|
|
||||||
width += 4
|
|
||||||
|
|
||||||
// Set the modal's position and size.
|
|
||||||
x := (screenWidth - width) / 2
|
|
||||||
y := (screenHeight - height) / 2
|
|
||||||
m.SetRect(x, y, width, height)
|
|
||||||
|
|
||||||
// Draw the frame.
|
|
||||||
m.frame.SetRect(x, y, width, height)
|
|
||||||
m.frame.Draw(screen)
|
|
||||||
}
|
|
|
@ -26,7 +26,7 @@ const (
|
||||||
const (
|
const (
|
||||||
mainPage string = "main"
|
mainPage string = "main"
|
||||||
quitPage string = "quit"
|
quitPage string = "quit"
|
||||||
cardModalPage string = "card modal"
|
cardFormPage string = "card form"
|
||||||
deleteCardModalPage string = "delete card modal"
|
deleteCardModalPage string = "delete card modal"
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -40,7 +40,7 @@ type UI struct {
|
||||||
board board.Board
|
board board.Board
|
||||||
mode boardMode
|
mode boardMode
|
||||||
quitModal *tview.Modal
|
quitModal *tview.Modal
|
||||||
cardModal *cardModal
|
cardForm *cardForm
|
||||||
deleteCardModal *tview.Modal
|
deleteCardModal *tview.Modal
|
||||||
statusSelection statusSelection
|
statusSelection statusSelection
|
||||||
}
|
}
|
||||||
|
@ -57,7 +57,7 @@ func NewUI(path string) (UI, error) {
|
||||||
pages: tview.NewPages(),
|
pages: tview.NewPages(),
|
||||||
flex: tview.NewFlex(),
|
flex: tview.NewFlex(),
|
||||||
quitModal: tview.NewModal(),
|
quitModal: tview.NewModal(),
|
||||||
cardModal: newCardModal(),
|
cardForm: newCardForm(),
|
||||||
focusedColumn: 0,
|
focusedColumn: 0,
|
||||||
columns: nil,
|
columns: nil,
|
||||||
board: kanban,
|
board: kanban,
|
||||||
|
@ -95,11 +95,11 @@ func (u *UI) init() error {
|
||||||
u.shiftColumnFocus(next)
|
u.shiftColumnFocus(next)
|
||||||
case letter == 'c':
|
case letter == 'c':
|
||||||
if u.mode == normal {
|
if u.mode == normal {
|
||||||
u.cardModal.mode = create
|
u.cardForm.mode = create
|
||||||
u.cardModal.updateInputFields("", "")
|
u.cardForm.updateInputFields("", "")
|
||||||
u.cardModal.frame.SetTitle(" Create Card ")
|
u.cardForm.frame.SetTitle(" Create Card ")
|
||||||
u.pages.ShowPage(cardModalPage)
|
u.pages.ShowPage(cardFormPage)
|
||||||
u.SetFocus(u.cardModal)
|
u.SetFocus(u.cardForm)
|
||||||
}
|
}
|
||||||
case letter == 'm':
|
case letter == 'm':
|
||||||
if u.mode == normal {
|
if u.mode == normal {
|
||||||
|
@ -109,12 +109,12 @@ func (u *UI) init() error {
|
||||||
}
|
}
|
||||||
case letter == 'e':
|
case letter == 'e':
|
||||||
if u.mode == normal {
|
if u.mode == normal {
|
||||||
u.cardModal.mode = edit
|
u.cardForm.mode = edit
|
||||||
card, _ := u.getFocusedCard()
|
card, _ := u.getFocusedCard()
|
||||||
u.cardModal.updateInputFields(card.Title, card.Description)
|
u.cardForm.updateInputFields(card.Title, card.Description)
|
||||||
u.cardModal.frame.SetTitle(" Edit Card ")
|
u.cardForm.frame.SetTitle(" Edit Card ")
|
||||||
u.pages.ShowPage(cardModalPage)
|
u.pages.ShowPage(cardFormPage)
|
||||||
u.SetFocus(u.cardModal)
|
u.SetFocus(u.cardForm)
|
||||||
}
|
}
|
||||||
case key == tcell.KeyCtrlD:
|
case key == tcell.KeyCtrlD:
|
||||||
if u.mode == normal {
|
if u.mode == normal {
|
||||||
|
@ -150,8 +150,8 @@ func (u *UI) init() error {
|
||||||
u.initQuitModal()
|
u.initQuitModal()
|
||||||
u.pages.AddPage(quitPage, u.quitModal, false, false)
|
u.pages.AddPage(quitPage, u.quitModal, false, false)
|
||||||
|
|
||||||
u.initCardModal()
|
u.initCardForm()
|
||||||
u.pages.AddPage(cardModalPage, u.cardModal, false, false)
|
u.pages.AddPage(cardFormPage, u.cardForm, false, false)
|
||||||
|
|
||||||
u.initDeleteCardModal()
|
u.initDeleteCardModal()
|
||||||
u.pages.AddPage(deleteCardModalPage, u.deleteCardModal, false, false)
|
u.pages.AddPage(deleteCardModalPage, u.deleteCardModal, false, false)
|
||||||
|
@ -165,9 +165,9 @@ func (u *UI) init() error {
|
||||||
return nil
|
return nil
|
||||||
}
|
}
|
||||||
|
|
||||||
// initCardModal initialises the card modal.
|
// initCardForm initialises the card form.
|
||||||
func (u *UI) initCardModal() {
|
func (u *UI) initCardForm() {
|
||||||
doneFunc := func(title, description string, success bool, mode cardModalMode) {
|
doneFunc := func(title, description string, success bool, mode cardFormMode) {
|
||||||
if success {
|
if success {
|
||||||
switch mode {
|
switch mode {
|
||||||
case create:
|
case create:
|
||||||
|
@ -177,11 +177,11 @@ func (u *UI) initCardModal() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
u.pages.HidePage(cardModalPage)
|
u.pages.HidePage(cardFormPage)
|
||||||
u.setColumnFocus()
|
u.setColumnFocus()
|
||||||
}
|
}
|
||||||
|
|
||||||
u.cardModal.setDoneFunc(doneFunc)
|
u.cardForm.setDoneFunc(doneFunc)
|
||||||
}
|
}
|
||||||
|
|
||||||
// initDeleteCardModal initialises the modal for deleting cards.
|
// initDeleteCardModal initialises the modal for deleting cards.
|
||||||
|
|
Loading…
Reference in a new issue