Project Form

project-form.html

<h2>Project Profile Form</h2>
<md-content class="md-default-theme">
  <div class="spacer"></div>
  <form name="form" class="ab-form" layout="column" novalidate>
    <md-content layout-padding layout="row">
      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="Vote Name"
               ng-model="report.name"
               required/>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">
      <md-input-container flex>
        <label>Sub-Vote Name</label>
        <input type="text"
               name="name"
               ng-model="report.name"
               required/>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">

      <md-input-container flex>
        <label>Project Item Number</label>
        <input type="text"
               name="name"
               ng-model="project.project_item_number"
               required/>
      </md-input-container>

      <md-input-container flex>
        <label>Date of Completion</label>
        <md-datepicker ng-model="payment.payment_date"
                       name="date"
                       md-min-date="minDate"
                       md-max-date="maxDate" required>
        </md-datepicker>
        <div ng-messages="form.date.$error">
          <div ng-message="required">You <b>must</b> select a date.</div>
        </div>
      </md-input-container>

      <md-input-container flex>
        <label>Date of Completion</label>
        <md-datepicker ng-model="payment.payment_date"
                       name="date"
                       md-min-date="minDate"
                       md-max-date="maxDate" required>
        </md-datepicker>
        <div ng-messages="form.date.$error">
          <div ng-message="required">You <b>must</b> select a date.</div>
        </div>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">
      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="Project Name"
               ng-model="report.name"
               required/>
      </md-input-container>

      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="Vote Name"
               ng-model="report.name"
               required/>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">
      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="Project Document Number"
               ng-model="project.document_number"
               required/>
      </md-input-container>
    </md-content>

    <md-input-container flex layout-padding>
      <label>Project Description (Describe major component/activities)</label>
      <textarea ng-model="project.description"
                md-maxlength="150"
                rows="5"
                required
                flex
                md-select-on-focus>
      </textarea>
    </md-input-container>

    <md-content layout-padding layout="column">
      <md-input-container flex>
        <p> MKUKUTA  Cluster and cluster strategy closely related to this project cluster </p>
        <md-radio-group ng-model="data.cluster" layout="column">
          <md-radio-button value="cluster_stratergy" class="md-primary">Cluster Stratergy </md-radio-button>
          <md-radio-button value="mkukuta_cluster">MKUKUTA Cluster Stratergy </md-radio-button>
        </md-radio-group>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">
      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="Vote Name"
               ng-model="report.name"
               required/>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">
      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="Implementation status of project"
               ng-model="report.name"
               required/>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="column">
      <md-input-container flex>
        <p>Project Coverage</p>
        <md-radio-group ng-model="data.coverage" layout="column">
          <md-radio-button value="nationalwide" class="md-primary">Cluster Stratergy </md-radio-button>
          <md-radio-button value="country">National wide/More than one region</md-radio-button>
          <md-radio-button value="regional">Regional</md-radio-button>
          <md-radio-button value="destrict">Destrict</md-radio-button>
        </md-radio-group>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="column">
      <md-input-container flex>
        <p>Geographic Location of Project</p>
        <md-radio-group ng-model="data.location" layout="column">
          <md-radio-button value="national_wide" class="md-primary">National Wide</md-radio-button>
          <md-radio-button value="regional_wide">Regional Wide</md-radio-button>
          <md-radio-button value="district">District</md-radio-button>
          <md-radio-button value="lga">LGA</md-radio-button>
        </md-radio-group>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="column">
      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="Feasibility Study Number of Project"
               ng-model="report.name"
               required/>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">
      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="Project Document Number"
               ng-model="report.name"
               required/>
      </md-input-container>

      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="Project Description"
               ng-model="report.name"
               required/>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">
      <md-input-container flex>
        <input type="text"
               name="name"
               placeholder="MKUKUTA  Cluster and cluster strategy closely related to this project cluster"
               ng-model="report.name"
               required/>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">
      <md-input-container flex>
        <label>Planned Starting Date</label>
        <md-datepicker ng-model="project.planned_starting_date"
                       name="date"
                       md-min-date="minDate"
                       md-max-date="maxDate" required>
        </md-datepicker>
        <div ng-messages="form.date.$error">
          <div ng-message="required">You <b>must</b> select a date.</div>
        </div>
      </md-input-container>

      <md-input-container flex>
        <label>Actual Starting Date</label>
        <md-datepicker ng-model="project.project_actual_starting_date"
                       name="date"
                       md-min-date="minDate"
                       md-max-date="maxDate" required>
        </md-datepicker>
        <div ng-messages="form.date.$error">
          <div ng-message="required">You <b>must</b> select a date.</div>
        </div>
      </md-input-container>

      <md-input-container flex>
        <label>Planned Completion Date</label>
        <md-datepicker ng-model="project.project_planned_completion_date"
                       name="date"
                       md-min-date="minDate"
                       md-max-date="maxDate" required>
        </md-datepicker>
        <div ng-messages="form.date.$error">
          <div ng-message="required">You <b>must</b> select a date.</div>
        </div>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="row">
      <md-input-container flex>
        <label>Latest Revised Completion Date</label>
        <md-datepicker ng-model="project.project_revised_completion_date"
                       name="date"
                       md-min-date="minDate"
                       md-max-date="maxDate" required>
        </md-datepicker>
        <div ng-messages="form.date.$error">
          <div ng-message="required">You <b>must</b> select a date.</div>
        </div>
      </md-input-container>
    </md-content>

    <md-content layout-padding layout="column">
      <md-input-container flex>
        <p>Status of project funding in Development Budget</p>
        <md-radio-group ng-model="data.status_of_project_funding" layout="column">
          <md-radio-button value="adequate_funds" class="md-primary">Adequate funds included to cover remaining costs</md-radio-button>
          <md-radio-button value="inadequate_funds">Region</md-radio-button>
          <md-radio-button value="adequate_funds_outside_govt">Adequate funds outside Government budget exist to cover remaining cost</md-radio-button>
        </md-radio-group>
      </md-input-container>
    </md-content>
    <md-button ng-disabled="false" class="md-raised md-primary form-button" ng-click="create(payment)">Create </md-button>
  </form>
</md-content>