FormBuilder - Hide configuration options that do not apply to certain form types
[civicrm-core.git] / ext / afform / admin / ang / afGuiEditor / config-form.html
index 46acccdc8ff4272867cc47bb8e5153f7c3c289b0..56ad2334c454a2a3df2758011da7827595a297d8 100644 (file)
 <ng-form name="config_form">
 
-<div class="form-group">
-  <label for="af_config_form_title">
-    {{:: ts('Title:') }} <span class="crm-marker">*</span>
-  </label>
-  <input ng-model="afform.title" class="form-control" id="af_config_form_title" required title="{{:: ts('Required') }}" />
-</div>
-
-<div class="form-group">
-  <label for="af_config_form_description">
-    {{:: ts('Description:') }}
-  </label>
-  <textarea ng-model="afform.description" class="form-control" id="af_config_form_description"></textarea>
-  <p class="help-block">{{:: ts('Semi-private description about the form\'s purpose.') }}</p>
-  <!-- "Semi-private": not generally public, but not audited for secrecy -->
-</div>
-
-<div class="form-group" ng-class="{'has-error': !!config_form.server_route.$error.pattern}">
-  <label for="af_config_form_server_route">
-    {{:: ts('Page:') }}
-  </label>
-  <input ng-model="afform.server_route" name="server_route" class="form-control" id="af_config_form_server_route" pattern="^civicrm\/[-0-9a-zA-z\/_]+$" onfocus="this.value = this.value || 'civicrm/'" onblur="if (this.value === 'civicrm/') this.value = ''" title="{{:: ts('Path must begin with &quot;civicrm/&quot;') }}">
-  <p class="help-block">{{:: ts('Expose the form as a standalone webpage. (Example: "civicrm/my-form")') }}</p>
-</div>
-
-<div class="form-group" ng-if="!!afform.server_route">
-  <label for="af_config_form_is_public">
-    <input type="checkbox" id="af_config_form_is_public" ng-model="afform.is_public">
-    {{:: ts('Enable frontend styling') }}
-  </label>
-  <p class="help-block">{{ts('The general look/feel should match the frontend')}}</p>
-</div>
-
-<div class="form-group">
-  <label for="af_config_form_is_dashlet">
-    <input type="checkbox" id="af_config_form_is_dashlet" ng-model="afform.is_dashlet">
-    {{:: ts('Enable dashlet') }}
-  </label>
-  <p class="help-block">{{:: ts('Allow backend users to embed the form on the dashboard.') }}</p>
-</div>
-
-<div class="form-group">
-  <label for="af_config_form_permission">
-    {{:: ts('Permission:') }}
-  </label>
-  <input ng-model="afform.permission" class="form-control" id="af_config_form_permission" crm-ui-select="{data: editor.meta.permissions}" />
-  <p class="help-block">{{:: ts('What permission is required to use this form?') }}</p>
-</div>
+  <div class="form-group">
+    <label for="af_config_form_title">
+      {{:: ts('Title') }} <span class="crm-marker">*</span>
+    </label>
+    <p class="help-block" ng-if=":: editor.afform.type !== 'block'">{{:: ts('Public title (usually displayed at the top of the form).') }}</p>
+    <input ng-model="editor.afform.title" class="form-control" id="af_config_form_title" required title="{{:: ts('Required') }}" />
+  </div>
 
