ruangrupa/kios-webapp
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restructure types for retailer-centric flow

Browse Source
This commit is contained in:
toqvist 2024-04-04 12:45:26 +02:00
parent 2ebb81a981
commit 174a163cd3
9 changed files with 221 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
astro/src/components/KiosMap.tsx
View File

@ -6,12 +6,19 @@ import L, { LatLngBounds } from 'leaflet';
import { useQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query";
import axios from "axios";
//Todo: Move types to own file
type User = {
name: string;
id: string;
email: string;
phoneNumber: string;
}
type Product = {
id: string;
productTitle: string;
weight: number;
img: string;
createdAt: string;
updatedAt: string;
};
@ -24,6 +31,8 @@ type Product = {
type Maker = {
id: string;
name: string;
email: string;
phoneNumber: string;
location: [number, number];
products: Product[];
createdAt: string;
@ -33,48 +42,55 @@ type Maker = {
type Retailer = {
id: string;
name: string;
email: string;
phoneNumber: string;
location: [number, number];
products: Product[];
createdAt: string;
updatedAt: string;
};
//Todo: the courier should not hold the starting and end points
type Courier = {
id: string;
name: string;
startingPoint: string;
destination: string;
departureDate: string;
arrivalDate: string;
weightAllowance: number;
createdAt: string;
updatedAt: string;
}
const DISPATCH_STATUS = ['requested', 'accepted', 'archived'] as const;
type DispatchStatus = typeof DISPATCH_STATUS[number];
type Dispatch = {
id: string;
dispatchesCode: string;
products: Product[];
typeOfTransportation: string[];
courier: Courier;
timeSensitive: boolean;
status: string[];
dispatchesCode: string; //Human readable id
createdAt: string;
updatedAt: string;
maker: Maker;
retailer: Retailer;
products: Product[];
courier: User;
timeSensitive: boolean;
status: DispatchStatus[];
departureDate: string;
arrivalDate: string;
weightAllowance: number;
}
//Todo: update fetch url endpoints
//Todo: Move queryclient and hooks to own file
const ROOT_URL = "http://localhost:3001"
//Todo: Move axios stuff
const API_URL = "http://localhost:3001"
const headers = {
"Content-Type": "application/json",
}
const getMakers = async () => {
const url = `${ROOT_URL}/api/makers`
const url = `${API_URL}/api/makers`
console.log("Fetching url:", url)
const response = await axios.get(url);
const makers = response.data.docs;
const makers: Maker[] = response.data.docs;
console.log(`Fetch result from ${url}`, makers)
return makers;
@ -89,18 +105,18 @@ const useGetMakers = () => {
}
const getRetailers = async () => {
const url = `${ROOT_URL}/api/retailers`
const url = `${API_URL}/api/retailers`
console.log("Fetching url:", url)
const response = await axios.get(url);
const retailers = response.data.docs;
const retailers:Retailer[] = response.data.docs;
console.log(`Fetch result from ${url}`, retailers)
return retailers;
}
const useGetRetailers = () => {
return useQuery<Dispatch[]>({
return useQuery<Retailer[]>({
queryFn: () => getRetailers(),
queryKey: ['retailers'],
enabled: true
@ -108,11 +124,11 @@ const useGetRetailers = () => {
}
const getDispatches = async () => {
const url = `${ROOT_URL}/api/dispatches`
const url = `${API_URL}/api/dispatches`
console.log("Fetching url:", url)
const response = await axios.get(url);
const dispatches = response.data.docs;
const dispatches:Dispatch[] = response.data.docs;
console.log(`Fetch result from ${url}`, dispatches)
return dispatches;
@ -188,11 +204,11 @@ export const KiosMap = () => {
</LayerGroup>
}
{/* {dispatches &&
{dispatches &&
<LayerGroup>
{dispatches.map((dispatch: any, index: number) => {
const start = dispatch.startingPoint.location;
const end = dispatch.endPoint.location;
const start = dispatch.maker.location;
const end = dispatch.retailer.location;
let productsString = '';
dispatch.products.forEach((product: any, i: number) => {
@ -200,19 +216,19 @@ export const KiosMap = () => {
});
const myDashArray =
dispatch.status === 'routeRequested' ? '20, 10' :
dispatch.status === 'completed' ? '1, 5' :
dispatch.status === 'requested' ? '20, 10' :
dispatch.status === 'archived' ? '1, 5' :
'0, 0';
return (
<div key={index}>
<Marker position={[start[0], start[1]]}
//icon={blackDotIcon}
icon={blackDotIcon}
>
<Popup>{dispatch.startingPoint.name}</Popup>
</Marker>
<Marker position={[end[0], end[1]]}
//icon={blackDotIcon}
icon={blackDotIcon}
>
<Popup>{dispatch.endPoint.name}</Popup>
</Marker>
@ -224,7 +240,7 @@ export const KiosMap = () => {
);
})}
</LayerGroup>
} */}
}
</MapContainer >
</div>
);

23
astro/src/types.ts
View File

@ -33,7 +33,8 @@ export interface Post {
}
export interface User {
id: string;
name?: string;
name: string;
phoneNumber: number;
updatedAt: string;
createdAt: string;
email: string;
@ -59,12 +60,6 @@ export interface Media {
}
export interface Courier {
id: string;
name: string;
startingPoint?: string;
destination?: string;
departureDate?: string;
arrivalDate?: string;
weightAllowance?: number;
updatedAt: string;
createdAt: string;
}
@ -72,18 +67,17 @@ export interface Dispatch {
id: string;
dispatchesCode: string;
products?: string[] | Product[];
startingPoint?: string | Maker;
endPoint?: string | Retailer;
typeOfTransportation?: ('air' | 'car' | 'train' | 'boat')[];
courier: string | Courier;
timeSensitive?: boolean;
status?: ('routeRequested' | 'inTransit' | 'completed')[];
courier?: string | Courier;
maker?: string | Maker;
retailer?: string | Retailer;
status?: ('requested' | 'accepted' | 'archived')[];
updatedAt: string;
createdAt: string;
}
export interface Product {
id: string;
productTitle: string;
picture?: string | Media;
updatedAt: string;
createdAt: string;
}
@ -107,8 +101,7 @@ export interface Retailer {
* @maxItems 2
*/
location?: [number, number];
products?: string[] | Product[];
salesPoint?: string;
requestedProducts?: string[] | Product[];
updatedAt: string;
createdAt: string;
}

27
payload/src/collections/Couriers.ts
View File

@ -10,34 +10,9 @@ const Couriers: CollectionConfig = {
},
fields: [
{
name: 'name',
name: 'id',
type: 'text',
required: true,
},
{
name: 'startingPoint',
label: 'Traveling from',
type: 'text', // TODO use geopicker here
},
{
name: 'destination',
label: 'Traveling to',
type: 'text' // TODO user geopicker here
},
{
name: 'departureDate',
label: 'Departure date',
type: 'date'
},
{
name: 'arrivalDate',
label: 'Arrival date',
type: 'date'
},
{
name: 'weightAllowance',
label: 'Weight Allowance (KG)',
type: 'number'
}
],
};

94
payload/src/collections/Dispatches.ts
View File

@ -18,74 +18,46 @@ const Dispatches: CollectionConfig = {
name: 'products',
type: 'relationship',
relationTo: 'products',
hasMany: true,
},
{
name: 'startingPoint',
type: 'relationship',
relationTo: 'makers',
hasMany: false,
},
{
name: 'endPoint',
type: 'relationship',
relationTo: 'retailers',
hasMany: false,
},
{
name: 'typeOfTransportation',
type: 'select',
hasMany: true,
options: [
{
label: 'Air',
value: 'air'
},
{
label: 'Car',
value: 'car'
},
{
label: 'Train',
value: 'train'
},
{
label: 'Boat',
value: 'boat'
}
]
hasMany: true // required
// required,
},
{
name: 'courier',
type: 'relationship',
relationTo: 'couriers',
hasMany: false,
required: true
required: false
},
{
name: 'timeSensitive',
type: 'checkbox',
name: 'maker',
type: 'relationship',
relationTo: 'makers',
hasMany: false,
required: false
},
{
name: 'status', // required
type: 'select', // required
name: 'retailer',
type: 'relationship',
relationTo: 'retailers',
hasMany: false,
required: false
},
{
name: 'status',
type: 'select',
hasMany: true,
// admin: {
// isClearable: true,
// isSortable: true, // use mouse to drag and drop different values, and sort them according to your choice
// },
options: [
{
label: 'Route requested',
value: 'routeRequested',
label: 'Requested',
value: 'requested',
},
{
label: 'In transit',
value: 'inTransit',
label: 'Accepted',
value: 'accepted',
},
{
label: 'Completed',
value: 'completed',
label: 'Archived',
value: 'archived',
},
],
}
@ -93,3 +65,23 @@ const Dispatches: CollectionConfig = {
};
export default Dispatches;
// type Dispatch = {
// id: string;
// dispatchesCode: string; //Human readable id
// createdAt: string;
// updatedAt: string;
// maker: Maker;
// retailer: Retailer;
// products: Product[];
// courier: User;
// timeSensitive: boolean;
// status: DispatchStatus[];
// departureDate: string;
// arrivalDate: string;
// weightAllowance: number;
// }

12
payload/src/collections/Makers.ts
View File

@ -11,22 +11,20 @@ const Makers: CollectionConfig = {
},
fields: [
{
name: 'name', // required
type: 'text', // required
name: 'name',
type: 'text',
required: true,
},
//geoPickerField, is a bit broken right now
{
name: 'location',
type: 'point',
label: 'Location',
},
{
name: 'products', // required
type: 'relationship', // required
relationTo: 'products', // required
name: 'products',
type: 'relationship',
relationTo: 'products',
hasMany: true,
// TODO: make the name of the product visible in the dropdown
}
],
};

10
payload/src/collections/Products.ts
View File

@ -10,10 +10,16 @@ const Products: CollectionConfig = {
},
fields: [
{
name: 'productTitle', // required
type: 'text', // required
name: 'productTitle',
type: 'text',
required: true,
},
{
name: 'picture',
type: 'relationship',
relationTo: 'media',
hasMany: false
}
],
};

15
payload/src/collections/Retailers.ts
View File

@ -10,8 +10,8 @@ const Retailers: CollectionConfig = {
},
fields: [
{
name: 'name', // required
type: 'text', // required
name: 'name',
type: 'text',
required: true,
},
{
@ -20,16 +20,11 @@ const Retailers: CollectionConfig = {
label: 'Location',
},
{
name: 'products', // required
type: 'relationship', // required
relationTo: 'products', // required
name: 'requestedProducts',
type: 'relationship',
relationTo: 'products',
hasMany: true,
},
{
name: 'salesPoint',
type: 'text',
label: 'Where do you plan to sell/exhibit products?'
}
],
};

11
payload/src/collections/Users.ts
View File

@ -14,6 +14,17 @@ const Users: CollectionConfig = {
{
name: 'name',
type: 'text',
required: true
},
{
name: 'phoneNumber',
type: 'number',
required: true
},
{
name: 'email',
type: 'email',
required: true
}
],
};

48
sampleResponses/How dispatches work.ts Normal file
View File

@ -0,0 +1,48 @@
//Dispatch Represents:
//- a connection between two locations
//- An agreement between a courier, a maker and a retailer to transport goods (Products) from point A (maker) to point B (retailer)
//- A dispatch has 4 statuses: offered (by a courier), requested (by a maker/retailer), accepted and archived
//- An offered dispatch will not yet have a Product, Maker, or Retailer.
//- A requested dispatch will have a Product, Maker and Retailer, but not a courier
//- A dispatch is accepted (moved from offered/requested) once all parties have accepted the conditions
//- A retailer accepts an offered route by responding with products (courier must then also confirm, but does not provide further data)
//- A courier accepts a requested route by responding with a date of arrival (the retailer must then confirm, but does not provide further data)
//- A retailer requests a dispatch by requesting a product they want to stock
//- A maker requests a dispatch by requesting to stock a product with a retailer
const DISPATCH_STATUS = ['requested', 'accepted', 'archived'] as const;
type DispatchStatus = typeof DISPATCH_STATUS[number];
type Dispatch = {
id: string;
dispatchesCode: string; //Human readable id
createdAt: string;
updatedAt: string;
maker: Maker;
retailer: Retailer;
products: Product[];
courier: User;
timeSensitive: boolean;
status: DispatchStatus[];
departureDate: string;
arrivalDate: string;
weightAllowance: number;
}
//Courier is just a person (User) and doesn't need to be its own thing. A user is a courier when they accept a dispatch as a courier
// Delete the couriers collection
type Product = {
id: string;
productTitle: string;
weight: number;
img: string;
createdAt: string;
updatedAt: string;
};