Skip to content

GitLab

Commit 63bfa4b7 authored by Oleksii Savran's avatar Oleksii Savran
Browse files

Shopping cart by UUID

parent 180b2365
Hide whitespace changes
Inline Side-by-side
src/ui/AccessionListPage.tsx
View file @ 63bfa4b7
......@@ -14,7 +14,7 @@ import { LocalStorageCart } from 'utilities';
interface IAccessionListPageState {
filter: AccessionFilter;
accessions: FilteredPage<Accession>;
selected: number[];
selected: string[];
isAllSelected: boolean;
}
......@@ -79,10 +79,10 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
private toggleRowSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
const { selected } = this.state;
const { id } = (e.currentTarget as HTMLElement).dataset;
const updated = selected.filter((selectedId) => selectedId !== +id);
const { uuid } = (e.currentTarget as HTMLElement).dataset;
const updated = selected.filter((selectedUuid) => selectedUuid !== uuid);
if (updated.length === selected.length) {
updated.push(+id);
updated.push(uuid);
}
this.setState({ selected: updated });
};
......@@ -95,15 +95,15 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
private onToggleAll = () => {
this.setState((prevState) => ({
isAllSelected: !prevState.isAllSelected,
selected: !prevState.isAllSelected ? prevState.accessions.content.map((acc) => acc.id) : [],
selected: !prevState.isAllSelected ? prevState.accessions.content.map((acc) => acc.uuid) : [],
}));
};
public render() {
const { accessions, selected, isAllSelected } = this.state;
const { t } = this.props;
const selectedIds = new Set();
selected.forEach((id) => selectedIds.add(+id));
const selectedUUIDs = new Set();
selected.forEach((uuid) => selectedUUIDs.add(uuid));
if (accessions === null) {
return (
......@@ -144,13 +144,13 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
</thead>
<tbody>
{ accessions.content.map((a, i) => (
<tr key={ a.id } className={ selectedIds.has(a.id) ? 'table-primary' : '' }>
<tr key={ a.id } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
<td>
<input
type="checkbox"
name={ `checkbox-${a.id}-${i}` }
data-id={ a.id }
checked={ selectedIds.has(a.id) }
name={ `checkbox-${a.uuid}-${i}` }
data-uuid={ a.uuid }
checked={ selectedUUIDs.has(a.uuid) }
onChange={ this.toggleRowSelect }
className="align-middle"
/>
......
src/ui/CartPage.tsx
View file @ 63bfa4b7
......@@ -3,15 +3,14 @@ import React from 'react';
import { AccessionService } from '@genesys/client/service';
import AccessionFilter from '@genesys/client/model/accession/AccessionFilter';
import Accession from '@genesys/client/model/accession/Accession';
import FilteredPage, { IPageRequest } from '@genesys/client/model/FilteredPage';
import { withTranslation, WithTranslation } from 'react-i18next';
import { LocalStorageCart } from 'utilities';
import { Link } from 'react-router-dom';
interface IAccessionListPageState {
accessions: FilteredPage<Accession & Record<string, any>>;
accessions: Array<Accession & Record<string, any>>;
isEmpty: boolean;
selected: number[];
selected: string[];
isAllSelected: boolean;
}
......@@ -51,24 +50,24 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
};
private receiveData = () => {
const accessionsIds = LocalStorageCart.getCartItemsIds();
if (accessionsIds.length === 0) {
const accessionsUUIDds = LocalStorageCart.getCartItemsLS();
if (accessionsUUIDds.length === 0) {
this.setState({ isEmpty: true, accessions: null });
} else {
this.loadData({ id: accessionsIds }, {});
this.loadData(accessionsUUIDds);
}
};
private loadData = (filter: AccessionFilter, pageR: IPageRequest): Promise<void> => {
const cartItems = LocalStorageCart.getCartItemsLS();
const map = new Map();
cartItems.forEach((item) => map.set(+item.id, item.distributionFormCode));
private loadData = (UUIDs: string[]): Promise<void> => {
// const cartItems = LocalStorageCart.getCartItemsLS();
// const map = new Map();
// cartItems.forEach((item) => map.set(+item.id, item.distributionFormCode));
return AccessionService
.list(filter, pageR)
.then((data: FilteredPage<Accession & any>) => {
console.log('accessions: ', data);
data.content.forEach((accession) => accession.distributionFormCode = map.get(accession.id));
.listAllByUuid(UUIDs)
.then((data: Array<Accession & any>) => {
// console.log('accessions: ', data);
// data.forEach((accession) => accession.distributionFormCode = map.get(accession.id));
this.setState({ accessions: data, isEmpty: false });
})
.catch((e) => {
......@@ -78,10 +77,10 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
private toggleRowSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
const { selected } = this.state;
const { id } = (e.currentTarget as HTMLElement).dataset;
const updated = selected.filter((selectedId) => selectedId !== +id);
const { uuid } = (e.currentTarget as HTMLElement).dataset;
const updated = selected.filter((selectedUuid) => selectedUuid !== uuid);
if (updated.length === selected.length) {
updated.push(+id);
updated.push(uuid);
}
this.setState({ selected: updated });
};
......@@ -89,23 +88,23 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
private removeItems = () => {
const { selected, accessions } = this.state;
LocalStorageCart.removeFromCart(selected);
const accessionsUpdated = { ...accessions, content: accessions.content.filter((acc) => !selected.some((id) => id === acc.id)) };
const isEmpty = accessionsUpdated.content.length === 0;
const accessionsUpdated = accessions.filter((acc) => !selected.some((uuid) => uuid === acc.uuid));
const isEmpty = accessionsUpdated.length === 0;
this.setState({ selected: [], accessions: isEmpty ? null : accessionsUpdated, isEmpty, isAllSelected: false });
};
private onToggleAll = () => {
this.setState((prevState) => ({
isAllSelected: !prevState.isAllSelected,
selected: !prevState.isAllSelected ? prevState.accessions.content.map((acc) => acc.id) : [],
selected: !prevState.isAllSelected ? prevState.accessions.map((acc) => acc.uuid) : [],
}));
};
public render() {
const { accessions, selected, isEmpty, isAllSelected } = this.state;
const { t } = this.props;
const selectedIds = new Set();
selected.forEach((id) => selectedIds.add(id));
const selectedUUIDs = new Set();
selected.forEach((uuid) => selectedUUIDs.add(uuid));
return (
<>
......@@ -137,14 +136,14 @@ export class AccessionListPage extends React.Component<IAccessionListPageProps,
</tr>
</thead>
<tbody>
{ accessions.content.map((a, i) => (
<tr key={ a.id } className={ selectedIds.has(a.id) ? 'table-primary' : '' }>
{ accessions.map((a, i) => (
<tr key={ a.uuid } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
<td>
<input
type="checkbox"
name={ `checkbox-${a.id}-${i}` }
data-id={ a.id }
checked={ selectedIds.has(a.id) }
name={ `checkbox-${a.uuid}-${i}` }
data-uuid={ a.uuid }
checked={ selectedUUIDs.has(a.uuid) }
onChange={ this.toggleRowSelect }
className="align-middle"
/>
......
src/utilities/index.ts
View file @ 63bfa4b7
......@@ -35,35 +35,33 @@ export function checkAccessTokens(apiUrl: string, clientId: string, clientSecret
export class LocalStorageCart {
public static LS_KEY = 'ui-embedded-cart';
public static getCartItemsLS = () => JSON.parse(localStorage.getItem(LocalStorageCart.LS_KEY));
public static getCartItemsIds = () => {
const localStorageCart = LocalStorageCart.getCartItemsLS();
return localStorageCart && localStorageCart.length ? localStorageCart.map((id) => +id) : [];
public static getCartItemsLS = () => {
const items = JSON.parse(localStorage.getItem(LocalStorageCart.LS_KEY));
return items && items.length ? items : [];
};
public static addToCart = (items: number[]) => {
public static addToCart = (items: string[]) => {
// console.log('add to cart: ', items);
const cartIds = LocalStorageCart.getCartItemsIds();
if (cartIds.length === 0) {
const cartUuids = LocalStorageCart.getCartItemsLS();
if (cartUuids.length === 0) {
return localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(items));
}
const idsSet = new Set(cartIds);
const uuidsSet = new Set(cartUuids);
items.forEach((id) => {
if (idsSet.has(id)) {
if (uuidsSet.has(id)) {
return;
}
idsSet.add(id);
uuidsSet.add(id);
});
const cart = [];
idsSet.forEach((id) => cart.push(id));
uuidsSet.forEach((id) => cart.push(id));
localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(cart));
};
public static removeFromCart = (ids: number[]) => {
const cartIds = LocalStorageCart.getCartItemsIds();
const updatedCartItems = cartIds.filter((cartId) => !ids.some((idToRemove) => cartId === idToRemove));
public static removeFromCart = (uuids: string[]) => {
const cartUuids = LocalStorageCart.getCartItemsLS();
const updatedCartItems = cartUuids.filter((cartUuid) => !uuids.some((uuidToRemove) => cartUuid === uuidToRemove));
localStorage.setItem(LocalStorageCart.LS_KEY, JSON.stringify(updatedCartItems));
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment