Skip to content

Commit

Permalink
Merge pull request #33 from deco-sites/feature/front-prescriber-treat…
Browse files Browse the repository at this point in the history 
…ments

implemented frontend of prescriber treatments
  • Loading branch information
@baufaker
baufaker authored May 15, 2024
2 parents a34c9ce + 3f59e07 commit 6591701
Show file tree
Hide file tree
Showing 8 changed files with 379 additions and 92 deletions.
1 change: 1 addition & 0 deletions components/ui/Icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export type AvailableIcons =
| "Secure"
| "Star"
| "Tiktok"
| "Drop"
| "Trash"
| "Truck"
| "Twitter"
Expand Down
246 changes: 246 additions & 0 deletions components/ui/PrescriberPatientTreatment.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,246 @@
/**
* This component was made to control if user is logged in to access pages
*/
// import type { SectionProps } from "deco/types.ts";
// import { useUI } from "../../sdk/useUI.ts";
import { useEffect, useState } from "preact/hooks";
import { invoke } from "../../runtime.ts";
import PageWrap from "./PageWrap.tsx";
import Icon from "./Icon.tsx";
import { useUI } from "../../sdk/useUI.ts";
import type { DocListType } from "./MyDocs.tsx";
import Modal from "./Modal.tsx";
import { IS_BROWSER } from "$fresh/runtime.ts";
import type { Patient, Treatment } from "./PrescriberPatients.tsx";

export type Address = {
cep: string;
number: string;
complement: string;
addressType: string;
};

const timeAgo = (date: Date): string => {
const seconds = Math.floor((Number(new Date()) - +date) / 1000); // Explicitly convert to number
let interval = Math.floor(seconds / 31536000);

if (interval >= 1) return `${interval}a atrás`;
interval = Math.floor(seconds / 2592000);
if (interval >= 1) return `${interval}m atrás`;
interval = Math.floor(seconds / 86400);
if (interval >= 1) return `${interval}d atrás`;
interval = Math.floor(seconds / 3600);
if (interval >= 1) return `${interval}h atrás`;
interval = Math.floor(seconds / 60);
if (interval >= 1) return `${interval}min atrás`;
return `${Math.floor(seconds)}seg atrás`;
};

const TreatmentCard = ({ treatment }: { treatment: Treatment }) => {
return (
<div
class={`p-3 ${
treatment.current ? "bg-[#ffffff]" : "bg-[#d3d3d3]"
} rounded-md text-[10px] sm:text-xs md:text-sm shadow`}
>
<div class="flex justify-between">
<div class="flex flex-col gap-4 items-center">
{treatment.medication.map((m) => {
return (
<div class="flex gap-2 items-center text-[#444444]">
<Icon id="Drop" size={12} />
<div class="flex flex-col">
<span class="font-semibold">
{m.name}
</span>
<span class="text-xs">
{m.dosage}
</span>
</div>
</div>
);
})}
</div>
<div class="flex flex-col items-end gap-2">
<div class="flex justify-between items-center gap-2 text-[#808080]">
<Icon id="Update" size={16} />
<span>
{timeAgo(
new Date(
treatment.updated_at,
),
)}
</span>
</div>
<div
class={`${
treatment.feedback ===
"positive"
? "text-green-600"
: "text-red-600"
}`}
>
<Icon
id={`${
treatment.feedback ===
"positive"
? "HappyFace"
: "SadFace"
}`}
size={19}
/>
</div>
</div>
</div>
</div>
);
};

