JS&FastAPIでのソート実装(フロント)

フロントでの処理

• ドロップダウンで方式を選んで、FastAPIに投げる

ソートのコード

• 締切順ボタンにid=sortDeadlineを入れておく

• currentSort = "deadline";で方式を設定(関数の外側でcurrentSortは定義済み)

画面更新時にソートを維持して欲しいので外側で定義して文字列を格納させている

• トークンの取得をする

• バックエンドにapiUrlとクエリを組み合わせてurlとして送る

const sortDeadline = document.getElementById('sortDeadline');
sortDeadline.addEventListener("click", async function(event){
    event.preventDefault();

    currentSort = "deadline";

    const token = getToken();

    try{
        const response = await send_request({
            method: 'GET',
            token: token,
            url: `${apiUrl}?sort=${currentSort}`
        });

        if(response.ok){
            const sorted_tasks = await response.json();
            displayTasks(sorted_tasks);
        }else{
            const err = await response.json();
            alert(err.detail || "タスクの更新に失敗しました");
        }
    }catch(error){
        console.error('タスク並び替え中にエラーが発生しました', error);
    }
})

• タスクのステータスでのソート

const sortStatus = document.getElementById('sortStatus');
sortStatus.addEventListener("click", async function(event){
    event.preventDefault();

    currentSort = "status";

    const token = getToken();

    try{
        const response = await send_request({
            method: 'GET',
            token: token,
            url: `${apiUrl}?sort=${currentSort}`
        });

        if(response.ok){
            const sortedTasks = await response.json();
            displayTasks(sortedTasks);
        }else{
            const err = await response.json();
            alert(err.detail || "タスクの更新に失敗しました");
        }
    }catch(error){
        console.error('タスク並び替え中にエラーが発生しました', error);
    }
})