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

[#138] Fix request history visibility and add status field #142

Merged
merged 3 commits into from
Apr 20, 2024
Merged

[#138] Fix request history visibility and add status field #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c26ccc
[#138] Add status field tracking to requests
delano Apr 19, 2024
39bf1cf
[#138] Improve request list visibility
delano Apr 20, 2024
1281100
Update apps/ui/components/requests/List.vue
delano Apr 20, 2024
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
4 changes: 4 additions & 0 deletions apps/api/afbcore/serializers/food_request_serializer.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ class Meta:
"date_requested",
"safe_drop_agree",
"safe_drop_instructions",
"status",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider removing "status" from read_only_fields in FoodRequestUpdateSerializer if the status is intended to be updated by the user or through the API. This change allows the status field to be updated when necessary. [important]

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not meant to be updatable via the API. Only by logic in our code.

]
read_only_fields = [
"id",
Expand All @@ -39,6 +40,7 @@ class Meta:
# prevent the UUID value from making it into
# the database -- leading to a NULL error
# since a request must have a user.
"status",
]


Expand Down Expand Up @@ -71,6 +73,7 @@ class Meta:
"date_requested",
"safe_drop_agree",
"safe_drop_instructions",
"status",
]
read_only_fields = [
"id",
Expand All @@ -80,4 +83,5 @@ class Meta:
"address_canadapost_id",
"address_google_place_id",
"pet_details",
"status",
]
3 changes: 2 additions & 1 deletion apps/ui/components/requests/FoodRequestForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,13 @@ const submitFoodRequest = async (form$: any, FormData: any) => {
};

/**
* WARNING! ATTENTION! ACHTUNG! ATENCIÓN!
* WARNING! ATTENTION! ACHTUNG! ATENCIÓN! 注意! ВНИМАНИЕ! توجه!
*
* Never define const state = ref() outside of <script setup> or setup() function.
* Such state will be shared across all users visiting your website and
* can lead to memory leaks!
* Instead use const useX = () => useState('x')
*
* -- https://nuxt.com/docs/getting-started/state-management#best-practices
*
**/
Expand Down
49 changes: 23 additions & 26 deletions apps/ui/components/requests/List.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,16 @@ const props = defineProps<{
cta?: Boolean
}>()

// A list of all the users in your account including their name, title, email and role.
const visibleRequests = ref(props.requests || [])
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implement server-side filtering for the requests based on their status to improve performance and scalability. This approach reduces the client-side workload and ensures the application can handle a large number of requests efficiently. [important]

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're using this approach for quicker prototyping while we gather the initial feedback from users.

const hasOpenRequests = ref(false)

onMounted(() => {
console.log('requests', visibleRequests.value)
let computedValue = computed(() => visibleRequests.value.some(request => request.status !== 'delivered'))
hasOpenRequests.value = computedValue.value
})


</script>

<template>
Expand All @@ -21,42 +30,30 @@ const props = defineProps<{
<p class="mt-2 text-sm text-gray-700 dark:text-gray-200">{{ description }}</p>
</div>
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
<a v-if="cta" type="button" href="/requests/new"
<a v-if="cta && !hasOpenRequests" type="button" href="/requests/new"
class="block rounded-md bg-primary px-3 py-2 text-center text-sm font-semibold text-white dark:text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ">
Request Pet Food
</a>
</div>
</div>
<!-- {
"address_text": "1201 Kingsway, Med Hat",
"address_google_place_id": null,
"address_canadapost_id": null,
"address_latitude": null,
"address_longitude": null,
"address_buildingtype": "NOT_SPECIFIED",
"address_details": {},
"contact_phone": "+12507772171",
"contact_email": "",
"contact_name": "Pearl",
"method_of_contact": "Email",
"pet_details": {},
"confirm_correct": true,
"accept_terms": true,
"date_requested": "2024-04-06"
} -->

<div class="-mx-4 mt-8 sm:-mx-0">
<table class="min divide-y divide-gray-300 dark:divide-gray-300">
<thead>
<tr>
<th scope="col" class="hidden py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white lg:table-cell sm:pl-0 ">Date</th>
<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white lg:table-cell">Contact</th>
<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white lg:table-cell">Address</th>
<th scope="col" class="hidden py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:table-cell sm:pl-0 ">Date</th>
<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white sm:table-cell">Contact</th>
<th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white sm:table-cell">Address</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white sm:table-cell sm:pl-0 ">Contents</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0"><span class="sr-only">View</span></th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white dark:bg-slate-900 dark:divide-gray-500">
<tr v-for="request in requests" :key="request.id">
<tbody class="divide-y divide-gray-200 bg-white dark:bg-gray-900 dark:divide-gray-500">
<tr
v-for="(request, index) in requests"
:key="request.id"
:class="(index === 0) ? 'bg-slate-100 dark:bg-slate-800': ''"
>
<td class="max-w-sm w-full py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-white sm:w-auto sm:max-w-none sm:pl-0">
{{ request.date_requested }}
<dl class="font-normal lg:hidden">
Expand All @@ -68,11 +65,11 @@ const props = defineProps<{
<dd class="mt-1 truncate text-gray-500 dark:text-gray-200">{{ request.address_text }}</dd>
</dl>
</td>
<td class="max-w-xs hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-200 lg:table-cell">{{ request.contact_name }}</td>
<td class="max-w-xs hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-200 lg:table-cell">{{ request.contact_name }}</td>
<td class="max-w-xs hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-200 lg:table-cell">{{ request.address_text }}</td>
<td class="max-w-xs hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-200 lg:table-cell">{{ request.pet_details?.pets_blob }}</td>
<td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
<a :href="`/requests/${request.id}/details`" class="text-indigo-600 hover:text-indigo-900 dark:text-blue-400">View<span class="sr-only">, {{ request.name
<a :href="`/requests/${request.id}/details`" class="text-indigo-600 hover:text-indigo-900 dark:text-blue-400">{{ request.status }}<span class="sr-only">, {{ request.name
}}</span></a>
</td>
</tr>
Expand Down
11 changes: 10 additions & 1 deletion apps/ui/pages/dashboard/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,22 @@ definePageMeta({
layout: 'dashboard',
})


/**
* Retrieves the authentication status, data, and token using the useAuth() function.
*
* @returns {{
* status: string,
* data: any,
* token: string
* }} The authentication status, data, and token.
*/
const {
status: authStatus,
data: authData,
token: authToken,
} = useAuth();


const requests = ref([]);

const fetchRequests = async () => {
Expand Down
1 change: 1 addition & 0 deletions apps/ui/pages/requests/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ onMounted(() => {
:cta="true"
:requests="requests"
/>

</UDashboardPanelContent>
</UDashboardPanel>
</UDashboardPage>
Expand Down
2 changes: 1 addition & 1 deletion pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading