95 lines
5.3 KiB
TypeScript
95 lines
5.3 KiB
TypeScript
import { useState } from 'react';
|
||
import Layout from "../../../components/layout";
|
||
import ProtectedRoute from '../../../components/protectedRoute';
|
||
import { UserRole } from '@prisma/client';
|
||
import axiosServer from '../../../src/axiosServer';
|
||
import common from '../../../src/helpers/common';
|
||
import { filterPublishers, /* other functions */ } from '../../api/index';
|
||
|
||
function ContactsPage({ publishers }) {
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
|
||
const filteredPublishers = publishers.filter((publisher) =>
|
||
publisher.firstName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
publisher.lastName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
publisher.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
publisher.phone?.toLowerCase().includes(searchQuery.toLowerCase())
|
||
);
|
||
|
||
return (
|
||
<Layout>
|
||
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
|
||
<div className="container mx-auto p-4">
|
||
<h1 className="text-xl font-semibold mb-4">Контакти</h1>
|
||
<input
|
||
type="text"
|
||
placeholder="Търси по име, имейл или телефон..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="border border-gray-300 rounded-md px-2 py-2 mb-4 w-full text-base md:text-sm"
|
||
/>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-left border-collapse">
|
||
<thead>
|
||
<tr>
|
||
<th className="border-b font-medium p-4 pl-8 pt-0 pb-3">Име</th>
|
||
<th className="border-b font-medium p-4 pt-0 pb-3">Имейл</th>
|
||
<th className="border-b font-medium p-4 pt-0 pb-3">Телефон</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{filteredPublishers.map((publisher) => (
|
||
<tr key={publisher.id}>
|
||
<td className="border-b p-4 pl-8">{publisher.firstName} {publisher.lastName}</td>
|
||
<td className="border-b p-4">
|
||
<a href={`mailto:${publisher.email}`} className="text-blue-500">{publisher.email}</a>
|
||
</td>
|
||
<td className="border-b p-4">
|
||
<div className="flex items-center justify-between">
|
||
<span className={common.isValidPhoneNumber(publisher.phone) ? '' : 'text-red-500'}>{publisher.phone}</span>
|
||
<div className="flex items-center">
|
||
<a href={`tel:${publisher.phone}`} className="inline-block p-2 mr-2">
|
||
<i className="fas fa-phone-alt text-blue-500 text-xl" title="Обаждане"></i>
|
||
</a>
|
||
<a href={`https://wa.me/${publisher.phone}`} className="inline-block p-2 mr-2">
|
||
<i className="fab fa-whatsapp text-green-500 text-xl" title="WhatsApp"></i>
|
||
</a>
|
||
{publisher.phone ? (
|
||
<a href={`viber://chat/?number=%2B${publisher.phone.startsWith('+') ? publisher.phone.substring(1) : publisher.phone}`} className="inline-block p-2">
|
||
<i className="fab fa-viber text-purple-500 text-xl" title="Viber"></i>
|
||
</a>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</ProtectedRoute>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
|
||
export default ContactsPage;
|
||
|
||
export const getServerSideProps = async (context) => {
|
||
const dateStr = new Date().toISOString().split('T')[0];
|
||
|
||
let publishers = await filterPublishers('id,firstName,lastName,isactive,desiredShiftsPerMonth', "", new Date(), true, true);
|
||
// const axios = await axiosServer(context);
|
||
// const { data: publishers } = await axios.get(`api/?action=filterPublishers&assignments=true&availabilities=true&date=${dateStr}&select=id,firstName,lastName,isactive,desiredShiftsPerMonth`);
|
||
|
||
// api/index?action=filterPublishers&assignments=true&availabilities=true&date=2024-03-14&select=id%2CfirstName%2ClastName%2Cisactive%2CdesiredShiftsPerMonth
|
||
|
||
|
||
return {
|
||
props: {
|
||
publishers,
|
||
},
|
||
};
|
||
};
|