Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Wiring up sorting to offers in AdminX

Browse source 
Ref: https://github.com/TryGhost/Product/issues/4162
This commit is contained in:
Princi Vershwal 2023-11-22 14:14:44 +05:30 • committed by GitHub
parent 32dacd9ff7
commit 5587192644
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
View file

@ -132,14 +132,30 @@ export const OffersIndexModal = () => {
];
const [selectedTab, setSelectedTab] = useState('active');
const [selectedLayout, setSelectedLayout] = useState('card');
const [sortOption, setSortOption] = useState('date-added');
const [sortDirection, setSortDirection] = useState('desc');
const handleOfferEdit = (id:string) => {
// TODO: implement
updateRoute(`offers/edit/${id}`);
};
const sortedOffers = allOffers
.sort((offer1, offer2) => {
const multiplier = sortDirection === 'desc' ? -1 : 1;
switch (sortOption) {
case 'name':
return multiplier * offer1.name.localeCompare(offer2.name);
case 'redemptions':
return multiplier * (offer1.redemption_count - offer2.redemption_count);
default:
// 'date-added' or unknown option, use default sorting
return multiplier * ((offer1.created_at ? new Date(offer1.created_at).getTime() : 0) - (offer2.created_at ? new Date(offer2.created_at).getTime() : 0));
}
});
const cardLayoutOutput = <div className='mt-8 grid grid-cols-3 gap-6'>
{allOffers.filter(offer => offer.status === selectedTab).map((offer) => {
{sortedOffers.filter(offer => offer.status === selectedTab).map((offer) => {
const offerTier = paidActiveTiers.find(tier => tier.id === offer?.tier.id);
if (!offerTier) {
@ -166,14 +182,14 @@ export const OffersIndexModal = () => {
const listLayoutOutput = <table className='m-0'>
<tr className='border-b border-b-grey-300'>
<th className='px-5 py-2.5 pl-0 text-xs font-normal text-grey-700'>{allOffers.length} {allOffers.length > 1 ? 'offers' : 'offer'}</th>
<th className='px-5 py-2.5 pl-0 text-xs font-normal text-grey-700'>{sortedOffers.length} {sortedOffers.length > 1 ? 'offers' : 'offer'}</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Tier</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Terms</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Price</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Redemptions</th>
<th className='min-w-[80px] px-5 py-2.5 pr-0 text-xs font-normal text-grey-700'></th>
</tr>
{allOffers.filter(offer => offer.status === selectedTab).map((offer) => {
{sortedOffers.filter(offer => offer.status === selectedTab).map((offer) => {
const offerTier = paidActiveTiers.find(tier => tier.id === offer?.tier.id);
if (!offerTier) {
@ -220,7 +236,7 @@ export const OffersIndexModal = () => {
<header>
<div className='flex items-center justify-between'>
<div>
{allOffers.some(offer => offer.hasOwnProperty('status') && offer.status === 'archived') ?
{sortedOffers.some(offer => offer.hasOwnProperty('status') && offer.status === 'archived') ?
<TabView
border={false}
selectedTab={selectedTab}
@ -239,18 +255,17 @@ export const OffersIndexModal = () => {
<SortMenu
direction='desc'
items={[
{id: 'date-added', label: 'Date added', selected: true},
{id: 'name', label: 'Name'},
{id: 'redemptions', label: 'Redemptions'}
{id: 'date-added', label: 'Date added', selected: sortOption === 'date-added'},
{id: 'name', label: 'Name', selected: sortOption === 'name'},
{id: 'redemptions', label: 'Redemptions', selected: sortOption === 'redemptions'}
]}
position='right'
onDirectionChange={(selectedDirection) => {
// eslint-disable-next-line no-console
console.log(`Sorting direction: ${selectedDirection}`);
const newDirection = selectedDirection === 'asc' ? 'desc' : 'asc';
setSortDirection(newDirection);
}}
onSortChange={(selectedOption) => {
// eslint-disable-next-line no-console
console.log(`Sorting option: ${selectedOption}`);
setSortOption(selectedOption);
}}
/>
<div className='flex gap-3'>