Skip to content

#156006054 Display collections to the user #18

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.

Sign up for GitHub

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

Merged
eric-elem merged 2 commits into from
Mar 29, 2018
Merged

#156006054 Display collections to the user #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f90fbe
feat(collections): display collections to the user
muhallan Mar 15, 2018
32da977
feat(collections): prevent duplicate collections
muhallan Mar 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion application/base_model.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ def order_by(cls, *args):
@classmethod
def filter_all(cls, **kwargs):
"""Query and filter the data of the model."""
return cls.query.filter(**kwargs).all()
return cls.query.filter_by(**kwargs).all()

@classmethod
def filter_by(cls, **kwargs):
Expand Down
4 changes: 4 additions & 0 deletions application/models.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
from application.base_model import Base, db
from sqlalchemy.orm import backref

# many to many relationship between users and teams
team_members = db.Table(
Expand All @@ -15,6 +16,7 @@ class Team(Base):
__table_args__ = {'extend_existing': True}
name = db.Column(db.String(128), nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('User.id'))
collections = db.relationship('Collection', backref='team', lazy='select')

def __str__(self):
return self.name
Expand All @@ -30,6 +32,8 @@ class Collection(Base):
name = db.Column(db.String(128), nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('User.id'), nullable=False)
team_id = db.Column(db.Integer, db.ForeignKey('Team.id'))
requests = db.relationship('Request',
backref='collection', cascade='all, delete-orphan')

def __str__(self):
return self.name
Expand Down
31 changes: 31 additions & 0 deletions application/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,3 +233,34 @@ body {
#assertion0 .remove-assertion {
display: none;
}

/* Collections cards */
@media (min-width:576px) {
.card-columns {
column-count: 2;
}
}
@media (min-width:768px) {
.card-columns {
column-count: 2;
}
}
@media (min-width:992px) {
.card-columns {
column-count: 2;
}
}
@media (min-width:1200px) {
.card-columns {
column-count: 2;
}
}

.card {
margin-bottom: 1em !important;
}

.card:hover {
cursor: pointer;
border-color: #2267e7;
}
55 changes: 55 additions & 0 deletions application/static/js/collections.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
$("#form-collection").submit(addCollection);

function addCollection (event) {
console.log(event);
event.preventDefault();
var form_data = $(this).serializeArray();
console.log(form_data);
$.ajax({
type: 'POST',
url: '/collections',
data: form_data,
success: onAddCollection
});
}

function onAddCollection (response) {
if(response === "duplicate_collection") {
$("#collections-error").show();
} else {
window.location.reload(true);
}
}

$('.collection-card').on('click', function() {
var card = $(this);
var id = card.attr('id');
window.location.replace('/collections?id=' + id);
});

$(".collection-delete").on('click', function () {
event.cancelBubble = true;
if(event.stopPropagation)
event.stopPropagation();

var card = $(this);
var close_id = card.attr('id');
var parts = close_id.split('-');
var collection_id = parts[parts.length - 1];
console.log(collection_id);
$.ajax({
type: 'DELETE',
url: '/collections' + '?' + $.param({"id": collection_id}),
contentType: "application/text; charset=utf-8",
success: function(response) {
window.location.reload(true);
}
});
});

if(typeof module !== 'undefined') {
module.exports.main = {
addCollection,
onAddCollection
}
}
113 changes: 53 additions & 60 deletions application/templates/collections.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,62 @@
{% extends 'base.html' %}
{% from 'banner.html' import banner %}
<body>
{% block body %}
<main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
<div class="lh-100">
<h6 class="mb-0 text-white lh-100">API Monitor</h6>
<small>V1.0</small>
</div>
</div>

<div class="my-3 p-3 bg-white rounded box-shadow">
<div class="row">
<div class="col-sm-8">
{{ banner() }}

</div>
<div class="col-sm-4">
<h6 class="border-bottom border-gray pb-2 mb-0">Add Collection</h6>
<form id="form-collection" method="post" action="#">
<div class="form-group">
<label for="collectionName">Name</label>
<input type="text" name="collection" class="form-control" id="collection">
</div>
<div class="form-group">
<label for="collectionTeam">Select Team</label>
<select name="team" id="team">
{% for team in context["teams"] %}
<option value="{{ team.id }}">{{ team.name }}</option>
{% endfor %}
</select>
</div>
<button type="submit" class="btn btn-secondary btn-sm">Save</button>
</form>
</div>
</div>
</div>

<div class="my-3 p-3 bg-white rounded box-shadow">
<h6 class="border-bottom border-gray pb-2 mb-0">Requests</h6>
<div id="requests" class="media text-muted pt-3">
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<div class="d-flex justify-content-between align-items-center w-100">
<strong id="urlPlaceholder" class="text-gray-dark"></strong>
<a id="statusPlaceholder" href="#"></a>
<div class="container-box">
<div class="container-box">
<h3 class="pb-2 mb-0">Add Collection</h3>
<form id="form-collection" method="post" action="">
<div class="row">
<div class="form-group col-sm-6">
<label for="collectionName">Name</label>
<input type="text" name="collection" class="form-control" id="collection" required>
<small class="text-muted"><span id="collections-error" style="color:red; display:none;">You already have a collection with this name</span></small>
</div>
<div class="form-group col-sm-6">
<label for="collectionTeam">Team</label>
<label class="card-text"><small class="text-muted">(Optional)</small></label><br />
<select name="team" id="team" style="width:20em">
<option value="none">Select team</option>
{% for team in context["teams"] %}
<option value="{{ team.id }}">{{ team.name }}</option>
{% endfor %}
</select>
</div>
</div>
<button type="submit" class="btn btn-secondary btn-lg">Save</button>
</form>
</div>
<div class="card-columns">
{% if context["collections"] %}
{% for collection in context["collections"] %}
<div class="card collection-card" id="collection-{{ collection.id }}">
<div class="card-body">
<button type="button" class="close collection-delete" aria-label="Close" id="delete-collection-{{ collection.id }}">
<span aria-hidden="true">&times;</span>
</button>
<h2 class="card-title">{{ collection.name }}</h2>
<p class="card-text">{{ collection.team.name }}</p>
</div>
<div class="card-footer">
<div style="justify-content: space-between; display: flex">
<div>
<small class="text-muted">Last run <span style="color:blue;">3 mins ago</span></small>
</div>
<div>
<small class="text-muted">3 checks</small>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}

