assets
images
js
components
blog
pages
projects
ProjectDetails.vue
index.vue
quotes
tabs
users
AppLink.vue
HandleLogout.vue
LoginForm.vue
NotFound.vue
TheAbout.vue
TheFooter.vue
TheNavbar.vue
TheSidebar.vue
composables
router
stores
App.vue
index.js
styles
bin
config
migrations
public
src
templates
tools
translations
.env
.eslintrc
.gitignore
.php-cs-fixer.cache
.php-cs-fixer.php
LICENSE
README.md
TODO
bootstrap.js
composer.json
composer.lock
controllers.json
docker-compose.override.yml
docker-compose.yml
package.json
postcss.config.js
rector.php
symfony.lock
tailwind.config.js
webpack.config.js
yarn.lock
114 lines
2.4 KiB
Vue
114 lines
2.4 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">
|
|
<div
|
|
v-for="project in projects"
|
|
:key="project.id"
|
|
>
|
|
<div class="project-container bg-dark my-4">
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<router-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"
|
|
>
|
|
</router-link>
|
|
<br>
|
|
<div>
|
|
<div
|
|
v-for="developer in project.developer"
|
|
:key="developer"
|
|
class="col"
|
|
>
|
|
<user-card :author-iri="developer"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8 mt-2">
|
|
<router-link :to="'/projects/' + project.id">
|
|
<div class="article-title d-inline-block pl-3 align-middle">
|
|
<h2 v-html="project.name"/>
|
|
</div>
|
|
</router-link>
|
|
<br>
|
|
<div class="blog-teaser mb-2 pb-2 text-xl-start">
|
|
<span v-html="project.description"/>
|
|
<br>
|
|
<br>
|
|
started: <span v-html="formatDate(project.createdAt)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="text-xl-start">
|
|
<router-link to="/add">
|
|
<i class="fa fa-plus-circle"/>
|
|
</router-link>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
import UserCard from '@/components/users/UserCard'
|
|
|
|
export default {
|
|
name: 'ProjectsList',
|
|
components: {
|
|
UserCard,
|
|
},
|
|
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)
|
|
},
|
|
formatDate(date) {
|
|
return new Date(date).toLocaleDateString('de-DE')
|
|
}
|
|
}
|
|
}
|
|
</script>
|