Add one-way task completion and exportable pet identity cards

pets-fe/pages/tasks/tasks.js

@@ -1,9 +1,13 @@
+const completion = require("../../utils/task-completion");
 const { secure, toast } = require("../../utils/api");
 const { localDate, shiftDate } = require("../../utils/date");
 Page({
   data: {
     pets: [],
     tasks: [],
+    taskBusyIds: [],
+    completingAll: false,
+    undoneCount: 0,
     date: localDate(),
     showForm: false,
     editingId: "",
@@ -33,23 +37,21 @@ Page({
       this.setData({
         pets,
         tasks,
+        undoneCount: tasks.filter((t) => !t.completed).length,
         done: tasks.filter((t) => t.completed).length,
       });
     } catch (e) {
       toast(e);
     }
   },
-  async toggle(e) {
-    const t = this.data.tasks[e.currentTarget.dataset.index];
-    try {
-      await secure("/tasks/" + t.id + "/completion", "PUT", {
-        date: this.data.date,
-        completed: !t.completed,
-      });
-      await this.load();
-    } catch (err) {
-      toast(err);
-    }
+  toggle(e) {
+    return completion.complete(
+      this,
+      this.data.tasks[e.currentTarget.dataset.index],
+    );
+  },
+  completeAll() {
+    return completion.completeAll(this);
   },
   open() {
     if (!this.data.pets.length) {
@@ -83,10 +85,14 @@ Page({
     });
   },
   changeDay(e) {
-    this.setData({ date: shiftDate(this.data.date, Number(e.currentTarget.dataset.days)) });
+    if (this.data.completingAll || this.data.taskBusyIds.length) return;
+    this.setData({
+      date: shiftDate(this.data.date, Number(e.currentTarget.dataset.days)),
+    });
     this.load();
   },
   showToday() {
+    if (this.data.completingAll || this.data.taskBusyIds.length) return;
     this.setData({ date: localDate() });
     this.load();
   },
@@ -113,13 +119,17 @@ Page({
     }
     this.setData({ saving: true });
     try {
-      await secure(this.data.editingId ? "/tasks/" + this.data.editingId : "/tasks", this.data.editingId ? "PUT" : "POST", {
-        pet_id: this.data.pets[this.data.petIndex].id,
-        title: this.data.title.trim(),
-        category: this.data.category,
-        time_of_day: this.data.time_of_day,
-        repeat_rule: this.data.repeat_rule,
-      });
+      await secure(
+        this.data.editingId ? "/tasks/" + this.data.editingId : "/tasks",
+        this.data.editingId ? "PUT" : "POST",
+        {
+          pet_id: this.data.pets[this.data.petIndex].id,
+          title: this.data.title.trim(),
+          category: this.data.category,
+          time_of_day: this.data.time_of_day,
+          repeat_rule: this.data.repeat_rule,
+        },
+      );
       this.setData({ showForm: false, editingId: "" });
       await this.load();
     } catch (e) {

pets-fe/pages/tasks/tasks.wxml

@@ -19,14 +19,19 @@
     <text bindtap="showToday">回到今天</text>
     <text data-days="1" bindtap="changeDay">后一天 ›</text>
   </view>
+  <view wx:if="{{tasks.length}}" class="completion-toolbar">
+    <text>{{undoneCount ? '还有 '+undoneCount+' 项小事' : '这一份日常，已全部照顾好'}}</text>
+    <button wx:if="{{undoneCount}}" class="finish-all" bindtap="completeAll" loading="{{completingAll}}" disabled="{{completingAll || taskBusyIds.length}}">一键完成</button>
+    <text wx:else class="all-done">全部完成</text>
+  </view>
   <view class="card list">
-    <view wx:for="{{tasks}}" wx:key="id" class="task">
+    <view wx:for="{{tasks}}" wx:key="id" class="task {{item.completed?'task-completed':''}}">
       <view
         class="check {{item.completed?'done':''}}"
         data-index="{{index}}"
         bindtap="toggle"
       >
-        {{item.completed?'✓':''}}
+        {{item.completed?'✓':taskBusyIds[0]===item.id?'…':''}}
       </view>
       <view class="icon">
         <app-icon kind="{{item.category}}" size="36" />
@@ -37,7 +42,7 @@
           {{item.petName}} · {{item.time_of_day}} ·
           {{item.repeat_rule==='daily'?'每天':item.repeat_rule==='weekdays'?'工作日':'周末'}}
         </text>
-        <text>点此编辑</text>
+        <text>{{item.completed?'已完成 · 点此编辑任务':taskBusyIds[0]===item.id?'正在记录…':'点击左侧完成 · 点此编辑'}}</text>
       </view>
       <text class="remove" data-index="{{index}}" bindtap="remove">×</text>
     </view>