yearMonth split into year + month

This commit is contained in:
2024-01-09 15:43:01 +01:00
parent 90edcf14e1
commit 46b65711a8
12 changed files with 73 additions and 88 deletions

View File

@@ -33,7 +33,7 @@ const UpdateLocation = FormSchema.omit({ _id: true });
* @param formData form data
* @returns
*/
export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locationId?: string, yearMonth?: string, prevState:State, formData: FormData) => {
export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locationId?: string, year?: string, month?: string, prevState:State, formData: FormData) => {
const validatedFields = UpdateLocation.safeParse({
locationName: formData.get('locationName'),
@@ -70,14 +70,15 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
notes: locationNotes,
}
});
} else if(yearMonth) {
} else if(year && month) {
await dbClient.collection<BillingLocation>("lokacije").insertOne({
_id: (new ObjectId()).toHexString(),
userId,
userEmail,
name: locationName,
notes: locationNotes,
yearMonth: parseInt(yearMonth), // ToDo: get the current year and month
year: parseInt(year), // ToDo: get the current year and month
month: parseInt(month), // ToDo: get the current year and month
bills: [],
});
}
@@ -98,7 +99,7 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, pageIx:
// fetch `pageSize` locations for the given page index
const locations = await dbClient.collection<BillingLocation>("lokacije")
.find({ userId })
.sort({ yearMonth: -1, name: 1 })
.sort({ year: -1, month: -1, name: 1 })
.skip(pageIx * pageSize)
.limit(pageSize)
.toArray();

View File

