PR#138: Implement widget configuration - fedora-hubs

		`@@ -156,20 +156,49 @@`
		`@app.route('/<hub>/<idx>/edit', methods=['GET'])`
		`def widget_edit_get(hub, idx):`
		`widget = get_widget(session, hub, idx)`
		`- raise NotImplementedError('next step is to get the widgets to render '`
		`- 'editable versions of themselves with their '`
		`- 'declared @arguments, etc...')`
		`- return widget.render(session, edit=True)`
		`+ if not widget.module.data.widget_arguments:`
		`+ flask.abort(404, 'Nothing to configure for this hub.')`
		`+ return flask.render_template(`
		`+ 'edit.html',`
		`+ hub=hub,`
		`+ widget=widget,`
		`+ url_to=flask.url_for('widget_edit_post', hub=hub, idx=idx)`
		`+ )`


		`@app.route('/<hub>/<idx>/edit/', methods=['POST'])`
		`@app.route('/<hub>/<idx>/edit', methods=['POST'])`
		`def widget_edit_post(hub, idx):`
		`- #widget = get_widget(session, hub, idx)`
		`- # TODO -- save things to the db ... and then redirect`
		`- widget.hub.last_edited = datetime.datetime.utcnow()`
		`- raise NotImplementedError('TODO - save changes to widget config')`
		`- flask.redirect(flask.url_for('hub', name=hub))`
		`+ widget = get_widget(session, hub, idx)`
		`+ error = False`
		`+ config = {}`
		`+ for arg in widget.module.data.widget_arguments:`
		`+ val = flask.request.form.get(arg.name)`
		`+ if not val:`
		`+ flask.flash(`
		`+ 'You must provide a value for: %s' % arg.name, 'error')`
		`+ error = True`
		`+ break`
		`+ try:`
		`+ arg.validator(session, val)`
		`+ config[arg.name] = val`
		`+ except Exception as err:`
		`+ flask.flash('Invalid data provided, error: %s' % err, 'error')`
		`+ error = True`
		`+ if not error:`
		`+ cur_config = widget.config`
		`+ cur_config.update(config)`
		`+ widget.config = cur_config`
