new DateTime() passing to <input-date> fails

Andre · Aug 2nd 2018

Dear all,

I am new to Pagekit and Vue.js and really impressed! Currently I am developing my own extension and - so far - its quite perfect. Except one little thing...

The Problem:

I have a model "Transfer" and I want to change its database entries through an admin panel with Vue.JS.

I can create new "Transfers" and change all its entries and values, except a column of type datetime, in my case its called "created".

Whenever I pass "transfer.created" to <input-date> like so:

Code

<input-date :datetime.sync="transfer.created"></input-date>

The datetime picker renders the date but not the time.

When I try to change the value I always get "Invalid date" and the console says:

Code

Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info.
s @ datepicker.min.js:2
(anonymous) @ datepicker.min.js:2
K @ datepicker.min.js:2
ee @ datepicker.min.js:2
ce @ datepicker.min.js:2
De @ datepicker.min.js:2
get @ vue.js?v=f578:5002
Watcher.get @ vue.js?v=f578:3292
Watcher.evaluate @ vue.js?v=f578:3475
computedGetter @ vue.js?v=f578:8196
(anonymous) @ VM5833:3
Watcher.get @ vue.js?v=f578:3292
Watcher.run @ vue.js?v=f578:3433
runBatcherQueue @ vue.js?v=f578:3190
flushBatcherQueue @ vue.js?v=f578:3160
nextTickHandler @ vue.js?v=f578:451
Promise.then (async)
timerFunc @ vue.js?v=f578:466
(anonymous) @ vue.js?v=f578:500
pushWatcher @ vue.js?v=f578:3224
Watcher.update @ vue.js?v=f578:3422
Dep.notify @ vue.js?v=f578:2122
reactiveSetter @ vue.js?v=f578:2413
setPath @ vue.js?v=f578:2906
(anonymous) @ vue.js?v=f578:3067
Watcher.set @ vue.js?v=f578:3328
self.childWatcher.Watcher.sync @ vue.js?v=f578:6529
Watcher.run @ vue.js?v=f578:3459
Watcher.update @ vue.js?v=f578:3411
Dep.notify @ vue.js?v=f578:2122
reactiveSetter @ vue.js?v=f578:2413
setPath @ vue.js?v=f578:2906
(anonymous) @ vue.js?v=f578:3067
Vue.$set @ vue.js?v=f578:9077
set @ vue.js?v=f578:5010
(anonymous) @ vue.js?v=f578:220
setPath @ vue.js?v=f578:2906
(anonymous) @ vue.js?v=f578:3067
Watcher.set @ vue.js?v=f578:3328
(anonymous) @ vue.js?v=f578:8627
Directive._withLock @ vue.js?v=f578:8644
Directive.set @ vue.js?v=f578:8626
listener.rawListener @ vue.js?v=f578:4875
dispatch @ jquery.js:4435
r.handle @ jquery.js:4121
trigger @ jquery.js:4350
(anonymous) @ jquery.js:4901
each @ jquery.js:374
each @ jquery.js:139
trigger @ jquery.js:4900
(anonymous) @ datepicker.min.js:2
dispatch @ jquery.js:4435
r.handle @ jquery.js:4121

Display More

If I try to display the date directly like this:

Code

<div class="uk-form-controls uk-form-controls-text">
<p>{{ $trans('%date%', { date: transfer.created ? $date(transfer.created) : $trans('Never') }) }}</p>
</div>

I get this:

What I have tried:

I had a look at the blog-extension and copied and pasted nearly everthing related from BlogController.php, PostApiController.php, post-edit.php, post-edit.js and post-settings.vue.

In the blog-extension the "post.date" renders like a charm - in my extension not. It really drives me crazy!

Can anybody give me a hint? What am I doing wrong?

Cheers,

Andre

Andre · Aug 2nd 2018

Before you ask about my Model, here it is:

PHP

<?php
namespace SecretVendor\Core\Model;
use Pagekit\Database\ORM\ModelTrait;
/**
* @Entity(tableClass="@SecretVendor_transfers")
*/
class Transfer
{
use ModelTrait;
const TYPE_OUTLOOK = 0;
const TYPE_WEB = 1;
const TYPE_THIRD = 2;
const STATUS_LOCKED = 0;
const STATUS_DELETED = 1;
const STATUS_EXPIRED = 2;
const STATUS_ACTIVE = 3;
/** @Column(type="integer") @Id */
public $id;
/** @Column(type="smallint") */
public $upload_type;
/** @Column */
public $token = '';
/** @Column */
public $password = '';
/** @Column */
public $ip = '';
/** @Column(type="smallint") */
public $status;
/** @Column */
public $note = '';
/** @Column */
public $provider_email = '';
/** @Column */
public $provider_note = '';
/** @Column(type="datetime") */
public $expires;
/** @Column(type="datetime") */
public $created;
public static function getStatuses()
{
return [
self::STATUS_LOCKED => __('Gesperrt'),
self::STATUS_DELETED => __('Gelöscht'),
self::STATUS_EXPIRED => __('Abgelaufen'),
self::STATUS_ACTIVE => __('Aktiv')
];
}
public static function getTypes()
{
return [
self::TYPE_OUTLOOK => __('Outlook'),
self::TYPE_WEB => __('Webinterface'),
self::TYPE_THIRD => __('Bereitstellungslink')
];
}
public function generateGUID() {
return sprintf('%04X%04X%04X%04X%04X%04X%04X%04X', mt_rand(0, 65535), mt_rand(0, 65535), mt_rand(0, 65535), mt_rand(16384, 20479), mt_rand(32768, 49151), mt_rand(0, 65535), mt_rand(0, 65535), mt_rand(0, 65535));
}
}

Display More

Andre · Aug 2nd 2018

After two days of headache I found the solution

The class model needs to implement \JsonSerializable. Only then all datetimes get rendered correctly,

Is this a bug?

SPQRInc · Aug 2nd 2018

I don’t think it’s a bug, but you could try to dump the variables and compare them. As I am on mobile device at the moment I can not check the code but I guess the field expects a Json object.

Andre · Aug 2nd 2018

When I dump the variables server-side, they are the same.

When I dump them client-side -- in the browser -- they are different. With \JsonSerializable its json, without its [object Object].

SPQRInc · Aug 2nd 2018

You can also dump the object I‘d like to see the content.

SAB · Aug 2nd 2018

You can dump variables in Vue.js as json like this:

{{ variable | json }}

The better way would be to use the Vue.js Devtools which are available as Chrome Extension.

For serialization this could help:

Code

/**
* @Entity(tableClass="@mytable")
*/
class MyClass implements \JsonSerializable //enable jsonserializable
{
// called if you pass a object as a $variable => new MyClass in a controller return statement
public function jsonSerialize()
{
//return object as array and add custom keys on serialization if provided
return $this->toArray(['url' => $this->getUrl('base')]);
}
}
/**
* Gets model data as array.
*
* @param array $data
* @param array $ignore
* @return array
*/
public function toArray(array $data = [], array $ignore = []) { //retrieve model data and merge $data to }

Display More

Fosphatic Duke · Aug 2nd 2018

Sab I still would like to have a brain dumb 😜😜😜

new DateTime() passing to <input-date> fails

SPQRInc Aug 2nd 2018

Share

Tags