Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented: Added a Sort By filter for Created Date, Due Date, and Alphabetical sorting on the Draft, Assigned, Pending review and closed page(#631) #707

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Implemented: Added a Sort By filter for Created Date, Due Date, and Alphabetical sorting on the Draft, Assigned, Pending review and closed page(#631) #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
667e098
Implemented: Added a Sort By filter for Created Date, Due Date, and A…
R-Sourabh Mar 10, 2025
e73a86d
Implemented: Added a Sort By filter for Created Date, Due Date, and A…
R-Sourabh Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 1 addition & 11 deletions src/components/Filters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,6 @@
<ion-checkbox v-model="query.noFacility" :disabled="query.facilityIds?.length" @ionChange="updateQuery('noFacility', $event.detail.checked)">{{ translate("No facility") }}</ion-checkbox>
</ion-item>

<ion-item lines="none">
<ion-icon slot="start" :icon="swapVerticalOutline" />
<ion-select :label="translate('Sort by')" :value="query.sortBy" @ionChange="updateQuery('sortBy', $event.detail.value)" interface="popover">
<ion-select-option value="dueDate desc">{{ translate("Farthest due") }}</ion-select-option>
<ion-select-option value="dueDate asc">{{ translate("Nearest due") }}</ion-select-option>
<ion-select-option value="countImportName asc">{{ translate("Name - A to Z") }}</ion-select-option>
<ion-select-option value="countImportName desc">{{ translate("Name - Z to A") }}</ion-select-option>
</ion-select>
</ion-item>

<ion-item v-for="facilityId in query.facilityIds" :key="facilityId">
<ion-label>{{ getFacilityName(facilityId) }}</ion-label>
<ion-button color="danger" v-if="query.facilityIds.length" fill="clear" slot="end" @click="updateQuery('facilityIds', query.facilityIds.filter((id: string) => id !== facilityId))">
Expand Down Expand Up @@ -120,7 +110,7 @@ import {
IonToolbar
} from "@ionic/vue";
import { computed, ref } from "vue";
import { closeCircleOutline, businessOutline, gitBranchOutline, gitPullRequestOutline, locateOutline, swapVerticalOutline } from "ionicons/icons";
import { closeCircleOutline, businessOutline, gitBranchOutline, gitPullRequestOutline, locateOutline } from "ionicons/icons";
import { translate } from '@/i18n'
import store from "@/store";
import router from "@/router";
Expand Down
1 change: 1 addition & 0 deletions src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"All": "All",
"All facilities selected": "All facilities selected",
"All of the item(s) are accepted": "All of the item(s) are accepted",
"Alphabetic": "Alphabetic",
"Any edits made in the counted quantity on this page will be lost.": "Any edits made in the counted quantity on this page will be lost.",
"App": "App",
"Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
Expand Down
2 changes: 1 addition & 1 deletion src/store/modules/count/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const countModule: Module<CountState, RootState> = {
facilityIds: [],
noFacility: false,
queryString: '',
sortBy: 'dueDate desc',
sortBy: 'createdDate desc',
createdDate_from: '',
createdDate_thru: '',
closedDate_from: '',
Expand Down
2 changes: 1 addition & 1 deletion src/store/modules/count/mutations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const mutations: MutationTree <CountState> = {
facilityIds: [],
noFacility: false,
queryString: '',
sortBy: 'dueDate desc',
sortBy: 'createdDate desc',
createdDate_from: '',
createdDate_thru: '',
closedDate_from: '',
Expand Down
27 changes: 24 additions & 3 deletions src/views/Assigned.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,17 @@
</ion-header>

<ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter">
<ion-searchbar class="searchbar" v-model="query.queryString" @keyup.enter="updateQueryString('queryString', $event.target.value)" />
<div class="header searchbar">
<ion-searchbar v-model="query.queryString" @keyup.enter="updateQueryString('queryString', $event.target.value)" />
<ion-item lines="none">
<ion-icon slot="start" :icon="swapVerticalOutline" />
<ion-select :label="translate('Sort by')" :value="query.sortBy" @ionChange="updateQuery('sortBy', $event.detail.value)" interface="popover">
<ion-select-option value="createdDate desc">{{ translate("Created date") }}</ion-select-option>
<ion-select-option value="dueDate desc">{{ translate("Due date") }}</ion-select-option>
<ion-select-option value="countImportName asc">{{ translate("Alphabetic") }}</ion-select-option>
</ion-select>
</ion-item>
</div>
<p v-if="!cycleCounts.length" class="empty-state">
{{ translate("No cycle counts found") }}
</p>
Expand Down Expand Up @@ -59,8 +69,8 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import { translate } from '@/i18n'
import { filterOutline, storefrontOutline } from "ionicons/icons";
import { IonBadge, IonButtons, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonInfiniteScroll, IonInfiniteScrollContent, IonLabel, IonList, IonMenuButton, IonPage, IonSearchbar, IonTitle, IonToolbar, onIonViewDidEnter, onIonViewWillLeave } from "@ionic/vue";
import { filterOutline, storefrontOutline, swapVerticalOutline } from "ionicons/icons";
import { IonBadge, IonButtons, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonInfiniteScroll, IonInfiniteScrollContent, IonLabel, IonList, IonMenuButton, IonPage, IonSearchbar, IonSelect, IonSelectOption, IonTitle, IonToolbar, onIonViewDidEnter, onIonViewWillLeave } from "@ionic/vue";
import store from "@/store"
import { getCycleCountStats, getDateWithOrdinalSuffix, getDerivedStatusForCount, getFacilityName } from "@/utils"
import Filters from "@/components/Filters.vue"
Expand Down Expand Up @@ -122,6 +132,10 @@ async function fetchAssignedCycleCount(vSize?: any, vIndex?: any) {
}
await store.dispatch("count/fetchCycleCounts", payload)
}

async function updateQuery(key: string, value: any) {
await store.dispatch("count/updateQuery", { key, value })
}
</script>

<style scoped>
Expand All @@ -133,4 +147,11 @@ async function fetchAssignedCycleCount(vSize?: any, vIndex?: any) {
.list-item > ion-item {
width: 100%;
}

.header {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: var(--spacer-xs);
}
</style>
21 changes: 18 additions & 3 deletions src/views/Closed.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,25 @@
<ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter">
<div class="header searchbar">
<ion-searchbar v-model="query.queryString" @keyup.enter="updateQueryString('queryString', $event.target.value)" />
<ion-item lines="none">
<ion-icon slot="start" :icon="swapVerticalOutline" />
<ion-select :label="translate('Sort by')" :value="query.sortBy" @ionChange="updateQuery('sortBy', $event.detail.value)" interface="popover">
<ion-select-option value="createdDate desc">{{ translate("Created date") }}</ion-select-option>
<ion-select-option value="dueDate desc">{{ translate("Due date") }}</ion-select-option>
<ion-select-option value="countImportName asc">{{ translate("Alphabetic") }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item lines="full">
<ion-icon slot="start" :icon="listOutline"/>
<ion-label>{{ translate("Counts closed") }}</ion-label>
<ion-label slot="end">{{ (closedCycleCountsTotal || closedCycleCountsTotal === 0) ? closedCycleCountsTotal : "-" }}</ion-label>
</ion-item>
<ion-item lines="full">
<!-- Currently the average variance does not work, so commenting it out for now -->
<!-- <ion-item lines="full">
<ion-icon slot="start" :icon="thermometerOutline"/>
<ion-label>{{ translate("Average variance") }}</ion-label>
<ion-label slot="end">{{ getAverageVariance() }}</ion-label>
</ion-item>
</ion-item> -->
</div>
<p v-if="!cycleCounts.length" class="empty-state">
{{ translate("No cycle counts found") }}
Expand Down Expand Up @@ -96,13 +105,15 @@
IonMenuButton,
IonPage,
IonSearchbar,
IonSelect,
IonSelectOption,
IonTitle,
IonToolbar,
modalController,
onIonViewWillEnter,
onIonViewWillLeave
} from "@ionic/vue";
import { cloudDownloadOutline, filterOutline, listOutline, storefrontOutline, thermometerOutline } from "ionicons/icons";
import { cloudDownloadOutline, filterOutline, listOutline, storefrontOutline, swapVerticalOutline } from "ionicons/icons";
import { computed, ref } from "vue"
import { translate } from "@/i18n";
import Filters from "@/components/Filters.vue"
Expand Down Expand Up @@ -182,7 +193,7 @@
return getDateWithOrdinalSuffix(submissionStatus?.statusDate)
}

function getAverageVariance() {

Check warning on line 196 in src/views/Closed.vue

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (18.x) 

'getAverageVariance' is defined but never used

Check warning on line 196 in src/views/Closed.vue

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (20.x) 

'getAverageVariance' is defined but never used
// TODO: add support to display average variance
return "-"
}
Expand All @@ -196,6 +207,9 @@
await downloadClosedCountModal.present();
}

async function updateQuery(key: string, value: any) {
await store.dispatch("count/updateQuery", { key, value })
}
</script>

<style scoped>
Expand All @@ -215,6 +229,7 @@
.header {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: 10px;
}
</style>
26 changes: 24 additions & 2 deletions src/views/Draft.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,17 @@
</ion-header>

<ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter">
<ion-searchbar class="searchbar" v-model="query.queryString" @keyup.enter="updateQueryString('queryString', $event.target.value)" />
<div class="header searchbar">
<ion-searchbar v-model="query.queryString" @keyup.enter="updateQueryString('queryString', $event.target.value)" />
<ion-item lines="none">
<ion-icon slot="start" :icon="swapVerticalOutline" />
<ion-select :label="translate('Sort by')" :value="query.sortBy" @ionChange="updateQuery('sortBy', $event.detail.value)" interface="popover">
<ion-select-option value="createdDate desc">{{ translate("Created date") }}</ion-select-option>
<ion-select-option value="dueDate desc">{{ translate("Due date") }}</ion-select-option>
<ion-select-option value="countImportName asc">{{ translate("Alphabetic") }}</ion-select-option>
</ion-select>
</ion-item>
</div>
<p v-if="!cycleCounts.length" class="empty-state">
{{ translate("No cycle counts found") }}
</p>
Expand Down Expand Up @@ -71,13 +81,15 @@ import {
IonNote,
IonPage,
IonSearchbar,
IonSelect,
IonSelectOption,
IonTitle,
IonToolbar,
alertController,
onIonViewDidEnter,
onIonViewWillLeave
} from "@ionic/vue";
import { addOutline, documentOutline, documentsOutline, filterOutline, shieldCheckmarkOutline } from "ionicons/icons";
import { addOutline, documentOutline, documentsOutline, filterOutline, shieldCheckmarkOutline, swapVerticalOutline } from "ionicons/icons";
import { computed, ref } from "vue"
import { translate } from "@/i18n";
import Filters from "@/components/Filters.vue"
Expand Down Expand Up @@ -194,6 +206,10 @@ async function createCycleCount() {

return createCountAlert.present();
}

async function updateQuery(key: string, value: any) {
await store.dispatch("count/updateQuery", { key, value })
}
</script>

<style scoped>
Expand All @@ -204,4 +220,10 @@ ion-note {
align-self: center;
padding: 0;
}
.header {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: var(--spacer-xs);
}
</style>
27 changes: 24 additions & 3 deletions src/views/PendingReview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,17 @@
</ion-header>

<ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter">
<ion-searchbar class="searchbar" v-model="query.queryString" @keyup.enter="updateQueryString('queryString', $event.target.value)" />
<div class="header searchbar">
<ion-searchbar v-model="query.queryString" @keyup.enter="updateQueryString('queryString', $event.target.value)" />
<ion-item lines="none">
<ion-icon slot="start" :icon="swapVerticalOutline" />
<ion-select :label="translate('Sort by')" :value="query.sortBy" @ionChange="updateQuery('sortBy', $event.detail.value)" interface="popover">
<ion-select-option value="createdDate desc">{{ translate("Created date") }}</ion-select-option>
<ion-select-option value="dueDate desc">{{ translate("Due date") }}</ion-select-option>
<ion-select-option value="countImportName asc">{{ translate("Alphabetic") }}</ion-select-option>
</ion-select>
</ion-item>
</div>
<p v-if="!cycleCounts.length" class="empty-state">
{{ translate("No cycle counts found") }}
</p>
Expand Down Expand Up @@ -58,8 +68,8 @@

<script setup lang="ts">
import { translate } from '@/i18n'
import { filterOutline, storefrontOutline } from "ionicons/icons";
import { IonButtons, IonBadge, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonInfiniteScroll, IonInfiniteScrollContent, IonLabel, IonList, IonMenuButton, IonPage, IonSearchbar, IonTitle, IonToolbar, onIonViewWillLeave, onIonViewDidEnter } from "@ionic/vue";
import { filterOutline, storefrontOutline, swapVerticalOutline } from "ionicons/icons";
import { IonButtons, IonBadge, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonInfiniteScroll, IonInfiniteScrollContent, IonLabel, IonList, IonMenuButton, IonPage, IonSearchbar,IonSelect, IonSelectOption, IonTitle, IonToolbar, onIonViewWillLeave, onIonViewDidEnter } from "@ionic/vue";
import { computed, ref } from "vue"
import store from "@/store"
import router from "@/router"
Expand Down Expand Up @@ -122,6 +132,10 @@ async function fetchPendingCycleCounts(vSize?: any, vIndex?: any) {
}
await store.dispatch("count/fetchCycleCounts", payload)
}

async function updateQuery(key: string, value: any) {
await store.dispatch("count/updateQuery", { key, value })
}
</script>

<style scoped>
Expand All @@ -133,4 +147,11 @@ async function fetchPendingCycleCounts(vSize?: any, vIndex?: any) {
.list-item > ion-item {
width: 100%;
}

.header {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: var(--spacer-xs);
}
</style>
Loading