Refactor code to quality

prokawsar · Aug 12, 2024 · 41dbc56 · 41dbc56
1 parent 871c26d
commit 41dbc56
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 40 deletions.
diff --git a/src/lib/elements/PaperItem.svelte b/src/lib/elements/PaperItem.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte'
+	import Input from './Input.svelte'
+	import { receive, send } from '$lib/utils/tools'
+	import { fields, placeholders } from '$lib/utils/constants'
+	import { createEventDispatcher } from 'svelte'
+	import type { Paper } from '$lib/utils/services'
+
+	export let paper: Paper
+	export let index: number
+	export let totalPaper: number
+	export let perPaperResult: Map<string, number>
+
+	const dispatch = createEventDispatcher()
+</script>
+
+<div
+	id={paper.id}
+	class="flex flex-row items-center justify-between rounded"
+	in:receive={{ key: paper.id }}
+	out:send={{ key: paper.id }}
+>
+	<div class="flex flex-row gap-[3px] items-center overflow-x-auto">
+		<button
+			disabled={totalPaper == 1 && index == 0}
+			class="border border-gray-400 rounded-md text-red-600 p-1 w-fit disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-opacity-45"
+			on:click={() => dispatch('remove')}
+		>
+			<Icon icon="ph:trash-light" width="16px" />
+		</button>
+		{#each fields as field}
+			<Input bind:value={paper[field]} placeholder={placeholders[field]} on:keydown />
+		{/each}
+	</div>
+	<div class="flex flex-grow justify-center px-1">
+		<p
+			class="{perPaperResult.get(paper.id) ? 'font-semibold' : 'font-light text-gray-400'} pr-[2px]"
+		>
+			= {perPaperResult.get(paper.id)?.toFixed(2) || 'total'}
+		</p>
+	</div>
+</div>
diff --git a/src/lib/utils/constants.ts b/src/lib/utils/constants.ts
@@ -0,0 +1,18 @@
+export const PAPER_FIXED = 1550000
+export const MAX_PAPER = 10
+export const MAX_HISTORY = 20
+
+export const paperFields = {
+	id: '',
+	length: '',
+	width: '',
+	thickness: '',
+	rate: ''
+}
+export const placeholders: { [key: string]: string } = {
+	length: 'L',
+	width: 'W',
+	thickness: 'GSM',
+	rate: 'R'
+}
+export const fields = Object.keys(paperFields).filter((key) => key !== 'id')
diff --git a/src/lib/utils/services.ts b/src/lib/utils/services.ts
@@ -1,4 +1,5 @@
 import { supabase } from '$lib/db/supabaseClient'
+import { PAPER_FIXED } from './constants'
 
 export type Paper = {
 	id: string
@@ -17,10 +18,6 @@ export type CostHistoryType = {
 	created_at?: string
 }
 
-export const PAPER_FIXED = 1550000
-export const MAX_PAPER = 10
-export const MAX_HISTORY = 20
-
 export const calculateCost = (paper: Paper): number => {
 	const paperSize = parseFloat(paper.length) * parseFloat(paper.width) * parseFloat(paper.thickness)
 	const result = paperSize / PAPER_FIXED

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -32,13 +32,6 @@
 </script>
 
 <main class="h-[100svh] flex flex-col justify-between">
-	<Toaster
-		duration={2000}
-		richColors
-		toastOptions={{
-			class: 'py-2 mb-8'
-		}}
-	/>
 	{#if $navigating}
 		<div
 			class="absolute bg-white bg-opacity-80 flex h-full w-full items-center justify-center z-10"
@@ -61,6 +54,14 @@
 		<slot />
 	</div>
 
+	<Toaster
+		duration={2000}
+		richColors
+		toastOptions={{
+			class: 'py-2 mb-8'
+		}}
+	/>
+
 	<!-- Footer menu section -->
 	<div
 		class="max-w-6xl mx-auto w-full flex flex-row h-11 px-5 bg-slate-50 border-t border-teal-500 items-center justify-between rounded-t-lg"

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -1,37 +1,15 @@
 <script lang="ts">
 	import Button from '$lib/elements/Button.svelte'
-	import Input from '$lib/elements/Input.svelte'
+	import PaperItem from '$lib/elements/PaperItem.svelte'
 	import Result from '$lib/elements/Result.svelte'
 	import { focusedInputStore, totalHistoryStore } from '$lib/stores'
-	import {
-		addHistory,
-		calculateCost,
-		getTotalHistory,
-		MAX_HISTORY,
-		MAX_PAPER,
-		type Paper
-	} from '$lib/utils/services'
-	import { makeid, receive, send } from '$lib/utils/tools'
-	import Icon from '@iconify/svelte'
+	import { MAX_HISTORY, MAX_PAPER, paperFields } from '$lib/utils/constants'
+	import { addHistory, calculateCost, getTotalHistory, type Paper } from '$lib/utils/services'
+	import { makeid } from '$lib/utils/tools'
 	import mixpanel from 'mixpanel-browser'
 	import { onMount, tick } from 'svelte'
 	import { toast } from 'svelte-sonner'
 
-	const paperFields = {
-		id: '',
-		length: '',
-		width: '',
-		thickness: '',
-		rate: ''
-	}
-	const placeholders: { [key: string]: string } = {
-		length: 'L',
-		width: 'W',
-		thickness: 'GSM',
-		rate: 'R'
-	}
-	const fields = Object.keys(paperFields).filter((key) => key !== 'id')
-
 	let paperCount: Paper[] = [{ ...paperFields, id: makeid(5) }]
 	let perPaperResult: Map<string, number> = new Map()
 	let finalPrice: number = 0
@@ -192,8 +170,16 @@
 			class="flex flex-col gap-[2px] overflow-y-auto max-w-3xl max-h-[85%] py-2 w-full"
 			bind:this={inputGroupRef}
 		>
-			{#each paperCount as paper, i (paper.id)}
-				<div
+			{#each paperCount as paper, index (paper.id)}
+				<PaperItem
+					{index}
+					bind:paper
+					{perPaperResult}
+					totalPaper={paperCount.length}
+					on:keydown={(event) => handleKeyDown(event)}
+					on:remove={() => removePaper(paper.id)}
+				/>
+				<!-- <div
 					id={paper.id}
 					class="flex flex-row items-center justify-between rounded"
 					in:receive={{ key: paper.id }}
@@ -224,7 +210,7 @@
 							= {perPaperResult.get(paper.id)?.toFixed(2) || 'total'}
 						</p>
 					</div>
-				</div>
+				</div> -->
 			{/each}
 		</div>