つぶやきを選択削除できるようにした。

ブツ

• DEMO
• リポジトリ

前回まで

• つぶやきを保存するツール1
• つぶやきを保存するツール2

今回

• 選択したつぶやきを削除できるようにした
• ドラッグ＆ドロップ領域をテキストエリアと共用した

コード抜粋

dexie.jsで指定IDのレコードを削除する。

async delete(ids) {
    const isAll = (0===ids.length)
    const msg = ((isAll) ? `つぶやきをすべて削除します。` : `選択したつぶやきを削除します。`) + `\n本当によろしいですか？`
    if (confirm(msg)) {
        console.debug('削除します。')
        if (isAll) { console.debug('全件削除します。'); await this.dexie.comments.clear() }
        else { console.debug('選択削除します。'); for (const id of ids) { await this.dexie.comments.delete(id) } }
    }
}

もしFileSystemAccess APIでSQLite3DBファイルをロードしていたら、同時にそのファイルのレコード削除も行う。

document.getElementById('delete').addEventListener('click', async(event) => {
    const deletes = Array.from(document.querySelectorAll(`#post-list input[type=checkbox][name=delete]:checked`)).map(d=>parseInt(d.value))
    await db.delete(deletes)
    document.getElementById('post-list').innerHTML = await db.toHtml()
    if (sqlFile.db) {
        const path = document.getElementById('file-input').value
        const name = path.replace(/.*[\/\\]/, '');
        sqlFile.db.exec(`BEGIN;`)
        for (const id of deletes) {
            sqlFile.db.exec(`delete from comments where id = ${id};`)
        }
        sqlFile.db.exec(`COMMIT;`)
        const res = await sqlFile.write(name)
        if (res) { Toaster.toast(`ローカルファイルからも削除しました。: ${name}`) }
    }
})