v1.7.0 - Подзадачи
This commit is contained in:
@@ -0,0 +1,138 @@
|
||||
<script setup>
|
||||
import {onBeforeMount, ref} from "vue";
|
||||
import {invoke} from "@tauri-apps/api";
|
||||
import {Icon} from "@iconify/vue";
|
||||
import CreateSubModal from "./CreateSubModal.vue";
|
||||
import EditSubModal from "./EditSubModal.vue";
|
||||
|
||||
const props = defineProps({
|
||||
task_id: String,
|
||||
})
|
||||
|
||||
let task_id = ref(props.task_id);
|
||||
|
||||
let subtasks = ref({});
|
||||
|
||||
let create_modal = ref(false);
|
||||
let edit_modal = ref(false);
|
||||
|
||||
let to_edit_id = ref("");
|
||||
let to_edit_name = ref("");
|
||||
let to_edit_description = ref("");
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await init();
|
||||
});
|
||||
|
||||
async function init(){
|
||||
create_modal.value = false;
|
||||
await get_subtasks();
|
||||
}
|
||||
|
||||
async function get_subtasks(){
|
||||
await invoke('get_subtasks', {
|
||||
idTask: task_id.value
|
||||
}).then((res) => {
|
||||
subtasks.value = res;
|
||||
})
|
||||
}
|
||||
|
||||
async function set_subtask_field(id_task, completed){
|
||||
let field = "completed"
|
||||
completed = completed.toString();
|
||||
if (completed === "false"){
|
||||
completed = "true"
|
||||
} else{
|
||||
completed = "false"
|
||||
}
|
||||
await invoke('set_subtask_field', {
|
||||
idTask: task_id.value.toString(),
|
||||
idSubtask: id_task.toString(),
|
||||
field: field,
|
||||
value: completed
|
||||
}).then(async () => {
|
||||
for (let index in subtasks.value){
|
||||
if (subtasks.value[index].id === id_task){
|
||||
subtasks.value[index][field] = completed;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function delete_subtask(id_subtask){
|
||||
await invoke('delete_subtask', {
|
||||
idTask: task_id.value.toString(),
|
||||
idSubtask: id_subtask.toString()
|
||||
}).then(async () => {
|
||||
await get_subtasks();
|
||||
});
|
||||
}
|
||||
|
||||
function edit_subtask(id_task, name, description){
|
||||
window.scrollTo({top:0});
|
||||
to_edit_id.value = id_task;
|
||||
to_edit_name.value = name;
|
||||
to_edit_description.value = description;
|
||||
edit_modal.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="subtasks-modal" tabindex="-1" aria-hidden="true" class="absolute left-[50%] translate-x-[-50%] overflow-y-auto overflow-x-hidden w-[78vw] top-20 lg:top-32 z-50">
|
||||
<div class="relative p-4 max-h-full">
|
||||
<!-- Modal content -->
|
||||
<div class="relative bg-white rounded-lg shadow dark:bg-[rgb(50,50,50)]">
|
||||
<!-- Modal header -->
|
||||
<div class="flex items-center justify-between px-5 py-2 md:py-3 border-b rounded-t">
|
||||
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-100 mr-2">
|
||||
Подзадачи
|
||||
</h3>
|
||||
<button type="button" @click="$emit('close')" class="transition-colors text-gray-400 dark:text-gray-300 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center" data-modal-hide="default-modal">
|
||||
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modal body -->
|
||||
<div class="p-4 md:p-5 space-y-4 text-white">
|
||||
<div class="space-y-6">
|
||||
<div v-if="Object.keys(subtasks).length === 0" class="py-10 px-24">
|
||||
<p>Пусто</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="subtask in subtasks" class="flex justify-between gap-x-6 py-5 group/task">
|
||||
<div @click="set_subtask_field(subtask.id, subtask.completed)" class="inline-flex items-center space-x-2 min-w-0 gap-x-2 group-hover/task:cursor-pointer py-2">
|
||||
<p class="text-sm flex-none border rounded-full" :class="[ subtask.completed === 'true' ? 'border-green-500 group-hover:border-green-400' : 'border-gray-300 group-hover:border-gray-500' ]"><Icon class="m-0.5" :class="[ subtask.completed === 'true' ? 'text-green-500 group-hover:text-green-400' : 'text-gray-50 group-hover:text-gray-500 dark:text-[rgb(50,50,50)]' ]" icon="material-symbols:check" width="20" height="20"/></p>
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="truncate sm:text-[2vw] lg:text-[1.5vw] xl:text-[1vw] font-semibold leading-6 decoration-2" :class="[ subtask.completed === 'true' ? 'line-through text-gray-400' : 'text-gray-900 dark:text-gray-300' ]" >{{subtask.name}}</p>
|
||||
<p class="truncate text-xs leading-5 text-gray-500 dark:text-gray-400">{{subtask.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shrink-0 group-hover/task:opacity-100 transition-all">
|
||||
<div class="inline-flex items-center gap-x-1">
|
||||
<div class="hidden group-hover/task:flex gap-1">
|
||||
<button @click="edit_subtask(subtask.id, subtask.name, subtask.description)" class="group/button border-2 rounded-lg p-1.5 border-green-400/70 hover:bg-green-400 hover:border-green-400 transition-colors"><Icon class="group-hover/button:invert dark:invert" icon="mdi:pencil" width="24" height="24" style="color: black"/></button>
|
||||
<button @click="delete_subtask(subtask.id)" class="group/button border-2 rounded-lg p-1.5 border-red-400/70 hover:bg-red-500 hover:border-red-500 transition-colors"><Icon class="group-hover/button:invert dark:invert" icon="ic:baseline-delete" width="24" height="24" style="color: black"/></button>
|
||||
<p class="mt-0.5 text-xs text-gray-400 mx-2 text-center">{{subtask.date}}<br>{{subtask.time}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal footer -->
|
||||
<div class="flex items-center py-3 px-5 md:p-3 border-t border-gray-200 rounded-b">
|
||||
<button @click="create_modal = !create_modal" class="text-white bg-green-500 hover:bg-green-600 transition-colors font-medium rounded-lg text-sm px-5 py-2.5 text-center">Создать</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CreateSubModal v-if="create_modal" :task_id="task_id" @close="init"/>
|
||||
<EditSubModal v-if="edit_modal" :task_id="task_id" :subtask_id="to_edit_id" :subtask_name="to_edit_name" :subtask_description="to_edit_description" @close="edit_modal = !edit_modal"/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user