+  <div class="form-group">
+    <label for="af_config_form_description">
+      {{:: ts('Description') }}
+    </label>
+    <textarea ng-model="editor.afform.description" class="form-control" id="af_config_form_description"></textarea>
+    <p class="help-block">{{:: ts("Internal note about the form's purpose (not displayed on form).") }}</p>
+    <!-- Description is "semi-private": not generally public, but not audited for secrecy -->
+  </div>
+
+  <!-- Form permissions do not apply to blocks -->
+  <div class="form-group" ng-if=":: editor.afform.type !== 'block'">
+    <label for="af_config_form_permission">
+      {{:: ts('Permission') }}
+    </label>
+    <input ng-model="editor.afform.permission" class="form-control" id="af_config_form_permission" crm-ui-select="{data: editor.meta.permissions}" />
+    <p class="help-block">{{:: ts('What permission is required to use this form?') }}</p>
+  </div>
+
+  <!-- Placement options do not apply to blocks -->
+  <fieldset ng-if=":: editor.afform.type !== 'block'">
+    <legend>{{:: ts('Placement') }}</legend>
+
+    <div class="form-group" ng-class="{'has-error': !!config_form.server_route.$error.pattern}">
+      <label for="af_config_form_server_route">
+        {{:: ts('Page') }}
+      </label>
+      <input ng-model="editor.afform.server_route" name="server_route" class="form-control" id="af_config_form_server_route" pattern="^civicrm\/[-0-9a-zA-Z\/_]+$" onfocus="this.value = this.value || 'civicrm/'" onblur="if (this.value === 'civicrm/') this.value = ''" title="{{:: ts('Path must begin with &quot;civicrm/&quot;') }}">
+      <p class="help-block">{{:: ts('Expose the form as a standalone webpage. (Example: "civicrm/my-form")') }}</p>
+    </div>
+
+    <div class="form-group" ng-if="!!editor.afform.server_route">
+      <label>
+        <input type="checkbox" ng-model="editor.afform.is_public">
+        {{:: ts('Accessible on front-end of website') }}
+      </label>
+    </div>
+
+    <div class="form-group" ng-if="!!editor.afform.server_route">
+      <label>
+        <input type="checkbox" ng-model="editor.afform.is_token">
+        {{:: ts('Provide Email Token') }}
+      </label>
+      <p class="help-block">{{:: ts('Allows CiviMail authors to easily link to this page') }}</p>
+    </div>
+
+    <div class="form-group">
+      <label>
+        <input type="checkbox" ng-model="editor.afform.is_dashlet">
+        {{:: ts('Add to Dashboard') }}
+      </label>
+      <p class="help-block">{{:: ts('Allow CiviCRM users to add the form to their home dashboard.') }}</p>
+    </div>
+
+    <div class="form-group">
+      <div class="form-inline">
+        <label>
+          <input type="checkbox" ng-checked="editor.afform.contact_summary" ng-click="editor.toggleContactSummary()">
+          {{:: ts('Add to Contact Summary Page') }}
+        </label>
+        <select class="form-control" ng-model="editor.afform.contact_summary" ng-if="editor.afform.contact_summary">
+          <option value="block">{{:: ts('As Block') }}</option>
+          <option value="tab">{{:: ts('As Tab') }}</option>
+        </select>
+      </div>
+      <p class="help-block">{{:: ts('Placement can be configured using the Contact Layout Editor.') }}</p>
+    </div>
+    <div class="form-group" ng-if="editor.afform.contact_summary && editor.searchDisplay && editor.searchFilters.length > 1">
+      <div class="form-inline">
+        <label for="af_config_form_search_filters">
+          {{:: ts('Filter on:') }}
+        </label>
+        <select class="form-control" id="af_config_form_search_filters" ng-model="editor.searchDisplay.filters">
+          <option ng-repeat="option in editor.searchFilters" value="{{ option.key }}">{{ option.label }}</option>
+        </select>
+      </div>
+      <p class="help-block">{{:: ts('Choose which contact from the search should match the contact being viewed.') }}</p>
+    </div>
+  </fieldset>
+
+  <!--  Submit actions are only applicable to form types with a submit button (exclude blocks and search forms) -->
+  <fieldset ng-if=":: editor.afform.type === 'custom'">
+    <legend>{{:: ts('Submit Actions') }}</legend>
+
+    <div class="form-group" >
+      <label>
+        <input type="checkbox" ng-model="editor.afform.create_submission" >
+        {{:: ts('Log Submissions') }}
+      </label>
+      <p class="help-block">{{:: ts('Keep a log of the date, time, user, and items saved by each form submission.') }}</p>
+    </div>
+
+    <div class="form-group" ng-class="{'has-error': !!config_form.redirect.$error.pattern}">
+      <label for="af_config_redirect">
+        {{:: ts('Post-Submit Page') }}
+      </label>
+      <input ng-model="editor.afform.redirect" name="redirect" class="form-control" id="af_config_redirect" title="{{:: ts('Post-Submit Page') }}" pattern="^((http|https):\/\/|\/|civicrm\/)[-0-9a-zA-Z\/_.]\S+$" title="{{:: ts('Post-Submit Page must be either an absolute url, a relative url or a path starting with CiviCRM') }}"/>
+      <p class="help-block">{{:: ts('Enter a URL or path that the form should redirect to following a successful submission.') }}</p>
+    </div>
+  </fieldset>
 </ng-form>