Tasks: list task by AppStore
This commit is contained in:
parent
4d9b916fb4
commit
dad526fdee
@ -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>
|
||||||
|
@ -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: {},
|
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',
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user