New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

04: Sulu-Admin form #4

Open
wants to merge 4 commits into
base: 03-api
from
File filter...
Filter file types
Jump to file or symbol
Failed to load files and symbols.
+125 −0
Diff settings

Always

Just for now

@@ -0,0 +1,10 @@
<form id="news-form" class="grid">
<div class="form-group grid-row">
<label for="news-title"><%= translations.title %></label>
<input type="text" id="news-title" name="title" class="form-element input-bold required" data-mapper-property="title" data-validation-required="true"/>
</div>
<div class="form-group">
<label for="news-content"><%= translations.content %></label>
<textarea id="news-content" name="content" class="form-element" data-mapper-property="content"></textarea>
</div>
</form>
@@ -0,0 +1,101 @@
define(['underscore', 'jquery', 'text!./form.html'], function(_, $, form) {

return {

defaults: {
templates: {
form: form,
url: '/admin/api/news<% if (!!id) { %>/<%= id %><% } %>'
},
translations: {
title: 'public.title',
content: 'news.content'
}
},

header: {
title: 'news.headline',
toolbar: {
buttons: {
save: {
parent: 'saveWithOptions'
}
}
}
},

layout: {
content: {
width: 'fixed',
leftSpace: true,
rightSpace: true
}
},

initialize: function() {
this.render();

this.bindDomEvents();
this.bindCustomEvents();
},

render: function() {
this.$el.html(this.templates.form({translations: this.translations}));

this.form = this.sandbox.form.create('#news-form');
this.form.initialized.then(function() {

This comment has been minimized.

@wachterjohannes

wachterjohannes Feb 12, 2016

Member

initializes a husky form to map and validate data.

this.sandbox.form.setData('#news-form', this.data || {});

This comment has been minimized.

@wachterjohannes

wachterjohannes Feb 12, 2016

Member

this line maps the given object with the help of data-mapper-property attributes

}.bind(this));
},

bindDomEvents: function() {
this.$el.find('input, textarea').on('keypress', function() {
this.sandbox.emit('sulu.header.toolbar.item.enable', 'save');

This comment has been minimized.

@wachterjohannes

wachterjohannes Feb 12, 2016

Member

simple change detection which enables the button on data change.

}.bind(this));
},

bindCustomEvents: function() {
this.sandbox.on('sulu.toolbar.save', this.save.bind(this));
},

save: function(action) {
if (!this.sandbox.form.validate('#news-form')) {
return;
}

var data = this.sandbox.form.getData('#news-form'),
url = this.templates.url({id: this.options.id});

this.sandbox.util.save(url, !this.options.id ? 'POST' : 'PUT', data).then(function(response) {
this.afterSave(response, action);
}.bind(this));
},

afterSave: function(response, action) {
this.sandbox.emit('sulu.header.toolbar.item.disable', 'save');

if (action === 'back') {
this.sandbox.emit('sulu.router.navigate', 'example/news');
} else if (action === 'new') {
this.sandbox.emit('sulu.router.navigate', 'example/news/add');
} else if (!this.options.id) {
this.sandbox.emit('sulu.router.navigate', 'example/news/edit:' + response.id);
}
},

loadComponentData: function() {
var promise = $.Deferred();

if (!this.options.id) {
promise.resolve();

return promise;
}
this.sandbox.util.load(_.template(this.defaults.templates.url, {id: this.options.id})).done(function(data) {

This comment has been minimized.

@wachterjohannes

wachterjohannes Feb 12, 2016

Member

currently there is a bug in the master. this is the reason why you cannot use this.templates to access the templates here. they will be initialized after this hook.

This comment has been minimized.

@gusdecool

gusdecool May 19, 2016

@wachterjohannes i got error

husky.js:28268 aura_1: Error caught in listener 'sulu.header.initialized', called with arguments:  [] 
Error: Cannot read property 'initialized' of undefined TypeError: Cannot read property 'initialized' of undefined(…) []

Not sure if this was the cause.

And also on your blog, you write it defaults.templates.url. please fix that

This comment has been minimized.

@wachterjohannes

wachterjohannes May 19, 2016

Member

the typo is fixed. are you sure that you have the id #news-form in your dom?

This comment has been minimized.

@gusdecool

gusdecool May 19, 2016

Yups, when i at the step of news/add it's working fine. Only after i update the code and add news/edit::id and this line of code give me error 😭

This comment has been minimized.

@wachterjohannes

wachterjohannes May 24, 2016

Member

sorry i have forgotten this problem (: is this still a valid problem?

This comment has been minimized.

@gusdecool

gusdecool May 24, 2016

Yups. The problem still valid :(

On Tue, May 24, 2016, 7:03 PM Johannes Wachter notifications@github.com
wrote:

In Resources/public/js/components/news/form/main.js
#4 (comment):

  •        } else if (action === 'new') {
    
  •            this.sandbox.emit('sulu.router.navigate', 'example/news/add');
    
  •        } else if (!this.options.id) {
    
  •            this.sandbox.emit('sulu.router.navigate', 'example/news/edit:' + response.id);
    
  •        }
    
  •    },
    
  •    loadComponentData: function() {
    
  •        var promise = $.Deferred();
    
  •        if (!this.options.id) {
    
  •            promise.resolve();
    
  •            return promise;
    
  •        }
    
  •        this.sandbox.util.load(_.template(this.defaults.templates.url, {id: this.options.id})).done(function(data) {
    

sorry i have forgotten this problem (: is this still a valid problem?


You are receiving this because you commented.
Reply to this email directly or view it on GitHub
https://github.com/sulu/ExampleNewsBundle/pull/4/files/737dc1f542467caa9ada59b4232bae8a85d06fe9#r64370657

Budi Arsana
Mobile: +62 817623397

This comment has been minimized.

@wachterjohannes

wachterjohannes May 25, 2016

Member

can you send me your code i will take a look at it!

This comment has been minimized.

@gusdecool

gusdecool May 26, 2016

Hi @wachterjohannes, i retest the code using only your PR without following the blog. it's all working fine, so probably there is some broken code in blog but not in PR. For this case i don't know which one is it, but after i follow your sample from PR, it's working fine now

promise.resolve(data);
});

return promise;
}
};
});
Copy path View file
@@ -23,6 +23,20 @@ define(function() {
return '<div data-aura-component="news/list@examplenews" data-aura-name="sulu" />';
}
});

app.sandbox.mvc.routes.push({
route: 'example/news/add',
callback: function() {
return '<div data-aura-component="news/form@examplenews"/>';
}
});

app.sandbox.mvc.routes.push({
route: 'example/news/edit::id',
callback: function(id) {
return '<div data-aura-component="news/form@examplenews" data-aura-id="' + id + '"/>';
}
});
}
};
});
ProTip! Use n and p to navigate between commits in a pull request.