Spookie/assets/js/components/projects/index.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>