feat: new calendar view

2024-08-26 23:12:36 +07:00 · 2024-08-26 23:12:36 +07:00 · ebb851204b
parent b5ba3e7fb7
commit ebb851204b
5 changed files with 146 additions and 97 deletions
--- a/apps/frontend/src/components/launches/calendar.tsx
+++ b/apps/frontend/src/components/launches/calendar.tsx
@ -144,7 +144,7 @@ export const Calendar = () => {
  );
 };

-const CalendarColumn: FC<{ day: number; hour: string }> = (props) => {
+export const CalendarColumn: FC<{ day: number; hour: string }> = (props) => {
  const { day, hour } = props;
  const { currentWeek, currentYear } = useCalendar();

@ -174,22 +174,7 @@ const CalendarColumn: FC<{ day: number; hour: string }> = (props) => {
  return (
    <div className="w-full h-full" ref={ref}>
      {!entry?.isIntersecting ? (
-        <div
-          className={clsx(
-            'h-full flex justify-center items-center text-[12px]',
-            isBeforeNow && 'bg-secondary'
-          )}
-        >
-          {!isBeforeNow && (
-            <div
-              className={clsx(
-                'w-[20px] h-[20px] bg-forth rounded-full flex justify-center items-center hover:bg-seventh'
-              )}
-            >
-              +
-            </div>
-          )}
-        </div>
+        <div />
      ) : (
        <CalendarColumnRender {...props} />
      )}
@ -230,7 +215,7 @@ const CalendarColumnRender: FC<{ day: number; hour: string }> = (props) => {
      return dayjs
        .utc(post.publishDate)
        .local()
-        .isBetween(getDate, getDate.add(10, 'minute'), 'minute', '[)');
+        .isBetween(getDate, getDate.add(59, 'minute'), 'minute', '[)');
    });
  }, [posts]);

@ -376,65 +361,60 @@ const CalendarColumnRender: FC<{ day: number; hour: string }> = (props) => {
  const addProvider = useAddProvider();

  return (
-    <div className="relative w-full h-full">
-      <div className="absolute left-0 top-0 w-full h-full">
-        <div
-          {...(canBeTrending
-            ? {
-                'data-tooltip-id': 'tooltip',
-                'data-tooltip-content': 'Predicted GitHub Trending Change',
-              }
-            : {})}
-          ref={drop}
-          className={clsx(
-            'h-[calc(216px/6)] gap-[2.5px] text-[12px] pointer w-full overflow-hidden justify-center overflow-x-auto flex scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary',
-            isBeforeNow && 'bg-secondary',
-            canDrop && 'bg-white/80',
-            canBeTrending && 'bg-[#eaff00]'
-          )}
-        >
-          {postList.map((post) => (
-            <div
-              key={post.id}
-              className={clsx(
-                postList.length > 1 && 'w-[33px] basis-[28px]',
-                'h-full text-white relative  flex justify-center items-center flex-grow-0 flex-shrink-0'
-              )}
-            >
-              <div className="relative flex gap-[5px] items-center">
-                <CalendarItem
-                  date={getDate}
-                  state={post.state}
-                  editPost={editPost(post)}
-                  post={post}
-                  integrations={integrations}
-                />
-              </div>
+    <div className="relative flex flex-col w-full min-h-full">
+      <div
+        {...(canBeTrending
+          ? {
+              'data-tooltip-id': 'tooltip',
+              'data-tooltip-content': 'Predicted GitHub Trending Change',
+            }
+          : {})}
+        ref={drop}
+        className={clsx(
+          'flex-col flex-1 text-[12px] pointer w-full overflow-hidden justify-center overflow-x-auto flex scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary',
+          isBeforeNow && 'bg-[#06080d]',
+          canDrop && 'bg-white/80',
+          canBeTrending && 'bg-[#eaff00]'
+        )}
+      >
+        {postList.map((post) => (
+          <div
+            key={post.id}
+            className={clsx(
+              'text-white p-[2.5px] relative flex flex-col justify-center items-center'
+            )}
+          >
+            <div className="relative w-full flex flex-col items-center p-[2.5px]">
+              <CalendarItem
+                date={getDate}
+                state={post.state}
+                editPost={editPost(post)}
+                post={post}
+                integrations={integrations}
+              />
            </div>
-          ))}
-          {!isBeforeNow && (
-            <div
-              className={clsx(
-                !postList.length ? 'justify-center flex-1' : 'ml-[2px]',
-                'flex items-center cursor-pointer gap-[2.5px]'
-              )}
-            >
-              <div
-                data-tooltip-id="tooltip"
-                data-tooltip-content={
-                  'Schedule for ' + getDate.format('DD/MM/YYYY HH:mm')
-                }
-                onClick={integrations.length ? addModal : addProvider}
-                className={clsx(
-                  'w-[20px] h-[20px] bg-forth rounded-full flex justify-center items-center hover:bg-seventh'
-                )}
-              >
-                +
-              </div>
-            </div>
-          )}
-        </div>
+          </div>
+        ))}
      </div>
+      {!isBeforeNow && (
+        <div className="pb-[2.5px] px-[5px]">
+          <div
+            className={clsx(
+              !postList.length
+                ? 'h-full w-full absolute left-0 top-0 p-[5px]'
+                : 'h-[40px]',
+              'flex items-center justify-center cursor-pointer pb-[2.5px]'
+            )}
+          >
+            <div
+              onClick={integrations.length ? addModal : addProvider}
+              className={clsx(
+                'hover:before:content-["+"] w-full h-full text-seventh rounded-[10px] hover:border hover:border-seventh flex justify-center items-center'
+              )}
+            />
+          </div>
+        </div>
+      )}
    </div>
  );
 };
@ -461,23 +441,24 @@ const CalendarItem: FC<{
    <div
      ref={dragRef}
      onClick={editPost}
-      className={clsx('relative', state === 'DRAFT' && '!grayscale')}
-      data-tooltip-id="tooltip"
+      className={clsx(
+        'gap-[5px] w-full flex h-full flex-1 rounded-[10px] border border-seventh px-[5px] p-[2.5px]',
+        'relative',
+        state === 'DRAFT' && '!grayscale'
+      )}
      style={{ opacity }}
-      data-tooltip-content={`${state === 'DRAFT' ? 'Draft: ' : ''}${
-        integrations.find(
-          (p) => p.identifier === post.integration?.providerIdentifier
-        )?.name
-      }: ${post.content.slice(0, 100)}`}
    >
-      <img
-        className="w-[20px] h-[20px] rounded-full"
-        src={post.integration.picture!}
-      />
-      <img
-        className="w-[12px] h-[12px] rounded-full absolute z-10 bottom-[0] right-0 border border-fifth"
-        src={`/icons/platforms/${post.integration?.providerIdentifier}.png`}
-      />
+      <div className="relative min-w-[20px] h-[20px]">
+        <img
+          className="w-[20px] h-[20px] rounded-full"
+          src={post.integration.picture!}
+        />
+        <img
+          className="w-[12px] h-[12px] rounded-full absolute z-10 bottom-[0] right-0 border border-fifth"
+          src={`/icons/platforms/${post.integration?.providerIdentifier}.png`}
+        />
+      </div>
+      <div className="whitespace-pre-wrap line-clamp-3">{post.content}</div>
    </div>
  );
 };
