Merge pull request #10 from Kitzanos/feature/65-favourite-call

Feature/65 favourite call
2024-11-19 08:22:49 +01:00
parent c698de622b 291f769840
commit 661601bf61
6 changed files with 241 additions and 52 deletions
--- a/src/assets/scss/components/appPage.scss
+++ b/src/assets/scss/components/appPage.scss
@@ -372,8 +372,8 @@

 .appPageSection__tableActions {
    display: flex;
-    gap: 24px;
-    padding: 0;
+    gap: 10px;
+    align-items: center;
    flex-wrap: wrap;
    
    &.lessGap {
@@ -389,12 +389,18 @@
    justify-content: center;
    border-radius: 50%;
    border: none;
-    background-color: var(--message-info-color);
-    color: white;
+    background-color: transparent;
+    color: var(--global-textColor);
    padding: 0;
    
    &:hover {
        cursor: pointer;
+        color: var(--message-info-color);
+    }
+
+    &[data-active="true"] {
+        background-color: var(--message-info-color);
+        color: white;
    }

    &[disabled] {
--- a/src/pages/BandiBeneficiario/components/AllBandiAccordion/index.js
+++ b/src/pages/BandiBeneficiario/components/AllBandiAccordion/index.js
@@ -2,14 +2,18 @@ import React, { useState, useEffect} from 'react';
 import { __ } from '@wordpress/i18n';
 import { is, uniq, isNil, isEmpty } from 'ramda';
 import { wrap } from 'object-path-immutable';
+import { useNavigate } from 'react-router-dom';

 // store
-import { storeSet, useStore } from '../../../../store';
+import { storeGet, storeSet, useStore } from '../../../../store';

 // tools
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
 import getBandoLabel from '../../../../helpers/getBandoLabel';
 import getDateFromISOstring from '../../../../helpers/getDateFromISOstring';
+import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
+import getNumberWithCurrency from '../../../../helpers/getNumberWithCurrency';
+import renderHtmlContent from '../../../../helpers/renderHtmlContent';

 // api
 import BandoService from '../../../../service/bando-service';
@@ -20,11 +24,8 @@ import { Column } from 'primereact/column';
 import { Dropdown } from 'primereact/dropdown';
 import { Tag } from 'primereact/tag';
 import ProperBandoLabel from '../../../../components/ProperBandoLabel';
-import getNumberWithCurrency from '../../../../helpers/getNumberWithCurrency';
-import renderHtmlContent from '../../../../helpers/renderHtmlContent';
 import { Button } from 'primereact/button';
-import { useNavigate } from 'react-router-dom';
-import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
+import PreferredBandoService from '../../../../service/preferred-bando-service';


 const AllBandiAccordion = () => {
@@ -38,8 +39,10 @@ const AllBandiAccordion = () => {

    useEffect(() => {
        storeSet.main.setAsyncRequest();
-        BandoService.getBandi(getCallback, errGetCallbacks);
-    }, []);
+        BandoService.getBandi(getCallback, errGetCallbacks, [
+            ['companyId', chosenCompanyId]
+        ]);
+    }, [chosenCompanyId]);

    const getCallback = (data) => {
        if (data.status === 'SUCCESS') {
@@ -93,21 +96,68 @@ const AllBandiAccordion = () => {
        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
    };

-    /*const addToFavourites = () => {
-        console.log('addToFavourites');
-    }*/
+    const addToFavourites = (id, preferredId) => {
+        const companyId = storeGet.main.chosenCompanyId()
+        const data = {
+            companyId,
+            callId: id
+        }
+        if (preferredId && preferredId !== 0) {
+            PreferredBandoService.deleteFromPreferred(preferredId, (data) => removeFavCallback(data, id), errToggleFavCallback);
+        } else {
+            PreferredBandoService.addToPreferred(data, addFavCallback, errToggleFavCallback);
+        }
+    }
+
+    const removeFavCallback = (data, id) => {
+        if (data.status === 'SUCCESS') {
+            const newItems = items.map((o) => {
+                if (o.id === id) {
+                    return {
+                        ...o,
+                        preferredCallId: null
+                    }
+                } else {
+                    return o;
+                }
+            });
+            setItems(newItems)
+        }
+    }
+    const addFavCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const newItems = items.map((o) => {
+                if (o.id === data.data.callId) {
+                    return {
+                        ...o,
+                        preferredCallId: data.data.id
+                    }
+                } else {
+                    return o;
+                }
+            });
+            setItems(newItems)
+        }
+    }
+
+    const errToggleFavCallback = (data) => {
+        set404FromErrorResponse(data);
+    }

    const goToBandoPage = (id) => {
        navigate(`/bandi/${id}`)
    }

-    /*const actionsBodyTemplate = (rowData) => {
+    const actionsBodyTemplate = (rowData) => {
        return <div className="appPageSection__tableActions">
-            <button type="button" className="appPageSection__addToFavourites" onClick={addToFavourites} disabled={true}>
+            <button type="button"
+                    className="appPageSection__addToFavourites"
+                    data-active={!isNil(rowData.preferredCallId)}
+                    onClick={() => addToFavourites(rowData.id, rowData.preferredCallId)}>
                <i className="pi pi-heart" style={{ fontSize: '1rem' }}></i>
            </button>
        </div>
-    }*/
+    }

    const rowExpansionTemplate = (data) => {
        return (
@@ -150,10 +200,12 @@ const AllBandiAccordion = () => {
                <Column header={__('Importo totale', 'gepafin')} filterField="amount"
                        style={{ minWidth: '10rem' }} body={amountBodyTemplate} sortable/>
                <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
-                        style={{ width: '120px' }} body={statusBodyTemplate} filter sortable
+                        style={{ width: '8rem' }} body={statusBodyTemplate} filter sortable
                        filterElement={statusFilterTemplate}/>
-                {/*<Column header={__('Azioni', 'gepafin')}
-                        body={actionsBodyTemplate}/>*/}
+                {!isEmpty(chosenCompanyId) && chosenCompanyId !== 0
+                    ? <Column header={__('Azioni', 'gepafin')}
+                        style={{ width: '8rem' }}
+                        body={actionsBodyTemplate}/> : null}
            </DataTable>
        </div>
    )
--- a/src/pages/BandoViewBeneficiario/index.js
+++ b/src/pages/BandoViewBeneficiario/index.js
@@ -5,7 +5,7 @@ import { is, isEmpty, isNil } from 'ramda';
 import "quill/dist/quill.core.css";

 // store
-import { storeSet, useStore } from '../../store';
+import { storeGet, storeSet, useStore } from '../../store';

 // tools
 import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
@@ -28,6 +28,7 @@ import { Message } from 'primereact/message';
 import { Toast } from 'primereact/toast';
 import { Editor } from 'primereact/editor';
 import { Dialog } from 'primereact/dialog';
+import PreferredBandoService from '../../service/preferred-bando-service';

 const BandoViewBeneficiario = () => {
    const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -246,11 +247,50 @@ const BandoViewBeneficiario = () => {

    const header = renderHeader();

+    const addToFavourites = () => {
+        const companyId = storeGet.main.chosenCompanyId();
+        const bandoId = getBandoId();
+        const formdData = {
+            companyId,
+            callId: bandoId
+        }
+
+        if (data.preferredCallId && data.preferredCallId !== 0) {
+            PreferredBandoService.deleteFromPreferred(data.preferredCallId, removeFavCallback, errToggleFavCallback);
+        } else {
+            PreferredBandoService.addToPreferred(formdData, addFavCallback, errToggleFavCallback);
+        }
+    }
+
+    const removeFavCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            const newData = {
+                ...data,
+                preferredCallId: null
+            }
+            setData(newData);
+        }
+    }
+    const addFavCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            const newData = {
+                ...data,
+                preferredCallId: resp.data.id
+            }
+            setData(newData);
+        }
+    }
+    const errToggleFavCallback = (data) => {
+        set404FromErrorResponse(data);
+    }
+
    useEffect(() => {
        if (!isEmpty(chosenCompanyId) && chosenCompanyId !== 0) {
            const bandoId = getBandoId();
            storeSet.main.setAsyncRequest();
-            BandoService.getBando(bandoId, getBandoCallback, errGetBandoCallback);
+            BandoService.getBando(bandoId, getBandoCallback, errGetBandoCallback, [
+                ['companyId', chosenCompanyId]
+            ]);
            ApplicationService.getApplications(getApplCallback, errGetApplCallback, [
                ['callId', bandoId],
                ['companyId', chosenCompanyId]
@@ -445,14 +485,15 @@ const BandoViewBeneficiario = () => {
                                onClick={submitApplication}
                                label={submitBtnLabel()}
                                icon={submitBtnIcon()} iconPos="right"/>
-                            {/*<Button
+                            <Button
                                type="button"
-                                outlined
+                                outlined={isNil(data.preferredCallId)}
                                rounded
-                                disabled={true}
-                                onClick={saveToFavourites}
-                                label={__('Aggiungi a preferiti', 'gepafin')}
-                                icon="pi pi-heart" iconPos="left"/>*/}
+                                onClick={addToFavourites}
+                                label={isNil(data.preferredCallId)
+                                    ? __('Aggiungi a preferiti', 'gepafin')
+                                    : __('Rimuovi dai preferiti', 'gepafin')}
+                                icon="pi pi-heart" iconPos="left"/>
                        </div>
                    </div>

--- a/src/pages/DashboardBeneficiario/components/LatestBandiTable/index.js
+++ b/src/pages/DashboardBeneficiario/components/LatestBandiTable/index.js
@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
-import { uniq, isEmpty } from 'ramda';
+import { uniq, isEmpty, isNil } from 'ramda';
 import { Link } from 'react-router-dom';

 // store
-import { storeSet, useStore } from '../../../../store';
+import { storeGet, useStore } from '../../../../store';

 // api
 import BandoService from '../../../../service/bando-service';
@@ -19,6 +19,8 @@ import { InputIcon } from 'primereact/inputicon';
 import { Button } from 'primereact/button';
 import { Calendar } from 'primereact/calendar';
 import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import PreferredBandoService from '../../../../service/preferred-bando-service';
+import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';


 const LatestBandiTable = () => {
@@ -30,9 +32,11 @@ const LatestBandiTable = () => {
    const [statuses, setStatuses] = useState([]);

    useEffect(() => {
-        storeSet.main.setAsyncRequest();
-        BandoService.getBandi(getCallback, errGetCallbacks);
-    }, []);
+        setLoading(true);
+        BandoService.getBandi(getCallback, errGetCallbacks, [
+            ['companyId', chosenCompanyId]
+        ]);
+    }, [chosenCompanyId]);

    const getCallback = (data) => {
        if (data.status === 'SUCCESS') {
@@ -41,12 +45,64 @@ const LatestBandiTable = () => {
            setStatuses(uniq(data.data.map(o => o.status)))
            initFilters();
        }
-        storeSet.main.unsetAsyncRequest();
+        setLoading(false);
    }

    const errGetCallbacks = (data) => {
-        console.log('errGetCallbacks', data)
-        storeSet.main.unsetAsyncRequest();
+        set404FromErrorResponse(data);
+        setLoading(false);
+    }
+
+    const addToFavourites = (id, preferredId) => {
+        const companyId = storeGet.main.chosenCompanyId()
+        const data = {
+            companyId,
+            callId: id
+        }
+        setLoading(true);
+        if (preferredId && preferredId !== 0) {
+            PreferredBandoService.deleteFromPreferred(preferredId, (data) => removeFavCallback(data, id), errToggleFavCallback);
+        } else {
+            PreferredBandoService.addToPreferred(data, addFavCallback, errToggleFavCallback);
+        }
+    }
+
+    const removeFavCallback = (data, id) => {
+        if (data.status === 'SUCCESS') {
+            const newItems = items.map((o) => {
+                if (o.id === id) {
+                    return {
+                        ...o,
+                        preferredCallId: null
+                    }
+                } else {
+                    return o;
+                }
+            });
+            setItems(newItems)
+        }
+        setLoading(false);
+    }
+    const addFavCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const newItems = items.map((o) => {
+                if (o.id === data.data.callId) {
+                    return {
+                        ...o,
+                        preferredCallId: data.data.id
+                    }
+                } else {
+                    return o;
+                }
+            });
+            setItems(newItems)
+        }
+        setLoading(false);
+    }
+
+    const errToggleFavCallback = (data) => {
+        set404FromErrorResponse(data);
+        setLoading(false);
    }

    const getFormattedData = (data) => {
@@ -83,9 +139,18 @@ const LatestBandiTable = () => {
    const initFilters = () => {
        setFilters({
            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-            start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-            end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            name: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
+            },
+            start_date: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
+            },
+            end_date: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
+            },
            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
        });
        setGlobalFilterValue('');
@@ -94,10 +159,12 @@ const LatestBandiTable = () => {
    const renderHeader = () => {
        return (
            <div className="appTableHeader">
-                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
+                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined
+                        onClick={clearFilter}/>
                <IconField iconPosition="left">
-                    <InputIcon className="pi pi-search" />
-                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder={__('Cerca', 'gepafin')} />
+                    <InputIcon className="pi pi-search"/>
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange}
+                               placeholder={__('Cerca', 'gepafin')}/>
                </IconField>
            </div>
        );
@@ -112,7 +179,8 @@ const LatestBandiTable = () => {
    };

    const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
+                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
    };

    const statusBodyTemplate = (rowData) => {
@@ -120,10 +188,17 @@ const LatestBandiTable = () => {
    };

    const actionsBodyTemplate = (rowData) => {
-        return <Link to={`/bandi/${rowData.id}`}>
+        return <div className="appPageSection__tableActions">
+            <button type="button"
+                    className="appPageSection__addToFavourites"
+                    data-active={!isNil(rowData.preferredCallId)}
+                    onClick={() => addToFavourites(rowData.id, rowData.preferredCallId)}>
+                <i className="pi pi-heart" style={{ fontSize: '1rem' }}></i>
+            </button>
+            <Link to={`/bandi/${rowData.id}`}>
                <Button severity="info" label={__('Partecipa', 'gepafin')} icon="pi pi-arrow-right" size="small"
                        iconPos="right"/>
-        </Link>
+            </Link></div>
    }

    const header = renderHeader();
@@ -136,7 +211,8 @@ const LatestBandiTable = () => {
                       header={header}
                       emptyMessage={__('Nessun dato disponibile', 'gepafin')}
                       onFilter={(e) => setFilters(e.filters)}>
-                <Column field="name" header={__('Nome Bando', 'gepafin')} filter filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                <Column field="name" header={__('Nome Bando', 'gepafin')} filter
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
                        style={{ minWidth: '8rem' }}/>
                <Column header={__('Data Pubblicazione', 'gepafin')} filterField="start_date" dataType="date"
                        style={{ minWidth: '8rem' }}
--- a/src/service/bando-service.js
+++ b/src/service/bando-service.js
@@ -4,12 +4,12 @@ const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;

 export default class BandoService {

-    static getBandi = (callback, errCallback) => {
-        NetworkService.get(`${API_BASE_URL}/call`, callback, errCallback);
+    static getBandi = (callback, errCallback, queryParams) => {
+        NetworkService.get(`${API_BASE_URL}/call`, callback, errCallback, queryParams);
    };

-    static getBando = (id, callback, errCallback) => {
-        NetworkService.get(`${API_BASE_URL}/call/${id}`, callback, errCallback);
+    static getBando = (id, callback, errCallback, queryParams) => {
+        NetworkService.get(`${API_BASE_URL}/call/${id}`, callback, errCallback, queryParams);
    };

    static validateBando = (id, callback, errCallback) => {
--- a/src/service/preferred-bando-service.js
+++ b/src/service/preferred-bando-service.js
@@ -0,0 +1,14 @@
+import { NetworkService } from './network-service';
+
+const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
+
+export default class PreferredBandoService {
+
+    static addToPreferred = (body, callback, errCallback) => {
+        NetworkService.post(`${API_BASE_URL}/beneficiaryPreferredCall`, body, callback, errCallback);
+    };
+
+    static deleteFromPreferred = (id, callback, errCallback) => {
+        NetworkService.delete(`${API_BASE_URL}/beneficiaryPreferredCall/${id}`, {}, callback, errCallback);
+    };
+}