merge settings and import to avoid clutter (#550)

ihatemoney/forms.py

@@ -114,8 +114,11 @@ class EditProjectForm(FlaskForm):
 
 class UploadForm(FlaskForm):
     file = FileField(
-        "JSON", validators=[FileRequired(), FileAllowed(["json", "JSON"], "JSON only!")]
+        "JSON",
+        validators=[FileRequired(), FileAllowed(["json", "JSON"], "JSON only!")],
+        description=_("Import previously exported JSON file"),
     )
+    submit = SubmitField(_("Import"))
 
 
 class ProjectForm(EditProjectForm):

ihatemoney/static/css/main.css

@@ -185,7 +185,7 @@ footer {
   padding: 45px 50px;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   footer {
     padding-left: calc(25% + 50px);
   }
@@ -523,3 +523,13 @@ footer .icon svg {
   text-align: right;
   width: 200px;
 }
+
+/* edit settings */
+
+.edit-project form {
+  margin-top: 1em;
+  margin-bottom: 3em;
+}
+.edit-project .custom-file {
+  margin-bottom: 2em;
+}

ihatemoney/templates/edit_project.html

@@ -5,18 +5,43 @@
     {
         $(this).html("<a style='color:red; ' href='{{ url_for('.delete_project') }}' >{{_("you sure?")}}</a>");
     });
+
+    $('.custom-file-input').on('change', function(event) {
+        var filename = [].slice.call(this.files).map(function (file) { return file.name}).join(',')
+        var $labelElement = $(this).parents('.custom-file').find('.custom-file-label')
+        $labelElement.text(filename)
+    })
 {% endblock %}
 
 {% block content %}
-<h2>{{ _("Edit project") }}</h2>
-<p>
-    <form class="form-horizontal" method="post">
-    {{ forms.edit_project(edit_form) }}
-    </form>
-</p>
+<div class="container edit-project">
 
-<h2>{{ _("Download project's data") }}</h2>
-<p>
+    <h2>{{ _("Edit project") }}</h2>
+    <form class="form-horizontal" method="post">
+        {{ forms.edit_project(edit_form) }}
+    </form>
+
+
+    <h2>{{ _("Import JSON") }}</h2>
+    <form class="form-horizontal" method="post" enctype="multipart/form-data">
+        {{ import_form.hidden_tag() }}
+
+        <div class="custom-file">
+            <div class="form-group">
+                {{ import_form.file(class="custom-file-input") }}
+                <small class="form-text text-muted">
+                    {{ import_form.file.description }}
+                </small>
+            </div>
+            <label class="custom-file-label" for="customFile">{{ _('Choose file') }}</label>
+        </div>
+
+        <div class="actions">
+            {{ import_form.submit(class="btn btn-primary") }}
+        </div>
+    </form>
+
+    <h2>{{ _("Download project's data") }}</h2>
     <div class="list-group download-project">
         <div class="list-group-item list-group-item-action">
             <h5 class="d-flex w-100 justify-content-between">
@@ -51,5 +76,5 @@
             <p class="mb-1 text-muted">{{ _('Download the list of transactions needed to settle the current bills.') }}</p>
         </div>
     </div>
-</p>
+</div>
 {% endblock %}

ihatemoney/templates/layout.html

@@ -46,7 +46,6 @@
           <li class="nav-item{% if current_view == 'settle_bill' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.settle_bill") }}">{{ _("Settle") }}</a></li>
           <li class="nav-item{% if current_view == 'statistics' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.statistics") }}">{{ _("Statistics") }}</a></li>
           <li class="nav-item{% if current_view == 'edit_project' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.edit_project") }}">{{ _("Settings") }}</a></li>
-          <li class="nav-item{% if current_view == 'upload_json' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.upload_json") }}">{{ _("Import") }}</a></li>
           {% endblock %}
         {% endif %}
       </ul>

ihatemoney/templates/upload_json.html

@@ -1,10 +0,0 @@
-{% extends "layout.html" %}
-
-{% block content %}
-    <h2>{{ _("Import JSON") }}</h2>
-    <p>
-    <form class="form-horizontal" method="post" enctype="multipart/form-data">
-        {{ forms.upload_json(form) }}
-    </form>
-    </p>
-{% endblock %}

ihatemoney/web.py

@@ -384,36 +384,36 @@ def reset_password():
 @main.route("/<project_id>/edit", methods=["GET", "POST"])
 def edit_project():
     edit_form = EditProjectForm()
-    if request.method == "POST":
-        if edit_form.validate():
-            project = edit_form.update(g.project)
-            db.session.add(project)
-            db.session.commit()
+    import_form = UploadForm()
+    # Import form
+    if import_form.validate_on_submit():
+        try:
+            import_project(import_form.file.data.stream, g.project)
+            flash(_("Project successfully uploaded"))
 
-            return redirect(url_for(".list_bills"))
+            return redirect(url_for("main.list_bills"))
+        except ValueError:
+            flash(_("Invalid JSON"), category="error")
+
+    # Edit form
+    if edit_form.validate_on_submit():
+        project = edit_form.update(g.project)
+        db.session.add(project)
+        db.session.commit()
+
+        return redirect(url_for("main.list_bills"))
     else:
         edit_form.name.data = g.project.name
         edit_form.contact_email.data = g.project.contact_email
 
     return render_template(
-        "edit_project.html", edit_form=edit_form, current_view="edit_project"
+        "edit_project.html",
+        edit_form=edit_form,
+        import_form=import_form,
+        current_view="edit_project",
     )
 
 
-@main.route("/<project_id>/upload_json", methods=["GET", "POST"])
-def upload_json():
-    form = UploadForm()
-    if form.validate_on_submit():
-        try:
-            import_project(form.file.data.stream, g.project)
-            flash(_("Project successfully uploaded"))
-        except ValueError:
-            flash(_("Invalid JSON"), category="error")
-        return redirect(url_for("main.list_bills"))
-
-    return render_template("upload_json.html", form=form)
-
-
 def import_project(file, project):
     json_file = json.load(file)