tasks/static/js/index.vue

<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>