Tasks: list task by AppStore
This commit is contained in:
parent
4d9b916fb4
commit
dad526fdee
@ -1,13 +1,7 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
project: String,
|
||||
client: String,
|
||||
timeStart: Date,
|
||||
timeEnd: Date
|
||||
})
|
||||
const props = defineProps(['task'])
|
||||
|
||||
function normalizeTime(time) {
|
||||
let d = new Date(Number(time))
|
||||
@ -28,45 +22,53 @@ function formatDuration(durationInSeconds) {
|
||||
return `${h}:${m}:${s}`
|
||||
}
|
||||
|
||||
const normalizedTimeStart = computed(() => normalizeTime(props.timeStart))
|
||||
const normalizedTimeEnd = computed(() => normalizeTime(props.timeEnd))
|
||||
const normalizedTimeStart = computed(() => normalizeTime(props.task.timeStart))
|
||||
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))
|
||||
console.log(props.task.title)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="task-wrapper">
|
||||
<div class="task">
|
||||
<span>
|
||||
<input
|
||||
type="text"
|
||||
class="title"
|
||||
placeholder="What are you working on?"
|
||||
value="Making frontend"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<p>{{ project }}</p>
|
||||
<p>{{ client }}</p>
|
||||
</span>
|
||||
<span>
|
||||
<img src="/src/assets/svg/dollar.svg" alt="" />
|
||||
</span>
|
||||
<span>
|
||||
<input type="time" :value="normalizedTimeStart" />
|
||||
<p>-</p>
|
||||
<input type="time" :value="normalizedTimeEnd" />
|
||||
</span>
|
||||
<span>
|
||||
<input type="text" :value="normalizedDuration" :size="normalizedDuration.length + 1" />
|
||||
</span>
|
||||
<span>
|
||||
<img src="/src/assets/svg/play.svg" alt="" />
|
||||
</span>
|
||||
<span>
|
||||
<img src="/src/assets/svg/dots.svg" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="task">
|
||||
<span>
|
||||
<input
|
||||
type="text"
|
||||
class="title"
|
||||
placeholder="What are you working on?"
|
||||
:value="props.task.title"
|
||||
:size="props.task.title.length + 1"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<p>{{ props.task.project }}</p>
|
||||
<p>{{ props.task.client }}</p>
|
||||
</span>
|
||||
<!--
|
||||
<span>
|
||||
<img src="/src/assets/svg/dollar.svg" alt="" />
|
||||
</span>
|
||||
-->
|
||||
<span>
|
||||
<input type="time" :value="normalizedTimeStart" />
|
||||
<p>-</p>
|
||||
<input type="time" :value="normalizedTimeEnd" />
|
||||
</span>
|
||||
<span>
|
||||
<input type="text" :value="normalizedDuration" />
|
||||
</span>
|
||||
<!--
|
||||
<span>
|
||||
<img src="/src/assets/svg/play.svg" alt="" />
|
||||
</span>
|
||||
<span>
|
||||
<img src="/src/assets/svg/dots.svg" alt="" />
|
||||
</span>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
|
@ -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>
|
@ -8,6 +8,7 @@ export default {
|
||||
newTask: {},
|
||||
fetchedTasks: [
|
||||
{
|
||||
_id: 1,
|
||||
title: 'frontend',
|
||||
project: 'TiM',
|
||||
client: 'Filip Rojek',
|
||||
@ -15,6 +16,7 @@ export default {
|
||||
timeEnd: 1703960141414
|
||||
},
|
||||
{
|
||||
_id: 2,
|
||||
title: 'setting up',
|
||||
project: 'l2tp vpn',
|
||||
client: 'IS Media',
|
||||
|
@ -1,18 +1,30 @@
|
||||
<script setup>
|
||||
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>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<TrackerTimer />
|
||||
<TrackerTask
|
||||
client="Filip Rojek"
|
||||
project="TiM"
|
||||
time-start="1703960133061"
|
||||
time-end="1703960141414"
|
||||
/>
|
||||
|
||||
<div class="task-day-wrapper">
|
||||
<TaskHeader />
|
||||
<div class="task-wrapper" v-for="task in tasks" :key="task._id">
|
||||
<TaskRecord :task="task" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
<script>
|
||||
import AppStore from '@/stores/AppStore'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tasks: AppStore.data.fetchedTasks
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user