Project.html 11 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<div class="crm-vol-project" crm-vol-perm-to-class>
  <div crm-ui-debug="project"></div>
  <div crm-ui-debug="relationships"></div>
  <div crm-ui-debug="profiles"></div>
  <div crm-ui-debug="locBlock"></div>
  <div crm-ui-debug="campaigns"></div>
  <div crm-ui-debug="countries"></div>
  <div crm-ui-debug="supporting_data"></div>
  <div crm-ui-debug="relationships"></div>
  <div id="backboneIncludes"></div>

  <form class="crm-form-block" name="projectForm" crm-ui-id-scope>

    <!-- temporarily hiding this as I'm not sure the intent and it looks unfinished -->
    <div class="help" ng-hide="1"></div>

    <fieldset class="crm-vol-project-settings" crm-ui-id-scope>
      <legend>{{ts("Project Settings")}}</legend>
      <div class="crm-vol-title" crm-ui-field="{name: 'projectForm.title', title: ts('Project Title')}">
        <input class="big crm-form-text" crm-ui-id="projectForm.title" ng-model="project.title" ng-required="true" />
      </div>

      <div class="crm-vol-description" crm-ui-field="{name: 'projectForm.description', title: ts('Project Description')}">
        <p>
          <span class="crm-button crm-icon-button crm-vol-button crm-vol-preview-description crm-vol-project-preview-description" ng-click="previewDescription()">
            <span class="crm-button-icon ui-icon-comment"> </span>
            <span class="crm-button-text">{{ts('Preview Description')}}</span>
          </span>
        </p>
        <div id=crm-vol-form-textarea-wrapper>
          <textarea crm-ui-richtext class="big crm-form-textarea" crm-ui-id="projectForm.description" ng-model="project.description"></textarea>
        </div>
      </div>

      <div class="crm-vol-campaign" crm-ui-field='{name: "projectForm.campaign_id", title: ts("Campaign")}'>
        <select class="big crm-form-select crm-vol-campaign" crm-ui-select="{placeholder: '', allowClear:true}"
37
                ng-options="key as value.title for (key , value) in campaigns track by key" ng-model="project.campaign_id">
38 39 40 41 42 43 44
          <option />
        </select>
      </div>

      <div class="crm-vol-location" crm-ui-field='{name: "projectForm.locBlock", title: ts("Location")}'>
        <select class="big crm-form-select crm-vol-location-block-id"
                crm-ui-select="{placeholder: '', allowClear:true}"
45
                ng-options="key as value for (key , value) in locationBlocks track by key" ng-model="project.loc_block_id">
46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
          <option />
        </select>
        <div id="crm-vol-location-block" class="crm-vol-extra-top" crm-ui-accordion="{title: ts('Edit Location'), collapsed: project.loc_block_id !==0}" ng-hide="!project.loc_block_id">
          <div class="status" ng-show="locBlock.count_loc_used > 0">{{ts("This location is used by other events/projects. Modifying location information will change values for all events/projects")}}</div>
          <fieldset class="crm-vol-location-address">
            <legend>{{ts("Address")}}</legend>
            <div class="crm-vol-location-street" crm-ui-field='{name: "projectForm.locBlock.street_address", title: ts("Street Address")}'>
              <input size="30" crm-ui-id="projectForm.locBlock.street_address"  ng-model="locBlock.address.street_address" />
            </div>
            <div class="crm-vol-location-sup1" crm-ui-field='{name: "projectForm.locBlock.supplemental_address_1", title: ts("Supplemental Address 1")}'>
              <input size="30" crm-ui-id="projectForm.locBlock.supplemental_address_1" ng-model="locBlock.address.supplemental_address_1" />
            </div>
            <div class="crm-vol-location-sup2" crm-ui-field='{name: "projectForm.locBlock.supplemental_address_2", title: ts("Supplemental Address 2")}'>
              <input size="30" crm-ui-id="projectForm.locBlock.supplemental_address_2" ng-model="locBlock.address.supplemental_address_2" />
            </div>
            <div class="crm-vol-location-city" crm-ui-field='{name: "projectForm.locBlock.city", title: ts("City")}'>
              <input crm-ui-id="projectForm.locBlock.city" ng-model="locBlock.address.city" />
            </div>
            <div class="crm-vol-location-postal" crm-ui-field='{name: "projectForm.locBlock.postal", title: ts("Postal Code - Suffix")}'>
              <input size="9" crm-ui-id="projectForm.locBlock.postal" ng-model="locBlock.address.postal_code" />
              -
              <input size="5" crm-ui-id="projectForm.locBlock.postal_code_suffix" ng-model="locBlock.address.postal_code_suffix" />
            </div>
            <div class="crm-vol-location-country_id" crm-ui-field="{name: 'projectForm.locBlock.country_id', title: ts('Country')}">
              <select
                class="big crm-form-select"
                crm-ui-id="projectForm.locBlock.country_id"
                crm-ui-select="{allowClear: false}"
                ng-change="locBlockDirty()"
                ng-model="locBlock.address.country_id"
76
                ng-options="k as v.name for (k, v) in countries track by k">
77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186
              </select>
            </div>
          </fieldset>
          <fieldset class="crm-vol-location-phone">
            <legend>{{ts("Phone")}}</legend>
            <div class="crm-vol-location-phone1" crm-ui-field='{name: "projectForm.locBlock.phone1", title: ts("Phone 1")}'>
              <input crm-ui-id="projectForm.locBlock.phone1"  ng-model="locBlock.phone.phone" />
              {{ts("ext.")}} <input size="5"  ng-model="locBlock.phone.phone_ext" />
              <select crm-ui-select="{width: '100', allowClear: true}" ng-model="locBlock.phone.phone_type_id">
                <option />
                <option ng-repeat="(pTypeId, pType) in phone_types" value="{{pTypeId}}">{{pType}}</option>
              </select>
            </div>
            <div class="crm-vol-location-phone2" crm-ui-field='{name: "projectForm.locBlock.phone2", title: ts("Phone 2")}'>
              <input crm-ui-id="projectForm.locBlock.phone2" ng-model="locBlock.phone_2.phone" />
              {{ts("ext.")}} <input size="5" ng-model="locBlock.phone_2.phone_ext" />
              <select crm-ui-select="{width: '100', allowClear: true}" ng-model="locBlock.phone_2.phone_type_id">
                <option />
                <option ng-repeat="(pTypeId, pType) in phone_types" value="{{pTypeId}}">{{pType}}</option>
              </select>
            </div>
          </fieldset>
          <fieldset class="crm-vol-location-email">
            <legend>{{ts("Email")}}</legend>
            <div class="crm-vol-location-email1" crm-ui-field='{name: "projectForm.locBlock.email1", title: ts("Email 1")}'>
              <input size="30" type="email" crm-ui-id="projectForm.locBlock.email1" ng-model="locBlock.email.email" />
            </div>
            <div class="crm-vol-location-email2" crm-ui-field='{name: "projectForm.locBlock.email2", title: ts("Email 2")}'>
              <input size="30" type="email" crm-ui-id="projectForm.locBlock.email2" ng-model="locBlock.email_2.email" />
            </div>
          </fieldset>
        </div>
      </div>


      <div class="crm-vol-is_active" crm-ui-field="{name: 'projectForm.is_active', title: ts('Is this Project Active?')}">
        <input type="checkbox" crm-ui-id="projectForm.is_active" ng-model="project.is_active" />
      </div>
    </fieldset>

    <fieldset class="crm-vol-relationships" ng-if="showRelationshipBlock" crm-ui-id-scope>
      <legend>{{ts("Relationships")}}</legend>
      <div ng-repeat="relType in relationship_types">
        <div crm-ui-field="{name: projectForm[relType.name], title: ts(relType.label)}" ng-class="'crm-vol-rel-' + relType.name">
          <input crm-ui-id="projectForm[relType.name]" crm-entityref="{entity: 'Contact', select: {allowClear:true, multiple: true}}" ng-model="relationships[relType.value]" />
          <div class="description" ng-show="relType.description">{{relType.description}}</div>
        </div>
      </div>
    </fieldset>

    <fieldset class="crm-vol-profiles" ng-if="showProfileBlock">
      <legend>{{ts("Volunteer Registration")}}</legend>
      <div class="help">
        <p>
          {{ts("What questions would you like to ask your volunteers? Select one or more Profiles below to tailor the registration forms for this project.")}}
        </p>
        <p>
          {{ts('You may create up to two sign up forms for a volunteer project: one for individual registrations and another for group registrations. The "Use For" field specifies whether the Profile should be used for individual registrations, group registrations, or both. For group registrations, it is recommended that a single, short Profile be used.')}}
        </p>
      </div>
      <div id="org_civicrm_volunteer-sign-up-profiles">
        <div ng-repeat="profile in profiles" class='crm-profile-selector-container'>
          <a ng-click="removeProfile($index)" class="crm-hover-button crm-button-remove-profile">
            <span class="icon ui-icon-circle-close"></span>
          </a>

          <div class="crm-profile-selector-wrapper">
            <input ng-if="supporting_data.use_profile_editor" crm-profile-selector="{}"
                   ng-model="profile.uf_group_id" ng-change="validateProfileSelections()"/>

            <select ng-if="!supporting_data.use_profile_editor" class="big crm-form-select crm-vol-simple-profile-selector"
                    crm-ui-select="{placeholder: '', allowClear:true}" ng-change="validateProfileSelections()"
                    ng-options="item as item.title for item in supporting_data.profile_list track by item.id" ng-model="profile.uf_group_id">
              <option />
            </select>
          </div>

          <div class="crm-volunteer-profile-use-type">
            <label>{{ts("Use For:")}}</label>
            <select ng-model="profile.module_data.audience" crm-ui-select="{}" ng-change="validateProfileSelections()">
              <option ng-repeat="audience in supporting_data.profile_audience_types" value="{{audience.type}}">{{audience.label}}</option>
            </select>
          </div>

          <hr />
        </div>
      </div>
      <a ng-click="addProfile()" class="crm-hover-button crm-button-add-profile" style="display: inline-block;">
        <span class="icon ui-icon-plus"></span>add another profile
      </a>
    </fieldset>

    <div class="crm-submit-buttons crm-vol-project-submit-buttons">
      <span class="crm-button crm-icon-button crm-vol-button crm-vol-save-next crm-vol-project-save-next" ng-click="saveAndNext()">
        <span class="crm-button-icon ui-icon-triangle-1-e"> </span>
        <span class="crm-button-text">{{saveAndNextLabel}}</span>
      </span>
      <span ng-show="formContext === 'standAlone'" class="crm-button crm-icon-button crm-vol-button crm-vol-save-done crm-vol-project-save-done" ng-click="saveAndDone()">
        <span class="crm-button-icon ui-icon-circle-check"> </span>
        <span class="crm-button-text">{{ts('Save and Done')}}</span>
      </span>
      <span class="crm-button crm-icon-button crm-button-type-cancel crm-vol-button crm-vol-cancel crm-vol-project-cancel" ng-click="cancel()">
        <span class="crm-button-icon ui-icon-close"> </span>
        <span class="crm-button-text">{{ts('Cancel')}}</span>
      </span>
    </div>

  </form>

</div>