feature: admin can change urgency

pedrolivaresanchez · Nov 8, 2024 · 00e8810 · 00e8810
1 parent ef393d7
commit 00e8810
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 19 deletions.
diff --git a/src/components/ChangeUrgencyHelpRequest.tsx b/src/components/ChangeUrgencyHelpRequest.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { supabase } from '@/lib/supabase/client';
+import { ChangeEvent, MouseEvent, useState } from 'react';
+import { Spinner } from '@/components/Spinner';
+import Modal from '@/components/Modal';
+import { useModal } from '@/context/ModalProvider';
+
+type ChangeStatusRequestButtonProps = {
+  helpRequestId: number;
+  onUpdate: (urgency: string) => void;
+  currentUrgency: string;
+};
+
+export default function ChangeUrgencyHelpRequest({
+  helpRequestId,
+  onUpdate,
+  currentUrgency,
+}: ChangeStatusRequestButtonProps) {
+  const { toggleModal } = useModal();
+  const [isLoading, setLoading] = useState(false);
+  const [error, setError] = useState({});
+  const [data, setData] = useState({});
+  const [status, setStatus] = useState<string>(currentUrgency);
+
+  const MODAL_NAME = `Actualizar-Solicitud-${helpRequestId}`;
+
+  const updateHelpRequest = async () => {
+    const { data, error } = await supabase
+      .from('help_requests')
+      .update({ urgency: status })
+      .eq('id', helpRequestId)
+      .select();
+
+    return { data, error };
+  };
+
+  async function handleUpdateSubmit(e: MouseEvent) {
+    e.preventDefault();
+    const { data, error } = await updateHelpRequest();
+    if (error) {
+      setError(error);
+      return;
+    }
+    if (data) {
+      setData(data);
+      onUpdate(status);
+    }
+    toggleModal(MODAL_NAME, false);
+  }
+  async function handleSubmit(e: ChangeEvent) {
+    e.preventDefault();
+    toggleModal(MODAL_NAME, true);
+  }
+
+  if (isLoading) return <Spinner />;
+  if (error === undefined) return <></>;
+
+  return (
+    <>
+      <select
+        name="urgencia"
+        id="urgencia"
+        value={status}
+        onChange={(e) => {
+          setStatus(e.target.value);
+          handleSubmit(e);
+        }}
+        className="w-full text-center rounded-xl px-4 py-2 font-semibold text-white sm:w-auto transition-all bg-blue-500"
+      >
+        <option value="alta">Alta</option>
+        <option value="media">Media</option>
+        <option value="baja">Baja</option>
+      </select>
+
+      <Modal id={MODAL_NAME} allowClose={false}>
+        <div className="bg-yellow-50 p-4 rounded">
+          <h2 className="text-yellow-800 font-semibold mb-4">Cambiar estado</h2>
+          <p className="text-yellow-800">¿Estas seguro que deseas cambiar el estado de solicitud a {status}?</p>
+          <div className="mt-4 flex justify-end space-x-4">
+            <button
+              onClick={() => {
+                toggleModal(MODAL_NAME, false);
+                setStatus(currentUrgency);
+              }}
+              className="flex-1 bg-gray-500 text-white py-3 px-4 rounded-lg font-semibold"
+            >
+              Cancelar
+            </button>
+            <button
+              onClick={handleUpdateSubmit}
+              className="flex-1 bg-red-500 text-white py-3 px-4 rounded-lg font-semibold"
+            >
+              Actualizar
+            </button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/components/OfferCard.tsx b/src/components/OfferCard.tsx
@@ -15,15 +15,7 @@ export default function OfferCard({ caso, showLink = true }: OfferCardProps) {
       <div className="flex flex-col sm:flex-row items-start gap-4 sm:items-center justify-between border-b border-gray-900/10 px-6 py-4">
         <div className="flex flex-row justify-between">
           <div className="flex flex-row gap-4 items-center">
-            <HeartHandshake
-              className={`h-10 w-10 flex-shrink-0 ${
-                caso.urgency === 'alta'
-                  ? 'text-red-500'
-                  : caso.urgency === 'media'
-                    ? 'text-yellow-600'
-                    : 'text-green-600'
-              }`}
-            />
+            <HeartHandshake className={`h-10 w-10 flex-shrink-0 text-green-600`} />
             <div className="flex flex-col">
               <span className={`text-lg font-bold text-green-600`}>{caso.name}</span>
               <span className="text-sm text-gray-600">#{caso.id}</span>

diff --git a/src/components/PhoneInfo.tsx b/src/components/PhoneInfo.tsx
@@ -5,8 +5,9 @@ import { HelpRequestData } from '@/types/Requests';
 
 type PhoneInfoProps = {
   caseInfo: HelpRequestData;
+  isAdmin: boolean;
 };
-export default function PhoneInfo({ caseInfo }: PhoneInfoProps) {
+export default function PhoneInfo({ caseInfo, isAdmin }: PhoneInfoProps) {
   const session = useSession();
 
   const {
@@ -26,9 +27,11 @@ export default function PhoneInfo({ caseInfo }: PhoneInfoProps) {
     <span className="break-words">
       <span className="font-semibold">Contacto:</span>{' '}
       {session && session.user
-        ? !!userAssignment
+        ? isAdmin
           ? caseInfo.contact_info
-          : 'Dale al botón "Quiero ayudar" para ver sus datos de contacto.'
+          : !!userAssignment
+            ? caseInfo.contact_info
+            : 'Dale al botón "Quiero ayudar" para ver sus datos de contacto.'
         : 'Inicia sesion para ver este dato'}
     </span>
   );

diff --git a/src/components/SolicitudCard.jsx b/src/components/SolicitudCard.jsx
@@ -9,7 +9,8 @@ import PhoneInfo from '@/components/PhoneInfo';
 import DeleteHelpRequest from './DeleteHelpRequest';
 import { useTowns } from '@/context/TownProvider';
 import { useRole } from '@/context/RoleProvider';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import ChangeUrgencyHelpRequest from './ChangeUrgencyHelpRequest';
 
 // type SolicitudCardProps = {
 //   caso: HelpRequestData;
@@ -26,6 +27,7 @@ export default function SolicitudCard({ caso, showLink = true, showEdit = false
   const isAdmin = role === 'admin';
   const [deleted, setDeleted] = useState(false);
   const isMyRequest = session.user?.id && session.user.id === caso.user_id;
+  const [updateUrgency, setUpdateUrgency] = useState(caso.urgency);
 
   return (
     !deleted && (
@@ -35,24 +37,24 @@ export default function SolicitudCard({ caso, showLink = true, showEdit = false
             <div className="flex flex-row gap-4 items-center">
               <AlertTriangle
                 className={`h-10 w-10 flex-shrink-0 ${
-                  caso.urgency === 'alta'
+                  updateUrgency === 'alta'
                     ? 'text-red-500'
-                    : caso.urgency === 'media'
+                    : updateUrgency === 'media'
                       ? 'text-yellow-600'
                       : 'text-green-600'
                 }`}
               />
               <div className="flex flex-col">
                 <span
                   className={`text-lg font-bold ${
-                    caso.urgency === 'alta'
+                    updateUrgency === 'alta'
                       ? 'text-red-500'
-                      : caso.urgency === 'media'
+                      : updateUrgency === 'media'
                         ? 'text-yellow-600'
                         : 'text-green-600'
                   }`}
                 >
-                  Urgencia: {caso.urgency === 'alta' ? 'Alta' : caso.urgency === 'media' ? 'Media' : 'Baja'}
+                  Urgencia: {updateUrgency === 'alta' ? 'Alta' : updateUrgency === 'media' ? 'Media' : 'Baja'}
                 </span>
                 <span className="text-sm text-gray-600">#{caso.id}</span>
               </div>
@@ -99,7 +101,7 @@ export default function SolicitudCard({ caso, showLink = true, showEdit = false
             {caso.contact_info && (
               <div className="flex items-start gap-2">
                 <Phone className="h-4 w-4 text-gray-500 flex-shrink-0 mt-1" />
-                <PhoneInfo caseInfo={caso} />
+                <PhoneInfo isAdmin caseInfo={caso} />
               </div>
             )}
             {caso.help_type && (
@@ -182,6 +184,13 @@ export default function SolicitudCard({ caso, showLink = true, showEdit = false
               </Link>
             )}
             <AsignarSolicitudButton helpRequest={caso} />
+            {isAdmin && (
+              <ChangeUrgencyHelpRequest
+                onUpdate={setUpdateUrgency}
+                currentUrgency={caso.urgency}
+                helpRequestId={caso.id}
+              />
+            )}
             {isAdmin && <DeleteHelpRequest helpRequestId={caso.id} onDelete={() => setDeleted(true)} />}
           </div>
         </div>