Skip to content

Commit

Permalink
8836. Added customSort function
Browse files Browse the repository at this point in the history
  • Loading branch information
@yohannahbautista
yohannahbautista committed Sep 2, 2024
1 parent 05e9496 commit e8216fc
Show file tree
Hide file tree
Showing 3 changed files with 401 additions and 1 deletion.
392 changes: 392 additions & 0 deletions app/views/components/calendar/test-sort-events.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,392 @@

<button type="button" class="btn-secondary" id="sort" style="margin: 10px;">Sort</button>
<button type="button" class="btn-secondary" id="reverse-sort" style="margin: 10px;">Reverse Sort</button>
<div class="calendar" data-init="false">
<div class="calendar-events">
<div class="accordion" data-options="{'allowOnePane': false}">
<div class="accordion-header is-expanded">
<a href="#"><span data-translate="text">Legend</span></a>
</div>
<div class="accordion-pane">
<div class="calendar-event-types accordion-content">
</div>
</div>
<div class="accordion-header is-expanded">
<a href="#"><span data-translate="text">UpComing</span></a>
</div>
<div class="accordion-pane">
<div class="calendar-upcoming-events accordion-content">
</div>
</div>
</div>
</div>
<div class="calendar-monthview">
</div>
<div class="calendar-weekview">
</div>
<div class="calendar-event-details accordion" data-init="false" data-options="{'allowOnePane': false}">
</div>
<div class="calendar-event-details-mobile listview" data-init="false">
</div>
</div>

<ul id="calendar-actions-menu" class="popupmenu">
<li><a href="#" data-action="delete-event"><span data-translate="text">DeleteEvent</span></a></li>
<li><a href="#" data-action="show-event"><span data-translate="text">ShowEvent</span></a></li>
</ul>

<script>
$('body').one('initialized', function () {
// Get the Event Type and Events to show in the calendar
var eventTypes = [
{ "id": "1", "label": "Event 1", "color": "graphite", "checked": true },
{ "id": "2", "label": "Event 2", "color": "amethyst", "checked": true },
{ "id": "3", "label": "Event 3", "color": "emerald", "checked": true },
{ "id": "4", "label": "Event 4", "color": "amber", "checked": true },
{ "id": "5", "label": "Event 5", "color": "ruby", "checked": true },
{ "id": "6", "label": "Event 6", "color": "turquoise", "checked": true },
{ "id": "7", "label": "Event 7", "color": "azure", "checked": true }
];
var events = [
{
"id": "1",
"subject": "Event 1",
"shortSubject": "E 1",
"comments": "Event 1 Comments",
"starts": "2024-01-22T00:00:00.000",
"ends": "2024-01-22T01:59:59.999",
"type": "1",
},
{
"id": "2",
"subject": "Event 2",
"shortSubject": "E 2",
"comments": "Event 2 Comments",
"starts": "2024-01-22T02:00:00.000",
"ends": "2024-01-22T03:59:59.999",
"type": "2"
},
{
"id": "3",
"subject": "Event 3",
"shortSubject": "E 3",
"comments": "Event 3 Comments",
"starts": "2024-01-22T04:00:00.000",
"ends": "2024-01-22T05:59:59.999",
"type": "3"
},
{
"id": "4",
"subject": "Event 4",
"shortSubject": "E 4",
"comments": "Event 4 Comments",
"starts": "2024-01-25T06:00:00.000",
"ends": "2024-01-25T07:59:59.999",
"type": "4"
},
{
"id": "5",
"subject": "Event 5",
"shortSubject": "E 5",
"comments": "Event 5 Comments",
"starts": "2024-01-25T08:00:00.000",
"ends": "2024-01-25T09:59:59.999",
"type": "5"
},
{
"id": "6",
"subject": "Event 6",
"shortSubject": "E 6",
"comments": "Event 6 Comments",
"starts": "2024-01-25T10:00:00.000",
"ends": "2024-01-25T11:59:59.999",
"type": "6"
},
{
"id": "7",
"subject": "Event 7",
"shortSubject": "E 7",
"comments": "Event 7 Comments",
"starts": "2024-01-01T12:00:00.000",
"ends": "2024-01-01T13:59:59.999",
"type": "7"
}
];

const api = $('.calendar').calendar({
month: 0,
year: 2024,
day: 9,
eventTypes: eventTypes,
events: events,
upcomingEventDays: 0,
template: 'tmpl-readonly',
mobileTemplate: 'tmpl-mbl-readonly',
modalTemplate: 'tmpl-modal',
menuId: 'calendar-actions-menu'
}).data('calendar');

$('#reverse-sort').on('click', () => {
if (api) {
api.updated({
customSort: (a, b) => {
return (a.starts > b.starts ? -1 : (a.starts < b.starts ? 1 : 0))
}
});
}
});

$('#sort').on('click', () => {
if (api) {
api.updated({
customSort: (a, b) => {
return (a.starts < b.starts ? -1 : (a.starts > b.starts ? 1 : 0))
}
});
}
});
});

$('#actions').on('selected', function(e, args) {
var action = args[0].getAttribute('data-action');
var api = $('.calendar').data('calendar');
var selectedDate = api.getDayEvents();
var events = api.settings.events;
var defaultHours = 8;
var startDate = new Date(selectedDate.date);
var endDate = new Date(selectedDate.date);
var isAllDay = true;
startDate.setHours(0, 0, 0, 0);
endDate.setHours(startDate.getHours() + defaultHours);
// To default all day use
if (isAllDay) {
endDate.setHours(23, 59, 59, 999);
}

if (action === 'add-api') {
var newEvent = {
id: (parseInt(events.length === 0 ? 0 : events[events.length - 1].id) + 1).toString(),
subject: 'New Random Event',
comments: 'New Random Event Details',
starts: Soho.Locale.formatDate(startDate, { pattern: 'yyyy-MM-ddTHH:mm:ss.SSS' }),
ends: Soho.Locale.formatDate(endDate, { pattern: 'yyyy-MM-ddTHH:mm:ss.SSS' }),
type: 'team',
isAllDay: isAllDay
};
api.addEvent(newEvent);
}

if (action === 'add-modal') {
var newEvent = {
id: (parseInt(events.length === 0 ? 0 : events[events.length - 1].id) + 1).toString(),
title: 'Request Time Off',
subject: 'New Random Event',
comments: 'New Random Event Details',
starts: Soho.Locale.formatDate(startDate, { pattern: 'yyyy-MM-ddTHH:mm:ss.SSS' }),
ends: Soho.Locale.formatDate(endDate, { pattern: 'yyyy-MM-ddTHH:mm:ss.SSS' }),
type: 'dto',
isAllDay: isAllDay
};

var done = function(elem, event) {
// Collect the data and popuplate the event object
var inputs = elem.querySelectorAll('input, textarea, select');
for (var i = 0; i < inputs.length; i++) {
newEvent[inputs[i].id] = inputs[i].getAttribute('type') === 'checkbox' ? inputs[i].checked : inputs[i].value;
}

api.addEvent(newEvent);
return;
};

api.showEventModal(newEvent, done);
}

if (action === 'clear') {
api.clearEvents(selectedDate.date);
}
});

</script>

