How do you dynamically create inputs in Elm? - functional-programming

I want to create a button which, when pressed, adds a new input (or textarea) to the form.

If you want a text field to be added each time the button is clicked, that means that you want the number of displayed text fields to be equal to the number of times the button has been clicked. We can create a signal that tells us how often the button has been clicked by using the countIf id on the button's clicked signal¹.
If we have a list of inputs, we can use flow to display them beneath (or besides) each other. It is fairly straight forward to write a function that takes a number n and produces a list containing a button and n text fields.
So now we can just use lift to hook that function up to our signal that counts the number of button clicks, combine that with the flow function, and voilà, we have a button that dynamically creates inputs.
(btn, clicked) = Input.button "Click me!"
-- Count how often the clicked signal is true
clicks = countIf id clicked
main = lift2 flow (constant down) $ lift nInputs clicks
nInputs n =
let helper n acc =
if n<=0 then btn : acc
else
-- Input.textField returns a pair containing the field as well as a signal
-- that you can use to access the field's contents. Since I don't actually
-- ever do anything with the contents, I just ignore the signal here.
-- In your real code, you'd probably want to keep the signal around as well.
let (field, _) = Input.textField $ "input " ++ (show n)
in helper (n-1) $ field : acc
in helper n []
¹ Just using count would count how often the signal changes. Since each click causes the signal's value to change to true and then right back to false, that would count 2 changes per click. By using countIf id we only count the number of times the signal is true and thus the number of clicks.

As of Elm 0.8, this can indeed be done. See the release announcement, the Input Groups section of the online reference and a code example.

Related

Populate a form from a select list

I have tried multiple attempts at populating a report from selecting a value in a select list. I have come close but not close enough for the right answer. Does anyone have a solution?
Here is the code
Currently I have a select list that has the option of choosing an employees track and the employees track is populated in the select list based on :app_user.
List of Values
List of values definition:
SELECT track_name AS display_value,
track_id AS return_value
FROM ref_track
ORDER BY 1
Source Value for select list:
SELECT "REF_TRACK"."TRACK_NAME" AS display_value,
"REF_TRACK"."TRACK_ID" AS return_value
FROM "REF_STAFF",
"REF_PLAN",
"WORK_ITEM",
"REF_RELEASE",
"REF_TRACK"
WHERE "REF_RELEASE"."RELEASE_ID" = "REF_PLAN"."RELEASE_ID"
AND "REF_TRACK"."TRACK_ID" = "REF_PLAN"."TRACK_ID"
AND "WORK_ITEM"."WR_ID" = "REF_PLAN"."WORK_ITEM_ID"
AND Nvl("REF_STAFF"."REF_STAFF_TRACK_ID", "REF_PLAN"."TRACK_ID") =
"REF_PLAN"."TRACK_ID"
AND (( "REF_STAFF"."STAFF_USER_ID" = :APP_user ))
I now have a report beneath it that is being populated when the page loads that also generates data based on :App_user.
Report Source Code:
SELECT "REF_PLAN"."PLAN_ID" "PLAN_ID",
"REF_PLAN"."WORK_ITEM_ID" "WORK_ITEM_ID",
"REF_PLAN"."TRACK_ID" "TRACK_ID",
"REF_PLAN"."PLANNED_TOT_HRS" "PLANNED_TOT_HRS",
"REF_PLAN"."PLAN_START_DATE" "PLAN_START_DATE",
"REF_PLAN"."PLAN_END_DATE" "PLAN_END_DATE",
"REF_PLAN"."COMMENTS" "COMMENTS",
"REF_PLAN"."RELEASE_ID" "RELEASE_ID",
"WORK_ITEM"."WR_ID" "WR_ID",
"WORK_ITEM"."WR_NUM" "WR_NUM",
"REF_RELEASE"."RELEASE_ID" "RELEASE_ID2",
"REF_RELEASE"."RELEASE_NUM" "RELEASE_NUM",
"REF_TRACK"."TRACK_ID" "TRACK_ID2",
"REF_TRACK"."TRACK_NAME" "TRACK_NAME",
"REF_STAFF"."REF_STAFF_TRACK_ID" "REF_STAFF_TRACK_ID",
"REF_STAFF"."STAFF_USER_ID" "STAFF_USER_ID"
FROM "REF_STAFF",
"REF_PLAN",
"WORK_ITEM",
"REF_RELEASE",
"REF_TRACK"
WHERE "REF_RELEASE"."RELEASE_ID" = "REF_PLAN"."RELEASE_ID"
AND "REF_TRACK"."TRACK_ID" = "REF_PLAN"."TRACK_ID"
AND "WORK_ITEM"."WR_ID" = "REF_PLAN"."WORK_ITEM_ID"
AND Nvl("REF_STAFF"."REF_STAFF_TRACK_ID", "REF_PLAN"."TRACK_ID") =
"REF_PLAN"."TRACK_ID"
AND (( "REF_STAFF"."STAFF_USER_ID" = :APP_USER ))
AND "REF_PLAN"."TRACK_ID" = :P47_TRACK_LIST
I tried adding this line to pick from the select list.
Is there any way to manipulate this code to be able to select a track from my list and populate data based on the track selection in my report. I would also like to let you know that my select list values are based on a submit page. Please let me know if you can help me. Its frustrating when I look at something for a complete day and cant figure the code out. Also, if there is any other way around it or other options to explore please let me know.
If you want the report to update when you change the selected value of the select list, you can do this in 2 ways. But both come down to the same principle: your selected value has to be submitted to the session state in order for the report to filter on it.
Solution 1: have the select list submit/redirect the page. This will submit the value of your select list to the session, and reloads the page. With the redirect you will fill up the browser history though: select a value a couple of times, and you use 'back' on the browser to navigate back through the choices you made. Or use a submit, this'll reload the page too, but won't fill the history as much. There'll still be one extra history entry though (initial, and first reload, following reloads are not in history).
Find the option by editing your select list, going to the Settings region, and change the page action when value changed.
Solution 2: refresh the report region through a dynamic action. This will not reload the page, it'll 'refresh' just your report. This might be the most userfriendly, it depends if you like a page reload or not :)
You'll need a dynamic option, configured like this:
With these true action details:
And most important, to make sure your selected value is submitted to the session state: add the item to the list of items to be submitted when the report is refreshed.
I set up an example here

how get item from each cell in grid

I have form with grid. I defined dataStore with 2 columns (text and checkBox). Grid.store = defined dataStore. Second column is editable (you can change selection on each checkBox). I have some button, and when I click it, I want to get info about each cell. Example if have gird:
Name1 true
Name2 false
I want get info col[0].row[0] is equal 'Name1', col[0].row[1] is equal 'Name2'.
I try iterate on dataStore but it has only value which I put them by hand. The value which was changed on grid by clicking on checkBox didn't save in dataStore.. My question is how to iterate on grid, how get info about each cell.
To iterate across a store in Ext3, you can use dataStore.each()
Supply it an anonymous function and the parameter it receives will be the current record in the store. The data in the current record can be read by using record_var.get(field_name).
So, for example:
var dataStore = myGrid.getStore();
dataStore.each(function(rec){
alert(rec.get(field1));
}

QTable : how to identify leaving a row

I have a basic question about the usage of QTable. Consider the following example. I would like to create a table with three columns - Name, Age and weight. An "add" button should be able to add a row in the table. The newly added row show be completely edited before leaving (i.e. all the three columns should be edited). Is there a signal which indicates that the complete row is left or the control is no more there in current row?
Such a signal will help me to put some error checking on the input values (e.g. checking if age is a positive no.) in all three columns (also to ensure that none of them is empty). Since this seems to be a very basic requirement, I think I am either missing the signal or the mechanism to support such working.
Instead of QTable you should use QTableWidget or QTableView.
See http://doc.qt.io/qt-4.8/porting4.html#qtable
Now, responding to your question.
Have you tried using the itemSelectionChanged() or itemEntered() signals?
Another way to do it would be to use the signal cellActivated() or the signal fired by your "Add" button - to indicate that the edit has started. Then you setup a connection to catch the next mouse button click or Return key pressed signals to detect the editing ended.
Edit:
I suppose that in your app you subclass QMainWindow or QWidget, if so, reimplement QWidget::mouseMoveEvent and/or QWidget::keyPressedEvent to detect when the left mouse button was clicked ( use keyPressedEvent to detect when the Return Key is pressed ).
You can read more about events in http://doc.qt.io/qt-5/eventsandfilters.html

How to detect doubleClick in QTableView

I'm using PyQt to create a GUI application. In a view inherited from QTableView, need to detect the row the user has selected when they double click a row. The table has sorting, but no editing.
How do I do it?
Note - tried the doubleClicked(int) signal. It is emitted by mouse buttons, not by data cells, so it was never fired. :(
Ian
I dont understand.
The doubleClicked signal of the QTableView has the signature
void doubleClicked ( const QModelIndex & index )
If you connect that signal you should obtain the correct QModelIndex.
No need to use SIGNALs anymore:
self.your_table.doubleClicked.connect(your_function)
"doubleClicked" being inherited from QAbstractItemView.
Once you have the modelIndex, (from Frank's comment above) you can use it to find which cell was double clicked.
def slotDoubleClicked(self, mi):
row = mi.row()
column = mi.column()
You then can use these row and col values to access the table with table.setItem(row, column, newdata) or other table method
Like #regomodo said, you can simply connect your function to the double click via:
self.your_table.doubleClicked.connect(your_function)
Then, if you want to know on which row the user double clicked, you can use the following code:
for idx in self.your_table.selectionModel().selectedIndexes():
row_number = idx.row()
column_number = idx.column()
It will return an integer corresponding to the row or the column number.
There will always only be a single value as the double click remove the previous selection.
If you link your function to a push button or another signal, you can receive a list containing multiple elements selected by the user.
For example, you can easily retrieve a list of all selected rows using this code:
rows = []
for idx in self.your_table.selectionModel().selectedIndexes():
rows.append(idx.row())
rows = list(set(rows))
This will return a list of all selected rows (The set function will also remove any duplicates).
Cheers!

Change item sortorder in gridview - LINQToSQL

I've got a gridview with a list of categories. In the database (MSSQL2008), the category table has a SortOrder(INT) NULL field.
Currently categories are retrieved using:
Galleries.DataSource = From G In DB.GalleryCategories Order By G.SortOrder, G.Name
Now, what I need to be able to do is add "Move Up" and "Move Down" buttons to each row to allow the user to sort the items in an arbitrary way.
My initial thoughts are along the lines of:
Identify ID of selected item.
Identify ID of item before/after selected item.
Swap of identified items in the DB SortOrders.
I would then have make the sortorder NOT NULL and make sure it's initialised to a unique number
I'd appreciate any alternative suggestions / comments on this approach
Many thanks
I have generally seen it done this way, and have done it myself
SortOrder is an int
Each item increases by 10 (so, 10,20,30,40) or suitable increment
To move an item up, subtract 15
To move an item down, add 15
To insert an item, take the target and add/subtract 1
Apply a NormalizeSort() routine which resets the values to even intervals
10,20,25,30,40 => 10,20,30,40,50
That makes it all pretty simple, since inserting something above something else is just:
list.Add( New Item(..., target.SortOrder +1) )
list.NormalizeSort()
// or
item.SortOrder += 11, etc
If you want to make it a decimal, then you can just make it all sequential and just add .1, etc to the sort order and re-normalize again.
// Andrew
I believe
Galleries.AllowSorting = true;
would be far enough ;)

Resources