Merge pull request #763 from ita-social-projects/develop

Develop

public/index.html

@@ -29,16 +29,10 @@
   <link rel="stylesheet" type="text/css"
         href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
 
-        <script src="https://cdn.tiny.cloud/1/8orzv8u2ay8ccowdk5xnlgwzumtgiebf0sio35i8lqk0jbe9/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
-
-
-        <script src="https://cdn.tiny.cloud/1/8orzv8u2ay8ccowdk5xnlgwzumtgiebf0sio35i8lqk0jbe9/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
-
+    <script src="https://cdn.tiny.cloud/1/8orzv8u2ay8ccowdk5xnlgwzumtgiebf0sio35i8lqk0jbe9/tinymce/6.6.2-27/tinymce.min.js" referrerpolicy="origin"></script>
       <!-- Google map API -->
         <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCr5712Z86_z29W9biaPj8DcaggjbUAy7M&libraries=places"></script>
 
-
-        <script src="https://cdn.tiny.cloud/1/8orzv8u2ay8ccowdk5xnlgwzumtgiebf0sio35i8lqk0jbe9/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
       <!-- Google tag (gtag.js) -->
             <script async src="https://www.googletagmanager.com/gtag/js?id=G-2RHY04JKG0"></script>
             <script>

src/app/api/job/Job.api.ts

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+import { API_ROUTES } from '@/app/common/constants/api-routes.constants';
+
+import Agent from '../agent.api';
+
+const JobApi = {
+    getAllShort: () => Agent.get<JobShort[]>(API_ROUTES.JOB.GET_ALL_SHORT),
+    getActive: () => Agent.get<Job[]>(API_ROUTES.JOB.GET_ACTIVE),
+    deleteJob: (id: number) => Agent.delete<number>(`${API_ROUTES.JOB.DELETE}/${id}`),
+    changeStatus: (id: number, status: boolean) => Agent.put<number>(`${API_ROUTES.JOB.CHANGE_STATUS}`, { id, status }),
+    getById: (id: number) => Agent.get<Job>(`${API_ROUTES.JOB.GET_BY_ID}/${id}`),
+    create: (job: Job) => Agent.post<Job>(`${API_ROUTES.JOB.CREATE}`, job),
+    update: (job: Job) => Agent.put<Job>(`${API_ROUTES.JOB.UPDATE}`, job),
+};
+
+export default JobApi;

src/app/api/team/positions.api.ts

@@ -3,15 +3,13 @@ import { API_ROUTES } from '@constants/api-routes.constants';
 import { Positions } from '@models/team/team.model';
 
 const PositionsApi = {
-    getById: (id: number) => Agent.get<Positions>(`${API_ROUTES.POSITIONS.GET}/${id}`),
 
     getAll: () => Agent.get<Positions[]>(`${API_ROUTES.POSITIONS.GET_ALL}`),
 
     create: (position: Positions) => Agent.post<Positions>(`${API_ROUTES.POSITIONS.CREATE}`, position),
 
-    update: (position: Positions) => Agent.put<Positions>(`${API_ROUTES.POSITIONS.UPDATE}`, position),
+    getAllWithTeamMembers: () => Agent.get<Positions[]>(`${API_ROUTES.POSITIONS.GET_ALL_WITH_MEMBERS}`),
 
-    delete: (id: number) => Agent.delete(`${API_ROUTES.POSITIONS.DELETE}/${id}`),
 };
 
 export default PositionsApi;

src/app/api/team/team.api.ts