@@ -16,20 +16,23 @@ import { withUser } from '../auth';
* @param formData form data
* @returns
*/
export const addYearMonth = withUser(async (user:AuthenticatedUser, yearMonthString: string) => {
export const addMonth = withUser(async (user:AuthenticatedUser, yearString: string, monthString: string) => {
const { id: userId } = user;
// update the bill in the mongodb
const dbClient = await getDbClient();
const yearMonth = parseInt(yearMonthString);
const year = parseInt(yearString);
const month = parseInt(monthString);
const prevYearMonth = (yearMonth - 1) % 100 === 0 ? yearMonth - 89 : yearMonth - 1;
const prevYear = month === 1 ? year - 1 : year;
const prevMonth = month === 1 ? 12 : month - 1;
// find all locations for the previous month
const prevMonthLocations = await dbClient.collection<BillingLocation>("lokacije").find({
userId, // make sure that the locations belongs to the user
yearMonth: prevYearMonth
year: prevYear,
month: prevMonth,
});
const newMonthLocationsCursor = prevMonthLocations.map((prevLocation) => {
@@ -38,7 +41,8 @@ export const addYearMonth = withUser(async (user:AuthenticatedUser, yearMonthStr
...prevLocation,
// assign a new ID
_id: (new ObjectId()).toHexString(),
yearMonth,
year: year,
month: month,
// copy bill array, but set all bills to unpaid and remove attachments and notes
bills: prevLocation.bills.map((bill) => {
return {
@@ -64,52 +68,13 @@ export async function gotoHome() {
redirect('/');
}
export const fetchBillById = withUser(async (user:AuthenticatedUser, locationID:string, billID:string) => {
export const fetchAvailableYears = withUser(async (user:AuthenticatedUser) => {
const { id: userId } = user;
const dbClient = await getDbClient();
// find a location with the given locationID
const billLocation = await dbClient.collection<BillingLocation>("lokacije").findOne({
_id: locationID,
userId // make sure that the location belongs to the user
// query mnogodb for all `yearMonth` values
const yearMonths = await dbClient.collection<BillingLocation>("lokacije").distinct("year", { userId });
return(yearMonths);
})
if(!billLocation) {
console.log(`Location ${locationID} not found`);
return(null);
}
// find a bill with the given billID
const bill = billLocation?.bills.find(({ _id }) => _id.toString() === billID);
if(!bill) {
console.log('Bill not found');
return(null);
}
return(bill);
})
export const deleteBillById = withUser(async (user:AuthenticatedUser, locationID:string, billID:string) => {
const { id: userId } = user;
const dbClient = await getDbClient();
// find a location with the given locationID
const post = await dbClient.collection<BillingLocation>("lokacije").updateOne(
{
_id: locationID, // find a location with the given locationID
userId // make sure that the location belongs to the user
},
{
// remove the bill with the given billID
$pull: {
bills: {
_id: billID
}
}
});
return(post.modifiedCount);
});

View File

@@ -1,4 +1,5 @@
import { ObjectId } from "mongodb";
import { inter } from "../ui/fonts";
export interface BillAttachment {
fileName: string;
@@ -17,8 +18,10 @@ export interface BillingLocation {
userEmail?: string | null;
/** name of the location */
name: string;
/** the value is encoded as yyyymm (i.e. 202301) */
yearMonth: number;
/** billing period year */
year: number;
/** billing period month */
month: number;
/** array of bills */
bills: Bill[];
/** (optional) notes */

View File

@@ -1,6 +1,4 @@
export const formatYearMonth = (yearMonth: number): string => {
const year = Math.floor(yearMonth / 100);
const month = yearMonth % 100;
export const formatYearMonth = (year: number, month:number): string => {
return `${year}-${month<10?"0":""}${month}`;
}

View File

@@ -1,6 +1,7 @@
import { LocationEditForm } from '@/app/ui/LocationEditForm';
export default async function Page({ params:{ id:yearMonth } }: { params: { id:string } }) {
export default async function Page({ params:{ id } }: { params: { id:string } }) {
return (<LocationEditForm yearMonth={yearMonth} />);
const [year, month] = id.split("-");
return (<LocationEditForm year={year} month={month} />);
}

View File

@@ -6,14 +6,19 @@ import { PageFooter } from './ui/PageFooter';
import { isAuthErrorMessage } from '@/app/lib/auth';
import { fetchAllLocations } from './lib/actions/locationActions';
import { formatCurrency } from './lib/formatStrings';
import { fetchAvailableYears } from './lib/actions/monthActions';
const getNextYearMonth = (yearMonth:number) => {
return(yearMonth % 100 === 12 ? yearMonth + 89 : yearMonth + 1);
const getNextYearMonth = (year:number, month:number) => {
return({
year: month<12 ? year+1 : year,
month: month<12 ? month+1 : 1
});
}
export const Page = async () => {
const locations = await fetchAllLocations();
const availableYearMonths = await fetchAvailableYears();
if(isAuthErrorMessage(locations)) {
return (
@@ -24,11 +29,14 @@ export const Page = async () => {
// if the database is in it's initial state, show the add location button for the current month
if(locations.length === 0) {
const currentYearMonth = new Date().getFullYear() * 100 + new Date().getMonth() + 1;
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
return (
<main className="flex min-h-screen flex-col p-6 bg-base-300">
<MonthTitle yearMonth={currentYearMonth} />
<AddLocationButton yyyymm={currentYearMonth} />
<MonthTitle year={currentYear} month={currentMonth} />
<AddLocationButton year={currentYear} month={currentMonth} />
<PageFooter />
</main>
);
@@ -38,13 +46,13 @@ export const Page = async () => {
return (
<main className="flex min-h-screen flex-col p-6 bg-base-300">
<AddMonthButton nextYearMonth={getNextYearMonth(locations[0].yearMonth)} />
<AddMonthButton {...getNextYearMonth(locations[0].year, locations[0].month)} />
{
locations.map((location, ix, array) => {
const isFirstLocationInMonth = ix === 0 || location.yearMonth !== array[ix-1].yearMonth;
const isLastLocationInMonth = location.yearMonth !== array[ix+1]?.yearMonth;
const isLastLocationOfFirstMonth = isLastLocationInMonth && location.yearMonth === array[0].yearMonth;
const isFirstLocationInMonth = ix === 0 || location.year !== array[ix-1].year || location.month !== array[ix-1].month;
const isLastLocationInMonth = location.year !== array[ix+1]?.year || location.month !== array[ix+1]?.month;
const isLastLocationOfFirstMonth = isLastLocationInMonth && location.year === array[0].year && location.month === array[0].month;
if(isFirstLocationInMonth) {
monthlyExpense = 0;
@@ -57,13 +65,13 @@ export const Page = async () => {
{
// show month title above the first LocationCard in the month
isFirstLocationInMonth ?
<MonthTitle key={location.yearMonth} yearMonth={location.yearMonth} /> : null
<MonthTitle key={`${location.year}-${location.month}`} year={location.year} month={location.month} /> : null
}
<LocationCard key={`${location._id}`} location={location} />
{
// show AddLocationButton as a last item in the firts month
isLastLocationOfFirstMonth ?
<AddLocationButton key={`add-loc-${location.yearMonth}`} yyyymm={location.yearMonth} /> : null
<AddLocationButton key={`add-loc-${location.year}-${location.month}`} year={location.year} month={location.month} /> : null
}
{
isLastLocationInMonth && monthlyExpense>0 ?
@@ -80,6 +88,7 @@ export const Page = async () => {
})
}
<PageFooter />
{ availableYearMonths.map(ym => <p key={`year-month-${ym}`}>{ym}</p>) }
</main>
);
}

View File

@@ -2,13 +2,15 @@ import { PlusCircleIcon } from "@heroicons/react/24/outline";
export interface AddLocationButtonProps {
/** year month at which the new billing location should be addes */
yyyymm: number
/** year at which the new billing location should be addes */
year: number
/** month at which the new billing location should be addes */
month: number
}
export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yyyymm}) =>
export const AddLocationButton:React.FC<AddLocationButtonProps> = ({year,month}) =>
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<a href={`/location/${yyyymm}/add`} className="card-body tooltip self-center" data-tip="Add a new billing location">
<a href={`/location/${year}-${month<10?"0":""}${month}/add`} className="card-body tooltip self-center" data-tip="Add a new billing location">
<span className='grid self-center' data-tip="Add a new billing location">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
</span>

View File

@@ -2,10 +2,11 @@ import { PlusCircleIcon } from "@heroicons/react/24/outline";
import React from "react";
export interface AddMonthButtonProps {
nextYearMonth: number;
year: number;
month: number;
}
export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ nextYearMonth }) =>
<a href={`/year-month/${nextYearMonth}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ year, month }) =>
<a href={`/year-month/${year}-${month<10?"0":""}${month}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
</a>

View File

@@ -11,7 +11,7 @@ export interface LocationCardProps {
location: BillingLocation
}
export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, year, month, bills }}) => {
// sum all the billAmounts
const monthlyExpense = bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
@@ -22,7 +22,7 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
<a href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
</a>
<h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
<h2 className="card-title">{formatYearMonth(year, month)} {name}</h2>
<div className="card-actions">
{
bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)

View File

@@ -10,14 +10,16 @@ import { gotoHome } from "../lib/actions/billActions";
export interface LocationEditFormProps {
/** location which should be edited */
location?: BillingLocation,
/** year month at a new billing location should be assigned */
yearMonth?: string
/** year at a new billing location should be assigned */
year?: string
/** month at a new billing location should be assigned */
month?: string
}
export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth }) =>
export const LocationEditForm:FC<LocationEditFormProps> = ({ location, year, month }) =>
{
const initialState = { message: null, errors: {} };
const handleAction = updateOrAddLocation.bind(null, location?._id, yearMonth);
const handleAction = updateOrAddLocation.bind(null, location?._id, year, month);
const [ state, dispatch ] = useFormState(handleAction, initialState);
// redirect to the main page

View File

@@ -2,8 +2,9 @@ import { FC } from "react";
import { formatYearMonth } from "../lib/format";
export interface MonthTitleProps {
yearMonth: number;
year: number;
month: number;
}
export const MonthTitle:FC<MonthTitleProps> = ({yearMonth}) =>
<div className="divider text-2xl">{`${formatYearMonth(yearMonth)}`}</div>
export const MonthTitle:FC<MonthTitleProps> = ({year, month}) =>
<div className="divider text-2xl">{`${formatYearMonth(year, month)}`}</div>

View File

@@ -1,10 +1,12 @@
import { addYearMonth } from '@/app/lib/actions/yearMonthActions';
import { addMonth } from '@/app/lib/actions/monthActions';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
export default async function Page({ params:{ id } }: { params: { id:string } }) {
await addYearMonth(id);
const [year, month] = id.split("-");
await addMonth(year, month);
revalidatePath('/');
redirect(`/`);