Добавление системы приоритетов

src-tauri/src/tasks_functions.rs

@@ -148,7 +148,7 @@ pub fn search_tasks(app_handle: tauri::AppHandle, value: String) -> Value {
 }
 
 #[tauri::command]
-pub fn add_task(app_handle: tauri::AppHandle, date: String, time: String, name: String, description: String, priority: i32) {
+pub fn add_task(app_handle: tauri::AppHandle, date: String, time: String, name: String, description: String, priority: String) {
     let mut path = app_handle.path_resolver().app_local_data_dir().unwrap();
     path.push("ToDo");
     path.push("tasks");
@@ -178,7 +178,7 @@ pub fn add_task(app_handle: tauri::AppHandle, date: String, time: String, name:
 }
 
 #[tauri::command]
-pub fn edit_task(app_handle: tauri::AppHandle, id_task: String, name: String, description: String) {
+pub fn edit_task(app_handle: tauri::AppHandle, id_task: String, name: String, description: String, priority: String) {
     let mut path = app_handle.path_resolver().app_local_data_dir().unwrap();
     path.push("ToDo");
     path.push("tasks");
@@ -188,7 +188,8 @@ pub fn edit_task(app_handle: tauri::AppHandle, id_task: String, name: String, de
     let content = decrypt_file(path.clone());
     let mut data: Value = serde_json::from_str(content.as_str()).unwrap();
     data["tasks"][id_task.clone()]["name"] = json!(name);
-    data["tasks"][id_task]["description"] = json!(description);
+    data["tasks"][id_task.clone()]["description"] = json!(description);
+    data["tasks"][id_task]["priority"] = json!(priority);
 
     encrypt_n_save_file(path.into(), data.to_string());
 }

src/App.vue

@@ -8,20 +8,28 @@ import CreateModal from "./components/modals/CreateModal.vue";
 import { appWindow } from '@tauri-apps/api/window';
 
 import {useDark, useToggle} from "@vueuse/core";
+import PriorityModal from "./components/modals/PriorityModal.vue";
 
 const isDark = useDark();
 const toggleDark = useToggle(isDark);
 
 let tasks = ref({});
 let pending = ref(true);
+
 let create_modal = ref(false);
 let edit_modal = ref(false);
+let priority_modal = ref(false);
 
 let search_text = ref("");
 
 let to_edit_id = ref("");
 let to_edit_name = ref("");
 let to_edit_description = ref("");
+let to_edit_priority = ref(0);
+
+let to_change_id = ref("");
+let to_change_name = ref("");
+let to_change_priority = ref("");
 
 onBeforeMount(async () => {
     await invoke('check_or_create_tasks_file');
@@ -40,18 +48,37 @@ onBeforeMount(async () => {
         .addEventListener('click', () => appWindow.close())
 });
 
+
+function compare_priority(a, b) {
+    if ( parseInt(a.priority) < parseInt(b.priority) ){
+        return -1;
+    }
+    if ( parseInt(a.priority) > parseInt(b.priority) ){
+        return 1;
+    }
+    return 0;
+}
+
 async function get_tasks(){
+    let tmp_tasks = [];
     await invoke('get_tasks').then((res) => {
-        tasks.value = res;
+        for (let value in res){
+            tmp_tasks.push(res[value]);
+        }
+        tasks.value = tmp_tasks.sort(compare_priority).reverse();
     });
 }
 
 async function search_tasks(event){
+    let tmp_tasks = [];
     if (event.target.value) {
         await invoke('search_tasks', {
             value: event.target.value
         }).then((res) => {
-            tasks.value = res;
+            for (let value in res){
+                tmp_tasks.push(res[value]);
+            }
+            tasks.value = tmp_tasks.sort(compare_priority).reverse();
         });
     } else{
         await get_tasks();
@@ -61,7 +88,7 @@ async function search_tasks(event){
 async function set_task_field(id_task, completed){
     let field = "completed"
     id_task = id_task.toString();
-    completed = completed.toString()
+    completed = completed.toString();
     if (completed === "false"){
         completed = "true"
     } else{
@@ -72,7 +99,12 @@ async function set_task_field(id_task, completed){
         field: field,
         value: completed
     }).then(async () => {
-        tasks.value[id_task][field] = completed;
+        for (let index in tasks.value){
+            if (tasks.value[index].id === id_task){
+                tasks.value[index][field] = completed;
+                break;
+            }
+        }
     });
 }
 
@@ -85,17 +117,27 @@ async function delete_task(id_task){
     });
 }
 
-async function edit_task(id_task, name, description){
+function edit_task(id_task, name, description, priority){
-    to_edit_id = id_task;
+    window.scrollTo({top:0});
+    to_edit_id.value = id_task;
     to_edit_name.value = name;
     to_edit_description.value = description;
-    edit_modal.value = true
+    to_edit_priority.value = priority;
+    edit_modal.value = true;
+}
+
+function change_priority(id_task, name, priority){
+    window.scrollTo({top:0});
+    to_change_id.value = id_task;
+    to_change_name.value = name;
+    to_change_priority.value = priority;
+    priority_modal.value = true;
 }
 </script>
 
 
 <template>
-    <div data-tauri-drag-region class="titlebar h-[30px] select-none fixed flex justify-end top-0 right-0 left-0 bg-gray-100 dark:bg-zinc-800">
+    <div data-tauri-drag-region class="z-50 opacity-50 titlebar h-[30px] select-none fixed flex justify-end top-0 right-0 left-0 bg-gray-100 dark:bg-zinc-800">
         <div class="titlebar-button hover:bg-gray-200 dark:hover:bg-gray-700 justify-center inline-flex w-[30px] h-[30px] items-center dark:text-white" id="titlebar-minimize">
             <Icon class="" icon="mdi:window-minimize" width="20" height="20"/>
         </div>
@@ -154,18 +196,27 @@ async function edit_task(id_task, name, description){
                             <p class="truncate text-xs leading-5 text-gray-500 dark:text-gray-400">{{task.description}}</p>
                         </div>
                     </div>
-                    <div class="opacity-0 shrink-0 group-hover/task:opacity-100 transition-all">
+                    <div class="shrink-0 group-hover/task:opacity-100 transition-all">
                         <div class="inline-flex items-center gap-x-1">
+                            <div title="Приоритет" class="mr-4 cursor-pointer drop-shadow-sm dark:drop-shadow-[0_1px_1px_rgba(255,255,255,0.35)]" @click="change_priority(task.id, task.name, task.priority)">
+                                <Icon v-if="parseInt(task.priority) === 0" class="opacity-60 dark:text-white text-gray-500" icon="streamline:signal-none-solid" width="26" height="26"/>
+                                <Icon v-if="parseInt(task.priority) > 0 && parseInt(task.priority) < 4" class="opacity-80 text-orange-300" icon="streamline:signal-low-solid" width="26" height="26"/>
+                                <Icon v-if="parseInt(task.priority) >= 4 && parseInt(task.priority) < 7" class="opacity-85 text-amber-500" icon="streamline:signal-medium-solid" width="26" height="26"/>
+                                <Icon v-if="parseInt(task.priority) >= 7 && parseInt(task.priority) < 9" class="opacity-90 text-orange-600" icon="streamline:signal-full-solid" width="26" height="26"/>
+                                <Icon v-if="parseInt(task.priority) >= 9" class="opacity-100 text-red-500" icon="heroicons-solid:exclamation" width="32" height="32"/>
+                            </div>
                             <p class="mt-0.5 text-xs text-gray-400 mr-2 text-center">{{task.date}}<br>{{task.time}}</p>
-                            <button @click="edit_task(task.id, task.name, task.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="edit_task(task.id, task.name, task.description, task.priority)" 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_task(task.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>
                         </div>
                     </div>
                 </li>
             </ul>
         </div>
+        <div v-if="create_modal || edit_modal || priority_modal" class="bg-black w-[100vw] h-full fixed top-0 opacity-70 z-40"/>
         <CreateModal v-if="create_modal" @close="create_modal = !create_modal"/>
-        <EditModal v-if="edit_modal" :task_id="to_edit_id" :task_name="to_edit_name" :task_description="to_edit_description" @close="edit_modal = !edit_modal"/>
+        <EditModal v-if="edit_modal" :task_id="to_edit_id" :task_name="to_edit_name" :task_description="to_edit_description" :task_priority="to_edit_priority" @close="edit_modal = !edit_modal"/>
+        <PriorityModal v-if="priority_modal" :task_id="to_change_id" :task_name="to_change_name" :task_priority="to_change_priority" @close="priority_modal = !priority_modal"/>
     </div>
 </template>
 
@@ -175,6 +226,7 @@ async function edit_task(id_task, name, description){
 @tailwind utilities;
 
 :root {
+    overflow-x: hidden;
     font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
     font-size: 16px;
     line-height: 24px;

src/components/modals/CreateModal.vue

@@ -4,7 +4,7 @@ import {ref} from "vue";
 
 let name = "";
 let description = "";
-let priority = "0";
+let priority = 0;
 
 let error = ref(" ");
 
@@ -22,7 +22,7 @@ async function create_task(){
             time: time,
             name: name,
             description: description,
-            priority: priority
+            priority: priority.toString()
         });
 
         location.reload();
@@ -52,7 +52,7 @@ async function create_task(){
                         <div>
                             <label for="name" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Задача</label>
                             <div class="mt-2">
-                                <input @input="error=' '" v-model="name" id="name" name="name" type="text" required class="px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-inset sm:text-sm sm:leading-6" />
+                                <input @input="error=' '" maxlength="80" v-model="name" id="name" name="name" type="text" required class="px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-inset sm:text-sm sm:leading-6" />
                             </div>
                         </div>
 

src/components/modals/EditModal.vue

@@ -4,17 +4,20 @@ import {invoke} from "@tauri-apps/api";
 const props = defineProps({
     task_id: String,
     task_name: String,
-    task_description: String
+    task_description: String,
+    task_priority: String
 })
 
-let name = props.task_name
+let name = props.task_name;
-let description = props.task_description
+let description = props.task_description;
+let priority = parseInt(props.task_priority);
 
 async function send_edited_task(){
     await invoke('edit_task', {
         idTask: props.task_id,
         name: name,
-        description: description
+        description: description,
+        priority: priority.toString()
     }).then(() => location.reload());
 }
 </script>
@@ -27,7 +30,7 @@ async function send_edited_task(){
                 <!-- 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">
-                        Новая задача
+                        Изменить задачу
                     </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">
@@ -53,11 +56,19 @@ async function send_edited_task(){
                                 <textarea v-model="description" id="description" name="description" class="px-2 py-1.5 block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-inset sm:text-sm sm:leading-6" />
                             </div>
                         </div>
+                        <div>
+                            <div class="flex items-center justify-between">
+                                <label for="priority" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Приоритет</label>
+                            </div>
+                            <div class="mt-2">
+                                <input v-model="priority" type="number" required min="0" max="10" step="1" id="priority" name="priority" class="px-2 py-1.5 block w-48 rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-inset sm:text-sm sm:leading-6" />
+                            </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">
-                    <input type="submit" 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" value="Создать">
+                    <input type="submit" 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" value="Изменить">
                 </div>
             </form>
         </div>

src/components/modals/PriorityModal.vue

@@ -0,0 +1,73 @@
+<script setup>
+import {invoke} from "@tauri-apps/api";
+import {Icon} from "@iconify/vue";
+import {ref} from "vue";
+
+const props = defineProps({
+    task_id: String,
+    task_name: String,
+    task_priority: String
+})
+
+let priority = ref(parseInt(props.task_priority));
+
+async function send_edited_task(){
+    await invoke('set_task_field', {
+        idTask: props.task_id,
+        field: 'priority',
+        value: priority.value.toString()
+    }).then(() => location.reload());
+}
+</script>
+
+<template>
+    <div id="create-task-modal" tabindex="-1" aria-hidden="true" class="absolute left-[50%] translate-x-[-50%] overflow-y-auto overflow-x-hidden w-50 top-20 lg:top-32 z-50">
+        <div class="relative p-4 max-h-full">
+            <!-- Modal content -->
+            <form class="relative bg-white rounded-lg shadow dark:bg-[rgb(50,50,50)]" @submit.prevent="send_edited_task">
+                <!-- 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">
+                    <div class="space-y-6">
+                        <div>
+                            <div class="flex items-center justify-between">
+                                <label for="name" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Название задачи</label>
+                            </div>
+                            <div class="m-1 text-ellipsis" id="name">
+                                <p class="dark:text-white">{{props.task_name}}</p>
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <label for="priority" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Приоритет</label>
+                            </div>
+                            <div class="mt-2 flex gap-3 ml-2" id="priority">
+                                <Icon @click="priority = 0" :class="[priority === 0 ? 'opacity-100' : 'opacity-50']" class="dark:text-white text-gray-500 cursor-pointer" icon="streamline:signal-none-solid" width="26" height="26"/>
+                                <Icon @click="priority = 1" :class="[priority > 0  && priority < 4 ? 'opacity-100' : 'opacity-50']" class="text-orange-300 cursor-pointer" icon="streamline:signal-low-solid" width="26" height="26"/>
+                                <Icon @click="priority = 5" :class="[priority >= 4 && priority < 7 ? 'opacity-100' : 'opacity-50']" class="text-amber-500 cursor-pointer" icon="streamline:signal-medium-solid" width="26" height="26"/>
+                                <Icon @click="priority = 8" :class="[priority >= 7 && priority < 9 ? 'opacity-100' : 'opacity-50']" class="text-orange-600 cursor-pointer" icon="streamline:signal-full-solid" width="26" height="26"/>
+                                <Icon @click="priority = 10" :class="[priority >= 9 ? 'opacity-100' : 'opacity-50']" class="text-red-500 cursor-pointer" icon="heroicons-solid:exclamation" width="32" height="32"/>
+                            </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">
+                    <input type="submit" 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" value="Изменить">
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>