Projects Manage View - Part 1

This will be a longer two page task, but will cover various components that have not been covered yet including AJAX and auto-complete components. When viewing the tables of projects within the Disaster Relief->Projects menu there is a Manage button which currently goes to a 404 "Page Not Found" template. Let's go ahead and develop that page out.

Within terminal, run the following create view CLI command:

apex create view disaster admin/disaster/projects_manage

As always, this will generate both a .html and .php file for the view.

/views/html/admin/disaster/projects_manage.html

Open the newly generated file at /views/html/admin/disaster/projects_manage.html and and replace it with the following contents:

<h1>Manage Project</h1>

<s:form action="/admin/disaster/projects">
<input type="hidden" name="project_id" value="~project.id~">

<s:tab_control>

    <s:tab_page name="General">
        <h3>General</h3>

        <s:form_table>
            <s:ft_label label="ID" value="~project.id~">
            <s:ft_select name="status" value="~project.status~" data_source="hash.disaster.project_status">
            <s:ft_label label="Date Created" value="~project.created_at~">
            <s:ft_label label="Last Updated" value="~project.updated_at~">
            <s:ft_seperator label="Description">
            <s:ft_textbox name="title" value="~project.title~">
            <s:ft_textarea name="description">~project.description~</s:ft_textarea>
            <s:ft_submit value="update" label="Update Project Details">
        <s:form_table>

    </s:tab_page>

    <s:tab_page name="Assigned Volunteers">
        <h3>Assigned Volunteers</h3>

        <s:function alias="display_table" table="disaster.assignees" project_id="~project.id~"><br />

            <h5>Add Assignee</h5>

        <s:form_table>
            <s:ft_twocol label="User">
                <s:function alias="display_auto_complete" autocomplete="users.find" name="user"> 
            </s:ft_twocol>
            <s:ft_twocol align="center">
                <s:button href="javascript:ajaxSend('disaster/add_assignee', 'project_id=~project.id~');" label="Add Assignee">
            </s:ft_twocol>
        </s:form_table>

    </s:tab_page>

</s:tab_control>

The above code designs a two page tab control, one which shows the general information on the project, and the other that contains a data table that both, lists every volunteer assigned to the project and allows the administrator to add new volunteers. Take note of the line:

[data-line=33]
<s:function alias="display_auto_complete" autocomplete="users.find" name="user">

This will be replaced with a auto-complete list so when you start typing a username or e-mail address, a dropdown list will appear with suggestions. The above code also contains the line:

[data-line=36]
<s:button href="javascript:ajaxSend('disaster/add_assignee', 'project_id=~project.id~');" label="Add Assignee">

We will develop the actual AJAX function on the next page, but the above Javascript line will call the necessary AJAX function to add a volunteer to the project.

/views/php/admin/disaster/projects_manage.php

Now open the /views/php/admin/disaster/projects_manage.php file and replace its contents with the below:

<?php
declare(strict_types = 1);

namespace Views\admin\disaster;

use Apex\Svc\{View, App, Convert};
use App\Disaster\Models\Project;

/**
 * Render the template.  All methods below are optional, may be 
 * removed as desired, and all methods support method based dependency injection.
 */
class projects_manage
{

    /**
     * Render
     */
    public function render(View $view, App $app, Convert $convert):void
    {

        // Look for project
        $project_id = $app->get('project_id');
        if (!$proj = Project::whereId($project_id)) {
            throw new \Exception("No project exists with id# $project_id");
        }

        // Get vars
        $vars = $proj->toArray();
        $vars['created_at'] = $convert->date($vars['created_at'], true);
        $vars['updated_at'] = $vars['updated_at'] === null ? '' : $convert->date($row['updated_at'], true);

        // Template variables
        $view->assign('project', $vars);
    }

}

This view class simply retrieves the project using the project_id query string variable, formats it as necessary, then assigns the necessary template variables. The view won't work in its current form as there's still some components that need to be developed out which we will do on the next page.