Feat: Target date on create & edit, sort by target, update how name &…

… target is shown

README.md

@@ -26,10 +26,10 @@ We maintain a separate wiki page at https://docs.theopenpresenter.com. Please re
 ✅ Present in any device that can run a browser  
 ✅ Collaborate & control presentation from anywhere  
 ✅ Play video from various sources (Youtube, local, etc)  
+✅ Organize your past and future presentation sessions   
 🟨 Import & display lyrics from various sources with ease (currently only MyWorshipList)  
 🟨 Display slides from many different sources (currently only Google Slides)  
 🟨 Record audio and save it for future playback  
-⬜ Organize your past and future presentation sessions   
 ⬜ Offline support  
 
 Last but not least, the code for TheOpenPresenter will always be Open Source. We also promise to keep a hosted version of TheOpenPresenter free for small churches for as long as possible, the ones that will benefit from this project the most.

apps/homepage/package.json

@@ -31,6 +31,7 @@
     "postcss-import": "^16.1.0",
     "random-word-slugs": "^0.1.7",
     "react": "rc",
+    "react-calendar": "^5.1.0",
     "react-dom": "rc",
     "react-icons": "^5.3.0",
     "react-qr-code": "^2.0.15",

apps/homepage/src/components/DatePicker/datePickerReactSelect.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback } from "react";
+import ReactCalendar from "react-calendar";
+import {
+  GroupBase,
+  MenuListProps,
+  Options,
+  Props,
+  SelectComponentsConfig,
+  StylesConfig,
+} from "react-select";
+
+const MenuList = (props: MenuListProps<any, any>) => {
+  const onChange = useCallback(
+    (val: Date) => {
+      if (props.selectProps.onChange) {
+        props.selectProps?.onChange(val, {
+          // This doesn't do anything but the function wants it
+          action: "select-option",
+          option: { value: val, label: "" },
+          name: "",
+        });
+        if (props.selectProps.onMenuClose) {
+          props.selectProps.onMenuClose();
+        }
+      }
+    },
+    [props.selectProps],
+  );
+
+  return (
+    <ReactCalendar
+      value={props.selectProps.value?.value}
+      onChange={(val) => onChange(val as Date)}
+    />
+  );
+};
+
+export const ReactSelectDateComponents: SelectComponentsConfig<
+  Options<any>,
+  true,
+  any
+> = { MenuList };
+
+export const ReactSelectDateStyle: Partial<
+  StylesConfig<any, any, GroupBase<any>>
+> = {
+  container: (provided) => ({ ...provided, width: "100%" }),
+  menu: (provided) => ({ ...provided, width: 350, right: 0 }),
+};
+
+export const ReactSelectDateProps: Props<any, any> = {
+  styles: ReactSelectDateStyle,
+  components: ReactSelectDateComponents,
+  menuPosition: "fixed",
+};

apps/homepage/src/containers/CreateProjectModal.tsx

