From 6b171a6f87a864fb7faab956fb7ea0b638e81dcf Mon Sep 17 00:00:00 2001
From: Bailey Pumfleet <pumfleet@hey.com>
Date: Mon, 15 Nov 2021 12:25:49 +0000
Subject: [PATCH] Manually reorder event types (#1142)

* Add event type reordering

* Add migration for position field

* hack on a hack

* can edit

* fix ordering

* Remove console.log

Co-authored-by: Alex Johansson <alexander@n1s.se>

Co-authored-by: KATT <alexander@n1s.se>
---
 pages/[user].tsx                              |   8 ++
 pages/event-types/index.tsx                   |  59 ++++++++-
 .../migration.sql                             |   2 +
 prisma/schema.prisma                          |   1 +
 public/static/locales/en/common.json          |   1 +
 server/routers/viewer.tsx                     | 120 +++++++++++++++++-
 6 files changed, 184 insertions(+), 7 deletions(-)
 create mode 100644 prisma/migrations/20211106121119_add_event_type_position/migration.sql

diff --git a/pages/[user].tsx b/pages/[user].tsx
index 1643db19..b1949c09 100644
--- a/pages/[user].tsx
+++ b/pages/[user].tsx
@@ -124,6 +124,14 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
         },
       ],
     },
+    orderBy: [
+      {
+        position: "desc",
+      },
+      {
+        id: "asc",
+      },
+    ],
     select: {
       id: true,
       slug: true,
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 0fa359a2..789ef292 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -1,13 +1,20 @@
 // TODO: replace headlessui with radix-ui
 import { Menu, Transition } from "@headlessui/react";
-import { UsersIcon } from "@heroicons/react/solid";
-import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
-import { DotsHorizontalIcon, ExternalLinkIcon, LinkIcon } from "@heroicons/react/solid";
+import {
+  DotsHorizontalIcon,
+  ExternalLinkIcon,
+  LinkIcon,
+  ArrowDownIcon,
+  ChevronDownIcon,
+  PlusIcon,
+  ArrowUpIcon,
+  UsersIcon,
+} from "@heroicons/react/solid";
 import { SchedulingType } from "@prisma/client";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { Fragment, useRef } from "react";
+import React, { Fragment, useRef, useState, useEffect } from "react";
 import { useMutation } from "react-query";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -72,10 +79,40 @@ interface EventTypeListProps {
 }
 const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.Element => {
   const { t } = useLocale();
+
+  const utils = trpc.useContext();
+  const mutation = trpc.useMutation("viewer.eventTypeOrder", {
+    onError: (err) => {
+      console.error(err.message);
+    },
+    async onSettled() {
+      await utils.cancelQuery(["viewer.eventTypes"]);
+      await utils.invalidateQueries(["viewer.eventTypes"]);
+    },
+  });
+  const [sortableTypes, setSortableTypes] = useState(types);
+  useEffect(() => {
+    setSortableTypes(types);
+  }, [types]);
+  function moveEventType(index: number, increment: 1 | -1) {
+    const newList = [...sortableTypes];
+
+    const type = sortableTypes[index];
+    const tmp = sortableTypes[index + increment];
+    if (tmp) {
+      newList[index] = tmp;
+      newList[index + increment] = type;
+    }
+    setSortableTypes(newList);
+    mutation.mutate({
+      ids: newList.map((type) => type.id),
+    });
+  }
+
   return (
     <div className="mb-16 -mx-4 overflow-hidden bg-white border border-gray-200 rounded-sm sm:mx-0">
       <ul className="divide-y divide-neutral-200" data-testid="event-types">
-        {types.map((type) => (
+        {sortableTypes.map((type, index) => (
           <li
             key={type.id}
             className={classNames(
@@ -87,7 +124,17 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                 "hover:bg-neutral-50 flex justify-between items-center ",
                 type.$disabled && "pointer-events-none"
               )}>
-              <div className="flex items-center justify-between w-full px-4 py-4 sm:px-6 hover:bg-neutral-50">
+              <div className="group flex items-center justify-between w-full px-4 py-4 sm:px-6 hover:bg-neutral-50">
+                <button
+                  className="absolute mb-8 left-1/2 -ml-4 sm:ml-0 sm:left-[19px] border hover:border-transparent text-gray-400 transition-all hover:text-black hover:shadow group-hover:scale-100 scale-0 w-7 h-7 p-1 invisible group-hover:visible bg-white rounded-full"
+                  onClick={() => moveEventType(index, -1)}>
+                  <ArrowUpIcon />
+                </button>
+                <button
+                  className="absolute mt-8 left-1/2 -ml-4 sm:ml-0 sm:left-[19px] border hover:border-transparent text-gray-400 transition-all hover:text-black hover:shadow group-hover:scale-100 scale-0 w-7 h-7 p-1 invisible group-hover:visible bg-white rounded-full"
+                  onClick={() => moveEventType(index, 1)}>
+                  <ArrowDownIcon />
+                </button>
                 <Link href={"/event-types/" + type.id}>
                   <a
                     className="flex-grow text-sm truncate"
diff --git a/prisma/migrations/20211106121119_add_event_type_position/migration.sql b/prisma/migrations/20211106121119_add_event_type_position/migration.sql
new file mode 100644
index 00000000..dc93afba
--- /dev/null
+++ b/prisma/migrations/20211106121119_add_event_type_position/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "EventType" ADD COLUMN     "position" INTEGER NOT NULL DEFAULT 0;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 0b1b54ab..2eec579e 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -21,6 +21,7 @@ model EventType {
   title                   String
   slug                    String
   description             String?
+  position                Int                    @default(0)
   locations               Json?
   length                  Int
   hidden                  Boolean                @default(false)
diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json
index 91f4e35d..b49ad9f8 100644
--- a/public/static/locales/en/common.json
+++ b/public/static/locales/en/common.json
@@ -517,6 +517,7 @@
   "confirm_delete_event_type": "Yes, delete event type",
   "integrations": "Integrations",
   "settings": "Settings",
+  "event_type_moved_successfully": "Event type has been moved successfully",
   "next_step": "Skip step",
   "prev_step": "Prev step",
   "installed": "Installed",
diff --git a/server/routers/viewer.tsx b/server/routers/viewer.tsx
index 2e86ca7a..290f87c5 100644
--- a/server/routers/viewer.tsx
+++ b/server/routers/viewer.tsx
@@ -1,4 +1,5 @@
 import { BookingStatus, Prisma } from "@prisma/client";
+import _ from "lodash";
 import { z } from "zod";
 
 import { checkPremiumUsername } from "@ee/lib/core/checkPremiumUsername";
@@ -85,6 +86,7 @@ const loggedInViewerRouter = createProtectedRouter()
         hidden: true,
         price: true,
         currency: true,
+        position: true,
         users: {
           select: {
             id: true,
@@ -126,6 +128,14 @@ const loggedInViewerRouter = createProtectedRouter()
                   },
                   eventTypes: {
                     select: eventTypeSelect,
+                    orderBy: [
+                      {
+                        position: "desc",
+                      },
+                      {
+                        id: "asc",
+                      },
+                    ],
                   },
                 },
               },
@@ -136,6 +146,14 @@ const loggedInViewerRouter = createProtectedRouter()
               team: null,
             },
             select: eventTypeSelect,
+            orderBy: [
+              {
+                position: "desc",
+              },
+              {
+                id: "asc",
+              },
+            ],
           },
         },
       });
@@ -150,6 +168,14 @@ const loggedInViewerRouter = createProtectedRouter()
           userId: ctx.user.id,
         },
         select: eventTypeSelect,
+        orderBy: [
+          {
+            position: "desc",
+          },
+          {
+            id: "asc",
+          },
+        ],
       });
 
       type EventTypeGroup = {
@@ -184,7 +210,7 @@ const loggedInViewerRouter = createProtectedRouter()
           name: user.name,
           image: user.avatar,
         },
-        eventTypes: mergedEventTypes,
+        eventTypes: _.orderBy(mergedEventTypes, ["position", "id"], ["desc", "asc"]),
         metadata: {
           membershipCount: 1,
           readOnly: false,
@@ -449,6 +475,98 @@ const loggedInViewerRouter = createProtectedRouter()
         data,
       });
     },
+  })
+  .mutation("eventTypeOrder", {
+    input: z.object({
+      ids: z.array(z.number()),
+    }),
+    async resolve({ input, ctx }) {
+      const { prisma, user } = ctx;
+      const allEventTypes = await ctx.prisma.eventType.findMany({
+        select: {
+          id: true,
+        },
+        where: {
+          id: {
+            in: input.ids,
+          },
+          OR: [
+            {
+              userId: user.id,
+            },
+            {
+              users: {
+                some: {
+                  id: user.id,
+                },
+              },
+            },
+            {
+              team: {
+                members: {
+                  some: {
+                    userId: user.id,
+                  },
+                },
+              },
+            },
+          ],
+        },
+      });
+      const allEventTypeIds = new Set(allEventTypes.map((type) => type.id));
+      if (input.ids.some((id) => !allEventTypeIds.has(id))) {
+        throw new TRPCError({
+          code: "UNAUTHORIZED",
+        });
+      }
+      await Promise.all(
+        _.reverse(input.ids).map((id, position) => {
+          return prisma.eventType.update({
+            where: {
+              id,
+            },
+            data: {
+              position,
+            },
+          });
+        })
+      );
+    },
+  })
+  .mutation("eventTypePosition", {
+    input: z.object({
+      eventType: z.number(),
+      action: z.string(),
+    }),
+    async resolve({ input, ctx }) {
+      // This mutation is for the user to be able to order their event types by incrementing or decrementing the position number
+      const { prisma } = ctx;
+      if (input.eventType && input.action == "increment") {
+        await prisma.eventType.update({
+          where: {
+            id: input.eventType,
+          },
+          data: {
+            position: {
+              increment: 1,
+            },
+          },
+        });
+      }
+
+      if (input.eventType && input.action == "decrement") {
+        await prisma.eventType.update({
+          where: {
+            id: input.eventType,
+          },
+          data: {
+            position: {
+              decrement: 1,
+            },
+          },
+        });
+      }
+    },
   });
 
 export const viewerRouter = createRouter()