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