add API routes, admin UI, and SPA bootstrap
views_api wires the full task lifecycle: create / update / delete / list (per-wallet, public, admin-all) and the completion flow (claim / start / complete via POST, unclaim via DELETE, plus a "mine" lookup for the current user's claim on a task or specific occurrence). Auth model: tasks are owned by an LNbits wallet but signed with the wallet owner's account.pubkey — _wallet_pubkey resolves that pubkey at create time and refuses to create tasks for accounts that haven't generated a keypair yet, so we never publish a task we can't sign. Completions optimistically insert with a local hash, publish to Nostr, then re-insert under the actual event id so a later delete can find it. Static SPA: Quasar-UMD index.vue / index.js mirroring the events extension layout — wallet picker, task table, create/edit dialog with optional daily/weekly recurrence, plus an admin-only public_listing toggle. /tasks/:id and display.vue intentionally left out until the public task page lands. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
24acbe6674
commit
48a63c0338
5 changed files with 631 additions and 12 deletions
192
static/js/index.js
Normal file
192
static/js/index.js
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
window.PageTasks = {
|
||||
template: '#page-tasks',
|
||||
data() {
|
||||
return {
|
||||
tasks: [],
|
||||
isAdmin: false,
|
||||
settings: {
|
||||
public_listing: false
|
||||
},
|
||||
tasksTable: {
|
||||
columns: [
|
||||
{name: 'title', align: 'left', label: 'Title', field: 'title'},
|
||||
{
|
||||
name: 'start_date',
|
||||
align: 'left',
|
||||
label: 'Start',
|
||||
field: 'start_date'
|
||||
},
|
||||
{
|
||||
name: 'end_date',
|
||||
align: 'left',
|
||||
label: 'End',
|
||||
field: 'end_date'
|
||||
},
|
||||
{
|
||||
name: 'recurrence',
|
||||
align: 'left',
|
||||
label: 'Recurrence',
|
||||
field: row => (row.recurrence ? row.recurrence.frequency : '')
|
||||
},
|
||||
{name: 'status', align: 'left', label: 'Status', field: 'status'},
|
||||
{name: 'location', align: 'left', label: 'Location', field: 'location'}
|
||||
],
|
||||
pagination: {
|
||||
rowsPerPage: 10
|
||||
}
|
||||
},
|
||||
taskDialog: {
|
||||
show: false,
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canSubmit() {
|
||||
return (
|
||||
this.taskDialog.data.title &&
|
||||
this.taskDialog.data.start_date &&
|
||||
this.taskDialog.data.wallet
|
||||
)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openTaskDialog() {
|
||||
this.taskDialog.data = {
|
||||
title: '',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
description: '',
|
||||
location: '',
|
||||
wallet: this.g.user.wallets[0]?.id,
|
||||
recurrence_frequency: '',
|
||||
recurrence_day_of_week: '',
|
||||
recurrence_end_date: ''
|
||||
}
|
||||
this.taskDialog.show = true
|
||||
},
|
||||
editTask(row) {
|
||||
this.taskDialog.data = {
|
||||
id: row.id,
|
||||
wallet: row.wallet,
|
||||
title: row.title,
|
||||
start_date: row.start_date,
|
||||
end_date: row.end_date || '',
|
||||
description: row.description || '',
|
||||
location: row.location || '',
|
||||
recurrence_frequency: row.recurrence?.frequency || '',
|
||||
recurrence_day_of_week: row.recurrence?.day_of_week || '',
|
||||
recurrence_end_date: row.recurrence?.end_date || ''
|
||||
}
|
||||
this.taskDialog.show = true
|
||||
},
|
||||
_buildPayload(d) {
|
||||
const payload = {
|
||||
wallet: d.wallet,
|
||||
title: d.title,
|
||||
start_date: d.start_date,
|
||||
end_date: d.end_date || null,
|
||||
description: d.description || '',
|
||||
location: d.location || null
|
||||
}
|
||||
if (d.recurrence_frequency) {
|
||||
payload.recurrence = {
|
||||
frequency: d.recurrence_frequency,
|
||||
day_of_week: d.recurrence_day_of_week || null,
|
||||
end_date: d.recurrence_end_date || null
|
||||
}
|
||||
}
|
||||
return payload
|
||||
},
|
||||
async submitTask() {
|
||||
const d = this.taskDialog.data
|
||||
const wallet = _.findWhere(this.g.user.wallets, {id: d.wallet})
|
||||
if (!wallet) return
|
||||
const payload = this._buildPayload(d)
|
||||
try {
|
||||
if (d.id) {
|
||||
await LNbits.api.request(
|
||||
'PUT',
|
||||
'/tasks/api/v1/tasks/' + d.id,
|
||||
wallet.adminkey,
|
||||
payload
|
||||
)
|
||||
} else {
|
||||
await LNbits.api.request(
|
||||
'POST',
|
||||
'/tasks/api/v1/tasks',
|
||||
wallet.adminkey,
|
||||
payload
|
||||
)
|
||||
}
|
||||
this.taskDialog.show = false
|
||||
this.getTasks()
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
},
|
||||
async deleteTask(taskId) {
|
||||
LNbits.utils
|
||||
.confirmDialog('Delete this task?')
|
||||
.onOk(async () => {
|
||||
const task = _.findWhere(this.tasks, {id: taskId})
|
||||
const wallet = _.findWhere(this.g.user.wallets, {id: task.wallet})
|
||||
if (!wallet) return
|
||||
try {
|
||||
await LNbits.api.request(
|
||||
'DELETE',
|
||||
'/tasks/api/v1/tasks/' + taskId,
|
||||
wallet.adminkey
|
||||
)
|
||||
this.getTasks()
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
})
|
||||
},
|
||||
async getTasks() {
|
||||
try {
|
||||
const wallet = this.g.user.wallets[0]
|
||||
if (!wallet) return
|
||||
const {data} = await LNbits.api.request(
|
||||
'GET',
|
||||
'/tasks/api/v1/tasks?all_wallets=true',
|
||||
wallet.inkey
|
||||
)
|
||||
this.tasks = data
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
},
|
||||
async getSettings() {
|
||||
if (!this.isAdmin) return
|
||||
try {
|
||||
const {data} = await LNbits.api.request(
|
||||
'GET',
|
||||
'/tasks/api/v1/tasks/settings',
|
||||
this.g.user.wallets[0]?.adminkey
|
||||
)
|
||||
this.settings = data
|
||||
} catch (_) {
|
||||
// Non-admin or settings not seeded — silent.
|
||||
}
|
||||
},
|
||||
async saveSettings() {
|
||||
try {
|
||||
await LNbits.api.request(
|
||||
'PUT',
|
||||
'/tasks/api/v1/tasks/settings',
|
||||
this.g.user.wallets[0]?.adminkey,
|
||||
this.settings
|
||||
)
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isAdmin = !!(window.user && window.user.admin)
|
||||
this.getTasks()
|
||||
this.getSettings()
|
||||
}
|
||||
}
|
||||
198
static/js/index.vue
Normal file
198
static/js/index.vue
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
<template id="page-tasks">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
|
||||
<q-card v-if="isAdmin">
|
||||
<q-card-section>
|
||||
<div class="row items-center justify-between">
|
||||
<div class="col">
|
||||
<span class="text-subtitle1">Settings</span>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-toggle
|
||||
v-model="settings.public_listing"
|
||||
label="Public task listing"
|
||||
@update:model-value="saveSettings"
|
||||
></q-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-btn unelevated color="primary" @click="openTaskDialog"
|
||||
>New Task</q-btn
|
||||
>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="row items-center no-wrap q-mb-md">
|
||||
<div class="col">
|
||||
<h5 class="text-subtitle1 q-my-none">Tasks</h5>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
dense
|
||||
flat
|
||||
:rows="tasks"
|
||||
row-key="id"
|
||||
:columns="tasksTable.columns"
|
||||
v-model:pagination="tasksTable.pagination"
|
||||
>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
size="xs"
|
||||
@click="editTask(props.row)"
|
||||
icon="edit"
|
||||
color="light-blue"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
size="xs"
|
||||
@click="deleteTask(props.row.id)"
|
||||
icon="cancel"
|
||||
color="pink"
|
||||
class="q-ml-xs"
|
||||
></q-btn>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<q-badge
|
||||
v-if="col.name === 'recurrence' && col.value"
|
||||
color="purple"
|
||||
:label="col.value"
|
||||
></q-badge>
|
||||
<span v-else v-text="col.value"></span>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-4 col-lg-5 q-gutter-y-md">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<h6 class="text-subtitle1 q-my-none">
|
||||
{{SITE_TITLE}} Tasks extension
|
||||
</h6>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-separator></q-separator>
|
||||
<q-list>
|
||||
<q-expansion-item
|
||||
group="extras"
|
||||
icon="info"
|
||||
label="About"
|
||||
:content-inset-level="0.5"
|
||||
>
|
||||
<q-card-section class="text-caption">
|
||||
Recurring tasks and chore tracking, federated over Nostr
|
||||
NIP-52 calendar events (kind 31922) and a task-status RSVP
|
||||
variant (kind 31925).
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="taskDialog.show" position="top">
|
||||
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||
<q-form @submit="submitTask" class="q-gutter-md">
|
||||
<q-select
|
||||
filled
|
||||
dense
|
||||
emit-value
|
||||
v-model="taskDialog.data.wallet"
|
||||
:options="g.user.walletOptions"
|
||||
label="Wallet *"
|
||||
></q-select>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="taskDialog.data.title"
|
||||
label="Title *"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="taskDialog.data.start_date"
|
||||
label="Start date (YYYY-MM-DD) *"
|
||||
placeholder="2026-05-13"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="taskDialog.data.end_date"
|
||||
label="End date (optional)"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
type="textarea"
|
||||
v-model.trim="taskDialog.data.description"
|
||||
label="Description"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="taskDialog.data.location"
|
||||
label="Location"
|
||||
></q-input>
|
||||
<q-select
|
||||
filled
|
||||
dense
|
||||
v-model="taskDialog.data.recurrence_frequency"
|
||||
:options="['', 'daily', 'weekly']"
|
||||
label="Recurrence"
|
||||
emit-value
|
||||
></q-select>
|
||||
<q-input
|
||||
v-if="taskDialog.data.recurrence_frequency === 'weekly'"
|
||||
filled
|
||||
dense
|
||||
v-model.trim="taskDialog.data.recurrence_day_of_week"
|
||||
label="Weekday (e.g. monday)"
|
||||
></q-input>
|
||||
<q-input
|
||||
v-if="taskDialog.data.recurrence_frequency"
|
||||
filled
|
||||
dense
|
||||
v-model.trim="taskDialog.data.recurrence_end_date"
|
||||
label="Recurrence end date (optional)"
|
||||
></q-input>
|
||||
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
v-if="taskDialog.data.id"
|
||||
unelevated
|
||||
color="primary"
|
||||
type="submit"
|
||||
:disable="!canSubmit"
|
||||
>Update Task</q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-else
|
||||
unelevated
|
||||
color="primary"
|
||||
type="submit"
|
||||
:disable="!canSubmit"
|
||||
>Create Task</q-btn
|
||||
>
|
||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
|
||||
>Cancel</q-btn
|
||||
>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -4,11 +4,5 @@
|
|||
"name": "PageTasks",
|
||||
"template": "/tasks/static/js/index.vue",
|
||||
"component": "/tasks/static/js/index.js"
|
||||
},
|
||||
{
|
||||
"path": "/tasks/:id",
|
||||
"name": "PageTaskDisplay",
|
||||
"template": "/tasks/static/js/display.vue",
|
||||
"component": "/tasks/static/js/display.js"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue