mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-03-20 22:05:57 +00:00
(js) Improve recurrence editor
This commit is contained in:
Francis Lachapelle
@@ -110,7 +110,7 @@
|
||||
<textarea ng-model="editor.event.comment"><!-- comment --></textarea>
|
||||
</md-input-container>
|
||||
<!-- repeat -->
|
||||
<div layout="row">
|
||||
<div layout="row" layout-align="start end">
|
||||
<div class="pseudo-input-container md-flex">
|
||||
<label class="pseudo-input-label"><var:string label:value="Repeat"/></label>
|
||||
<md-select class="pseudo-input-field" ng-model="editor.event.repeat.frequency"
|
||||
@@ -120,10 +120,13 @@
|
||||
</var:foreach>
|
||||
</md-select>
|
||||
</div>
|
||||
<button type="button" class="iconButton md-button"
|
||||
ng-click="editor.toggleRecurrenceEditor()">
|
||||
<i class="md-icon-more-horiz"><!-- toggle custom rule --></i>
|
||||
</button>
|
||||
<md-button type="button" class="iconButton"
|
||||
label:aria-label="repeat_CUSTOM"
|
||||
ng-show="editor.event.repeat.frequency != 'never'"
|
||||
ng-click="editor.toggleRecurrenceEditor()">
|
||||
<i ng-class="{'md-icon-more-horiz': !editor.showRecurrenceEditor,
|
||||
'md-icon-clear': editor.showRecurrenceEditor}"><!-- toggle custom rule --></i>
|
||||
</md-button>
|
||||
</div>
|
||||
<div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
|
||||
<var:component className="UIxRecurrenceEditor" />
|
||||
|
||||
@@ -130,226 +130,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form name="recurrence_form" id="recurrence_form" href="editRecurrence" class="ng-hide">
|
||||
<div id="recurrence_pattern" style="display: none;">
|
||||
<span class="caption"><var:string label:value="Recurrence pattern"/></span>
|
||||
<table class="frame">
|
||||
<tr>
|
||||
<th>
|
||||
<var:string label:value="Repeat"/>
|
||||
</th>
|
||||
<td colspan="2">
|
||||
<var:popup list="repeatList" const:name="repeatType" const:id="repeatType" item="item"
|
||||
string="itemText"/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="recurrenceDaily" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td colspan="2">
|
||||
<input name="dailyRadioButtonName" value="0" id="dailyRadioButton" type="radio"
|
||||
/><var:string label:value="Every"
|
||||
/><input type="text" name="dailyDaysFieldName" id="dailyDaysField"
|
||||
class="textField"
|
||||
/><var:string label:value="Days"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="recurrenceDaily" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td colspan="2">
|
||||
<input name="dailyRadioButtonName" value="1" id="dailyRadioButton" type="radio"
|
||||
/><var:string label:value="repeat_EVERY WEEKDAY"/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="recurrenceWeekly" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td colspan="2">
|
||||
<var:string label:value="Every"/><input type="text" name="weeklyWeeksFieldName" const:id="weeklyWeeksField"
|
||||
class="textField"
|
||||
var:value="title"
|
||||
/><var:string label:value="Week(s)"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="recurrenceWeekly" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td class="label">
|
||||
<var:string label:value="On"/>
|
||||
</td>
|
||||
<td>
|
||||
<div id="week"><span class="week">
|
||||
<var:foreach list="shortWeekDaysList" item="item"
|
||||
><div var:id="idForWeekDay"><p><var:string value="labelForWeekDay"/></p></div>
|
||||
</var:foreach>
|
||||
</span><span class="week"><!-- space --></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="recurrenceMonthly" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td colspan="2">
|
||||
<var:string label:value="Every"
|
||||
/><input type="text" name="monthlyMonthsFieldName" const:id="monthlyMonthsField"
|
||||
class="textField"
|
||||
var:value="title"
|
||||
/><var:string label:value="Month(s)"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="recurrenceMonthly" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td colspan="2">
|
||||
<input name="monthlyRadioButtonName" value="0" id="monthlyRadioButton" type="radio"
|
||||
/><var:string label:value="The"
|
||||
/><var:popup list="monthlyRepeatList" const:id="monthlyRepeat" item="item"
|
||||
string="itemText"
|
||||
/><var:popup list="monthlyDayList" const:id="monthlyDay" item="item"
|
||||
string="itemText"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="recurrenceMonthly" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td class="label">
|
||||
<input name="monthlyRadioButtonName" value="1" id="monthlyRadioButton" type="radio"
|
||||
/><var:string label:value="Recur on day(s)"/>
|
||||
</td>
|
||||
<td>
|
||||
<div id="month">
|
||||
<span class="week">
|
||||
<div id="monthDay1"><p>1</p></div>
|
||||
<div id="monthDay2"><p>2</p></div>
|
||||
<div id="monthDay3"><p>3</p></div>
|
||||
<div id="monthDay4"><p>4</p></div>
|
||||
<div id="monthDay5"><p>5</p></div>
|
||||
<div id="monthDay6"><p>6</p></div>
|
||||
<div id="monthDay7"><p>7</p></div>
|
||||
</span>
|
||||
<span class="week">
|
||||
<div id="monthDay8"><p>8</p></div>
|
||||
<div id="monthDay9"><p>9</p></div>
|
||||
<div id="monthDay10"><p>10</p></div>
|
||||
<div id="monthDay11"><p>11</p></div>
|
||||
<div id="monthDay12"><p>12</p></div>
|
||||
<div id="monthDay13"><p>13</p></div>
|
||||
<div id="monthDay14"><p>14</p></div>
|
||||
</span>
|
||||
<span class="week">
|
||||
<div id="monthDay15"><p>15</p></div>
|
||||
<div id="monthDay16"><p>16</p></div>
|
||||
<div id="monthDay17"><p>17</p></div>
|
||||
<div id="monthDay18"><p>18</p></div>
|
||||
<div id="monthDay19"><p>19</p></div>
|
||||
<div id="monthDay20"><p>20</p></div>
|
||||
<div id="monthDay21"><p>21</p></div>
|
||||
</span>
|
||||
<span class="week">
|
||||
<div id="monthDay22"><p>22</p></div>
|
||||
<div id="monthDay23"><p>23</p></div>
|
||||
<div id="monthDay24"><p>24</p></div>
|
||||
<div id="monthDay25"><p>25</p></div>
|
||||
<div id="monthDay26"><p>26</p></div>
|
||||
<div id="monthDay27"><p>27</p></div>
|
||||
<div id="monthDay28"><p>28</p></div>
|
||||
</span>
|
||||
<span class="week">
|
||||
<div id="monthDay29"><p>29</p></div>
|
||||
<div id="monthDay30"><p>30</p></div>
|
||||
<div id="monthDay31"><p>31</p></div>
|
||||
</span>
|
||||
<span class="week"></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="recurrenceYearly" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td colspan="2">
|
||||
<var:string label:value="Every"
|
||||
/><input type="text" name="yearlyYearsFieldName" const:id="yearlyYearsField"
|
||||
class="textField"
|
||||
var:value="title"
|
||||
/><var:string label:value="Year(s)"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="recurrenceYearly" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td colspan="2">
|
||||
<input name="yearlyRadioButtonName" value="0" id="yearlyRadioButton" type="radio"
|
||||
/><var:string label:value="Every"
|
||||
/><input type="text" name="yearlyDayFieldName" const:id="yearlyDayField"
|
||||
class="textField"
|
||||
var:value="title"
|
||||
/><var:popup list="yearlyMonthList" const:id="yearlyMonth1" item="item"
|
||||
string="itemText"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="recurrenceYearly" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td class="label">
|
||||
<input name="yearlyRadioButtonName" value="1" id="yearlyRadioButton" type="radio"
|
||||
/><var:string label:value="Every"/>
|
||||
</td>
|
||||
<td>
|
||||
<var:popup list="monthlyRepeatList" const:id="yearlyRepeat" item="item"
|
||||
string="itemText" selection="First"
|
||||
/><var:popup list="yearlyDayList" const:id="yearlyDay" item="item"
|
||||
string="itemText"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="recurrenceYearly" style="display:none;">
|
||||
<td><!-- empty cell --></td>
|
||||
<td class="label" style="text-align: right;">
|
||||
<var:string label:value="cycle_of"/>
|
||||
</td>
|
||||
<td>
|
||||
<var:popup list="yearlyMonthList" const:id="yearlyMonth2" item="item"
|
||||
string="itemText"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="range_of_recurrence" style="display: none;">
|
||||
<span class="caption"><var:string label:value="Range of recurrence"/></span>
|
||||
<table class="frame">
|
||||
<tr>
|
||||
<td>
|
||||
<input name="rangeRadioButtonName" value="0" id="rangeRadioButton" type="radio"
|
||||
/><var:string label:value="No end date"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input name="rangeRadioButtonName" value="1" id="rangeRadioButton" type="radio"
|
||||
/><var:string label:value="Create"
|
||||
/><input type="text" name="rangeAppointmentsFieldName" const:id="rangeAppointmentsField"
|
||||
class="textField"
|
||||
var:value="title"
|
||||
/><var:string label:value="appointment(s)"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input name="rangeRadioButtonName" value="2" id="rangeRadioButton" type="radio"
|
||||
/><var:string label:value="Repeat until"
|
||||
/><var:component className="UIxTimeDateControl"
|
||||
const:displayTimeControl="0"
|
||||
const:controlID="endDate"
|
||||
const:id="endDate"
|
||||
date="endDate"
|
||||
const:dayStartHour="0"
|
||||
const:dayEndHour="23"
|
||||
/><!--<var:component className="UIxDatePicker"
|
||||
const:dateID="endDate"
|
||||
day="endDateDay"
|
||||
month="endDateMonth"
|
||||
year="endDateYear"
|
||||
label="label"/>-->
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</container>
|
||||
|
||||
@@ -257,6 +257,8 @@
|
||||
else {
|
||||
this.repeat.days = [];
|
||||
}
|
||||
if (angular.isUndefined(this.repeat.frequency))
|
||||
this.repeat.frequency = 'never';
|
||||
if (angular.isUndefined(this.repeat.interval))
|
||||
this.repeat.interval = 1;
|
||||
if (angular.isUndefined(this.repeat.month))
|
||||
@@ -300,7 +302,7 @@
|
||||
Component.prototype.getClassName = function(base) {
|
||||
if (angular.isUndefined(base))
|
||||
base = 'fg';
|
||||
return base + '-folder' + (this.pid || this.c_folder);
|
||||
return base + '-folder' + (this.destinationCalendar || this.c_folder);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -393,20 +395,25 @@
|
||||
delete component.repeat.days;
|
||||
}
|
||||
}
|
||||
else {
|
||||
else if (this.repeat.frequency) {
|
||||
component.repeat = { frequency: this.repeat.frequency };
|
||||
}
|
||||
if (this.repeat.end == 'until' && this.repeat.until)
|
||||
component.repeat.until = this.repeat.until.stringWithSeparator('-');
|
||||
else if (this.repeat.end == 'count' && this.repeat.count)
|
||||
component.repeat.count = this.repeat.count;
|
||||
if (this.repeat.frequency) {
|
||||
if (this.repeat.end == 'until' && this.repeat.until)
|
||||
component.repeat.until = this.repeat.until.stringWithSeparator('-');
|
||||
else if (this.repeat.end == 'count' && this.repeat.count)
|
||||
component.repeat.count = this.repeat.count;
|
||||
else {
|
||||
delete component.repeat.until;
|
||||
delete component.repeat.count;
|
||||
}
|
||||
}
|
||||
else {
|
||||
delete component.repeat.until;
|
||||
delete component.repeat.count;
|
||||
delete component.repeat;
|
||||
}
|
||||
|
||||
function formatTime(dateString) {
|
||||
// YYYY-MM-DDTHH:MM-05:00
|
||||
// YYYY-MM-DDTHH:MM-ZZ:00 => YYYY-MM-DD HH:MM
|
||||
var date = new Date(dateString.substring(0,10) + ' ' + dateString.substring(11,16)),
|
||||
hours = date.getHours(),
|
||||
minutes = date.getMinutes();
|
||||
|
||||
Reference in New Issue
Block a user