initial commit - code moved to separate repo
This commit is contained in:
Dobromir Popov
149
components/publisher/ShiftsList.tsx
Normal file
149
components/publisher/ShiftsList.tsx
Normal file
@ -0,0 +1,149 @@
|
||||
import React, { useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import axiosInstance from '../../src/axiosSecure';
|
||||
|
||||
import { monthNamesBG, GetTimeFormat, GetDateFormat } from "../../src/helpers/const"
|
||||
import common from "../../src/helpers/common";
|
||||
|
||||
type Assignment = {
|
||||
items: {
|
||||
[key: string]: any[];
|
||||
};
|
||||
keys: string[];
|
||||
months: {
|
||||
[key: string]: string;
|
||||
};
|
||||
};
|
||||
|
||||
type ShiftsListProps = {
|
||||
assignments: Assignment;
|
||||
selectedtab: string;
|
||||
};
|
||||
|
||||
|
||||
const ShiftsList = ({ assignments, selectedtab }: ShiftsListProps) => {
|
||||
|
||||
const { keys: assignmentKeys = [], months = [], items = [] } = assignments || {};
|
||||
const [currentTab, setCurrentTab] = useState<string>(selectedtab || assignmentKeys[-1]);
|
||||
|
||||
console.log("assignments = ", assignments);
|
||||
console.log("currentTab = ", currentTab);
|
||||
|
||||
const searchReplacement = async (id) => {
|
||||
try {
|
||||
var assignment = (await axiosInstance.get("/api/data/ssignments/" + id)).data;
|
||||
assignment.isConfirmed = true;
|
||||
// assignment.isDeleted = true;
|
||||
await axiosInstance.put("/api/data/assignments/" + id, assignment);
|
||||
toast.success("Shift Tentative", {
|
||||
position: "bottom-center",
|
||||
});
|
||||
// router.push(urls.indexUrl);
|
||||
} catch (error) {
|
||||
console.log(JSON.stringify(error));
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
}
|
||||
const AddToGoogleCalendar = async (id) => {
|
||||
try {
|
||||
const { url, event } = await axiosInstance.get(`/api/shiftgenerate?action=createcalendarevent&id=${id}`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
window.open(url, '_blank')
|
||||
.addEventListener('load', function () {
|
||||
console.log('loaded');
|
||||
});
|
||||
|
||||
// fetchShifts();
|
||||
// console.log(shifts);
|
||||
res.writeHead(301, { "Location": url });
|
||||
res.end();
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
console.log(JSON.stringify(error));
|
||||
if (error.response?.data?.message) {
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col m-5 w-full">
|
||||
<ul className="nav nav-tabs flex flex-col md:flex-row flex-wrap list-none border-b-0 pl-0 mb-1" role="tablist">
|
||||
{assignmentKeys?.slice(-4).map(m => (
|
||||
<li key={m.toString()} className="nav-item">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => setCurrentTab(m)}
|
||||
className={`text-blue-500 border-l border-t border-r inline-block py-2 px-4 ${currentTab === m ? 'active border-gray-300 font-bold' : ' border-transparent'}`}
|
||||
// className={`nav-link block font-medium text-xs leading-tight uppercase border-x-0 border-t-0 border-b-2 ${currentTab === m ? "active border-blue-500 font-bold" : "border-transparent"} px-6 py-3 my-2 hover:border-transparent hover:bg-gray-100 focus:border-transparent`}
|
||||
role="tab"
|
||||
aria-controls={"tabs-" + m}
|
||||
aria-selected={currentTab === m}
|
||||
>
|
||||
{months[m]}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="tab-content flex flow w-full p-2 border-2 border-gray-300 rounded-md">
|
||||
{assignmentKeys?.map(month => (
|
||||
// <div className={`tab-pane fade ${month === currentTab ? "active show" : ""}`} key={month.toString()} role="tabpanel" aria-labelledby={"tabs-tab" + month}>
|
||||
//if tab is selected
|
||||
//common.getCurrentYearMonth(month)
|
||||
currentTab === month ?
|
||||
<div key={month} className={`tab-pane fade ${month === currentTab ? "active show" : ""}`} role="tabpanel" aria-labelledby={"tabs-tab" + month}>
|
||||
<div className="flex items-center py-3 px-4">
|
||||
<span className="text-xl font-medium">
|
||||
{items[month]?.filter(Boolean).reduce((total, item) => (
|
||||
Array.isArray(item) || typeof item === 'object' ? total + Object.keys(item).length : total
|
||||
), 0)} смени за {months[month]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{items[month]?.map((shiftDay, i) => (
|
||||
shiftDay && shiftDay.length > 0 ? (
|
||||
<div className="flex items-center space-x-2 py-1" key={i}>
|
||||
<div className="font-bold flex-shrink-0 w-6 text-right">{i + ":"}</div> {/*This is the column for the date. I've given it a fixed width (w-8) which you can adjust*/}
|
||||
<div className="flex-grow flex">
|
||||
{shiftDay.map(assignment => (
|
||||
<div className="flow space-x-2 bg-gray-200 rounded-lg shadow-md py-2 px-3" key={assignment.id}>
|
||||
<span>{GetTimeFormat(assignment.start)} - {GetTimeFormat(assignment.end)}</span>
|
||||
<button
|
||||
className={`text-sm text-white font-semibold px-2 rounded-lg shadow ${assignment.isConfirmed ? "bg-yellow-400 hover:bg-yellow-500" : "bg-red-400 hover:bg-red-500"}`}
|
||||
onClick={() => searchReplacement(assignment.id)}
|
||||
>
|
||||
Търси заместник
|
||||
</button>
|
||||
<button
|
||||
className="text-sm bg-green-400 hover:bg-green-500 text-white font-semibold px-2 rounded-lg shadow"
|
||||
onClick={() => AddToGoogleCalendar(assignment.id)}
|
||||
>
|
||||
Добави в календар
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>) : null
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
: null
|
||||
))}
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default ShiftsList;
|
||||
Reference in New Issue
Block a user