@@ -10,6 +10,8 @@ const TeamApi = {
 
     getAllMain: () => Agent.get<TeamMember[]>(`${API_ROUTES.TEAM.GET_ALL_MAIN}`),
 
+    getByRoleId: (id:number) => Agent.get<TeamMember[]>(`${API_ROUTES.TEAM.GET_BY_ROLE_ID}/${id}`),
+
     create: (team: TeamCreateUpdate) => Agent.post<TeamMember>(`${API_ROUTES.TEAM.CREATE}`, team),
 
     update: (team: TeamCreateUpdate) => Agent.put<TeamMember>(`${API_ROUTES.TEAM.UPDATE}`, team),

src/app/api/team/tickerString.api.tsx

@@ -0,0 +1,8 @@
+import Agent from '@api/agent.api';
+import { API_ROUTES } from '@constants/api-routes.constants';
+
+const TickerStringAboutUs = {
+    getString: () => Agent.get<string>(`${API_ROUTES.ABOUT_US.GET_TICKER_STRING}`),
+};
+
+export default TickerStringAboutUs;

src/app/common/components/FileUploader/FileUploader.component.tsx

@@ -5,27 +5,65 @@ import Upload, { RcFile, UploadChangeParam, UploadFile, UploadProps } from 'antd
 import AudiosApi from '@/app/api/media/audios.api';
 import ImagesApi from '@/app/api/media/images.api';
 import Audio, { AudioCreate } from '@/models/media/audio.model';
-import Image, { ImageCreate } from '@/models/media/image.model';
+import ImageCustom, { ImageCreate } from '@/models/media/image.model';
 
 type UploaderWithoutChildren = Omit<UploadProps, 'children'>;
 
 interface Props extends UploaderWithoutChildren {
     children: JSX.Element[] | JSX.Element;
     edgeSwipe?: boolean;
     uploadTo:'image' | 'audio';
-    onSuccessUpload?:(value:Image | Audio)=>void;
+    greyFilterForImage: boolean;
+    onSuccessUpload?:(value:ImageCustom | Audio)=>void;
 }
-const FileUploader:React.FC<Props> = ({ onSuccessUpload, uploadTo, children, ...uploadProps }) => {
+const FileUploader:React.FC<Props> = ({
+    onSuccessUpload, uploadTo, greyFilterForImage = false, children, ...uploadProps
+}) => {
     const imageDataAsURL = useRef<any | null>(null);
     const onUploadChange = (uploadParams: UploadChangeParam<UploadFile<any>>) => {
         const reader = new FileReader();
         reader.onloadend = (obj) => {
             imageDataAsURL.current = obj.target?.result;
+
+            if (greyFilterForImage) {
+                const img = new Image();
+                img.src = imageDataAsURL.current;
+                if (img.height > 0 && img.width > 0) {
+                    const canvas = document.createElement('canvas');
+                    const context = canvas.getContext('2d');
+                    if (context !== null) {
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+
+                        context.drawImage(img, 0, 0);
+
+                        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+                        const { data } = imageData;
+
+                        for (let i = 0; i < data.length; i += 4) {
+                            const red = data[i];
+                            const green = data[i + 1];
+                            const blue = data[i + 2];
+
+                            const grayscale = (red + green + blue) / 3;
+
+                            data[i] = grayscale;
+                            data[i + 1] = grayscale;
+                            data[i + 2] = grayscale;
+                        }
+
+                        context.putImageData(imageData, 0, 0);
+
+                        imageDataAsURL.current = canvas.toDataURL('image/webp');
+                    }
+                }
+            }
         };
         if (uploadParams.fileList.length === 0) {
             imageDataAsURL.current = undefined;
         } else {
             const file = uploadParams.file.originFileObj as RcFile;
+
             if (file) {
                 reader.readAsDataURL(file);
             }
@@ -35,7 +73,7 @@ const FileUploader:React.FC<Props> = ({ onSuccessUpload, uploadTo, children, ...
         }
     };
     const onFileUpload = (uploadType:'image' | 'audio', uplFile:UploadFile)
-    :Promise< Image | Audio> => {
+    :Promise< ImageCustom | Audio> => {
         if (uploadType === 'audio') {
             const audio :AudioCreate = {
                 baseFormat: imageDataAsURL.current
@@ -53,6 +91,7 @@ const FileUploader:React.FC<Props> = ({ onSuccessUpload, uploadTo, children, ...
                                          .lastIndexOf('.') + 1, uplFile.name.length),
                                      mimeType: uplFile.type!,
                                      title: uplFile.name };
+
         return ImagesApi.create(image);
     };
     const customRequest = async (options:any) => {

src/app/common/components/modals/Partners/PartnersModal.component.tsx

@@ -6,10 +6,11 @@ import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import useMobx, { useModalContext } from '@stores/root-store';
 
-import { Button, Form, Input, Modal, Popover } from 'antd';
+import { Button, Form, Input, Modal, Popover, message } from 'antd';
 
 import EmailApi from '@/app/api/email/email.api';
 import { partnersClickEvent } from '@/app/common/utils/googleAnalytics.unility';
+import ReCAPTCHA from 'react-google-recaptcha';
 import Email from '@/models/email/email.model';
 
 const MAX_SYMBOLS = 500;
@@ -19,19 +20,52 @@ const PartnersModal = () => {
     const { setModal, modalsState: { partners } } = modalStore;
     const [form] = Form.useForm();
     const [formData, setFormData] = useState({ email: '', message: '' });
+    const [messageApi, messageContextHolder] = message.useMessage();
+    const [isVerified, setIsVerified] = useState(false);
     const handleChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });
 
     const newEmail: Email = { from: formData.email, content: formData.message };
-    const onFinish = () => EmailApi.send(newEmail);
+    const onFinish = () => {
+        if(isVerified){
+            EmailApi.send(newEmail)
+            .then(() => {
+                onCancel();
+                successMessage();
+            })
+            .catch(e => {
+                onCancel();
+                errorMessage();
+            })
+        }
+    }
 
     const onClear = () => {
         partners.isOpen = false;
         form.resetFields();
     };
+
     const onCancel = () => {
         partners.isOpen = false;
     }
 
+    const handleVerify = () => {
+        setIsVerified(true);
+    };
+
+    const successMessage = () => {
+        messageApi.open({
+            type: 'success',
+            content: 'Лист успішно надісланий',
+        });
+    };
+
+    const errorMessage = () => {
+        messageApi.open({
+            type: 'error',
+            content: 'Щось пішло не так...',
+        });
+    };
+
     return (
         <Modal
             className="partnersModal"
@@ -43,6 +77,7 @@ const PartnersModal = () => {
             closeIcon={<Popover><CancelBtn className='iconSize' onClick={onClear} />
             </Popover>}
         >
+            {messageContextHolder}
             <div className="partnersModalContent">
                 <div className="formContainer">
                     <div className="formTitle">
@@ -58,9 +93,11 @@ const PartnersModal = () => {
                         <Form.Item
                             className="textareaBlock required-input"
                             name="message"
-                            rules={[{ required: true,
-                                      min: 1,
-                                      max: MAX_SYMBOLS }]}
+                            rules={[{
+                                required: true,
+                                min: 1,
+                                max: MAX_SYMBOLS
+                            }]}
                         >
                             <Input.TextArea
                                 className="textarea"
@@ -76,8 +113,10 @@ const PartnersModal = () => {
                             name="email"
                             className="required-input"
                             rules={[
-                                { required: true,
-                                  type: 'email' },
+                                {
+                                    required: true,
+                                    type: 'email'
+                                },
                             ]}
                         >
                             <Input
@@ -87,9 +126,16 @@ const PartnersModal = () => {
                                 onChange={handleChange}
                             />
                         </Form.Item>
+                        <div className="captchaBlock ">
+                            <ReCAPTCHA
+                                className="required-input"
+                                sitekey="6Lf0te8mAAAAAN47cZDXrIUk0kjdoCQO9Jl0DtI4"
+                                onChange={handleVerify}
+                            />
+                        </div>
                         <Form.Item>
                             <Button type="primary" htmlType="submit" onClick={() => partnersClickEvent()}>
-                            Відправити
+                                Відправити
                             </Button>
                         </Form.Item>
                     </Form>

src/app/common/components/modals/Sources/SourcesModal.styles.scss

@@ -66,6 +66,11 @@ $CancelBtn: "/src/assets/images/utils/Cancel_btn.svg";
     font-weight: 300;
     font-size: 15px;
 
+    ul, ol {
+      list-style: auto;
+      padding-inline-start: revert;
+    }
+
     >h1 {
       @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 24px, $font-style: light);
       line-height: pxToRem(26.4px);

src/app/common/components/modals/Terms/AddTerm/AddTermModal.component.tsx

@@ -5,7 +5,7 @@ import CancelBtn from '@images/utils/Cancel_btn.svg';
 import { observer } from 'mobx-react-lite';
 import { useModalContext } from '@stores/root-store';
 
-import { Button, Form, Input, Modal, Popover } from 'antd';
+import { Button, Form, Input, message, Modal, Popover } from 'antd';
 import FormItem from 'antd/es/form/FormItem';
 import TextArea from 'antd/es/input/TextArea';
 
@@ -30,8 +30,6 @@ const AddTermModal = ({ handleAdd, term, setTerm } : Props) => {
 
     const onSuccessfulSubmit = () => {
         handleAdd(term?.id as number, term?.title as string, term?.description);
-        setModal('addTerm');
-        form.resetFields();
     };
 
     const onCancel = () => {
@@ -41,6 +39,21 @@ const AddTermModal = ({ handleAdd, term, setTerm } : Props) => {
         addTerm.isOpen = false;
         form.resetFields();
     };
+    const handleOk= async () =>{
+        try {
+            form.submit();
+            message.success("Партнера успішно додано!", 2)
+        } catch (error) {
+            message.config({
+                top: 100,
+                duration: 3,
+                maxCount: 3,
+                rtl: true,
+                prefixCls: 'my-message',
+            });
+            message.error("Будь ласка, заповніть всі обов'язкові поля та перевірте валідність ваших даних");
+        }
+    }
 
     return (
         <Modal
@@ -73,7 +86,7 @@ const AddTermModal = ({ handleAdd, term, setTerm } : Props) => {
                         maxLength={500}
                     />
                 </FormItem>
-                <Button className="streetcode-custom-button" onClick={() => form.submit()}>
+                <Button className="streetcode-custom-button" onClick={() => handleOk()}>
                     Зберегти
                 </Button>
             </Form>

src/app/common/constants/api-routes.constants.ts

@@ -78,16 +78,15 @@ export const API_ROUTES = {
         GET_ALL: 'team/getAll',
         GET_ALL_MAIN: 'team/getAllMain',
         GET: 'team/getById',
+        GET_BY_ROLE_ID:'team/getByRoleId',
         CREATE: 'team/create',
         UPDATE: 'team/update',
         DELETE: 'team/delete',
     },
     POSITIONS: {
         GET_ALL: 'position/getAll',
-        GET: 'position/getById',
         CREATE: 'position/create',
-        UPDATE: 'position/update',
-        DELETE: 'position/delete',
+        GET_ALL_WITH_MEMBERS: 'Position/GetAllWithTeamMembers',
     },
     TOPONYMS: {
         GET_ALL: 'toponym/getAll',
@@ -220,4 +219,16 @@ export const API_ROUTES = {
         UPDATE: 'statisticRecord/update',
         DELETE: 'statisticRecord/delete',
     },
+    JOB: {
+        GET_ALL_SHORT: 'job/getAllShort',
+        DELETE: 'job/delete',
+        CHANGE_STATUS: 'job/changeJobStatus',
+        GET_ACTIVE:'Job/GetActiveJobs',
+        GET_BY_ID: 'job/getById',
+        UPDATE: 'job/update',
+        CREATE: 'job/create',
+    },
+    ABOUT_US: {
+        GET_TICKER_STRING: 'tickerString/getNameTickerString',
+    },
 };

src/app/common/constants/frontend-routes.constants.ts

@@ -11,6 +11,7 @@ const FRONTEND_ROUTES = {
         TEAM: '/admin-panel/team',
         ANALYTICS: '/admin-panel/analytics',
         NEWS: '/admin-panel/news',
+        JOBS: '/admin-panel/job',
     },
     OTHER_PAGES: {
         CATALOG: '/catalog',
@@ -20,6 +21,7 @@ const FRONTEND_ROUTES = {
         PARTNERS: '/partners-page',
         SUPPORT_US: '/support-us',
         NEWS: '/news',
+        ABOUT_US: '/about-us',
     },
 };
 

src/app/layout/ModalWrapper.component.tsx

@@ -10,6 +10,7 @@ import RelatedFigureItemModal from '@components/modals/RelatedFigures/RelatedFig
 import RelatedFiguresModal from '@components/modals/RelatedFigures/RelatedFiguresModal.component';
 import SourcesModal from '@components/modals/Sources/SourcesModal.component';
 import SurveyModal from '@components/modals/Survey/SurveyModal.component';
+import VacancyModal from '../../features/AboutUsPage/Vacancies/Vacancy/VacancyModal/Vacancy/VacancyModal.component';
 
 const ModalWrapper = () => (
     <>