Compare commits

...

9 Commits

Author SHA1 Message Date
DESKTOP-QHP1O2H\MIKE 60f9c1abc5 removed line spaces 2023-02-04 19:19:07 -05:00
DESKTOP-QHP1O2H\MIKE 54bcbee344 implemented reminder category 2023-02-04 19:16:51 -05:00
jenkins 76dbfde6be send member_id 2023-02-04 09:36:29 -05:00
tokslaw 1092c6d5a3 Merge branch 'env4Tracking&Resources' of MyFit/users-myfit into master 2023-02-04 13:27:23 +00:00
tokslaw fdd3dbe99a Merge branch 'format-calender' of MyFit/users-myfit into master 2023-02-04 13:23:51 +00:00
tokslaw f319003e40 Merge branch 'task13-reminder-name' of MyFit/users-myfit into master 2023-02-04 13:23:42 +00:00
Chukwumdiebube 0170f03e10 calender size formatted 2023-02-04 06:14:07 +01:00
DESKTOP-QHP1O2H\MIKE ebcfa8da27 Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/users-myfit into task13-reminder-name 2023-02-03 18:16:52 -05:00
DESKTOP-QHP1O2H\MIKE 0b659816be fixed name length and no reminder scenario 2023-02-03 18:16:15 -05:00
4 changed files with 199 additions and 291 deletions
+1 -1
View File
@@ -34,7 +34,7 @@ export default function CalendarTable({ className }) {
<div> <div>
<Calendar onChange={onChange} value={value} /> <Calendar onChange={onChange} value={value} calendarType="US" />
</div> </div>
+139 -258
View File
@@ -1,30 +1,43 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import dataImage1 from "../../assets/images/data-table-user-1.png"; import dataImage1 from "../../assets/images/data-table-user-1.png";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import SelectBox from "../Helpers/SelectBox"; import SelectBox from "../Helpers/SelectBox";
export default function ReminderTable({ className }) { export default function ReminderTable({ className }) {
const [userReminders, setUserReminders] = useState([]); const [userReminders, setUserReminders] = useState([]);
const [selectedCategory, setCategory] = useState(filterCategories[0])
const api = new usersService();
useEffect(() => { useEffect(() => {
getUserReminders(); getUserReminders();
}, []); }, []);
const api = new usersService();
const getUserReminders = async () => { const getUserReminders = async () => {
try { try {
const res = await api.getUserReminders(); const res = await api.getUserReminders();
setUserReminders(res.data.reminders); setUserReminders(res.data.reminders);
console.log("res", res); console.log("res", res);
} catch (error) { } catch (error) {
console.log("Error from User Reminders", error); console.log("Error from User Reminders", error);
} }
}; };
const filterCategories = ["All Categories", "Doctors Visit", "Medications"]; const handleSelectCategory = (value) => {
const [selectedCategory, setCategory] = useState(filterCategories[0]); let newValue = ""
if(value == 'All category'){
newValue = "All category"
}else if(value == 'Exercise/GYM') {
newValue = "EXEM"
}else if(value == 'Appointment') {
newValue = "APPT"
}else{
newValue = "MEDC"
}
setCategory(newValue);
}
// const filterCategories = ["All Categories", "Doctors Visit", "Medications"];
const filterCategories = ["All category", "Exercise/GYM", "Appointment", "Medication"];
return ( return (
<div <div
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${ className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
@@ -38,16 +51,29 @@ export default function ReminderTable({ className }) {
</h1> </h1>
</div> </div>
<SelectBox <SelectBox
action={setCategory} action={handleSelectCategory}
datas={filterCategories} datas={filterCategories}
className="Update-table-dropdown" className="Update-table-dropdown"
contentBodyClasses="w-auto min-w-max" contentBodyClasses="w-auto min-w-max"
/> />
</div> </div>
<div className="relative w-full overflow-x-auto sm:rounded-lg"> {
userReminders.length < 1 ?
<div className="lg:flex justify-center">
<div style={{ transform: 'translateY(150px)' }}>
<Link
to="/add-reminder"
className="btn-gradient lg:flex hidden w-[300px] h-[50px] rounded-full text-white justify-center items-center"
>
0 Reminders Start Reminder
</Link>
</div>
</div>
:
<div className="relative w-full overflow-x-auto sm:rounded-lg">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400"> <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody> <tbody>
<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29] default-border-b dark:border-[#5356fb29] ottom "> <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29] default-border-bottom ">
<td className="py-4">Item</td> <td className="py-4">Item</td>
<td className="py-4 text-center">Start</td> <td className="py-4 text-center">Start</td>
<td className="py-4 text-center">End</td> <td className="py-4 text-center">End</td>
@@ -55,271 +81,126 @@ export default function ReminderTable({ className }) {
<td className="py-4 text-right">.</td> <td className="py-4 text-right">.</td>
</tr> </tr>
{selectedCategory === "All Categories" ? ( {
userReminders.length > 0 && (
selectedCategory == "All category" ? (
userReminders.map((reminder, index) => (
<tr key={index} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
{reminder.description.substring(0,30) + "..."}
</h1>
<span className="text-sm text-thin-light-gray">
<> Added <span className="text-purple">{new Date(reminder.added).toLocaleString()}</span>
{userReminders.map((reminders, index) => ( </span>
</div>
<tr key={reminders.id} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div> </div>
<div className="flex flex-col"> </td>
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"> <td className="text-center py-4 px-2">
{reminders.description} <div className="flex space-x-1 items-center justify-center">
</h1>
<span className="text-sm text-thin-light-gray">
Added <span className="text-purple">{new Date(reminders.added).toLocaleString()}</span> <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
{new Date(reminder.start_date).toLocaleString()}
</span> </span>
</div> </div>
</div> </td>
</td> <td className="text-center py-4 px-2">
<td className="text-center py-4 px-2"> <div className="flex space-x-1 items-center justify-center">
<div className="flex space-x-1 items-center justify-center"> <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
{new Date(reminder.end_date).toLocaleString()}
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
{new Date(reminders.start_date).toLocaleString()}
</span>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
{new Date(reminders.end_date).toLocaleString()}
</span>
</div>
</td>
<td className="text-right py-4 px-2">
<span className="text-base text-thin-light-gray whitespace-nowrap">
{reminders.reminder}
</span>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
>
Edit
</button>
</td>
</tr>
))}
</>
) : selectedCategory === "Doctors Visit" ? (
<>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
Doctors Testing Appointament
</h1>
<span className="text-sm text-thin-light-gray">
Added <span className="text-purple">10-10-2025</span>
</span> </span>
</div> </div>
</div> </td>
</td> <td className="text-right py-4 px-2">
<td className="text-center py-4 px-2"> <span className="text-base text-thin-light-gray whitespace-nowrap">
<div className="flex space-x-1 items-center justify-center"> {reminder.reminder}
</span>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
>
Edit
</button>
</td>
</tr>
))
)
:
userReminders.map((reminder, index) => {
if(reminder.category == selectedCategory){
return (
<tr key={index} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
{reminder.description.substring(0,30) + "..."}
</h1>
<span className="text-sm text-thin-light-gray">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap"> Added <span className="text-purple">{new Date(reminder.added).toLocaleString()}</span>
12-01-25 : 6:30 PM </span>
</span> </div>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
12-01-28 : 6:30 PM
</span>
</div>
</td>
<td className="text-right py-4 px-2">
<span className="text-base text-thin-light-gray whitespace-nowrap">
4
</span>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
>
Edit
</button>
</td>
</tr>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div> </div>
<div className="flex flex-col"> </td>
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"> <td className="text-center py-4 px-2">
Hospital Testing Appointament <div className="flex space-x-1 items-center justify-center">
</h1>
<span className="text-sm text-thin-light-gray"> <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
Added <span className="text-purple">10-10-2025</span> {new Date(reminder.start_date).toLocaleString()}
</span> </span>
</div> </div>
</div> </td>
</td> <td className="text-center py-4 px-2">
<td className="text-center py-4 px-2"> <div className="flex space-x-1 items-center justify-center">
<div className="flex space-x-1 items-center justify-center"> <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
{new Date(reminder.end_date).toLocaleString()}
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
12-01-25 : 6:30 PM
</span>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
12-01-28 : 6:30 PM
</span>
</div>
</td>
<td className="text-right py-4 px-2">
<span className="text-base text-thin-light-gray whitespace-nowrap">
4
</span>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
>
Edit
</button>
</td>
</tr>
</>
) : (
<>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
Pizza Testing Appointament
</h1>
<span className="text-sm text-thin-light-gray">
Added <span className="text-purple">10-10-2025</span>
</span> </span>
</div> </div>
</div> </td>
</td> <td className="text-right py-4 px-2">
<td className="text-center py-4 px-2"> <span className="text-base text-thin-light-gray whitespace-nowrap">
<div className="flex space-x-1 items-center justify-center"> {reminder.reminder}
</span>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
>
Edit
</button>
</td>
</tr>
)
}
})
)
}
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
12-01-25 : 6:30 PM
</span>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
12-01-28 : 6:30 PM
</span>
</div>
</td>
<td className="text-right py-4 px-2">
<span className="text-base text-thin-light-gray whitespace-nowrap">
4
</span>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
>
Edit
</button>
</td>
</tr>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
Pizza Testing Appointament
</h1>
<span className="text-sm text-thin-light-gray">
Added <span className="text-purple">10-10-2025</span>
</span>
</div>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
12-01-25 : 6:30 PM
</span>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
12-01-28 : 6:30 PM
</span>
</div>
</td>
<td className="text-right py-4 px-2">
<span className="text-base text-thin-light-gray whitespace-nowrap">
4
</span>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
>
Edit
</button>
</td>
</tr>
</>
)}
</tbody> </tbody>
</table> </table>
</div> </div>
}
</div> </div>
); )
} }
+35
View File
@@ -670,3 +670,38 @@ TODO: Responsive ===========================
@apply mb-2; @apply mb-2;
} }
} }
/* Calendar */
.react-calendar{
width: 100%;
min-height: 23.2rem;
border-radius: 7px !important;
}
.react-calendar__navigation{
margin-top: 2px;
margin-inline: 2px;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus{
@apply rounded-full transition duration-500
}
.react-calendar__month-view__days{
display: grid !important;
grid-template-columns: repeat(7, 1fr);
}
.react-calendar__month-view__weekdays__weekday abbr:where([title]){
text-decoration: none !important;
cursor: default;
}
.react-calendar__tile{
border: 1px solid #cfd7e3 !important;
border-left: 0;
text-align: right;
height: 4.813rem !important;
transition: all 500ms;
}
+9 -17
View File
@@ -6,18 +6,17 @@ class usersService {
} }
logInUser(reqData) { logInUser(reqData) {
// debugger;
/*
clean up the request data here
*/
localStorage.setItem("session_token", ``); localStorage.setItem("session_token", ``);
return this.postAuxEnd("/login", reqData); return this.postAuxEnd("/login", reqData);
} }
getUserReminders(){ getUserReminders(){
return this.getAuxEnd("/reminders", null); var reqData = {
member_id: localStorage.getItem("member_id")
};
return this.getAuxEnd("/reminders", reqData);
} }
//---------------------------------------- ----- //---------------------------------------- -----
//---------------------------------------- ----- //---------------------------------------- -----
// Unified call below // Unified call below
@@ -34,11 +33,9 @@ class usersService {
} }
}; };
const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri; const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
return Axios.get(endPoint,axiosConfig) return Axios.get(endPoint,axiosConfig,reqData)
.then((response) => { .then((response) => {
// console.log(response); console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
// res = response;
// console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
return response; return response;
}) })
.catch((error) => { .catch((error) => {
@@ -58,20 +55,15 @@ class usersService {
postAuxEnd(uri, reqData) { postAuxEnd(uri, reqData) {
const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri; const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
const token = '..your token..' const session_token = localStorage.getItem("session_token");
let axiosConfig = { let axiosConfig = {
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json;charset=UTF-8', 'Content-Type': 'application/json;charset=UTF-8',
'Authorization': `Basic ${token}`, 'Authorization': `Basic ${session_token}`,
} }
}; };
//Access-Control-Allow-Origin
var postData = {
email: "test@test.com",
password: "password"
};
// Axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8'; // Axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
// Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig // Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig
return Axios.post(endPoint, reqData) return Axios.post(endPoint, reqData)