sayanchowdhury commented 8 years ago :thumbsup:
		`+ widget.hub.last_edited = datetime.datetime.utcnow()`
		`+ session.add(widget)`
		`+ try:`
		`+ session.commit()`
		`+ except Exception as err:`
		`+ flask.flash(`
		`+ 'Could not save the configuration to the database '\`
		`+ 'if the error persists, please warn an admin',`
		`+ 'error')`
		`+ return flask.redirect(flask.url_for('hub', name=hub))`


		`@app.route('/source/<name>/')`

hubs/models.py

file modified

+1 -1

		`@@ -309,7 +309,7 @@`
		`return json.loads(self._config)`

		`@config.setter`
		`- def config_setter(self, config):`
		`+ def config(self, config):`
		`self._config = json.dumps(config)`

		`def __json__(self, session):`

hubs/templates/edit.html

file added

+35

		`@@ -0,0 +1,35 @@`
		`+`
		`+ <div class="modal-dialog" id="edit_form">`
		`+ <form method="post" action="{{ url_to }}">`
		`+ <!-- Modal content-->`
		`+ <div class="modal-content">`
		`+ <div class="modal-header">`
		`+ <button type="button" class="close" data-dismiss="modal">×</button>`
		`+ <h4 class="modal-title">Configure {{ name }}</h4>`
		`+ </div>`
		`+ <div class="modal-body">`
		`+ {% for arg in widget.module.data.widget_arguments %}`
		`+ <fieldset class="form-group ">`
		`+ <strong>{{ arg.name \| capitalize }}</strong>`
		`+ <input id="{{ arg.name }}" class="form-control" type="text"`
		`+ value="{{ widget.config.get(arg.name, arg.default if arg.default else '') }}"`
		`+ name="{{ arg.name }}" />`
		`+ </fieldset>`
		`+ {% if arg.help %}`
		`+ <div>`
		`+ <small class="text-muted">{{ arg.help }}</small>`
		`+ </div>`
		`+ {% endif %}`
		`+ {% endfor %}`
		`+ </div>`
		`+ <div class="modal-footer">`
		`+ <button type="submit" class="btn btn-default">`
		`+ Save`
		`+ </button>`
		`+ <button type="button" class="btn btn-default" data-dismiss="modal">`
		`+ Close`
		`+ </button>`
		`+ </div>`
		`+ </div>`
		`+ </form>`
		`+ </div>`

hubs/templates/hubs.html

file modified

+72 -13

		`@@ -111,6 +111,32 @@`
		`<h3 class="team">{{hub.name}}</h3>`
		`{% endif %}`
		`</div>`
		`+`
		`+ {%- with messages = get_flashed_messages(with_categories=true) -%}`
		`+ {%- if category, messages -%}`
		`+ <div class="container">`
		`+ <div class="row">`
		`+ <div class="col-md-6 col-md-offset-3">`
		`+ <ul id="flashes" class="list-group">`
		`+ {%- for category, message in messages -%}`
		`+ <div class="alert {%`
		`+ if category == 'error' %}alert-warning{%`
		`+ else %}alert-info{%`
		`+ endif %} alert-dismissible" role="alert">`
		`+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">`
		`+ <span aria-hidden="true">×</span>`
		`+ <span class="sr-only">Close</span>`
		`+ </button>`
		`+ {{ message }}`
		`+ </div>`
		`+ {%- endfor -%}`
		`+ </ul>`
		`+ </div>`
		`+ </div>`
		`+ </div>`
		`+ {%- endif -%}`
		`+ {%- endwith -%}`
		`+`
		`<div class="container">`
		`<div class="row">`
		`</div>`
		`@@ -176,31 +202,64 @@`
		`</div>`
		`</div>`

		`+ <div id="edit_modal" class="modal fade" role="dialog">`
		`+ <div class="modal-dialog" id="edit_modal_content">`
		`+ </div>`
		`+ </div>`
		`+`
		`<script src="{{ url_for('static', filename='js/jquery-1.10.2.min.js') }}"></script>`
		`<script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>`
		`<script src="{{ url_for('static', filename='js/utils.js') }}"></script>`
		`- <script>`
		`- var widgets = [{% for widget in hub.widgets %}'{{ widget.idx }}',{% endfor %}];`
		`- $.each(widgets, function(i, widget) {`
		`+ <script type="text/javascript">`
		`+ function setup_edit_btns() {`
		`+ $(".edit_widget").unbind();`
		`+ $(".edit_widget").click(function() {`
		`+ console.log($(this));`
		`+ var _idx = $(this).attr('data-idx');`
		`+`
		`$.ajax({`
		`- {% if edit %}`
		`- url: widget + '/edit/',`
		`- {% else %}`
		`- url: widget,`
		`- {% endif %}`
		`+ url: _idx + '/edit',`
		`dataType: 'html',`
		`success: function(html) {`
		`- $('#widget-' + widget).html(html);`
		`- setTimeout(function() {`
		`- $('#widget-' + widget + ' .panel').toggleClass('panel-visible');`
		`- }, 100);`
		`+ $('#edit_modal_content').html(html);`
		`+ $('#edit_modal').modal();`
		`},`
		`error: function() {`
		`- $('#widget-' + widget).html('Got an error retrieving this widget. Sorry :(');`
		`+ $('#edit_modal_content').html(`
		`+ '<div class="modal-dialog"><div class="modal-content"> \`
		`+ <div class="modal-body"> \`
		`+ Nothing to configure for this widget\`
		`+ </div></div></div>'`
		`+ );`
		`console.log('error');`
		`console.trace();`
		`+ $('#edit_modal').modal();`
		`},`
		`});`
		`+ return false;`
		`+ });`
		`+ }`
		`+ var widgets = [{% for widget in hub.widgets %}'{{ widget.idx }}',{% endfor %}];`
		`+ $.each(widgets, function(i, widget) {`
		`+ $.ajax({`
		`+ url: widget,`
		`+ dataType: 'html',`
		`+ success: function(html) {`
		`+ $('#widget-' + widget).html(html);`
		`+ setTimeout(function() {`
		`+ $('#widget-' + widget + ' .panel').toggleClass('panel-visible');`
		`+ }, 100);`
		`+ setup_edit_btns()`
		`+ },`
		`+ error: function() {`
		`+ $('#widget-' + widget).html('Got an error retrieving this widget. Sorry :(');`
		`+ console.log('error');`
		`+ console.trace();`
		`+ },`
		`+ });`
		`+ setup_edit_btns();`
		`});`
		`+`
		`+`
		`</script>`
		`</body></html>`

