Fixed hiddenFor field on Gig (#316)

* Fixed hiddenFor field in Gig

* Added comment

Author: CodeyBoi

src/components/gig/form.tsx

@@ -15,6 +15,10 @@ import NumberInput from 'components/input/number-input';
 import Checkbox from 'components/input/checkbox';
 import DatePicker from 'components/input/date-picker';
 import DateTimePicker from 'components/input/datetime-picker';
+import { api } from 'trpc/react';
+import MultiSelect from 'components/multi-select';
+import { lang } from 'utils/language';
+import { detailedName } from 'utils/corps';
 
 interface GigFormProps {
   gig?: Gig & { type: { name: string } } & { hiddenFor: { corpsId: string }[] };
@@ -51,17 +55,16 @@ const GigForm = ({ gig, gigTypes }: GigFormProps) => {
 
   const router = useRouter();
 
-  // const { data: corpsii } = api.corps.search.useQuery({});
-  // const corpsiiOptions = corpsii?.map((c) => ({
-  //   label:
-  //     (c.number ? `#${c.number}` : 'p.e.') +
-  //     ' ' +
-  //     c.firstName +
-  //     ' ' +
-  //     (c.nickName ? '"' + c.nickName + '" ' : '') +
-  //     c.lastName,
-  //   value: c.id,
-  // }));
+  // Only fetch corps if user presses the button or if hiddenFor is populated
+  // to prevent having to fetch all corps every time. The fetch is about 30KB
+  // (as of 2025)
+  const [hideFor, setHideFor] = useState((gig?.hiddenFor.length ?? 0) !== 0);
+  const { data: corpsii } = api.corps.search.useQuery({}, { enabled: hideFor });
+
+  const corpsiiOptions = corpsii?.map((c) => ({
+    label: detailedName(c),
+    value: c.id,
+  }));
 
   const form = useForm<FormValues>({
     initialValues: newGig
@@ -220,18 +223,31 @@ const GigForm = ({ gig, gigTypes }: GigFormProps) => {
             description='Lämna tom för att inte visa kryssruta'
             {...form.getInputProps('checkbox2')}
           />
-          {/*
-            <div className='col-span-1 flex flex-col focus-visible:ring-red-600 md:col-span-2'>
-              <div>Dölj spelning</div>
-              <MultiSelect
-                placeholder='Välj corps...'
-                className='outline-none focus-visible:outline-none'
-                options={corpsiiOptions ?? []}
-                defaultValue={form.values.hiddenFor}
-                {...form.getInputProps('hiddenFor')}
-              />
-            </div>
-          */}
+          <div className='col-span-1 flex flex-col focus-visible:ring-red-600 md:col-span-2'>
+            {hideFor ? (
+              <>
+                <div>{lang('Dölj spelning för', 'Hide gig from')}</div>
+                <MultiSelect
+                  placeholder='Välj corps...'
+                  className='outline-none focus-visible:outline-none'
+                  options={corpsiiOptions ?? []}
+                  defaultValue={form.values.hiddenFor}
+                  {...form.getInputProps('hiddenFor')}
+                />
+              </>
+            ) : (
+              <Button
+                color='no-fill'
+                compact
+                fullWidth
+                onClick={() => {
+                  setHideFor(!hideFor);
+                }}
+              >
+                {lang('Dölj spelning för corps...', 'Hide gig from corps...')}{' '}
+              </Button>
+            )}
+          </div>
           <div className='flex space-x-4 whitespace-nowrap'>
             <Checkbox
               label='Allmän spelning?'

src/components/input/button.tsx

@@ -9,12 +9,13 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   fullWidth?: boolean;
 };
 
-type Color = 'red' | 'transparent' | 'navbutton';
+type Color = 'red' | 'transparent' | 'navbutton' | 'no-fill';
 
 const colorClasses: Record<Color, string> = {
   red: 'bg-red-600 hover:bg-red-700 text-white',
   transparent: 'bg-transparent text-gray-700 dark:text-gray-300',
   navbutton: 'bg-transparent text-white',
+  'no-fill': 'border-2 border-red-600 text-red-600',
 };
 
 const Button = ({

src/server/trpc/router/gig.ts

@@ -89,7 +89,7 @@ export const gigRouter = router({
         dateOrder: z.enum(['asc', 'desc']).optional(),
       }),
     )
-    .query(({ ctx, input }) => {
+    .query(async ({ ctx, input }) => {
       const { startDate, endDate, dateOrder = 'asc' } = input;
       const corpsId = ctx.session?.user?.corps?.id;
       const visibilityFilter =
@@ -109,12 +109,12 @@ export const gigRouter = router({
                 {
                   // Stops hiding gig if it's in the past
                   date: {
-                    gt: dayjs().startOf('day').toDate(),
+                    lt: dayjs().startOf('day').toDate(),
                   },
                 },
               ],
             };
-      return ctx.prisma.gig.findMany({
+      const res = await ctx.prisma.gig.findMany({
         include: {
           type: {
             select: {
@@ -148,6 +148,7 @@ export const gigRouter = router({
           },
         ],
       });
+      return res;
     }),
 
   upsert: restrictedProcedure('manageGigs')