Skip to content

Commit ee2eb52

Browse files
JimmyToorJimmyToor
committed
add support for recurrence termination options based on changes by rflorence (gregschmit#117)
1 parent 340dd76 commit ee2eb52

File tree

10 files changed

+151
-22
lines changed

10 files changed

+151
-22
lines changed

‎app/assets/javascripts/defaults.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ const defaultConfig = {
2020
years: "year(s)",
2121
day_of_month: "Day of month",
2222
day_of_week: "Day of week",
23+
ends: "Ends",
24+
never: "Never",
25+
after: "After",
26+
occurrences: "occurrences",
27+
on: "On",
2328
cancel: "Cancel",
2429
ok: "OK",
2530
summary: "Summary",

‎app/assets/javascripts/recurring_select.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ document.addEventListener("DOMContentLoaded", () => {
1313
recurring_select.call(e.target, "changed")
1414
}
1515
})
16+
1617
})
1718

1819
const methods = {

‎app/assets/javascripts/recurring_select_dialog.js.erb‎

Lines changed: 103 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ class RecurringSelectDialog {
1717
this.daysChanged = this.daysChanged.bind(this);
1818
this.dateOfMonthChanged = this.dateOfMonthChanged.bind(this);
1919
this.weekOfMonthChanged = this.weekOfMonthChanged.bind(this);
20+
this.terminationChanged = this.terminationChanged.bind(this);
2021
this.recurring_selector = recurring_selector;
2122
this.current_rule = this.recurring_selector.recurring_select('current_rule');
2223
this.initDialogBox();
@@ -41,9 +42,12 @@ class RecurringSelectDialog {
4142

4243
this.mainEventInit();
4344
this.freqInit();
45+
this.terminationInit();
4446
this.summaryInit();
47+
4548
trigger(this.outer_holder, "recurring_select:dialog_opened");
4649
this.freq_select.focus();
50+
4751
}
4852

4953
cancel() {
@@ -134,9 +138,9 @@ class RecurringSelectDialog {
134138
interval_input.value = this.current_rule.hash.interval
135139
on(interval_input, "change keyup", this.intervalChanged)
136140

137-
if (!this.current_rule.hash.validations) { this.current_rule.hash.validations = {} };
138-
if (!this.current_rule.hash.validations.day_of_month) { this.current_rule.hash.validations.day_of_month = [] };
139-
if (!this.current_rule.hash.validations.day_of_week) { this.current_rule.hash.validations.day_of_week = {} };
141+
if (!this.current_rule.hash.validations) { this.current_rule.hash.validations = {}; }
142+
if (!this.current_rule.hash.validations.day_of_month) { this.current_rule.hash.validations.day_of_month = []; }
143+
if (!this.current_rule.hash.validations.day_of_week) { this.current_rule.hash.validations.day_of_week = {}; }
140144
this.init_calendar_days(section);
141145
this.init_calendar_weeks(section);
142146

@@ -156,6 +160,40 @@ class RecurringSelectDialog {
156160
section.style.display = 'block'
157161
}
158162

163+
terminationInit() {
164+
const section = this.outer_holder.querySelector(".rs_termination_section");
165+
this.until_date = section.querySelector("#rs_until_date");
166+
this.until_date.flatpickr({
167+
enableTime: true,
168+
dateFormat: "Y-m-d H:i",
169+
altInput: true,
170+
altFormat: "F j, Y h:i K",
171+
});
172+
173+
if (this.current_rule.hash && this.current_rule.hash.count) {
174+
this.count_option = section.querySelector("input[name=rs_termination][value=count]");
175+
this.count_option.checked = true;
176+
this.occurence_count = section.querySelector("#rs_occurrence_count");
177+
this.occurence_count.value = this.current_rule.hash.count;
178+
} else if (this.current_rule.hash && this.current_rule.hash.until) {
179+
this.until_option = section.querySelector("input[name=rs_termination][value=until]");
180+
this.until_option.checked = true;
181+
// IceCube::TimeUtil will serialize a TimeWithZone into a hash, such as:
182+
// {time: Thu, 04 Sep 2014 06:59:59 +0000, zone: "Pacific Time (US & Canada)"}
183+
// If we're initializing from an unsaved rule, until will be a string
184+
if (this.current_rule.hash.until.time) {
185+
this.until_val = new Date(this.current_rule.hash.until.time);
186+
this.until_date.value = (this.until_val.getFullYear() + "-" + (this.until_val.getMonth() + 1) + "-" + this.until_val.getDate() + " " + this.until_val.getHours() + ":" + this.until_val.getMinutes());
187+
} else {
188+
this.until_date.value = this.current_rule.hash.until;
189+
}
190+
} else {
191+
this.never_option = section.querySelector("input[name=rs_termination][value=never]");
192+
this.never_option.checked = true;
193+
}
194+
195+
section.addEventListener("change", this.terminationChanged.bind(this));
196+
}
159197

160198
summaryInit() {
161199
this.summary = this.outer_holder.querySelector(".rs_summary");
@@ -166,6 +204,7 @@ class RecurringSelectDialog {
166204

167205
summaryUpdate(new_string) {
168206
// this.summary.style.width = `${this.content.getBoundingClientRect().width}px`;
207+
console.log("Updating summary", this.current_rule.hash, this.current_rule.str);
169208
if ((this.current_rule.hash != null) && (this.current_rule.str != null)) {
170209
this.summary.classList.remove("fetching");
171210
this.save_button.classList.remove("disabled");
@@ -212,7 +251,7 @@ class RecurringSelectDialog {
212251
if (Array.from(this.current_rule.hash.validations.day_of_month).includes(num)) {
213252
day_link.classList.add("selected");
214253
}
215-
};
254+
}
216255

217256
// add last day of month button
218257
const end_of_month_link = document.createElement("a")
@@ -248,9 +287,9 @@ class RecurringSelectDialog {
248287
day_link.setAttribute("day", day_of_week);
249288
day_link.setAttribute("instance", num);
250289
monthly_calendar.appendChild(day_link);
251-
};
290+
}
252291
}
253-
};
292+
}
254293

255294
Object.entries(this.current_rule.hash.validations.day_of_week).forEach(([key, value]) => {
256295
Array.from(value).forEach((instance, index) => {
@@ -278,10 +317,9 @@ class RecurringSelectDialog {
278317
freqChanged() {
279318
if (!isPlainObject(this.current_rule.hash)) { this.current_rule.hash = null; } // for custom values
280319

281-
if (!this.current_rule.hash) { this.current_rule.hash = {} };
320+
if (!this.current_rule.hash) { this.current_rule.hash = {} }
321+
this.current_rule.str = null;
282322
this.current_rule.hash.interval = 1;
283-
this.current_rule.hash.until = null;
284-
this.current_rule.hash.count = null;
285323
this.current_rule.hash.validations = null;
286324
this.content.querySelectorAll(".freq_option_section").forEach(el => el.style.display = 'none')
287325
this.content.querySelector("input[type=radio], input[type=checkbox]").checked = false
@@ -305,13 +343,13 @@ class RecurringSelectDialog {
305343
this.current_rule.hash.rule_type = "IceCube::DailyRule";
306344
this.current_rule.str = this.config.texts["daily"];
307345
this.initDailyOptions();
308-
};
309-
this.summaryUpdate();
346+
}
347+
this.summaryFetch();
310348
}
311349

312350
intervalChanged(event) {
313351
this.current_rule.str = null;
314-
if (!this.current_rule.hash) { this.current_rule.hash = {} };
352+
if (!this.current_rule.hash) { this.current_rule.hash = {}; }
315353
this.current_rule.hash.interval = parseInt(event.currentTarget.value);
316354
if ((this.current_rule.hash.interval < 1) || isNaN(this.current_rule.hash.interval)) {
317355
this.current_rule.hash.interval = 1;
@@ -322,7 +360,7 @@ class RecurringSelectDialog {
322360
daysChanged(event) {
323361
event.target.classList.toggle("selected");
324362
this.current_rule.str = null;
325-
if (!this.current_rule.hash) { this.current_rule.hash = {} };
363+
if (!this.current_rule.hash) { this.current_rule.hash = {}; }
326364
this.current_rule.hash.validations = {};
327365
const raw_days = Array.from(this.content.querySelectorAll(".day_holder a.selected"))
328366
.map(el => parseInt(el.dataset.value))
@@ -334,7 +372,7 @@ class RecurringSelectDialog {
334372
dateOfMonthChanged(event) {
335373
event.target.classList.toggle("selected");
336374
this.current_rule.str = null;
337-
if (!this.current_rule.hash) { this.current_rule.hash = {} };
375+
if (!this.current_rule.hash) { this.current_rule.hash = {}; }
338376
this.current_rule.hash.validations = {};
339377
const raw_days = Array.from(this.content.querySelectorAll(".monthly_options .rs_calendar_day a.selected"))
340378
.map(el => {
@@ -349,21 +387,44 @@ class RecurringSelectDialog {
349387
weekOfMonthChanged(event) {
350388
event.target.classList.toggle("selected");
351389
this.current_rule.str = null;
352-
if (!this.current_rule.hash) { this.current_rule.hash = {} };
390+
if (!this.current_rule.hash) { this.current_rule.hash = {}; }
353391
this.current_rule.hash.validations = {};
354392
this.current_rule.hash.validations.day_of_month = [];
355393
this.current_rule.hash.validations.day_of_week = {};
356394
this.content.querySelectorAll(".monthly_options .rs_calendar_week a.selected")
357395
.forEach((elm, index) => {
358396
const day = parseInt(elm.getAttribute("day"));
359397
const instance = parseInt(elm.getAttribute("instance"));
360-
if (!this.current_rule.hash.validations.day_of_week[day]) { this.current_rule.hash.validations.day_of_week[day] = [] };
398+
if (!this.current_rule.hash.validations.day_of_week[day]) { this.current_rule.hash.validations.day_of_week[day] = []; }
361399
return this.current_rule.hash.validations.day_of_week[day].push(instance);
362400
})
363401
this.summaryUpdate();
364402
return false;
365403
}
366404

405+
terminationChanged() {
406+
this.selected_termination_type = this.outer_holder.querySelector(".rs_termination_section input[type='radio']:checked");
407+
if (!this.selected_termination_type) { return; }
408+
this.current_rule.str = null;
409+
if (!this.current_rule.hash) { this.current_rule.hash = {}; }
410+
switch (this.selected_termination_type.value) {
411+
case "count":
412+
this.current_rule.hash.count = parseInt(this.occurence_count ? this.occurence_count.value : this.outer_holder.querySelector("#rs_occurrence_count").value);
413+
if ((this.current_rule.hash.count < 1) || isNaN(this.current_rule.hash.count)) {
414+
this.current_rule.hash.count = 1;
415+
}
416+
this.current_rule.hash.until = null;
417+
break
418+
case "until":
419+
this.current_rule.hash.until = this.until_date ? this.until_date.value : this.outer_holder.querySelector("#rs_until_date").value;
420+
this.current_rule.hash.count = null;
421+
break
422+
default:
423+
this.current_rule.hash.count = null;
424+
this.current_rule.hash.until = null;
425+
}
426+
this.summaryUpdate();
427+
}
367428
// ========================= Change callbacks ===============================
368429

369430
template() {
@@ -381,7 +442,6 @@ class RecurringSelectDialog {
381442
<option value='Yearly'>${this.config.texts["yearly"]}</option> \
382443
</select> \
383444
</p> \
384-
\
385445
<div class='daily_options freq_option_section'> \
386446
<p> \
387447
${this.config.texts["every"]} \
@@ -400,7 +460,7 @@ class RecurringSelectDialog {
400460
for (let i = this.config.texts["first_day_of_week"], day_of_week = i, end = 7 + this.config.texts["first_day_of_week"], asc = this.config.texts["first_day_of_week"] <= end; asc ? i < end : i > end; asc ? i++ : i--, day_of_week = i) {
401461
day_of_week = day_of_week % 7;
402462
str += `<a href='#' data-value='${day_of_week}'>${this.config.texts["days_first_letter"][day_of_week]}</a>`;
403-
};
463+
}
404464

405465
str += `\
406466
</div> \
@@ -426,6 +486,31 @@ class RecurringSelectDialog {
426486
${this.config.texts["years"]} \
427487
</p> \
428488
</div> \
489+
<div class='rs_termination_section'>
490+
<table>
491+
<tr>
492+
<td>
493+
<label class='rs_termination_label'>${this.config.texts["ends"]}:</label>
494+
</td>
495+
<td>
496+
<label>
497+
<input type='radio' name='rs_termination' value='never' />
498+
${this.config.texts["never"]}
499+
</label><br>
500+
<label>
501+
<input type='radio' name='rs_termination' value='count' />
502+
${this.config.texts["after"]}
503+
<input type='text' data-wrapper-class='ui-recurring-select' id='rs_occurrence_count' class='rs_count' value='10' size='2' />
504+
${this.config.texts["occurrences"]}
505+
</label><br>
506+
<label>
507+
<input type='radio' name='rs_termination' value='until' />
508+
${this.config.texts["on"]}
509+
<input type='text' data-wrapper-class='ui-recurring-select' class='rs_datepicker' id='rs_until_date' />
510+
</label>
511+
</td>
512+
</table>
513+
</div>
429514
<p class='rs_summary'> \
430515
<span></span> \
431516
</p> \

‎app/assets/stylesheets/recurring_select.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import "utilities.scss";
2-
32
/* -------- resets ---------------*/
43

54
.rs_dialog_holder {
@@ -98,6 +97,23 @@ select {
9897
}
9998
}
10099

100+
.rs_termination_section {
101+
table {
102+
margin: 0;
103+
padding-top: 5px;
104+
td {
105+
padding: 0;
106+
vertical-align: top;
107+
}
108+
}
109+
.rs_termination_label {margin-right:10px;}
110+
.rs_count {width:30px; text-align:center; display: inline-block;}
111+
}
112+
113+
.rs_datepicker {
114+
width: 150px;
115+
text-align: center;
116+
}
101117

102118
.rs_summary {
103119
padding: 0px;
@@ -128,4 +144,4 @@ select {
128144
}
129145

130146
}
131-
}
147+
}

‎lib/recurring_select.rb‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ def self.filter_params(params)
4444

4545
params[:interval] = params[:interval].to_i if params[:interval]
4646
params[:week_start] = params[:week_start].to_i if params[:week_start]
47+
params[:count] = params[:count].to_i if params[:count]
4748

4849
params[:validations] ||= {}
4950
params[:validations].symbolize_keys!
@@ -77,6 +78,23 @@ def self.filter_params(params)
7778
params[:validations][:day_of_year] = params[:validations][:day_of_year].collect(&:to_i)
7879
end
7980

81+
begin
82+
# IceCube::TimeUtil will serialize a TimeWithZone into a hash, such as:
83+
# {time: Thu, 04 Sep 2014 06:59:59 +0000, zone: "Pacific Time (US & Canada)"}
84+
# So don't try to DateTime.parse the hash. IceCube::TimeUtil will deserialize this for us.
85+
if (until_param = params[:until])
86+
if until_param.is_a?(String)
87+
# Set to 23:59:59 (in current TZ) to encompass all events on until day
88+
params[:until] = Time.zone.parse(until_param).change(hour: 23, min: 59, sec: 59)
89+
elsif until_param.is_a?(Hash) # ex: {time: Thu, 28 Aug 2014 06:59:590000, zone: "Pacific Time (US & Canada)"}
90+
until_param = until_param.symbolize_keys
91+
params[:until] = until_param[:time].in_time_zone(until_param[:zone])
92+
end
93+
end
94+
rescue ArgumentError
95+
# Invalid date given, attempt to assign :until will fail silently
96+
end
97+
8098
params
8199
end
82100
end

‎lib/recurring_select/version.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module RecurringSelect
2-
VERSION = "4.0.0"
2+
VERSION = "4.0.1"
33
end

‎recurring_select.gemspec‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Gem::Specification.new do |s|
1717
s.add_dependency "rails", ">= 6.1"
1818
s.add_dependency "ice_cube", ">= 0.11"
1919
s.add_dependency "sass-rails", ">= 6.0"
20+
s.add_dependency "flatpickr", ">= 4.6.6"
2021

2122
s.add_development_dependency "bundler", ">= 1.3.5"
2223
s.add_development_dependency "rspec-rails", ">= 2.14"

‎spec/dummy/app/assets/javascripts/application.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
55
// the compiled file.
66
//
7+
//= require flatpickr/dist/flatpickr.min.js
78
//= require recurring_select
89
//= require_tree .
9-
1010
RecurringSelectDialog.config.options.monthly = {
1111
show_week: [true, true, true, true, true, true]
1212
}

‎spec/dummy/app/assets/stylesheets/application.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* the top of the compiled file, but it's generally better to create a new file per style scope.
55
*= require_self
66
*= require recurring_select
7+
*= require flatpickr
78
*/
89

910

‎spec/dummy/config/application.rb‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ class Application < Rails::Application
4444

4545
# Version of your assets, change this if you want to expire all your assets
4646
config.assets.version = '1.0'
47+
48+
config.assets.paths << Rails.root.join('../../node_modules')
4749
end
4850
end
4951

0 commit comments

Comments
 (0)