feat: flow mode for tasks (#230)

* feat: flow mode for tasks

* chore: update

Author: hmbanan666

apps/atrium-telegram/app/pages/task/[taskId]/index.vue

@@ -57,7 +57,7 @@
         </p>
       </div>
 
-      <div class="mt-6 flex flex-col gap-0.5">
+      <div class="mt-6 flex flex-col gap-1">
         <div class="text-sm text-muted">
           Создана
           <time

apps/atrium-telegram/app/pages/task/my.vue

@@ -12,7 +12,10 @@
               :class="[
                 taskStore.isTodayOnly ? 'tg-text' : 'text-secondary',
               ]"
-              @click="taskStore.isTodayOnly = !taskStore.isTodayOnly"
+              @click="() => {
+                taskStore.isTodayOnly = !taskStore.isTodayOnly
+                taskStore.isInFlowMode = false
+              }"
             >
               {{ taskStore.myTodayTasks.length }} {{ pluralizationRu(taskStore.myTodayTasks.length, ['задача', 'задачи', 'задач']) }}
             </ULink>.
@@ -26,22 +29,52 @@
 
     <template v-if="taskStore.isInitialized">
       <Section>
-        <TasksTodaySwitch />
+        <USwitch
+          v-model="taskStore.isInFlowMode"
+          size="xl"
+          color="secondary"
+          :label="taskStore.isInFlowMode ? `Режим &quot;Поток&quot;` : 'Режим &quot;Списки&quot;'"
+          :ui="{
+            root: 'items-center',
+            label: 'ml-1.5 text-base/5 font-semibold',
+          }"
+          @change="vibrate()"
+        />
       </Section>
 
-      <TaskList
-        v-for="taskList in taskStore.myLists"
-        :key="taskList.id"
-        :list-id="taskList.id"
-        :current-user-id="userStore.id as string"
-      />
+      <div v-if="!taskStore.isInFlowMode" class="flex flex-col gap-8">
+        <TaskList
+          v-for="taskList in taskStore.myLists"
+          :key="taskList.id"
+          :list-id="taskList.id"
+          :current-user-id="userStore.id as string"
+        />
 
-      <CreateCard
-        v-if="!taskStore.isTodayOnly"
-        :label="$t('app.create.task-list.button')"
-        icon="i-lucide-list-todo"
-        @click="modalCreateTaskList.open()"
-      />
+        <CreateCard
+          v-if="!taskStore.isTodayOnly"
+          :label="$t('app.create.task-list.button')"
+          icon="i-lucide-list-todo"
+          @click="modalCreateTaskList.open()"
+        />
+      </div>
+
+      <div v-else>
+        <div
+          v-if="taskStore.myTasksOrderedByDate.length"
+          class="w-full flex flex-col gap-2.5"
+        >
+          <TaskActiveCard
+            v-for="task in taskStore.myTasksOrderedByDate"
+            :key="task.id"
+            :task="task"
+          />
+        </div>
+        <template v-else>
+          <p class="text-center text-base text-muted">
+            Активных задач нет
+          </p>
+        </template>
+      </div>
     </template>
     <div v-else>
       <div class="py-4 w-full flex justify-center">
@@ -58,6 +91,8 @@ definePageMeta({
   name: 'my-tasks',
 })
 
+const { vibrate } = useFeedback()
+
 const overlay = useOverlay()
 const modalCreateTaskList = overlay.create(ModalCreateTaskList)
 

apps/atrium-telegram/app/stores/task.ts

@@ -14,7 +14,9 @@ type TaskListWithData = TaskList & {
 export const useTaskStore = defineStore('task', () => {
   const lists = ref<TaskListWithData[]>([])
   const tasks = ref<Task[]>([])
+  const notCompletedTasks = ref<Task[]>([])
   const isTodayOnly = ref(false)
+  const isInFlowMode = ref(false)
   const isInitialized = ref(false)
 
   const userStore = useUserStore()
@@ -25,6 +27,16 @@ export const useTaskStore = defineStore('task', () => {
     ).filter((taskList) => isTodayOnly.value ? taskList.tasks.filter((task) => !task.completedAt && task.date && isToday(parseDate(task.date), getLocalTimeZone())).length : true),
   )
   const myTodayTasks = computed(() => myLists.value.flatMap((taskList) => taskList.tasks.filter((task) => !task.completedAt && task.date && isToday(parseDate(task.date), getLocalTimeZone()))))
+  const myTasksOrderedByDate = computed(() => {
+    const filterByMe = (task: Task) => task.performerId === userStore.id
+    const sortByDateAsc = (a: Task, b: Task) => a.date && b.date ? new Date(a.date).getTime() - new Date(b.date).getTime() : 0
+
+    const myTasks = notCompletedTasks.value.filter(filterByMe)
+    const tasksWithDate = myTasks.filter((task) => task.date).sort(sortByDateAsc)
+    const tasksWithoutDate = myTasks.filter((task) => !task.date)
+
+    return [...tasksWithDate, ...tasksWithoutDate]
+  })
 
   const initDataRaw = useSignal(_initDataRaw)
 
@@ -44,6 +56,7 @@ export const useTaskStore = defineStore('task', () => {
       isInitialized.value = true
 
       await updateCompleted()
+      await updateNotCompleted()
     } catch (error) {
       if (error instanceof Error) {
         if (error.message.includes('401')) {
@@ -80,6 +93,30 @@ export const useTaskStore = defineStore('task', () => {
     }
   }
 
+  async function updateNotCompleted() {
+    try {
+      const data = await $fetch('/api/task/list/not-completed', {
+        headers: {
+          Authorization: `tma ${initDataRaw.value}`,
+        },
+      })
+      if (!data) {
+        return
+      }
+
+      notCompletedTasks.value = data
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.message.includes('401')) {
+          // No session
+        }
+        if (error.message.includes('404')) {
+          // Not found
+        }
+      }
+    }
+  }
+
   async function setAsFocused(taskId: string) {
     try {
       await $fetch(`/api/task/id/${taskId}/focus`, {
@@ -117,11 +154,14 @@ export const useTaskStore = defineStore('task', () => {
   return {
     lists,
     tasks,
+    notCompletedTasks,
     isTodayOnly,
+    isInFlowMode,
     isInitialized,
 
     myLists,
     myTodayTasks,
+    myTasksOrderedByDate,
 
     update,
     setAsFocused,

apps/atrium-telegram/server/api/task/list/not-completed.get.ts

@@ -0,0 +1,5 @@
+import { db } from '@roll-stack/database'
+
+export default defineEventHandler(async () => {
+  return db.task.findAllNotCompleted()
+})

packages/database/src/repository/task.ts

@@ -17,6 +17,13 @@ export class Task {
     })
   }
 
+  static async findAllNotCompleted() {
+    return useDatabase().query.tasks.findMany({
+      where: (tasks, { isNull }) => isNull(tasks.completedAt),
+      orderBy: (tasks, { desc }) => desc(tasks.updatedAt),
+    })
+  }
+
   static async findList(id: string) {
     return useDatabase().query.taskLists.findFirst({
       where: (taskLists, { eq, and }) => and(eq(taskLists.id, id), eq(taskLists.isArchived, false)),