Verified Commit 3fc24111 authored by Agate's avatar Agate 💬

Updated fron-end with more generic components and pagination

parent 501d2c09
......@@ -3,10 +3,32 @@
<section class="section">
<div class="container contributions">
<h1 class="title">Contribution logs</h1>
<contribution-item
<div class="filters" v-if="stats">
<div class="field">
<label class="label">Type</label>
<div class="control">
<div class="select">
<select v-model="filters.type">
<option
:key="option.value"
v-for="option in typeOptions"
:value="option.value">
{{ option.label }}
<template v-if="option.value">({{ stats.types[option.value] }})</template>
</option>
</select>
</div>
</div>
</div>
</div>
<hr />
<component
:is="getComponent(contribution.type)"
:key="contribution.key"
:contribution="contribution"
v-for="contribution in contributions"></contribution-item>
v-for="contribution in contributions"></component>
<button @click="fetch(true)" v-if="next" class="button is-medium is-fullwidth">Load more</button>
</div>
</section>
</div>
......@@ -16,27 +38,79 @@
import axios from "axios";
import ContributionItem from "@/components/ContributionItem";
import Issue from "@/components/Issue";
import Donation from "@/components/Donation";
export default {
components: {
ContributionItem
ContributionItem,
Donation,
Issue
},
data() {
return {
contributions: []
contributions: [],
filters: {
type: null
},
next: null,
stats: null,
typeOptions: [
{ value: null, label: "All" },
{ value: "donation", label: "Donations" },
{ value: "dev:issue", label: "Development/Issue" }
]
};
},
created() {
this.fetchStats();
this.fetch();
},
methods: {
fetch() {
getComponent(type) {
let mapping = {
"dev:issue": Issue,
donation: Donation
};
return mapping[type] || ContributionItem;
},
fetchStats() {
let self = this;
let url = "http://localhost:8000/api/contributions/";
let url = "http://localhost:8000/api/contributions/stats/";
axios.get(url).then(response => {
self.contributions = response.data.results;
self.stats = response.data;
});
},
fetch(append) {
let self = this;
let filters = {};
if (this.filters.type) {
filters.type = this.filters.type;
}
let promise;
if (append) {
promise = axios.get(this.next);
} else {
let url = "http://localhost:8000/api/contributions/";
promise = axios.get(url, { params: filters });
}
promise.then(response => {
if (append) {
self.contributions = self.contributions.concat(response.data.results);
} else {
self.contributions = response.data.results;
}
self.next = response.data.next;
});
}
},
watch: {
filters: {
handler() {
this.fetch();
},
deep: true
}
}
};
</script>
......@@ -45,4 +119,8 @@ export default {
.container.contributions {
max-width: 40em;
}
.button.is-fullwidth {
margin-top: 1em;
}
</style>
......@@ -2,9 +2,9 @@
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<div v-if="contribution.contributor.avatar_url" class="media-left">
<figure class="image is-48x48">
<img :src="avatarUrl" alt="Placeholder image">
<img :src="contribution.contributor.avatar_url" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
......@@ -14,23 +14,14 @@
<time :datetime="contribution.creation_date">{{ contribution.creation_date | ago }}</time>
</div>
<div class="content">
Opened ticket <a :title="contribution.summary" target="_blank" :href="contribution.url">#{{ contribution.metadata.id }}</a>
on repository <a target="_blank" :href="contribution.metadata.project_url">{{ contribution.metadata.project }}</a>
<br>
</div>
<div class="content"><slot></slot></div>
</div>
</div>
</template>
<script>
export default {
props: ["contribution"],
computed: {
avatarUrl() {
return this.contribution.contributor.metadata.gitlab.avatar_url;
}
}
props: ["contribution"]
};
</script>
<style>
......
<template>
<contribution-item :contribution="contribution">
Donated {{ contribution.metadata.amount / 100 }} {{ contribution.metadata.currency }}
on collective <a target="_blank" :href="contribution.metadata.project_url">{{ contribution.metadata.collective }}</a>
</contribution-item>
</template>
<script>
import ContributionItem from "@/components/ContributionItem";
export default {
props: ["contribution"],
components: {
ContributionItem
}
};
</script>
<template>
<contribution-item :contribution="contribution">
Opened ticket <a :title="contribution.summary" target="_blank" :href="contribution.url">#{{ contribution.metadata.id }}</a>
on repository <a target="_blank" :href="contribution.metadata.project_url">{{ contribution.metadata.project }}</a>
</contribution-item>
</template>
<script>
import ContributionItem from "@/components/ContributionItem";
export default {
props: ["contribution"],
components: {
ContributionItem
}
};
</script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment