Merge pull request #486 from sparcs-kaist/feat/terminated-agenda-startAt

feat: add start time on terminated agenda cards

packages/api/src/service/admin.agenda.ts

@@ -28,6 +28,7 @@ const selectAgendaDefaultFields = {
     title: true,
     resolution: true,
     content: true,
+    startAt: true,
   },
 };
 
@@ -94,6 +95,7 @@ export const createAgenda = async ({
       voted: [],
       total: createdVoters.map(voter => voter.user),
     },
+    startAt: "", // startAt is not displayed yet
   };
 
   return {
@@ -148,6 +150,7 @@ export const terminateAgenda = async (agendaId: number, user: User) => {
   const {
     voters: updatedVoters,
     choices: updatedChoices,
+    startAt: agendaStartAt,
     ...updatedAgenda
   } = await prisma.agenda.update({
     data: {
@@ -203,6 +206,7 @@ export const terminateAgenda = async (agendaId: number, user: User) => {
       voted: userVoted,
       votable: userVotable,
     },
+    startAt: agendaStartAt?.toISOString() || "", // startAt is not null with terminatedAgenda
   };
 
   return terminatedAgenda;
@@ -302,6 +306,7 @@ export const updateAgenda = async (agendaUpdate: schema.AdminAgendaUpdate) => {
       voted: [],
       total: voters.map(voter => voter.user),
     },
+    startAt: "",
   };
   return {
     voters: voters.map(voter => `user/${voter.user.username}`),
@@ -384,6 +389,7 @@ export const retrieveAll = async (): Promise<schema.AdminAgenda[]> => {
         total: agenda.voters.map(user => user.user),
         voted,
       },
+      startAt: agenda.startAt?.toISOString() || "",
     };
   });
 

packages/api/src/service/agenda.ts

@@ -42,6 +42,7 @@ export const retrieveAll = async (
         ),
         total: agenda.voters.length,
       },
+      startAt: agenda.startAt,
     };
 
     if (!agenda.startAt) {
@@ -83,6 +84,7 @@ export const retrieveAll = async (
         name: choice.name,
         count: choice.users.length,
       })),
+      startAt: agenda.startAt.toISOString(),
     };
   });
   if (!res) throw new BiseoError("failed to retrieve agenda");

packages/interface/src/admin/agenda/common.ts

@@ -24,6 +24,7 @@ export const AdminAgenda = AgendaBase.omit({
   }),
   status: AdminAgendaStatus,
   choices: z.array(ChoiceWithResult),
+  startAt: z.string(), // currently used only on terminated admin agendas
 });
 export type AdminAgenda = z.infer<typeof AdminAgenda>;
 

packages/interface/src/agenda/common.ts

@@ -75,6 +75,7 @@ export const TerminatedAgenda = AgendaBase.extend({
     voted: z.number().nullable(), // choiceId | null
   }),
   choices: z.array(ChoiceWithResult),
+  startAt: z.string(),
 });
 export type TerminatedAgenda = z.infer<typeof TerminatedAgenda>;
 

packages/web/src/components/molecules/AgendaCard/AdminTerminatedAgendaCard.tsx

@@ -6,7 +6,8 @@ import type { AdminAgenda } from "@biseo/interface/admin/agenda";
 import { Card } from "@biseo/web/components/atoms";
 import { AgendaTag } from "@biseo/web/components/molecules/AgendaTag";
 
-import { column, gap, text } from "@biseo/web/styles";
+import { align, column, gap, justify, row, text, w } from "@biseo/web/styles";
+import { formatDateSimple } from "@biseo/web/utils/format";
 
 const agendaTags = {
   public: true,
@@ -24,14 +25,19 @@ export const AdminTerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
 
   return (
     <Card clickable onClick={openModal}>
-      <div css={[column, gap(8)]}>
-        <AgendaTag
-          tags={{
-            public: agendaTags.public,
-            identified: agendaTags.identified,
-            votable: agendaTags.votable,
-          }}
-        />
+      <div css={[column, gap(8), w("fill")]}>
+        <div css={[row, justify.between, align.center]}>
+          <AgendaTag
+            tags={{
+              public: agendaTags.public,
+              identified: agendaTags.identified,
+              votable: agendaTags.votable,
+            }}
+          />
+          <p css={[text.subtitle, text.gray400]}>
+            {formatDateSimple(agenda.startAt)}
+          </p>
+        </div>
         <div css={[column, gap(2)]}>
           <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
           <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>

packages/web/src/components/molecules/AgendaCard/TerminatedAgendaCard.tsx

@@ -8,8 +8,8 @@ import { OptionVoteResult } from "@biseo/web/components/molecules/OptionVoteResu
 import { VoteResult } from "@biseo/web/components/molecules/VoteResult";
 import { VoteDetail } from "@biseo/web/components/molecules/VoteDetail";
 import { VoteParticipate } from "@biseo/web/components/molecules/VoteParticipate";
-
-import { column, gap, text, w } from "@biseo/web/styles";
+import { align, column, gap, justify, row, text, w } from "@biseo/web/styles";
+import { formatDateSimple } from "@biseo/web/utils/format";
 
 const agendaTags = {
   public: true,
@@ -43,7 +43,12 @@ export const TerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
       {enabled ? (
         <div css={[column, gap(15), w("fill")]}>
           <div css={[column, gap(2)]}>
-            <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
+            <div css={[row, justify.between, align.center]}>
+              <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
+              <p css={[text.subtitle, text.gray400]}>
+                {formatDateSimple(agenda.startAt)}
+              </p>
+            </div>
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
           </div>
           <div>
@@ -74,14 +79,20 @@ export const TerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
           <VoteDetail type={agendaTags.identified} />
         </div>
       ) : (
-        <div css={[column, gap(8)]}>
-          <AgendaTag
-            tags={{
-              public: agendaTags.public,
-              identified: agendaTags.identified,
-              votable: agenda.user.votable,
-            }}
-          />
+        <div css={[column, gap(8), w("fill")]}>
+          <div css={[row, justify.between, align.center]}>
+            <AgendaTag
+              tags={{
+                public: agendaTags.public,
+                identified: agendaTags.identified,
+                votable: agenda.user.votable,
+              }}
+            />
+            <p css={[text.subtitle, text.gray400]}>
+              {formatDateSimple(agenda.startAt)}
+            </p>
+          </div>
+
           <div css={[column, gap(2)]}>
             <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>

packages/web/src/utils/format.ts

@@ -23,3 +23,13 @@ export const formatDate = (isoString: string) => {
 
   return `${year}년 ${month}월 ${date}일 (${day})`;
 };
+
+export const formatDateSimple = (isoString: string) => {
+  const time = new Date(isoString);
+
+  const year = time.getFullYear();
+  const month = time.getMonth() + 1;
+  const date = time.getDate();
+
+  return `${year}-${month}-${date}`;
+};