Tasks: list task by AppStore

This commit is contained in:
Filip Rojek 2023-12-30 23:07:20 +01:00
parent 4d9b916fb4
commit dad526fdee
4 changed files with 66 additions and 69 deletions

View File

@ -1,13 +1,7 @@
<script setup> <script setup>
import { computed } from 'vue' import { computed } from 'vue'
const props = defineProps({ const props = defineProps(['task'])
title: String,
project: String,
client: String,
timeStart: Date,
timeEnd: Date
})
function normalizeTime(time) { function normalizeTime(time) {
let d = new Date(Number(time)) let d = new Date(Number(time))
@ -28,45 +22,53 @@ function formatDuration(durationInSeconds) {
return `${h}:${m}:${s}` return `${h}:${m}:${s}`
} }
const normalizedTimeStart = computed(() => normalizeTime(props.timeStart)) const normalizedTimeStart = computed(() => normalizeTime(props.task.timeStart))
const normalizedTimeEnd = computed(() => normalizeTime(props.timeEnd)) const normalizedTimeEnd = computed(() => normalizeTime(props.task.timeEnd))
const durationInSeconds = computed(() => Math.floor((props.timeEnd - props.timeStart) / 1000)) const durationInSeconds = computed(() =>
Math.floor((props.task.timeEnd - props.task.timeStart) / 1000)
)
const normalizedDuration = computed(() => formatDuration(durationInSeconds.value)) const normalizedDuration = computed(() => formatDuration(durationInSeconds.value))
console.log(props.task.title)
</script> </script>
<template> <template>
<div class="task-wrapper"> <div class="task">
<div class="task"> <span>
<span> <input
<input type="text"
type="text" class="title"
class="title" placeholder="What are you working on?"
placeholder="What are you working on?" :value="props.task.title"
value="Making frontend" :size="props.task.title.length + 1"
/> />
</span> </span>
<span> <span>
<p>{{ project }}</p> <p>{{ props.task.project }}</p>
<p>{{ client }}</p> <p>{{ props.task.client }}</p>
</span> </span>
<span> <!--
<img src="/src/assets/svg/dollar.svg" alt="" /> <span>
</span> <img src="/src/assets/svg/dollar.svg" alt="" />
<span> </span>
<input type="time" :value="normalizedTimeStart" /> -->
<p>-</p> <span>
<input type="time" :value="normalizedTimeEnd" /> <input type="time" :value="normalizedTimeStart" />
</span> <p>-</p>
<span> <input type="time" :value="normalizedTimeEnd" />
<input type="text" :value="normalizedDuration" :size="normalizedDuration.length + 1" /> </span>
</span> <span>
<span> <input type="text" :value="normalizedDuration" />
<img src="/src/assets/svg/play.svg" alt="" /> </span>
</span> <!--
<span> <span>
<img src="/src/assets/svg/dots.svg" alt="" /> <img src="/src/assets/svg/play.svg" alt="" />
</span> </span>
</div> <span>
<img src="/src/assets/svg/dots.svg" alt="" />
</span>
-->
</div> </div>
</template> </template>
<script></script>

View File

@ -1,19 +0,0 @@
<script setup>
import TaskHeader from '@/components/TaskHeader.vue'
import TaskRecord from '@/components/TaskRecord.vue'
defineProps({
title: String,
project: String,
client: String,
timeStart: Date,
timeEnd: Date
})
</script>
<template>
<div class="task-day-wrapper">
<TaskHeader />
<TaskRecord v-bind="$props" />
</div>
</template>

View File

@ -8,6 +8,7 @@ export default {
newTask: {}, newTask: {},
fetchedTasks: [ fetchedTasks: [
{ {
_id: 1,
title: 'frontend', title: 'frontend',
project: 'TiM', project: 'TiM',
client: 'Filip Rojek', client: 'Filip Rojek',
@ -15,6 +16,7 @@ export default {
timeEnd: 1703960141414 timeEnd: 1703960141414
}, },
{ {
_id: 2,
title: 'setting up', title: 'setting up',
project: 'l2tp vpn', project: 'l2tp vpn',
client: 'IS Media', client: 'IS Media',

View File

@ -1,18 +1,30 @@
<script setup> <script setup>
import TrackerTimer from '@/components/TrackerTimer.vue' import TrackerTimer from '@/components/TrackerTimer.vue'
import TrackerTask from '@/components/TrackerTask.vue' import TaskHeader from '@/components/TaskHeader.vue'
import TaskRecord from '@/components/TaskRecord.vue'
</script> </script>
<template> <template>
<main> <main>
<TrackerTimer /> <TrackerTimer />
<TrackerTask
client="Filip Rojek" <div class="task-day-wrapper">
project="TiM" <TaskHeader />
time-start="1703960133061" <div class="task-wrapper" v-for="task in tasks" :key="task._id">
time-end="1703960141414" <TaskRecord :task="task" />
/> </div>
</div>
</main> </main>
</template> </template>
<script></script> <script>
import AppStore from '@/stores/AppStore'
export default {
data() {
return {
tasks: AppStore.data.fetchedTasks
}
}
}
</script>