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

Feature/65 favourite call

src/assets/scss/components/appPage.scss

@@ -372,8 +372,8 @@
 
 .appPageSection__tableActions {
     display: flex;
-    gap: 24px;
+    gap: 10px;
-    padding: 0;
+    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);
+    background-color: transparent;
-    color: white;
+    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] {

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 PreferredBandoService from '../../../../service/preferred-bando-service';
-import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
 
 
 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 = () => {
+    const addToFavourites = (id, preferredId) => {
-        console.log('addToFavourites');
+        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')}
+                {!isEmpty(chosenCompanyId) && chosenCompanyId !== 0
-                        body={actionsBodyTemplate}/>*/}
+                    ? <Column header={__('Azioni', 'gepafin')}
+                        style={{ width: '8rem' }}
+                        body={actionsBodyTemplate}/> : null}
             </DataTable>
         </div>
     )

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={addToFavourites}
-                                onClick={saveToFavourites}
+                                label={isNil(data.preferredCallId)
-                                label={__('Aggiungi a preferiti', 'gepafin')}
+                                    ? __('Aggiungi a preferiti', 'gepafin')
-                                icon="pi pi-heart" iconPos="left"/>*/}
+                                    : __('Rimuovi dai preferiti', 'gepafin')}
+                                icon="pi pi-heart" iconPos="left"/>
                         </div>
                     </div>
 

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();
+        setLoading(true);
-        BandoService.getBandi(getCallback, errGetCallbacks);
+        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)
+        set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        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 }] },
+            name: {
-            start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+                operator: FilterOperator.AND,
-            end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+                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" />
+                    <InputIcon className="pi pi-search"/>
-                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder={__('Cerca', 'gepafin')} />
+                    <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 severity="info" label={__('Partecipa', 'gepafin')} icon="pi pi-arrow-right" size="small"
+            <button type="button"
-                    iconPos="right"/>
+                    className="appPageSection__addToFavourites"
-        </Link>
+                    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></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' }}

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) => {
+    static getBandi = (callback, errCallback, queryParams) => {
-        NetworkService.get(`${API_BASE_URL}/call`, callback, errCallback);
+        NetworkService.get(`${API_BASE_URL}/call`, callback, errCallback, queryParams);
     };
 
-    static getBando = (id, callback, errCallback) => {
+    static getBando = (id, callback, errCallback, queryParams) => {
-        NetworkService.get(`${API_BASE_URL}/call/${id}`, callback, errCallback);
+        NetworkService.get(`${API_BASE_URL}/call/${id}`, callback, errCallback, queryParams);
     };
 
     static validateBando = (id, callback, errCallback) => {

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);
+    };
+}