106 lines
2.2 KiB
Vue
106 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
v-if="isLoading"
|
||
|
|
class="circle"
|
||
|
|
>
|
||
|
|
<i class="fa fa-spinner fa-spin fa-3x fa-fw" />
|
||
|
|
<span class="sr-only">Loading …</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-else
|
||
|
|
class="container-fluid"
|
||
|
|
>
|
||
|
|
<div class="row">
|
||
|
|
<h2 class="mt-2">
|
||
|
|
This is an overview of my current public (and open source) projects.
|
||
|
|
</h2>
|
||
|
|
<!-- projects List -->
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<b-col
|
||
|
|
v-for="project in projects"
|
||
|
|
:key="project.id"
|
||
|
|
>
|
||
|
|
<div class="project-container bg-dark my-4">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-3">
|
||
|
|
<b-link :to="'/projects/' + project.id">
|
||
|
|
<img
|
||
|
|
v-if="project.teaserImage"
|
||
|
|
class="blog-img"
|
||
|
|
:src="'/uploads/projects/' + project.teaserImage"
|
||
|
|
alt="Teaser"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
v-else
|
||
|
|
class="blog-img"
|
||
|
|
src="/build/images/24unix/24_logo_bg_96x96.png"
|
||
|
|
alt="Teaser"
|
||
|
|
>
|
||
|
|
</b-link>
|
||
|
|
<br>
|
||
|
|
<div>
|
||
|
|
<b-col
|
||
|
|
v-for="developer in project.developer"
|
||
|
|
:key="developer"
|
||
|
|
>
|
||
|
|
<author :author-iri="developer" />
|
||
|
|
</b-col>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-8 mt-2">
|
||
|
|
<b-link :to="'/projects/' + project.id">
|
||
|
|
<div class="article-title d-inline-block pl-3 align-middle">
|
||
|
|
<h2 v-html="project.name" />
|
||
|
|
</div>
|
||
|
|
</b-link>
|
||
|
|
<br>
|
||
|
|
<div class="blog-teaser mb-2 pb-2 text-xl-start">
|
||
|
|
<span v-html="project.description" />
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
started: <span v-html="project.createdAt" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</b-col>
|
||
|
|
</div>
|
||
|
|
<div class="text-xl-start">
|
||
|
|
<b-link to="/add">
|
||
|
|
<i class="fa fa-plus-circle" />
|
||
|
|
</b-link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import axios from 'axios';
|
||
|
|
|
||
|
|
import Author from '@/components/users/UserCard';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ProjectsList',
|
||
|
|
components: {
|
||
|
|
Author
|
||
|
|
},
|
||
|
|
data: () => ({
|
||
|
|
projects: null,
|
||
|
|
isLoading: true
|
||
|
|
}),
|
||
|
|
mounted() {
|
||
|
|
this.getProjects();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getProjects() {
|
||
|
|
axios
|
||
|
|
.get('/api/projects')
|
||
|
|
.then((response) => (this.projects = response.data['hydra:member']));
|
||
|
|
this.isLoading = false;
|
||
|
|
console.log(this.projects);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|