<script id="tmpl-mbl-readonly" type="text/html">
{{={{{ }}}=}}
<ul>
{{#event}}
<li class="border-color {{color}}" data-id="{{id}}">
<div class="container">
<div class="column-left">
{{#subject}}
<p class="listview-heading">{{subject}}</p>
{{/subject}}

{{#duration}}
<p class="listview-subheading">{{startsLong}} - {{endsLong}}</p>
{{/duration}}

{{#durationHours}}
<p class="listview-subheading">{{startsHoursLong}} - {{endsHoursLong}}</p>
{{/durationHours}}

{{#status}}
<p class="listview-subheading">{{typeLabel}} | {{status}}</p>
{{/status}}
</div>
<div class="column-right">
{{#duration}}
<p class="listview-micro">{{duration}} {{durationUnits}}</p>
{{/duration}}
{{#durationHours}}
<p class="listview-micro">{{durationHours}} {{durationUnits}}</p>
{{/durationHours}}
<svg role="presentation" aria-hidden="true" focusable="false" class="icon">
<use href="#icon-caret-right"></use>
</svg>
</div>
</div>
</li>
{{/event}}
</ul>
</script>

<script id="tmpl-readonly" type="text/html">
{{={{{ }}}=}}
{{#event}}
<div class="accordion-header is-expanded {{color}}">
<a href="#">{{subject}}</a>
</div>
<div class="accordion-pane is-expanded">
<div class="accordion-content">
{{#status}}
<div class="field">
<span class="label" data-translate="text">Status</span>
<span class="data">
{{status}}
{{#icon}}
<svg class="icon {{icon}}" focusable="false" aria-hidden="true" role="presentation" data-status="{{status}}"><use href="#{{icon}}"></use></svg>
{{/icon}}
</span>
</div>
{{/status}}
<div class="field">
<span class="label" data-translate="text">Date</span>
{{#duration}}
<span class="data">
{{startsLong}}
-
{{endsLong}}
</span>
{{/duration}}
{{#durationHours}}
<span class="data">
{{startsHoursLong}}
-
{{endsHoursLong}}
</span>
{{/durationHours}}
</div>
<div class="field">
<span class="label" data-translate="text">EventType</span>
<span class="data">
{{typeLabel}}
</span>
</div>
<div class="field">
<span class="label" data-translate="text">Duration</span>
{{#duration}}
<span class="data">
{{duration}} {{durationUnits}}
</span>
{{/duration}}
{{#durationHours}}
<span class="data">
{{durationHours}} {{durationUnits}}
</span>
{{/durationHours}}
</div>
<div class="field">
<span class="label" data-translate="text">Comments</span>
<span class="data{{#noComments}} is-placeholder{{/noComments}}" >
{{comments}}
</span>
</div>
</div>
</div>
{{/event}}
</script>

<script id="tmpl-modal" type="text/html">
{{#event}}
<div class="container">
<div class="form-responsive row">
<div class="twelve columns">
<div class="field">
<label for="subject" class="label" data-translate="text"><span data-translate="text">Subject</span></label>
<input id="subject" type="text" value="{{subject}}">
</div>
</div>
</div>
<div class="form-responsive row">
<div class="twelve columns">
<div class="field">
<label for="type" class="label"><span data-translate="text">Type</span></label>
<select id="type" class="dropdown" name="type">
{{#eventTypes}}
<option value="{{id}}">{{label}}</option>
{{/eventTypes}}
</select>
</div>
</div>
</div>
<div class="form-responsive row">
<div class="twelve columns">
<div class="field field-checkbox">
<input type="checkbox" class="checkbox" name="isAllDay" id="isAllDay" {{#isAllDay}}checked="true"{{/isAllDay}}>
<label for="isAllDay" class="checkbox-label"><span data-translate="text">AllDay</span></label>
</div>
</div>
</div>
<div class="form-responsive row">
<div class="six columns">
<div class="field">
<label for="startsLocale" class="label"><span data-translate="text">From</span></label>
<input id="startsLocale" class="datepicker" name="starts" type="text" value="{{startsLocale}}" data-validate="required date"/>
</div>
</div>
<div class="six columns">
<div class="field">
<label for="startsHourLocale" class="label">&nbsp;<span class="audible">Time</span></label>
<input id="startsHourLocale" class="timepicker" name="startshour" type="text" {{#isAllDay}}disabled="true"{{/isAllDay}} value="{{startsHourLocale}}" data-validate="required time"/>
</div>
</div>
</div>
<div class="form-responsive row">
<div class="six columns">
<div class="field">
<label for="endsLocale" class="label"><span data-translate="text">To</span></label>
<input id="endsLocale" class="datepicker" name="ends" type="text" value="{{endsLocale}}" data-validate="required date"/>
</div>
</div>
<div class="six columns">
<div class="field">
<label for="endsHourLocale" class="label">&nbsp;<span class="audible">Time</span></label>
<input id="endsHourLocale" class="timepicker" name="endsHourLocale" type="text" value="{{endsHourLocale}}" {{#isAllDay}}disabled="true"{{/isAllDay}} data-validate="required time"/>
</div>
</div>
</div>
<div class="form-responsive row">
<div class="twelve columns">
<div class="field">
<label for="comments" class="label"><span data-translate="text">Comments</span></label>
<textarea id="comments" type="text" value="{{comments}}"></textarea>
</div>
</div>
</div>
</div>
{{/event}}
<div class="modal-buttonset">
<button id="cancel" data-cancel="submit" type="button" class="btn-modal-secondary"><span data-translate="text">Cancel</span></button>
<button id="submit" data-action="submit" type="button" class="btn-modal-primary hide-focus"><span data-translate="text">Submit</span></button>
</div>
</script>

Loading

0 comments on commit e8216fc

Please sign in to comment.