SubsetListPage.tsx 3.55 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import * as React from "react";
import {Link} from "react-router-dom";
import {useTranslation} from "react-i18next";

// model
import {IPageRequest} from "@genesys-pgr/client/model/Page";
import SubsetFilter from "@genesys-pgr/client/model/subset/SubsetFilter";
import FilteredPage from "@genesys-pgr/client/model/FilteredPage";
import Subset from "@genesys-pgr/client/model/subset/Subset";
import {Config} from "config/config";

// service
import {SubsetService} from "@genesys-pgr/client/service";
// ui
import PageTitle from "ui/common/PageTitle";
import Pagination from "ui/common/Pagination";
import {SubsetFilters} from "subset/SubsetFilters";
// util
import {parseLocationSearch} from "utilities/filterUtil";
import {useSelector} from "react-redux";

interface ISubsetListPageProps {
  location: any;
}

const SubsetListPage = ({location}: ISubsetListPageProps) => {

  // util
  const {t} = useTranslation();

  // redux
Matija Obreza's avatar
Matija Obreza committed
32
  // const publicWebsiteUrl = useSelector((state: any) => state?.apiInfo?.apiInfo?.publicWebsiteUrl);
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
  const appConfig: Config = useSelector((state: any) => state?.appConfig?.config);

  // state
  const [subsets, setSubsets] = React.useState<FilteredPage<Subset, SubsetFilter>>();
  const [filter, setFilter] = React.useState<SubsetFilter>(appConfig.filter as SubsetFilter);


  // callback
  const loadData = React.useCallback((filter: string | SubsetFilter, pageR: IPageRequest): Promise<FilteredPage<Subset, SubsetFilter>> => {
    return SubsetService
      .list(filter, pageR)
      .then((data) => {
        setSubsets(data);
        setFilter(data.filter);
        return data;
      })
      .catch((e) => {
        console.log('Api call failed: ', e);
        return null;
      });
  }, []);

  const applyFilter = React.useCallback((newFilter: SubsetFilter) => {
    loadData({...filter, ...newFilter}, {});
  }, [filter, loadData]);

  // effect
  React.useEffect(() => {
    const {current, filterCode} = parseLocationSearch(location);
    if (!subsets || subsets?.filterCode !== filterCode) {
      loadData(filterCode || filter || subsets?.filter, current ? {page: current} : {});
    }
  }, [filter, loadData, location, subsets])

  return subsets ? (
    <>
      <PageTitle title={t('pagetitle.subsetList')}/>
      <h1 className="d-flex justify-content-between align-items-center">
        {t('estimatedNumberOfItems', {
          count: subsets.totalElements,
          what: t('subset.model', {count: subsets.totalElements})
        })}
      </h1>
      <SubsetFilters
        filter={filter}
        applyFilter={applyFilter}
        key={`filters-${subsets.filterCode}`}
      />
      <Pagination loadData={loadData} paged={subsets} prefix="/subsets">
        <table className="table table-striped">
          <thead className="thead-dark">
          <tr>
            <th>{t('subset.title')}</th>
            <th>{t('subset.crops')}</th>
            <th>{t('subset.accessionCount')}</th>
Matija Obreza's avatar
Matija Obreza committed
88
89
            {/* <th>{t('subset.institute')}</th> */}
            <th>{t([ 'subset.description', '_.description' ])}</th>
90
91
92
93
94
95
          </tr>
          </thead>
          <tbody>
          {subsets.content.map((s) => (
            <tr key={s.id}>
              <td><Link to={`/subsets/${s.uuid}`}>{s.title}</Link></td>
Matija Obreza's avatar
Matija Obreza committed
96
              <td>{s?.crops.join(', ')}</td>
97
              <td>{s.accessionCount}</td>
Matija Obreza's avatar
Matija Obreza committed
98
99
              {/* <td><a href={`${publicWebsiteUrl}/wiews/${s.wiewsCode}`}>{s.wiewsCode}</a></td> */}
              <td>{s?.description}</td>
100
101
102
103
104
105
106
107
108
109
            </tr>
          ))}
          </tbody>
        </table>
      </Pagination>
    </>
  ) : null;
};

export default SubsetListPage;