Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Embedded Genesys UI
Commits
63bfa4b7
Commit
63bfa4b7
authored
Nov 17, 2020
by
Oleksii Savran
Browse files
Shopping cart by UUID
parent
180b2365
Changes
3
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
((
selected
I
d
)
=>
selected
I
d
!==
+
id
);
const
{
uu
id
}
=
(
e
.
currentTarget
as
HTMLElement
).
dataset
;
const
updated
=
selected
.
filter
((
selected
Uui
d
)
=>
selected
Uui
d
!==
uu
id
);
if
(
updated
.
length
===
selected
.
length
)
{
updated
.
push
(
+
id
);
updated
.
push
(
uu
id
);
}
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
.
uu
id
)
:
[],
}));
};
public
render
()
{
const
{
accessions
,
selected
,
isAllSelected
}
=
this
.
state
;
const
{
t
}
=
this
.
props
;
const
selected
Id
s
=
new
Set
();
selected
.
forEach
((
id
)
=>
selected
Id
s
.
add
(
+
id
));
const
selected
UUID
s
=
new
Set
();
selected
.
forEach
((
uu
id
)
=>
selected
UUID
s
.
add
(
uu
id
));
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
=
{
selected
Id
s
.
has
(
a
.
id
)
?
'
table-primary
'
:
''
}
>
<
tr
key
=
{
a
.
id
}
className
=
{
selected
UUID
s
.
has
(
a
.
uu
id
)
?
'
table-primary
'
:
''
}
>
<
td
>
<
input
type
=
"checkbox"
name
=
{
`checkbox-
${
a
.
id
}
-
${
i
}
`
}
data-id
=
{
a
.
id
}
checked
=
{
selected
Id
s
.
has
(
a
.
id
)
}
name
=
{
`checkbox-
${
a
.
uu
id
}
-
${
i
}
`
}
data-
uu
id
=
{
a
.
uu
id
}
checked
=
{
selected
UUID
s
.
has
(
a
.
uu
id
)
}
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
accessions
I
ds
=
LocalStorageCart
.
getCartItems
Ids
();
if
(
accessions
I
ds
.
length
===
0
)
{
const
accessions
UUID
ds
=
LocalStorageCart
.
getCartItems
LS
();
if
(
accessions
UUID
ds
.
length
===
0
)
{
this
.
setState
({
isEmpty
:
true
,
accessions
:
null
});
}
else
{
this
.
loadData
(
{
id
:
accessions
Ids
},
{}
);
this
.
loadData
(
accessions
UUIDds
);
}
};
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
));
.
list
AllByUuid
(
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
((
selected
I
d
)
=>
selected
I
d
!==
+
id
);
const
{
uu
id
}
=
(
e
.
currentTarget
as
HTMLElement
).
dataset
;
const
updated
=
selected
.
filter
((
selected
Uui
d
)
=>
selected
Uui
d
!==
uu
id
);
if
(
updated
.
length
===
selected
.
length
)
{
updated
.
push
(
+
id
);
updated
.
push
(
uu
id
);
}
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
((
uu
id
)
=>
uu
id
===
acc
.
uu
id
));
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
.
uu
id
)
:
[],
}));
};
public
render
()
{
const
{
accessions
,
selected
,
isEmpty
,
isAllSelected
}
=
this
.
state
;
const
{
t
}
=
this
.
props
;
const
selected
Id
s
=
new
Set
();
selected
.
forEach
((
id
)
=>
selected
Id
s
.
add
(
id
));
const
selected
UUID
s
=
new
Set
();
selected
.
forEach
((
uu
id
)
=>
selected
UUID
s
.
add
(
uu
id
));
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
=
{
selected
Id
s
.
has
(
a
.
id
)
?
'
table-primary
'
:
''
}
>
{
accessions
.
map
((
a
,
i
)
=>
(
<
tr
key
=
{
a
.
uu
id
}
className
=
{
selected
UUID
s
.
has
(
a
.
uu
id
)
?
'
table-primary
'
:
''
}
>
<
td
>
<
input
type
=
"checkbox"
name
=
{
`checkbox-
${
a
.
id
}
-
${
i
}
`
}
data-id
=
{
a
.
id
}
checked
=
{
selected
Id
s
.
has
(
a
.
id
)
}
name
=
{
`checkbox-
${
a
.
uu
id
}
-
${
i
}
`
}
data-
uu
id
=
{
a
.
uu
id
}
checked
=
{
selected
UUID
s
.
has
(
a
.
uu
id
)
}
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
cart
I
ds
=
LocalStorageCart
.
getCartItems
Ids
();
if
(
cart
I
ds
.
length
===
0
)
{
const
cart
Uui
ds
=
LocalStorageCart
.
getCartItems
LS
();
if
(
cart
Uui
ds
.
length
===
0
)
{
return
localStorage
.
setItem
(
LocalStorageCart
.
LS_KEY
,
JSON
.
stringify
(
items
));
}
const
idsSet
=
new
Set
(
cart
I
ds
);
const
uu
idsSet
=
new
Set
(
cart
Uui
ds
);
items
.
forEach
((
id
)
=>
{
if
(
idsSet
.
has
(
id
))
{
if
(
uu
idsSet
.
has
(
id
))
{
return
;
}
idsSet
.
add
(
id
);
uu
idsSet
.
add
(
id
);
});
const
cart
=
[];
idsSet
.
forEach
((
id
)
=>
cart
.
push
(
id
));
uu
idsSet
.
forEach
((
id
)
=>
cart
.
push
(
id
));
localStorage
.
setItem
(
LocalStorageCart
.
LS_KEY
,
JSON
.
stringify
(
cart
));
};
public
static
removeFromCart
=
(
ids
:
number
[])
=>
{
const
cart
I
ds
=
LocalStorageCart
.
getCartItems
Ids
();
const
updatedCartItems
=
cart
I
ds
.
filter
((
cart
I
d
)
=>
!
ids
.
some
((
idToRemove
)
=>
cart
I
d
===
idToRemove
));
public
static
removeFromCart
=
(
uu
ids
:
string
[])
=>
{
const
cart
Uui
ds
=
LocalStorageCart
.
getCartItems
LS
();
const
updatedCartItems
=
cart
Uui
ds
.
filter
((
cart
Uui
d
)
=>
!
uu
ids
.
some
((
uu
idToRemove
)
=>
cart
Uui
d
===
uu
idToRemove
));
localStorage
.
setItem
(
LocalStorageCart
.
LS_KEY
,
JSON
.
stringify
(
updatedCartItems
));
}
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment