reactjs - How to implement complex form and table in React @netxjslatest and shadcnui - Stack Overflow

admin管理员组

文章数量:1025278

I am trying to port to React/nextjs@latest + shadcn/ui an old php app. This app allows students to enroll into assembly activities which take place at certain days and hours. Each day and hour is a block, and below activities are grouped under one column. This picture could give a better idea of the final result: Image with two blocks and two activities each I must be able to add as many blocks as needed, and to add in every block as many activities as needed.

I've thought about using the useFildArray hook in react-hook form which is integrated with shadcn/ui Form. I'm stuck with the columns/row stuff. It is not clear to me how one can actually bring together in shadcn/ui Table or even DataTable and Form together to achieve a result that in plain html is after all not so difficult to pull off. And how to dynamically add columns (i.e. blocks) and activities elements underneath? The form and table are in a panel body using bootstrap panel css. That table has only three rows, 1 for the block definitions, 1 containing all the activities (each of which is a <div> with input items inside a td), and the final one containing an input type="number" to allow the admin to add new activities (i.e. a new td in the second table row). I enclose here a code snippet:

<form action="/cogestione/imposta.php" method="post">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Modifica tabella attività</h3>
        </div>
        <div class="panel-body">
            <label>Aggiungi <input type="number" min="0" name="newBlocks" value="0"> nuovi blocchi</label>
            <table id="ActivityTable" class="table table-bordered">
                <tbody>
                    <tr>
                        <th class="active"><input type="hidden" name="block[33][id]" value="33">
                            <div class="input-group"><span class="checkbox input-group-addon"><label><input
                                            type="checkbox" id="block-delete-33"
                                            name="block[33][delete]">DEL</label></span><input class="form-control"
                                    type="text" size="35" name="block[33][title]" id="block-title-33" value="6/2 1a f.">
                            </div>
                        </th>
                        ... other blocks
                    </tr>
                    <tr> // second row for activities
                        <td id="block-33">
                            <div class="set-activity" id="activity-344">
                                <input type="hidden" name="activity[344][id]" value="344">
                                <input type="hidden" name="activity[344][block]" value="33">
                                <div class="input-group"><span class="checkbox input-group-addon"><label
                                            for="activity-delete-344"><input id="activity-delete-344"
                                                name="activity[344][delete]" type="checkbox">DEL</label></span><input
                                        class="form-control activity-set-title" type="text" id="activity-title-344"
                                        name="activity[344][title]"
                                        value="OR - Intelligenza artificiale, etica e futuro del lavoro (prof. S. e Associazione Diplomatici)"><br>
                                </div>
                                <div class="input-group activity-size"><span
                                        class="input-group-addon">Posti:</span><input class="form-control" type="number"
                                        min="0" id="activity-max-344" name="activity[344][max]" value="180">
                                    <span class="checkbox input-group-addon"><label for="activity-vm-344"><input
                                                id="activity-vm-344" name="activity[344][vm]"
                                                type="checkbox">VM18</label></span>
                                </div>
                                <div class="input-group"><span class="input-group-addon">Luogo:</span><input
                                        class="form-control activity-set-location" type="text"
                                        id="activity-location-344" name="activity[344][location]" value="femminile"><br>
                                </div><textarea class="form-control" rows="4" name="activity[344][description]"
                                    placeholder="Descrizione per &quot;OR - Intelligenza artificiale, etica e futuro del lavoro (prof. S. e Associazione Diplomatici)&quot;">Il prof. S., ex direttore del giornale ... ed ex assessore alla Cultura del Comune di Milano, tratta insieme ad Associazione Diplomatici il tema della relazione tra intelligenza artificiale, etica e futuro del lavoro. Dove potrà arrivare l'AI? Quali sfide dovremo affrontare noi giovani?</textarea>
                            </div>
                        </td>
                        ... other activities for each block
                    </tr>
                    <tr> // 3rd row: add new activities
                        <td><label>Aggiungi <input class="form-control" type="number" min="0" name="block[33][newRows]"
                                    value="0"> nuove attività</label></td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-primary" type="submit" name="submitActivities">Modifica attività</button>
        </div><!-- panel-body -->
    </div><!-- panel -->
</form>

So far using a nested loop I was able so far to reproduce the form how it appears in the php app, without using any <Table/> or <DataTable/> from shadcn, but only formatting the <FormField(s)/> with flex. Of course I have the data in the same DB that the php app pulls the data from. My result is absolutely useless (though encouraging) because I must allow the admin to dynamically add blocks and activities and fill out all the data.

I hope the description of the problem is clear enough (without code). What I am asking for is just some advice on how to proceed

I am trying to port to React/nextjs@latest + shadcn/ui an old php app. This app allows students to enroll into assembly activities which take place at certain days and hours. Each day and hour is a block, and below activities are grouped under one column. This picture could give a better idea of the final result: Image with two blocks and two activities each I must be able to add as many blocks as needed, and to add in every block as many activities as needed.

I've thought about using the useFildArray hook in react-hook form which is integrated with shadcn/ui Form. I'm stuck with the columns/row stuff. It is not clear to me how one can actually bring together in shadcn/ui Table or even DataTable and Form together to achieve a result that in plain html is after all not so difficult to pull off. And how to dynamically add columns (i.e. blocks) and activities elements underneath? The form and table are in a panel body using bootstrap panel css. That table has only three rows, 1 for the block definitions, 1 containing all the activities (each of which is a <div> with input items inside a td), and the final one containing an input type="number" to allow the admin to add new activities (i.e. a new td in the second table row). I enclose here a code snippet:

<form action="/cogestione/imposta.php" method="post">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Modifica tabella attività</h3>
        </div>
        <div class="panel-body">
            <label>Aggiungi <input type="number" min="0" name="newBlocks" value="0"> nuovi blocchi</label>
            <table id="ActivityTable" class="table table-bordered">
                <tbody>
                    <tr>
                        <th class="active"><input type="hidden" name="block[33][id]" value="33">
                            <div class="input-group"><span class="checkbox input-group-addon"><label><input
                                            type="checkbox" id="block-delete-33"
                                            name="block[33][delete]">DEL</label></span><input class="form-control"
                                    type="text" size="35" name="block[33][title]" id="block-title-33" value="6/2 1a f.">
                            </div>
                        </th>
                        ... other blocks
                    </tr>
                    <tr> // second row for activities
                        <td id="block-33">
                            <div class="set-activity" id="activity-344">
                                <input type="hidden" name="activity[344][id]" value="344">
                                <input type="hidden" name="activity[344][block]" value="33">
                                <div class="input-group"><span class="checkbox input-group-addon"><label
                                            for="activity-delete-344"><input id="activity-delete-344"
                                                name="activity[344][delete]" type="checkbox">DEL</label></span><input
                                        class="form-control activity-set-title" type="text" id="activity-title-344"
                                        name="activity[344][title]"
                                        value="OR - Intelligenza artificiale, etica e futuro del lavoro (prof. S. e Associazione Diplomatici)"><br>
                                </div>
                                <div class="input-group activity-size"><span
                                        class="input-group-addon">Posti:</span><input class="form-control" type="number"
                                        min="0" id="activity-max-344" name="activity[344][max]" value="180">
                                    <span class="checkbox input-group-addon"><label for="activity-vm-344"><input
                                                id="activity-vm-344" name="activity[344][vm]"
                                                type="checkbox">VM18</label></span>
                                </div>
                                <div class="input-group"><span class="input-group-addon">Luogo:</span><input
                                        class="form-control activity-set-location" type="text"
                                        id="activity-location-344" name="activity[344][location]" value="femminile"><br>
                                </div><textarea class="form-control" rows="4" name="activity[344][description]"
                                    placeholder="Descrizione per &quot;OR - Intelligenza artificiale, etica e futuro del lavoro (prof. S. e Associazione Diplomatici)&quot;">Il prof. S., ex direttore del giornale ... ed ex assessore alla Cultura del Comune di Milano, tratta insieme ad Associazione Diplomatici il tema della relazione tra intelligenza artificiale, etica e futuro del lavoro. Dove potrà arrivare l'AI? Quali sfide dovremo affrontare noi giovani?</textarea>
                            </div>
                        </td>
                        ... other activities for each block
                    </tr>
                    <tr> // 3rd row: add new activities
                        <td><label>Aggiungi <input class="form-control" type="number" min="0" name="block[33][newRows]"
                                    value="0"> nuove attività</label></td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-primary" type="submit" name="submitActivities">Modifica attività</button>
        </div><!-- panel-body -->
    </div><!-- panel -->
</form>

So far using a nested loop I was able so far to reproduce the form how it appears in the php app, without using any <Table/> or <DataTable/> from shadcn, but only formatting the <FormField(s)/> with flex. Of course I have the data in the same DB that the php app pulls the data from. My result is absolutely useless (though encouraging) because I must allow the admin to dynamically add blocks and activities and fill out all the data.

I hope the description of the problem is clear enough (without code). What I am asking for is just some advice on how to proceed

本文标签： reactjsHow to implement complex form and table in React netxjslatest and shadcnuiStack Overflow