Adding priority

src/backend/server/src/Todo.Api/Controllers/TodosController.cs

@@ -81,12 +81,16 @@ public class TodosController : ApiController
         [JsonPropertyName("created")]
         public long Created { get; init; } = 0;
         
+        [JsonPropertyName("priority")]
+        public string? Priority { get; init; }
+
         internal ReplaceTodoCommand To(string id) => new(
             id,
             Title,
             Project,
             Description,
             Status,
-            Created);
+            Created,
+            Priority);
     }
 }

src/backend/server/src/Todo.Core/Application/Commands/Todo/CreateTodoCommand.cs

@@ -11,7 +11,8 @@ namespace Todo.Core.Application.Commands.Todo;
 public record CreateTodoCommand(
     [Required] string TodoTitle,
     string? TodoProject,
-    string? TodoDescription) : IRequest<TodoViewModel>
+    string? TodoDescription,
+    string? Priority) : IRequest<TodoViewModel>
 {
     internal class Handler : IRequestHandler<CreateTodoCommand, TodoViewModel>
     {
@@ -41,6 +42,7 @@ public record CreateTodoCommand(
                 request.TodoTitle,
                 request.TodoProject,
                 request.TodoDescription,
+                request.Priority
                 userId,
                 DateTimeOffset.UtcNow.ToUnixTimeMilliseconds());
 

src/backend/server/src/Todo.Core/Application/Commands/Todo/ReplaceTodoCommand.cs

@@ -12,7 +12,8 @@ public record ReplaceTodoCommand(
     string? Project,
     string? Description,
     bool Status,
-    long Created) : IRequest<Unit>
+    long Created,
+    string? Priority) : IRequest<Unit>
 {
     internal class Handler : IRequestHandler<ReplaceTodoCommand, Unit>
     {
@@ -51,5 +52,6 @@ public record ReplaceTodoCommand(
         Project,
         authorId,
         Description,
-        Created);
+        Created,
+        Priority);
 }

src/backend/server/src/Todo.Core/Entities/Todo.cs

@@ -7,4 +7,5 @@ public record Todo(
     string? Project,
     string AuthorId,
     string? Description,
-    long Created);
+    long Created,
+    string? Priority);

src/backend/server/src/Todo.Core/Interfaces/Persistence/ITodoRepository.cs

@@ -8,6 +8,7 @@ public interface ITodoRepository
         string title,
         string? projectName,
         string? description,
+        string? priority,
         string userId,
         long created);
 

src/backend/server/src/Todo.Persistence/Mongo/Repositories/Dtos/MongoTodo.cs

@@ -20,6 +20,7 @@ public record MongoTodo
     public string? ProjectName { get; set; } = string.Empty;
     public string AuthorId { get; set; }
     public long Created { get; set; } = 0;
+    public string? Priority { get; set; } = string.Empty; 
 
     public Core.Entities.Todo To() => new(
         Id,
@@ -28,5 +29,6 @@ public record MongoTodo
         ProjectName,
         AuthorId,
         Description,
-        Created);
+        Created,
+        Priority);
 }

src/client/src/components/todos/add/addPriorityButton.tsx

@@ -0,0 +1,54 @@
+import { ButtonHTMLAttributes, FC, useState } from "react";
+import { OutlinedButton } from "@src/components/common/buttons/outlinedButton";
+import Tippy from "@tippyjs/react";
+
+interface AddPriorityButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  initialPriority?: string;
+  onPriorityChanged: (project: string) => void;
+}
+
+export const AddPriorityButton: FC<AddPriorityButtonProps> = (props) => {
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  return (
+    <Tippy
+      placement="bottom"
+      visible={menuIsOpen}
+      onClickOutside={() => {
+        setMenuIsOpen(false);
+      }}
+      delay={0}
+      interactive={true}
+      duration={0}
+      content={
+        <div
+          className="py-2 px-2 bg-white dark:bg-gray-700 border border-accent-500 rounded-md flex flex-col gap-4"
+          tabIndex={0}
+        >
+          <div className="space-y-2">
+            {["p1", "p2", "p3"].map((p) => (
+              <div key={p}>
+                <button
+                  type="button"
+                  className="whitespace-nowrap py-1 px-4 dark:text-white dark:bg-gray-500 rounded-sm"
+                  onClick={() => props.onPriorityChanged(p)}
+                >
+                  {p}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      }
+    >
+      <span>
+        <OutlinedButton
+          className="whitespace-nowrap"
+          onClick={() => setMenuIsOpen(true)}
+        >
+          {props.children || "Add Priority"}
+        </OutlinedButton>
+      </span>
+    </Tippy>
+  );
+};

src/client/src/components/todos/add/addTodoForm.tsx

@@ -4,19 +4,26 @@ import { PrimaryButton } from "@src/components/common/buttons/primaryButton";
 import { TodoShortForm } from "@src/components/todos/collapsed/todoShortForm";
 
 export const AddTodoForm: FC<{
-  onAdd: (todoName: string, project: string, description: string) => void;
+  onAdd: (
+    todoName: string,
+    project: string,
+    description: string,
+    priority: string
+  ) => void;
   onClose: () => void;
   project: string;
+  priority: string;
 }> = ({ onAdd, onClose, ...props }) => {
   const [todoName, setTodoName] = useState("");
   const [todoDescription, setTodoDescription] = useState("");
   const [project, setProject] = useState(props.project);
+  const [priority, setPriority] = useState(props.priority);
 
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
-        onAdd(todoName, project, todoDescription);
+        onAdd(todoName, project, todoDescription, priority);
         setTodoName("");
         setTodoDescription("");
       }}
@@ -25,6 +32,8 @@ export const AddTodoForm: FC<{
         <TodoShortForm
           project={project}
           onProjectChanged={(p) => setProject(p)}
+          priority={priority}
+          onPriorityChanged={setPriority}
           name={todoName}
           onNameChange={(e) => setTodoName(e.target.value)}
           description={todoDescription}

src/client/src/components/todos/addTodo.tsx

@@ -22,8 +22,9 @@ export function AddTodo(props: { project: string }) {
   return (
     <AddTodoForm
       project={props.project}
-      onAdd={(todoName, project, description) => {
+      priority={""}
-        createTodo(todoName, project, description);
+      onAdd={(todoName, project, description, priority) => {
+        createTodo(todoName, description, project, priority);
       }}
       onClose={() => setCollapsed(CollapsedState.collapsed)}
     />

src/client/src/components/todos/collapsed/todoShortForm.tsx

@@ -1,9 +1,12 @@
 import TextareaAutosize from "react-textarea-autosize";
 import { AddProjectButton } from "@src/components/todos/add/addProjectButton";
+import { AddPriorityButton } from "@src/components/todos/add/addPriorityButton";
 
 export const TodoShortForm = (props: {
   project: string;
   onProjectChanged: (project: string) => void;
+  priority: string;
+  onPriorityChanged: (project: string) => void;
   name: string;
   onNameChange: (e) => void;
   description: string;
@@ -34,20 +37,24 @@ export const TodoShortForm = (props: {
           minRows={3}
         />
       </div>
-      <div className="flex flex-row pb-1">
+      <div className="flex  flex-col sm:flex-row pb-1 gap-2 justify-between">
+        <div>
           <AddProjectButton
             onProjectChanged={props.onProjectChanged}
             initialProject={props.project}
           >
             {props.project}
           </AddProjectButton>
-        <AddProjectButton
+        </div>
-          onProjectChanged={props.onProjectChanged}
+
-          initialProject={props.project}
+        <div>
+          <AddPriorityButton
+            onPriorityChanged={props.onPriorityChanged}
+            initialPriority={props.priority}
           >
-          {props.project}
+            {props.priority}
-        </AddProjectButton>
+          </AddPriorityButton>
-        <div className="flex-grow w-1/2" />
+        </div>
       </div>
     </div>
   </div>

src/client/src/core/entities/todo.tsx

@@ -14,6 +14,7 @@ export interface Todo {
   project?: string;
   authorId?: string;
   created: number;
+  priority?: string;
 }
 
 export const asTodo = (item: Todo): Todo => {

src/client/src/pages/index.tsx

@@ -55,7 +55,7 @@ const HomePage = () => {
               />
             </div>
           ))}
-        {data && data.length === 0 && (
+        {onlyActiveTodos && onlyActiveTodos.length === 0 && (
           <div className="space-y-4">
             <PageHeading title="You're done!" />
             <AddTodo project={""} />

src/client/src/presentation/hooks/socketHooks.tsx

@@ -18,7 +18,12 @@ export const useCreateTodo = () => {
   const [createTodo, { isLoading }] = todosApi.useCreateTodoMutation();
 
   return {
-    createTodo: (todoName: string, project: string, description: string) => {
+    createTodo: (
+      todoName: string,
+      description: string,
+      project?: string,
+      priority?: string
+    ) => {
       createTodo({
         id: nanoid(),
         created: 0,
@@ -26,6 +31,7 @@ export const useCreateTodo = () => {
         title: todoName,
         project,
         description,
+        priority,
       });
     },
   };