@@ -1,3 +1,4 @@
+import { ReactSelectDateProps } from "@/components/DatePicker/datePickerReactSelect";
 import { TagsSelector } from "@/components/Tag/TagsSelector";
 import { useOrganizationSlug } from "@/lib/permissionHooks/organization";
 import {
@@ -21,12 +22,13 @@ import {
   useCreateTagMutation,
 } from "@repo/graphql";
 import { globalState } from "@repo/lib";
-import { OverlayToggleComponentProps } from "@repo/ui";
+import { OverlayToggleComponentProps, formatHumanReadableDate } from "@repo/ui";
 import { format } from "date-fns";
 import { Form, Formik } from "formik";
 import { InputControl, SelectControl, SubmitButton } from "formik-chakra-ui";
 import { generateSlug } from "random-word-slugs";
 import { useCallback, useMemo, useState } from "react";
+import Select from "react-select";
 
 export type CreateProjectModalPropTypes = Omit<
   ModalProps,
@@ -40,6 +42,7 @@ export type CreateProjectModalPropTypes = Omit<
 type FormInputs = {
   name: string;
   categoryId: string | undefined;
+  targetDate: Date | undefined;
 };
 
 const CreateProjectModal = ({
@@ -74,9 +77,10 @@ const CreateProjectModal = ({
         variables: {
           organizationId,
           slug: generateSlug(),
-          name: data.name === "" ? namePlaceholder : data.name,
+          name: data.name,
           categoryId: data.categoryId,
           tags: selectedTagIds,
+          targetDate: data.targetDate ? data.targetDate.toDateString() : null,
         },
       }).then((x) => {
         const projectSlug = x.data?.createFullProject?.project?.slug;
@@ -87,15 +91,7 @@ const CreateProjectModal = ({
       onToggle?.();
       resetData?.();
     },
-    [
-      createProject,
-      namePlaceholder,
-      onToggle,
-      organizationId,
-      resetData,
-      selectedTagIds,
-      slug,
-    ],
+    [createProject, onToggle, organizationId, resetData, selectedTagIds, slug],
   );
 
   return (
@@ -110,10 +106,11 @@ const CreateProjectModal = ({
         initialValues={{
           name: "",
           categoryId: undefined,
+          targetDate: undefined,
         }}
         onSubmit={handleSubmit}
       >
-        {({ handleSubmit }) => (
+        {({ handleSubmit, values, setFieldValue }) => (
           <Form onSubmit={handleSubmit as any}>
             <ModalContent>
               <ModalHeader>New Project</ModalHeader>
@@ -125,6 +122,27 @@ const CreateProjectModal = ({
                     name="name"
                     inputProps={{ placeholder: namePlaceholder }}
                   />
+
+                  <FormControl>
+                    <FormLabel>Service Time</FormLabel>
+                    <Select
+                      {...ReactSelectDateProps}
+                      value={
+                        values.targetDate
+                          ? {
+                              value: values.targetDate,
+                              label: formatHumanReadableDate(values.targetDate),
+                            }
+                          : null
+                      }
+                      onChange={(val) => {
+                        setFieldValue("targetDate", val);
+                      }}
+                      isClearable
+                      isSearchable={false}
+                    />
+                  </FormControl>
+
                   <SelectControl name="categoryId" label="Category">
                     <option key="none" value={undefined}>
                       Uncategorized

apps/homepage/src/containers/EditProjectModal.tsx

@@ -1,3 +1,4 @@
+import { ReactSelectDateProps } from "@/components/DatePicker/datePickerReactSelect";
 import { TagsSelector } from "@/components/Tag/TagsSelector";
 import {
   Button,
@@ -22,11 +23,12 @@ import {
   useUpdateProjectMutation,
 } from "@repo/graphql";
 import { globalState } from "@repo/lib";
-import { OverlayToggleComponentProps } from "@repo/ui";
+import { OverlayToggleComponentProps, formatHumanReadableDate } from "@repo/ui";
 import { Form, Formik } from "formik";
 import { InputControl, SelectControl, SubmitButton } from "formik-chakra-ui";
 import { generateSlug } from "random-word-slugs";
 import { useCallback, useEffect, useState } from "react";
+import Select from "react-select";
 
 export type EditProjectModalPropTypes = Omit<
   ModalProps,
@@ -41,6 +43,7 @@ export type EditProjectModalPropTypes = Omit<
 type FormInputs = {
   name: string;
   categoryId: string | undefined;
+  targetDate: Date | undefined;
 };
 
 const EditProjectModal = ({
@@ -85,6 +88,7 @@ const EditProjectModal = ({
           slug: generateSlug(),
           name: data.name,
           categoryId: data.categoryId,
+          targetDate: data.targetDate ? data.targetDate.toDateString() : null,
         },
       });
       const existingTagIds = project.projectTags.nodes.map((x) => x.tag?.id);
@@ -142,17 +146,41 @@ const EditProjectModal = ({
         initialValues={{
           name: project.name,
           categoryId: project.category?.id,
+          targetDate: project.targetDate
+            ? new Date(project.targetDate)
+            : undefined,
         }}
         onSubmit={handleSubmit}
       >
-        {({ handleSubmit }) => (
+        {({ handleSubmit, values, setFieldValue }) => (
           <Form onSubmit={handleSubmit as any}>
             <ModalContent>
               <ModalHeader>Edit Project</ModalHeader>
               <ModalCloseButton />
               <ModalBody>
                 <VStack alignItems="flex-start">
                   <InputControl label="Name" name="name" />
+
+                  <FormControl>
+                    <FormLabel>Service Time</FormLabel>
+                    <Select
+                      {...ReactSelectDateProps}
+                      value={
+                        values.targetDate
+                          ? {
+                              value: values.targetDate,
+                              label: formatHumanReadableDate(values.targetDate),
+                            }
+                          : null
+                      }
+                      onChange={(val) => {
+                        setFieldValue("targetDate", val);
+                      }}
+                      isClearable
+                      isSearchable={false}
+                    />
+                  </FormControl>
+
                   <SelectControl name="categoryId" label="Category">
                     <option key="none" value={undefined}>
                       Uncategorized

apps/homepage/src/graphql/Pages/Organization/Dashboard/DashboardIndex.graphql

@@ -3,7 +3,7 @@ query OrganizationDashboardIndexPage($slug: String!) {
 
   organizationBySlug(slug: $slug) {
     id
-    projects(orderBy: UPDATED_AT_DESC) {
+    projects(orderBy: [TARGET_DATE_DESC, UPDATED_AT_DESC]) {
       nodes {
         id
         ...Project

apps/homepage/src/pages/_app.tsx

@@ -7,6 +7,7 @@ import { AppProps } from "next/app";
 import { Router } from "next/router";
 import NProgress from "nprogress";
 import "nprogress/nprogress.css";
+import "react-calendar/dist/Calendar.css";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 

apps/homepage/src/pages/o/[slug]/index.tsx

@@ -22,7 +22,13 @@ import {
   useOrganizationDashboardIndexPageQuery,
 } from "@repo/graphql";
 import { globalState } from "@repo/lib";
-import { DateDisplayRelative, OverlayToggle, PopConfirm } from "@repo/ui";
+import {
+  DateDisplay,
+  DateDisplayRelative,
+  OverlayToggle,
+  PopConfirm,
+} from "@repo/ui";
+import { format } from "date-fns";
 import { NextPage } from "next";
 import { useCallback, useMemo } from "react";
 import { FaPlus } from "react-icons/fa";
@@ -162,8 +168,19 @@ const ProjectCard = ({
         justifyContent={{ base: "space-between", sm: "flex-start" }}
       >
         <LinkOverlay href={`/app/${slug}/${project.slug}`}>
-          <Text fontWeight={{ base: 600, sm: 500 }}>
-            {project.name !== "" ? project.name : project.slug}
+          {project.targetDate && (
+            <DateDisplay
+              date={new Date(project.targetDate)}
+              formatToken="do MMM yyyy"
+              textProps={{ fontSize: "sm", fontWeight: { base: 600, sm: 500 } }}
+            />
+          )}
+          <Text fontSize={project.targetDate ? "xs" : "sm"}>
+            {project.name !== ""
+              ? project.name
+              : project.targetDate
+                ? ""
+                : `Untitled (${format(new Date(project.createdAt), "do MMM yyyy")})`}
           </Text>
           <Text fontSize="xs" color="gray.500">
             {project.category?.name}