Replace calendar component by vanilla javascript

This commit is contained in:
Frederic Guillot
2016-11-21 22:08:35 -05:00
parent 5188ed8cfe
commit a3bb27109d
5 changed files with 36 additions and 16 deletions

View File

@@ -16,6 +16,23 @@ use Kanboard\Formatter\TaskCalendarFormatter;
*/ */
class CalendarHelper extends Base class CalendarHelper extends Base
{ {
/**
* Render calendar component
*
* @param string $checkUrl
* @param string $saveUrl
* @return string
*/
public function render($checkUrl, $saveUrl)
{
$params = array(
'checkUrl' => $checkUrl,
'saveUrl' => $saveUrl,
);
return '<div class="js-calendar" data-params=\''.json_encode($params, JSON_HEX_APOS).'\'></div>';
}
/** /**
* Get formatted calendar task due events * Get formatted calendar task due events
* *

View File

@@ -1,6 +1,9 @@
<section id="main"> <section id="main">
<?= $this->projectHeader->render($project, 'CalendarController', 'show') ?> <?= $this->projectHeader->render($project, 'CalendarController', 'show') ?>
<calendar save-url="<?= $this->url->href('CalendarController', 'save', array('project_id' => $project['id'])) ?>"
check-url="<?= $this->url->href('CalendarController', 'project', array('project_id' => $project['id'])) ?>"> <?= $this->calendar->render(
</calendar> $this->url->href('CalendarController', 'project', array('project_id' => $project['id'])),
$this->url->href('CalendarController', 'save', array('project_id' => $project['id']))
) ?>
</section> </section>

View File

@@ -1,2 +1,4 @@
<calendar check-url="<?= $this->url->href('CalendarController', 'user', array('user_id' => $user['id'])) ?>" <?= $this->calendar->render(
save-url="<?= $this->url->href('CalendarController', 'save') ?>"></calendar> $this->url->href('CalendarController', 'user', array('user_id' => $user['id'])),
$this->url->href('CalendarController', 'save')
) ?>

File diff suppressed because one or more lines are too long

View File

@@ -1,9 +1,7 @@
Vue.component('calendar', { KB.component('calendar', function (containerElement, options) {
props: ['saveUrl', 'checkUrl'],
template: '<div id="calendar"></div>', this.render = function () {
ready: function() { var calendar = $(containerElement);
var self = this;
var calendar = $('#calendar');
calendar.fullCalendar({ calendar.fullCalendar({
locale: $("body").data("js-lang"), locale: $("body").data("js-lang"),
@@ -18,7 +16,7 @@ Vue.component('calendar', {
eventDrop: function(event) { eventDrop: function(event) {
$.ajax({ $.ajax({
cache: false, cache: false,
url: self.saveUrl, url: options.saveUrl,
contentType: "application/json", contentType: "application/json",
type: "POST", type: "POST",
processData: false, processData: false,
@@ -29,7 +27,7 @@ Vue.component('calendar', {
}); });
}, },
viewRender: function() { viewRender: function() {
var url = self.checkUrl; var url = options.checkUrl;
var params = { var params = {
"start": calendar.fullCalendar('getView').start.format(), "start": calendar.fullCalendar('getView').start.format(),
"end": calendar.fullCalendar('getView').end.format() "end": calendar.fullCalendar('getView').end.format()
@@ -46,5 +44,5 @@ Vue.component('calendar', {
}); });
} }
}); });
} };
}); });