Skip to content
Snippets Groups Projects
Commit 21fa1bcf authored by jensmjahle's avatar jensmjahle
Browse files

Save chosen milestone to store and route to chosen milestone

parent 495911a3
No related branches found
No related tags found
1 merge request!28Milestone view
Pipeline #278034 failed
<script setup lang="ts"> <script setup lang="ts">
import ProgressBar from "@/components/ProgressBar.vue"; import ProgressBar from "@/components/ProgressBar.vue";
import {useMilestoneStore} from "@/stores/currentMilestone";
import router from "@/router";
const props = defineProps({ const props = defineProps({
id: Number, id: Number,
...@@ -14,8 +16,11 @@ const props = defineProps({ ...@@ -14,8 +16,11 @@ const props = defineProps({
const imageUrl = "src/assets/pig.png" const imageUrl = "src/assets/pig.png"
const openMilestone = () => { const openMilestone = () => {
console.log("Open dialog") useMilestoneStore().setMilestoneId(props.id)
router.push("/path")
} }
</script> </script>
<template> <template>
...@@ -52,5 +57,6 @@ const openMilestone = () => { ...@@ -52,5 +57,6 @@ const openMilestone = () => {
flex-direction: column; flex-direction: column;
place-content: space-between; place-content: space-between;
gap: 2.5%; gap: 2.5%;
transition: 0.3s;
} }
</style> </style>
\ No newline at end of file
<script setup lang="ts"> <script setup lang="ts">
import {ref} from "vue";
const props = defineProps({ const props = defineProps({
id: Number, id: Number,
title: String, title: String,
...@@ -11,22 +13,25 @@ const props = defineProps({ ...@@ -11,22 +13,25 @@ const props = defineProps({
}); });
const imageUrl = "src/assets/pig.png" const imageUrl = "src/assets/pig.png"
function openMilestone(){ const displayDescription = ref(false)
console.log("Open milestone")
}
</script> </script>
<template> <template>
<div class="completed-milestone-display" <div class="completed-milestone-display"
@click="openMilestone" @mouseover="displayDescription = true"
@mouseleave="displayDescription = false"
:style="{ :style="{
backgroundImage: image ? 'url(' + image + ')' : 'url(' + imageUrl + ')' backgroundImage: image ? 'url(' + image + ')' : 'url(' + imageUrl + ')'
}"> }">
<h2 class="title">{{props.title}}</h2> <h2 class="title">{{props.title}}</h2>
<div class="info"> <div class="info" v-if="!displayDescription">
<h4 v-if="currentSum">Du sparte {{props.currentSum}}kr</h4> <h4 v-if="currentSum">Du sparte {{props.currentSum}}kr</h4>
<h4 v-if="deadline">{{props.deadline.getDate()}}/{{props.deadline.getMonth()}}-{{props.deadline.getFullYear()}}</h4> <h4 v-if="deadline">{{props.deadline.getDate()}}/{{props.deadline.getMonth()}}-{{props.deadline.getFullYear()}}</h4>
</div> </div>
<div class="info" v-if="displayDescription">
<h4>{{props.description}}</h4>
</div>
</div> </div>
......
...@@ -220,6 +220,7 @@ flex-direction: column; ...@@ -220,6 +220,7 @@ flex-direction: column;
.active-milestone:hover{ .active-milestone:hover{
transform: scale(1.02); transform: scale(1.02);
transition: 0.3s;
} }
.right{ .right{
...@@ -259,6 +260,7 @@ flex-direction: column; ...@@ -259,6 +260,7 @@ flex-direction: column;
.completed-milestone:hover{ .completed-milestone:hover{
transform: scale(1.05); transform: scale(1.05);
transition: 0.3s;
} }
.pagination { .pagination {
...@@ -278,6 +280,7 @@ flex-direction: column; ...@@ -278,6 +280,7 @@ flex-direction: column;
} }
.pagination button:hover { .pagination button:hover {
transition: 0.3s;
transform: scale(1.05); transform: scale(1.05);
} }
...@@ -303,6 +306,7 @@ flex-direction: column; ...@@ -303,6 +306,7 @@ flex-direction: column;
} }
.page-numbers button:hover { .page-numbers button:hover {
transition: 0.3s;
transform: scale(1.05); transform: scale(1.05);
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment