feat: sort proposals (#5675)

* chore: move filter to general module

* enhancement: add dropdown enums + translation

* feat: filter proposals

* enhancement: add proposal type filter

* enhancement: add participated filter

* fix: fix tests

* chore: create combined filter type

* feat/ add proposal order to filter

* enhancement: add translations for proposal order

* enhancement: add labelkey to filter item

* fix: fix merge conflicts

* chore: make label key optional

* feat: add sorting logic

* chore: remove sorting by date

* coding convention fixes

Co-authored-by: Tuditi <45079109+Tuditi@users.noreply.github.com>
Co-authored-by: Jean Ribeiro <iamjeanribeiro@gmail.com>
Co-authored-by: Jean Ribeiro <contact@jeanribeiro.dev>

packages/shared/components/Proposals.svelte

@@ -3,14 +3,13 @@
     import { localize } from '@core/i18n'
     import { FontWeight } from './enums'
     import { IProposal } from '@contexts/governance/interfaces'
-    import { proposalFilter } from '@contexts/governance'
-    import { isVisibleProposal } from '@contexts/governance/utils/isVisibleProposal'
+    import { proposalFilter } from '@contexts/governance/stores'
+    import { isVisibleProposal, sortProposals } from '@contexts/governance/utils'
 
     export let proposals: IProposal[] = []
 
-    $: sortedProposals = proposals
-        .filter((proposal) => isVisibleProposal(proposal, $proposalFilter))
-        .sort((a, b) => (a.id < b.id ? -1 : 1))
+    $: visibleProposals = proposals.filter((proposal) => isVisibleProposal(proposal, $proposalFilter))
+    $: sortedProposals = sortProposals(visibleProposals, $proposalFilter)
 </script>
 
 <proposals-container class="flex flex-col h-full">

packages/shared/lib/contexts/governance/enums/index.ts

@@ -1,2 +1,3 @@
-export * from './proposal-type.enum'
+export * from './proposal-order-option.enum'
 export * from './proposal-status.enum'
+export * from './proposal-type.enum'

packages/shared/lib/contexts/governance/enums/proposal-order-option.enum.ts

@@ -0,0 +1,4 @@
+export enum ProposalOrderOption {
+    Phase = 'phase',
+    Name = 'name',
+}

packages/shared/lib/contexts/governance/interfaces/proposal-filter.interface.ts

@@ -1,7 +1,8 @@
-import { SelectionFilterUnit } from '@core/utils/interfaces/filter/filter-unit.interface'
+import { OrderFilterUnit, SelectionFilterUnit } from '@core/utils/interfaces/filter/filter-unit.interface'
 
 export interface ProposalFilter {
     phase: SelectionFilterUnit
     type: SelectionFilterUnit
     participated: SelectionFilterUnit
+    order: OrderFilterUnit
 }

packages/shared/lib/contexts/governance/stores/proposal-filter.store.ts

@@ -1,6 +1,6 @@
-import { BooleanFilterOption } from '@core/utils/enums/filters'
+import { BooleanFilterOption, OrderOption } from '@core/utils/enums/filters'
 import { writable, Writable } from 'svelte/store'
-import { ProposalFilter, ProposalStatus, ProposalType } from '..'
+import { ProposalFilter, ProposalStatus, ProposalType, ProposalOrderOption } from '..'
 
 export const proposalFilter: Writable<ProposalFilter> = writable({
     phase: {
@@ -25,4 +25,12 @@ export const proposalFilter: Writable<ProposalFilter> = writable({
         selected: BooleanFilterOption.Yes,
         choices: [BooleanFilterOption.Yes, BooleanFilterOption.No],
     },
+    order: {
+        active: false,
+        type: 'order',
+        localeKey: 'filters.proposalOrder',
+        selected: ProposalOrderOption.Name,
+        ascDesc: OrderOption.Asc,
+        choices: [ProposalOrderOption.Name, ProposalOrderOption.Phase],
+    },
 })

packages/shared/lib/contexts/governance/utils/index.ts

@@ -11,5 +11,7 @@ export * from './isProposalActive'
 export * from './isProposalAlreadyAdded'
 export * from './isSelectedAccountVoting'
 export * from './isValidProposalId'
+export * from './isVisibleProposal'
 export * from './isVotingForProposal'
 export * from './isVotingForSelectedProposal'
+export * from './sortProposals'

packages/shared/lib/contexts/governance/utils/sortProposals.ts

@@ -0,0 +1,36 @@
+import { OrderOption } from '@core/utils/enums/filters'
+import { ProposalOrderOption, ProposalStatus } from '../enums'
+import { IProposal, ProposalFilter } from '../interfaces'
+
+export function sortProposals(proposals: IProposal[], filter: ProposalFilter): IProposal[] {
+    let orderFunction = sortByName
+    let isAscending = true
+
+    if (filter.order.active) {
+        switch (filter.order.selected) {
+            case ProposalOrderOption.Name:
+                orderFunction = sortByName
+                break
+            case ProposalOrderOption.Phase:
+                orderFunction = sortByPhase
+                break
+        }
+        isAscending = filter.order.ascDesc === OrderOption.Asc
+    }
+
+    return proposals?.sort((proposal1, proposal2) => orderFunction(proposal1, proposal2, isAscending)) ?? []
+}
+
+function sortByName(proposal1: IProposal, proposal2: IProposal, asc: boolean): number {
+    return proposal1.title.toLowerCase() > proposal2.title.toLowerCase() ? (asc ? 1 : -1) : asc ? -1 : 1
+}
+
+function sortByPhase(proposal1: IProposal, proposal2: IProposal, asc: boolean): number {
+    const phaseOrdering = {
+        [ProposalStatus.Upcoming]: 0,
+        [ProposalStatus.Commencing]: 1,
+        [ProposalStatus.Holding]: 2,
+        [ProposalStatus.Ended]: 3,
+    }
+    return phaseOrdering[proposal1.status] > phaseOrdering[proposal2.status] ? (asc ? 1 : -1) : asc ? -1 : 1
+}

packages/shared/locales/en.json

@@ -1589,6 +1589,11 @@
             "label": "Participated",
             "yes": "Yes",
             "no": "No"
+        },
+        "proposalOrder": {
+            "label": "Order",
+            "name": "Name",
+            "phase": "Phase"
         }
     },
     "dates": {