disabled schedule form fields for read only view

This commit is contained in:
John Mitchell
2017-01-30 16:07:32 -05:00
parent 55643d5a1d
commit 6c2b1d1c49
7 changed files with 76 additions and 14 deletions

View File

@@ -2239,3 +2239,22 @@ button[disabled],
html input[disabled] {
cursor: not-allowed;
}
.CodeMirror--disabled .CodeMirror.cm-s-default,
.CodeMirror--disabled .CodeMirror-line {
background-color: #f6f6f6;
}
.CodeMirror--disabled .CodeMirror-gutter.CodeMirror-lint-markers,
.CodeMirror--disabled .CodeMirror-gutter.CodeMirror-linenumbers {
background-color: #ebebeb;
color: @b7grey;
}
.CodeMirror--disabled .CodeMirror-lines {
cursor: default;
}
.CodeMirror--disabled .CodeMirror-cursors {
display: none;
}

View File

@@ -17,7 +17,8 @@ export default
date: '=',
minDate: '=',
autoUpdate: '=?',
inputClass: '&'
inputClass: '&',
disabled: '=?'
},
templateUrl: templateUrl('system-tracking/date-picker/date-picker'),
link: function(scope, element, attrs) {

View File

@@ -1,6 +1,7 @@
<div class="DatePicker">
<button class="DatePicker-icon"><i class="fa fa-calendar"></i></button>
<button class="DatePicker-icon" ng-disabled="disabled"><i class="fa fa-calendar"></i></button>
<input
ng-disabled="disabled"
class="DatePicker-input"
type="text"
readonly

View File

@@ -69,11 +69,14 @@ function($filter, $compile, $state, $stateParams, EditSchedule, Wait, $scope, $r
// extra_data field is not manifested in the UI when scheduling a Management Job
if ($state.current.name !== 'managementJobSchedules.add' && $state.current.name !== 'managementJobSchedules.edit'){
$scope.$on('ScheduleFound', function(){
let readOnly = !$scope.schedule_obj.summary_fields.user_capabilities
.edit;
ParseTypeChange({
scope: $scope,
variable: 'extraVars',
parse_variable: 'parseType',
field_id: 'SchedulerForm-extraVars'
field_id: 'SchedulerForm-extraVars',
readOnly: readOnly
});
});
}

View File

@@ -28,6 +28,7 @@
name="schedulerName"
id="schedulerName"
ng-model="schedulerName" required
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
placeholder="Schedule name">
<div class="error"
ng-show="scheduler_form.$dirty && scheduler_form.schedulerName.$error.required">
@@ -40,7 +41,8 @@
Start Date
</label>
<div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
<scheduler-date-picker date="schedulerStartDt">
<scheduler-date-picker date="schedulerStartDt"
disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)">
</scheduler-date-picker>
</div>
<div class="error"
@@ -65,6 +67,7 @@
<input name="schedulerStartHour"
id="schedulerStartHour"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-time-spinner
ScheduleTime-input SpinnerInput"
aw-spinner="schedulerStartHour"
@@ -80,6 +83,7 @@
<input name="schedulerStartMinute"
id="schedulerStartMinute"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-time-spinner
SchedulerTime-input SpinnerInput"
aw-spinner="schedulerStartMinute"
@@ -95,6 +99,7 @@
<input name="schedulerStartSecond"
id="schedulerStartSecond"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-time-spinner
SchedulerTime-input SpinnerInput"
aw-spinner="schedulerStartSecond"
@@ -116,6 +121,7 @@
Local Time Zone
</label>
<select
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="MakeSelect2"
name="schedulerTimeZone"
id="schedulerTimeZone"
@@ -131,6 +137,7 @@
Repeat frequency
</label>
<select name="schedulerFrequency"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
id="schedulerFrequency"
class="MakeSelect2"
ng-model="schedulerFrequency"
@@ -159,6 +166,7 @@
<input name="schedulerInterval"
id="schedulerInterval"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-spinner
SpinnerInput"
aw-spinner="schedulerInterval"
@@ -185,6 +193,7 @@
<label class="Form-inputLabel">
<span class="red-text">*</span>
<input type="radio" value="day"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
ng-model="$parent.monthlyRepeatOption"
ng-change="monthlyRepeatChange()"
name="monthlyRepeatOption"
@@ -196,6 +205,7 @@
name="monthDay"
id="monthDay"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-spinner SpinnerInput"
aw-spinner="$parent.monthDay"
ng-model="$parent.monthDay"
@@ -214,6 +224,7 @@
<label class="Form-inputLabel">
<span class="red-text">*</span>
<input type="radio"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
value="other"
ng-model="$parent.monthlyRepeatOption"
ng-change="monthlyRepeatChange()"
@@ -228,7 +239,7 @@
id="monthlyOccurrence"
ng-model="$parent.monthlyOccurrence"
ng-options="o.name for o in occurrences"
ng-disabled="monthlyRepeatOption != 'other'"
ng-disabled="monthlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class=" MakeSelect2 form-control
input-sm
RepeatFrequencyOptions-spacedSelect
@@ -239,7 +250,7 @@
id="monthlyWeekDay"
ng-model="$parent.monthlyWeekDay"
ng-options="w.name for w in weekdays"
ng-disabled="monthlyRepeatOption != 'other'"
ng-disabled="monthlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="MakeSelect2 form-control input-sm" >
</select>
</div>
@@ -252,6 +263,7 @@
<span class="red-text">*</span>
<label class="Form-inputLabel">
<input type="radio"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
value="month"
ng-model="$parent.yearlyRepeatOption"
ng-change="yearlyRepeatChange()"
@@ -266,7 +278,7 @@
id="yearlyMonth"
ng-model="$parent.yearlyMonth"
ng-options="m.name for m in months"
ng-disabled="yearlyRepeatOption != 'month'"
ng-disabled="yearlyRepeatOption != 'month' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="MakeSelect2 form-control input-sm
RepeatFrequencyOptions-spacedSelect"
>
@@ -274,6 +286,7 @@
<input name="yearlyMonthDay"
id="yearlyMonthDay"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-spinner
SpinnerInput"
aw-spinner="$parent.yearlyMonthDay"
@@ -295,6 +308,7 @@
<label class="Form-inputLabel">
<span class="red-text">*</span>
<input type="radio"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
value="other"
ng-model="$parent.yearlyRepeatOption"
ng-change="yearlyRepeatChange()"
@@ -311,7 +325,7 @@
id="yearlyOccurrence"
ng-model="$parent.yearlyOccurrence"
ng-options="o.name for o in occurrences"
ng-disabled="yearlyRepeatOption != 'other'"
ng-disabled="yearlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="MakeSelect2
form-control input-sm
RepeatFrequencyOptions-spacedSelect
@@ -323,7 +337,7 @@
id="yearlyWeekDay"
ng-model="$parent.yearlyWeekDay"
ng-options="w.name for w in weekdays"
ng-disabled="yearlyRepeatOption != 'other'"
ng-disabled="yearlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="MakeSelect2
form-control input-sm
RepeatFrequencyOptions-spacedSelect
@@ -334,7 +348,7 @@
id="yearlyOtherMonth"
ng-model="$parent.yearlyOtherMonth"
ng-options="m.name for m in months"
ng-disabled="yearlyRepeatOption != 'other'"
ng-disabled="yearlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="MakeSelect2
form-control input-sm
RepeatFrequencyOptions-thirdSelect">
@@ -427,6 +441,7 @@
</label>
<div>
<select id="schedulerEnd"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
name="schedulerEnd"
ng-model="$parent.schedulerEnd"
ng-options="e.name for e in endOptions"
@@ -448,6 +463,7 @@
ng-name="schedulerOccurrenceCount"
ng-id="schedulerOccurrenceCount"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-spinner
SpinnerInput"
aw-spinner="$parent.schedulerOccurrenceCount"
@@ -468,7 +484,8 @@
End Date
</label>
<div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
<scheduler-date-picker date="$parent.schedulerEndDt">
<scheduler-date-picker date="$parent.schedulerEndDt"
disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)">
</scheduler-date-picker>
</div>
<div class="error"
@@ -494,6 +511,7 @@
<input name="schedulerEndHour"
id="schedulerEndHour"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-time-spinner
ScheduleTime-input SpinnerInput"
aw-spinner="$parent.schedulerEndHour"
@@ -509,6 +527,7 @@
<input name="schedulerEndMinute"
id="$parent.schedulerEndMinute"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-time-spinner
SchedulerTime-input SpinnerInput"
aw-spinner="$parent.schedulerEndMinute"
@@ -524,6 +543,7 @@
<input name="schedulerEndSecond"
id="schedulerEndSecond"
sch-spinner="scheduler_form"
ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
class="scheduler-time-spinner
SchedulerTime-input SpinnerInput"
aw-spinner="$parent.schedulerEndSecond"
@@ -629,7 +649,7 @@
</div>
</label>
<div>
<div ng-class="{'CodeMirror--disabled': !(schedule_obj.summary_fields.user_capabilities.edit || canAdd)}">
<textarea rows="6" ng-model="extraVars" name="Scheduler-extraVars" class="form-control" id="SchedulerForm-extraVars"></textarea>
</div>
</div>
@@ -638,11 +658,19 @@
<button type="button"
class="btn btn-sm Form-cancelButton"
id="project_cancel_btn"
ng-show="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
ng-click="formCancel()">Close</button>
<button type="button"
class="btn btn-sm Form-cancelButton"
id="project_cancel_btn"
ng-show="(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
ng-click="formCancel()">Cancel</button>
<button type="button"
class="btn btn-sm Form-saveButton"
id="project_save_btn"
ng-click="saveSchedule()"
ng-show="(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
ng-disabled="!schedulerIsValid"> Save</button>
</div>
</div>

View File

@@ -981,6 +981,15 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
}
}
};
// hack to get ngDisabled to work
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, function(val) {
opts.disabled = (val === true) ? true : false;
$(elm).spinner(opts);
});
}
if (disabled) {
opts.disabled = true;
}

View File

@@ -1,10 +1,11 @@
<div class="DatePicker">
<button class="DatePicker-icon"><i class="fa fa-calendar"></i></button>
<button class="DatePicker-icon" ng-disabled="disabled"><i class="fa fa-calendar"></i></button>
<input
class="DatePicker-input"
type="text"
readonly
ng-model="dateValue"
ng-class="inputClass()">
ng-class="inputClass()"
ng-disabled="disabled">
<p class="error" ng-if="error">{{error}}</p>
</div>