function PrescriberPatientTreatments() {
const [isLoading, setIsLoading] = useState(false);
const [deleting, setDeleting] = useState(false);
const [isLoadingUsers, setIsLoadingUsers] = useState(false);
const [updating, setUpdating] = useState(false);
const [emailSearch, setEmailSearch] = useState("");
const [associationName, setAssociationName] = useState("");
const [associationCnpj, setAssociationCnpj] = useState("");
const [associationLogo, setAssociationLogo] = useState("");
const [createType, setCreateType] = useState<"user" | "association">(
"association",
);
const [limit, setLimit] = useState<number>();
const [hasNextPage, setHasNextPage] = useState<boolean>(false);
const [hasPrevPage, setHasPrevPage] = useState<boolean>(false);
const [page, setPage] = useState<number>();
const [totalPages, setTotalPages] = useState<number>();
const [patient, setpatients] = useState<Patient>(
{
name: "Célio Marcos",
email: "[email protected]",
treatments: [
{
updated_at: "2024-05-14T14:29:09.024+00:00",
feedback: "positive",
medication: [
{
name: "CBD 3000mg - Abrapango",
dosage: "3 gotas 2x/ dia",
},
{
name: "THC 3000mg - Abrapango",
dosage: "3 gotas 2x/ dia",
},
],
current: true,
},
{
updated_at: "2024-05-13T14:29:09.024+00:00",
feedback: "negative",
medication: [
{
name: "CBD 3000mg - Abrapango",
dosage: "3 gotas 2x/ dia",
},
{
name: "THC 3000mg - Abrapango",
dosage: "3 gotas 2x/ dia",
},
],
current: false,
},
{
updated_at: "2024-05-13T14:29:09.024+00:00",
feedback: "negative",
medication: [
{
name: "CBD 3000mg - Abrapango",
dosage: "3 gotas 2x/ dia",
},
{
name: "THC 3000mg - Abrapango",
dosage: "3 gotas 2x/ dia",
},
],
current: false,
},
],
},
);
const [docs, setDocs] = useState<DocListType[]>([]);

const currentTreatment = patient.treatments?.find((t) => t.current === true);
const oldTreatments = patient.treatments?.filter((t) => t.current !== true);

// const {
// displayPreSignupUsersModal,
// displayAssociationAdminNewDoc,
// userToAdminCreateDoc,
// associationToAdminCreateDoc,
// displayConfirmDeleteDoc,
// } = useUI();

return (
<PageWrap>
{isLoading
? <span class="loading loading-spinner text-green-600"></span>
: (
<div class="flex flex-col gap-3 w-full">
<div class="flex justify-between">
<h3 class="text-2xl text-[#8b8b8b] text-center mb-8">
Tratamento
</h3>
<button
class="btn btn-sm btn-secondary text-white"
onClick={() => {
console.log("clickou");
}}
>
<Icon id="Drop" size={12} />Atualizar Tratamento
</button>
</div>
<div class="flex flex-col gap-8">
<div
class={`p-3 bg-[#ffffff] rounded-md text-[10px] sm:text-xs md:text-sm shadow`}
>
<div class="flex justify-between">
<div class="flex gap-4 items-center">
<div class="text-[#808080]">
<Icon id="Profile" size={16} />
</div>
<div class="flex flex-col items-start">
<span class="font-semibold">
{patient.name}
</span>
<span class="text-sm">
{patient.email}
</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-sm text-[#8b8b8b] mb-2">
Tratamento Vigente
</h3>
<div>
<TreatmentCard treatment={currentTreatment!} />
</div>
</div>
<div>
<h3 class="text-sm text-[#8b8b8b] mb-2">
Tratamentos Antigos
</h3>
<div class="flex flex-col gap-4">
{oldTreatments?.map((t) => {
return <TreatmentCard treatment={t!} />;
})}
</div>
</div>
</div>
</div>
)}
</PageWrap>
);
}

export default PrescriberPatientTreatments;
92 changes: 57 additions & 35 deletions components/ui/PrescriberPatients.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,24 @@ export type Address = {
addressType: string;
};

export type Treatment = {
updated_at: string;
feedback: "positive" | "negative";
medication: {
name: string;
dosage: string;
}[];
current: boolean;
};

export type Patient = {
name: string;
email: string;
last_treatment: {
last_treatment?: {
updated_at: string | Date;
feedback: "positive" | "negative";
};
} | undefined;
treatments?: Treatment[];
};

function PrescriberPatients() {
Expand Down Expand Up @@ -70,10 +81,7 @@ function PrescriberPatients() {
{
name: "Tauane Rodrigues",
email: "[email protected]",
last_treatment: {
updated_at: "2024-05-12T19:10:43.016+00:00",
feedback: "positive",
},
last_treatment: undefined,
},
]);
const [docs, setDocs] = useState<DocListType[]>([]);
Expand Down Expand Up @@ -109,7 +117,7 @@ function PrescriberPatients() {
: (
<div class="flex flex-col gap-3 w-full">
<div class="flex justify-center">
<h3 class="text-2xl text-[#8b8b8b] text-center">
<h3 class="text-2xl text-[#8b8b8b] text-center mb-8">
Meus Pacientes
</h3>
</div>
Expand Down Expand Up @@ -143,12 +151,12 @@ function PrescriberPatients() {
<ul class="flex flex-col gap-4">
{patients && patients.map((p) => {
return (
<div class="dropdown dropdown-top dropdown-end">
<div class="">
<div tabindex={0} role="button" class="">
<div target="_blank">
<li
class={`p-3 ${
p.last_treatment.feedback === "positive"
p.last_treatment?.feedback === "positive"
? "bg-[#ffffff]"
: "bg-[#fff8dc]"
} rounded-md text-[10px] sm:text-xs md:text-sm shadow`}
Expand All @@ -167,32 +175,46 @@ function PrescriberPatients() {
</span>
</div>
</div>
<div class="flex flex-col items-end gap-2">
<div class="flex justify-between items-center gap-2 text-[#808080]">
<Icon id="Update" size={16} />
<span>
{timeAgo(
new Date(p.last_treatment.updated_at),
)}
</span>
</div>
<div
class={`${
p.last_treatment.feedback === "positive"
? "text-green-600"
: "text-red-600"
}`}
>
<Icon
id={`${
p.last_treatment.feedback === "positive"
? "HappyFace"
: "SadFace"
}`}
size={19}
/>
</div>
</div>
{p.last_treatment
? (
<div class="flex flex-col items-end gap-2">
<div class="flex justify-between items-center gap-2 text-[#808080]">
<Icon id="Update" size={16} />
<span>
{timeAgo(
new Date(
p.last_treatment.updated_at,
),
)}
</span>
</div>
<div
class={`${
p.last_treatment.feedback ===
"positive"
? "text-green-600"
: "text-red-600"
}`}
>
<Icon
id={`${
p.last_treatment.feedback ===
"positive"
? "HappyFace"
: "SadFace"
}`}
size={19}
/>
</div>
</div>
)
: (
<div class="flex items-center justify-end">
<div class="badge badge-primary badge-xs p-2">
Sem Registro
</div>
</div>
)}
</div>
</li>
</div>
Expand Down
Loading

0 comments on commit 6591701

Please sign in to comment.