</div>
<span id="bodyPlaceholder" class="d-block"></span>
</div>
</div>
<small class="d-block text-right mt-3">
<a href="#">All collections</a>
</small>
</div>
</main>
<script>
$("#form-collection").submit(function (event) {
event.preventDefault();
var form_data = $(this).serializeArray();
$.ajax({
type: 'POST',
url: '/collections',
data: form_data,
success: function(response) {
window.location.reload(true);
}
});
});
</script>
<script src="{{ url_for('static', filename='js/collections.js') }}"></script>
{% endblock %}
</body>
</body>
18 changes: 16 additions & 2 deletions application/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,29 @@ def team():
return render_template("team.html", context=context)


@app_view.route('/collections', methods=['POST', 'GET'])
@app_view.route('/collections', methods=['POST', 'GET', 'DELETE'])
@authentication_required
def collections():
context = dict()
context["teams"] = Team.fetch_all()
context["title"] = "Collections"
if request.method == 'POST':
name = request.form["collection"]
team_id = request.form["team"]
team_id = request.form["team"] if request.form["team"] != 'none' else None

existing_collection = Collection.query.filter(Collection.user_id == current_user().id,
Collection.name == name).first()
if existing_collection:
return "duplicate_collection"

collection = Collection(name=name, user_id=current_user().id, team_id=team_id)
collection.save()

elif request.method == 'DELETE':
collection_id = request.args.get('id', '0')
collection = Collection.get(collection_id)
collection.delete()

user_collections = Collection.filter_all(user_id=current_user().id)
context["collections"] = user_collections
return render_template('collections.html', context=context)
4 changes: 2 additions & 2 deletions manage.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
from flask_script import Manager, Shell

from application.base_model import db
from application.models import Collection
from application.models import Collection, Team, Request, Response, team_members
from application.auth.models import User
from main import create_application

Expand All @@ -29,7 +29,7 @@ def shell_command():

"""
models = [
User, Collection
User, Collection, Team, Request, Response, team_members
]
zipped_models = zip(models, models)
return dict(zipped_models)
Expand Down