hubs/widgets/base.py

file modified

		`@@ -48,6 +48,9 @@`
		`result['source_url'] = flask.url_for('widget_source', name=name)`
		`result['widget_url'] = flask.url_for(`
		`'widget_render', hub=widget.hub.name, idx=widget.idx)`
		`+ result['edit_url'] = flask.url_for(`
		`+ 'widget_edit_get', hub=widget.hub.name, idx=widget.idx)`
		`+ result['widget_idx'] = widget.idx`
		`return result`

		`return inner`

hubs/widgets/templates/panel.html

file modified

+10 -6

		`@@ -1,12 +1,16 @@`
		`- <div class="panel {{klass}}">`
		`- {{heading}}`
		`+ <div class="panel {{ klass }}">`
		`+ {{ heading }}`
		`<div class="pull-right widget-buttons">`
		`<!-- the AGPLv3 wrapper puts the source url in all responses -->`
		`- <a href="{{source_url}}"><span class="glyphicon glyphicon-eye-open"></span></a>`
		`- <a href="{{widget_url}}"><span class="glyphicon glyphicon-new-window"></span></a>`
		`- <a href="#"><span class="glyphicon glyphicon-edit"></span></a>`
		`+ <a href="{{ source_url }}"><span class="glyphicon glyphicon-eye-open"></span></a>`
		`+ <a href="{{ widget_url }}"><span class="glyphicon glyphicon-new-window"></span></a>`
		`+ <a data-target="#edit_modal" data-toggle="modal" type="button"`
ralph commented 8 years ago Maybe, only show the edit button if there are `widget_arguments` available?
pingou commented 8 years ago Yup that's one thing I wanted to do, unless we include the 'Remove this widget' button in this panel. I may forward the entire widget object to the template instead of just the id to be able to do such logic.
		`+ class="edit_widget" data-idx="{{ widget_idx }}">`
		`+ <span class="glyphicon glyphicon-edit"></span>`
		`+ </a>`
		`+ </a>`
		`</div>`
		`<div class="panel-body">`
		`- {{content}}`
		`+ {{ content }}`
		`</div> <!-- end panel-body -->`
		`</div> <!-- end panel -->`

no initial comment

pingou commented 8 years ago

With these changes the small 'edit' icon at the top right of each widget will work.
It will show a panel where the configuration item of each widget is presented.

pingou commented 8 years ago

The review of this PR can be started but I've one thing I want to fix on how we save the configuration, mostly a polishing so if people want to test, this should already work.

ralph commented on line 13 of hubs/widgets/templates/panel.html 8 years ago

Maybe, only show the edit button if there are widget_arguments available?

ralph commented 8 years ago

Looks good! :)

pingou commented on line 13 of hubs/widgets/templates/panel.html 8 years ago

Yup that's one thing I wanted to do, unless we include the 'Remove this widget' button in this panel.

I may forward the entire widget object to the template instead of just the id to be able to do such logic.