angular-forms-refactor/survey-editor.html at master · yearofmoo/angular-forms-refactor · GitHub

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
37
38
39
40
41
42
43
44
45
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
76
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
<survey-editor-form model="pageCtrl.data" on-valid-submit="pageCtrl.onSave(pageCtrl.data)">
  <header class="row page-header">
    <h1>
      <span ng-hide="pageCtrl.data.id">
        Create New Survey
      </span>
      <span ng-show="pageCtrl.data.id">
        Update Existing Survey
      </span>
    </h1>
  </header>

  <div class="row">
    <div class="field six columns">
      <label>Title:</label>
      <input type="text" ng-model="pageCtrl.data.title" name="title" required class="input" />
      <div class="errors" ng-if="surveyForm.$submitted || surveyForm.title.$touched" ng-messages="surveyForm.title.$error" ng-messages-include="errors.html"></div>
    </div>

    <div class="field six columns">
      <label>Publish Date:</label>
      <input type="date" ng-model="pageCtrl.data.date" name="publish_date" required class="input" />
      <div class="errors" ng-if="surveyForm.$submitted || surveyForm.publish_date.$touched" ng-messages="surveyForm.publish_date.$error" ng-messages-include="errors.html"></div>
    </div>
  </div>

  <div class="row">
    <div class="field">
      <label>Description:</label>
      <textarea ng-model="pageCtrl.data.description" name="description" required class="input textarea"></textarea>
      <div class="errors" ng-if="surveyForm.$submitted || surveyForm.description.$touched" ng-messages="surveyForm.description.$error" ng-messages-include="errors.html"></div>
    </div>
  </div>

  <survey-editor-fields fields="pageCtrl.data.fields">
    <survey-editor-field ng-repeat="field in fieldsCtrl.fields track by $index">
      <div class="row">
        <div class="two columns field-number">
          {{ $index + 1 }}.
        </div>
        <div class="seven columns">
          <div class="field">
            <label>Input Type:</label>
            <select ng-model="field.type" ng-options="entry.value as entry.title for entry in fieldsCtrl.inputTypes" class="input select" name="field_type" required>
            </select>
            <div class="errors"
                 ng-if="surveyForm.$submitted || surveyFieldForm.field_type.$touched" ng-messages="surveyFieldForm.field_type.$error"
                 ng-messages-include="errors.html"></div>
          </div>
          <div class="field">
            <label>Label / Question:</label>
            <input type="text" ng-model="field.label" class="input" required name="field_label" />
            <div class="errors" ng-if="surveyForm.$submitted || surveyFieldForm.field_label.$touched" ng-messages="surveyFieldForm.field_label.$error" ng-messages-include="errors.html"></div>
          </div>
          <div class="row">
            <div class="six columns">
              <label>
                <input type="checkbox" ng-model="field.required"  />
                This field is required
              <label>
            </div>
          </div>
          <div ng-if="fieldsCtrl.isMultipleField(field.type)" class="row">
            <div class="field">
              <label>Acceptable Answers</label>
              <input type="text" ng-model="field.acceptable_answers" class="input" ng-list />
            </div>
            <div>
              <label>
                <input type="checkbox" ng-model="field.custom_value"  />
                Allow custom value?
              <label>
            </div>
          </div>
          <nav class="field-actions">
            <div class="medium btn info" ng-if="fieldsCtrl.allowSwap($index-1)">
              <a href="" class="fa fa-caret-up" ng-click="fieldsCtrl.swapFields($index, $index-1)"></a>
            </div>
            <div class="medium btn info" ng-if="fieldsCtrl.allowSwap($index+1)">
              <a href="" class="fa fa-caret-down" ng-click="fieldsCtrl.swapFields($index, $index+1)"></a>
            </div>
            <div class="medium btn danger">
              <a href="" class="fa fa-remove" ng-click="fieldsCtrl.removeField(field)">
              </a>
            </div>
          </nav>
        </div>
      </div>
    </survey-editor-field>
    <nav class="row inner-actions">
      <span class="medium secondary btn">
        <a href="" ng-click="fieldsCtrl.newField()">
          Add Field
        </a>
      </span>
    </nav>
  </survey-editor-fields>

  <nav class="submit-actions row">
    <div class="btn primary large">
      <button>Submit</button>
    </div>
  </nav>
</survey-editor-form>

<script type="text/ng-template" id="errors.html">
  <div ng-message="required">You did not enter a value for this field</div>
  <div ng-message="date">You have entered an invalid date</div>
</script>