feat(TaskCard): convert to script setup
This commit is contained in:
parent
fe5d0b0b75
commit
0c3d920dea
|
@ -65,68 +65,64 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import {defineComponent} from 'vue'
|
import {PropType, ref} from 'vue'
|
||||||
|
import {useStore} from 'vuex'
|
||||||
|
|
||||||
import {playPop} from '../../helpers/playPop'
|
|
||||||
import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
|
import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
|
||||||
import User from '@/components/misc/user.vue'
|
import User from '@/components/misc/user.vue'
|
||||||
import Done from '@/components/misc/Done.vue'
|
import Done from '@/components/misc/Done.vue'
|
||||||
import Labels from '@/components/tasks/partials/labels.vue'
|
import Labels from '@/components/tasks/partials/labels.vue'
|
||||||
import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
|
import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
|
||||||
|
|
||||||
|
import {playPop} from '@/helpers/playPop'
|
||||||
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
||||||
|
import {useRouter} from 'vue-router'
|
||||||
|
|
||||||
export default defineComponent({
|
import TaskModel from '@/models/task'
|
||||||
name: 'kanban-card',
|
|
||||||
components: {
|
// this was called 'kanban-card'
|
||||||
ChecklistSummary,
|
|
||||||
Done,
|
const loadingInternal = ref(false)
|
||||||
PriorityLabel,
|
|
||||||
User,
|
const store = useStore()
|
||||||
Labels,
|
const router = useRouter()
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
task: {
|
||||||
|
type: Object as PropType<TaskModel>,
|
||||||
|
required: true,
|
||||||
},
|
},
|
||||||
data() {
|
loading: {
|
||||||
return {
|
type: Boolean,
|
||||||
loadingInternal: false,
|
required: false,
|
||||||
}
|
default: false,
|
||||||
},
|
|
||||||
props: {
|
|
||||||
task: {
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
colorIsDark,
|
|
||||||
async toggleTaskDone(task) {
|
|
||||||
this.loadingInternal = true
|
|
||||||
try {
|
|
||||||
const done = !task.done
|
|
||||||
await this.$store.dispatch('tasks/update', {
|
|
||||||
...task,
|
|
||||||
done,
|
|
||||||
})
|
|
||||||
if (done) {
|
|
||||||
playPop()
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
this.loadingInternal = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
openTaskDetail() {
|
|
||||||
this.$router.push({
|
|
||||||
name: 'task.detail',
|
|
||||||
params: { id: this.task.id },
|
|
||||||
state: { backdropView: this.$router.currentRoute.value.fullPath },
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
async function toggleTaskDone(task: TaskModel) {
|
||||||
|
loadingInternal.value = true
|
||||||
|
try {
|
||||||
|
const done = !props.task.done
|
||||||
|
await store.dispatch('tasks/update', {
|
||||||
|
...task,
|
||||||
|
done,
|
||||||
|
})
|
||||||
|
if (done) {
|
||||||
|
playPop()
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loadingInternal.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openTaskDetail() {
|
||||||
|
router.push({
|
||||||
|
name: 'task.detail',
|
||||||
|
params: { id: props.task.id },
|
||||||
|
state: { backdropView: router.currentRoute.value.fullPath },
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
Reference in New Issue
Block a user