--- a/apps/frontend/src/components/launches/launches.component.tsx
+++ b/apps/frontend/src/components/launches/launches.component.tsx
@ -4,7 +4,7 @@ import { AddProviderButton } from '@gitroom/frontend/components/launches/add.pro
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Image from 'next/image';
 import { orderBy } from 'lodash';
-import { Calendar } from '@gitroom/frontend/components/launches/calendar';
+// import { Calendar } from '@gitroom/frontend/components/launches/calendar';
 import { CalendarWeekProvider } from '@gitroom/frontend/components/launches/calendar.context';
 import { Filters } from '@gitroom/frontend/components/launches/filters';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
@ -19,6 +19,7 @@ import { Integration } from '@prisma/client';
 import ImageWithFallback from '@gitroom/react/helpers/image.with.fallback';
 import { useToaster } from '@gitroom/react/toaster/toaster';
 import { useFireEvents } from '@gitroom/helpers/utils/use.fire.events';
+import { NewCalendarComponent } from '@gitroom/frontend/components/launches/new.calendar.component';

 export const LaunchesComponent = () => {
  const fetch = useFetch();
@ -116,7 +117,7 @@ export const LaunchesComponent = () => {
    <CalendarWeekProvider integrations={sortedIntegrations}>
      <div className="flex flex-1 flex-col">
        <div className="flex flex-1 relative">
-          <div className="absolute w-full h-full grid grid-cols-[220px_minmax(0,1fr)] gap-[30px] overflow-hidden overflow-y-scroll scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary">
+          <div className="outline-none absolute w-full h-full grid grid-cols-[220px_minmax(0,1fr)] gap-[30px] overflow-hidden overflow-y-scroll scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary">
              <div className="w-[220px] bg-third p-[16px] flex flex-col gap-[24px] min-h-[100%]">
              <h2 className="text-[20px]">Channels</h2>
              <div className="gap-[16px] flex flex-col">
@ -212,7 +213,8 @@ export const LaunchesComponent = () => {
            </div>
            <div className="flex-1 flex flex-col gap-[14px]">
              <Filters />
-              <Calendar />
+              <NewCalendarComponent />
+              {/*<Calendar />*/}
            </div>
          </div>
        </div>
--- a/apps/frontend/src/components/launches/new.calendar.component.tsx
+++ b/apps/frontend/src/components/launches/new.calendar.component.tsx
@ -0,0 +1,56 @@
+'use client';
+import { ChevronLeft, ChevronRight, Plus } from 'lucide-react';
+import { Button } from '@gitroom/react/form/button';
+import { Fragment } from 'react';
+import { CalendarColumn } from '@gitroom/frontend/components/launches/calendar';
+import { DNDProvider } from '@gitroom/frontend/components/launches/helpers/dnd.provider';
+
+export const days = [
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+  'Sunday',
+];
+export const hours = Array.from({ length: 24 }, (_, i) => i);
+
+export const NewCalendarComponent = () => {
+  return (
+    <DNDProvider>
+      <div className="flex flex-col h-screen bg-[#0f1727] rounded-[10px] overflow-hidden text-white flex-1">
+        <div className="flex-1">
+          <div className="grid grid-cols-8 bg-gray-800 gap-[2px]">
+            <div className="bg-[#121b2c] sticky top-0 z-10 bg-gray-900"></div>
+            {days.map((day, index) => (
+              <div
+                key={day}
+                className="sticky top-0 z-10 bg-[#121b2c] p-2 text-center"
+              >
+                <div>{day}</div>
+              </div>
+            ))}
+            {hours.map((hour) => (
+              <Fragment key={hour}>
+                <div className="p-2 pr-4 bg-[#090B13] text-center items-center justify-center flex">
+                  {hour.toString().padStart(2, '0')}:00
+                </div>
+                {days.map((day, indexDay) => (
+                  <Fragment key={`${day}-${hour}`}>
+                    <div className="relative bg-[#090b13]">
+                      <CalendarColumn
+                        day={indexDay}
+                        hour={`${hour.toString().padStart(2, '0')}:00`}
+                      />
+                    </div>
+                  </Fragment>
+                ))}
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    </DNDProvider>
+  );
+};
--- a/package-lock.json
+++ b/package-lock.json
@ -79,6 +79,7 @@
        "json-to-graphql-query": "^2.2.5",
        "jsonwebtoken": "^9.0.2",
        "lodash": "^4.17.21",
+        "lucide-react": "^0.436.0",
        "md5": "^2.3.0",
        "mime-types": "^2.1.35",
        "multer": "^1.4.5-lts.1",
@ -4157,6 +4158,14 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
+    "node_modules/@copilotkit/react-textarea/node_modules/lucide-react": {
+      "version": "0.274.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.274.0.tgz",
+      "integrity": "sha512-qiWcojRXEwDiSimMX1+arnxha+ROJzZjJaVvCC0rsG6a9pUPjZePXSq7em4ZKMp0NDm1hyzPNkM7UaWC3LU2AA==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/@copilotkit/react-textarea/node_modules/react-is": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@ -28514,11 +28523,11 @@
      }
    },
    "node_modules/lucide-react": {
-      "version": "0.274.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.274.0.tgz",
-      "integrity": "sha512-qiWcojRXEwDiSimMX1+arnxha+ROJzZjJaVvCC0rsG6a9pUPjZePXSq7em4ZKMp0NDm1hyzPNkM7UaWC3LU2AA==",
+      "version": "0.436.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.436.0.tgz",
+      "integrity": "sha512-N292bIxoqm1aObAg0MzFtvhYwgQE6qnIOWx/GLj5ONgcTPH6N0fD9bVq/GfdeC9ZORBXozt/XeEKDpiB3x3vlQ==",
      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
      }
    },
    "node_modules/luxon": {
--- a/package.json
+++ b/package.json
@ -83,6 +83,7 @@
    "json-to-graphql-query": "^2.2.5",
    "jsonwebtoken": "^9.0.2",
    "lodash": "^4.17.21",
+    "lucide-react": "^0.436.0",
    "md5": "^2.3.0",
    "mime-types": "^2.1.35",
    "multer": "^1.4.5-lts.1",