-
Notifications
You must be signed in to change notification settings - Fork 654
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #807 from ruchamahabal/forms
- Loading branch information
Showing
63 changed files
with
4,772 additions
and
358 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<template> | ||
<div | ||
class="flex flex-col bg-white rounded-lg mt-5 overflow-auto" | ||
v-if="props.items?.length" | ||
> | ||
<router-link | ||
v-for="link in props.items" | ||
:key="link.name" | ||
:to="{ name: 'EmployeeAdvanceDetailView', params: { id: link.name } }" | ||
class="flex flex-row p-3.5 items-center justify-between border-b cursor-pointer" | ||
> | ||
<EmployeeAdvanceItem :doc="link" /> | ||
</router-link> | ||
<router-link | ||
:to="{ name: 'EmployeeAdvanceFormView' }" | ||
v-slot="{ navigate }" | ||
> | ||
<div class="flex flex-col bg-white w-full py-5 px-3.5 mt-0 border-none"> | ||
<Button @click="navigate" appearance="secondary" class="py-2"> | ||
Request an Advance | ||
</Button> | ||
</div> | ||
</router-link> | ||
</div> | ||
<EmptyState message="You have no advances" v-else /> | ||
</template> | ||
<script setup> | ||
import EmployeeAdvanceItem from "@/components/EmployeeAdvanceItem.vue" | ||
const props = defineProps({ | ||
items: { | ||
type: Array, | ||
}, | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
<template> | ||
<div class="flex flex-col w-full justify-center gap-2.5"> | ||
<div class="flex flex-row items-center justify-between"> | ||
<div class="flex flex-row items-start gap-3 grow"> | ||
<WalletIcon class="h-4 w-4 mt-0.5 text-gray-500" /> | ||
<div class="flex flex-col items-start"> | ||
<div | ||
v-if="props.doc.balance_amount" | ||
class="text-xl font-bold text-gray-800 leading-6" | ||
> | ||
{{ `${currency} ${props.doc.balance_amount} /` }} | ||
<span class="text-gray-600"> | ||
{{ `${currency} ${props.doc.paid_amount}` }} | ||
</span> | ||
</div> | ||
<div v-else class="text-xl font-bold text-gray-800 leading-6"> | ||
{{ `${currency} ${props.doc.advance_amount}` }} | ||
</div> | ||
<div class="text-sm font-normal text-gray-500"> | ||
<span> | ||
{{ props.doc.purpose }} | ||
</span> | ||
<span class="whitespace-pre"> · </span> | ||
<span class="whitespace-nowrap"> | ||
{{ postingDate }} | ||
</span> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="flex flex-row justify-end items-center gap-2"> | ||
<Badge :colorMap="colorMap" :label="props.doc.status" /> | ||
<FeatherIcon name="chevron-right" class="h-5 w-5 text-gray-500" /> | ||
</div> | ||
</div> | ||
<div | ||
v-if="props.isTeamRequest" | ||
class="flex flex-row items-center gap-2 pl-8" | ||
> | ||
<EmployeeAvatar :employeeID="props.doc.employee" /> | ||
<div class="text-sm text-gray-600 grow"> | ||
{{ props.doc.employee_name }} | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import { FeatherIcon, Badge } from "frappe-ui" | ||
import { computed, inject } from "vue" | ||
import { getCurrencySymbol } from "@/data/currencies" | ||
import EmployeeAvatar from "@/components/EmployeeAvatar.vue" | ||
import WalletIcon from "@/components/icons/WalletIcon.vue" | ||
const dayjs = inject("$dayjs") | ||
const props = defineProps({ | ||
doc: { | ||
type: Object, | ||
}, | ||
isTeamRequest: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
}) | ||
const colorMap = { | ||
Paid: "green", | ||
Unpaid: "yellow", | ||
Claimed: "blue", | ||
Returned: "gray", | ||
"Partly Claimed and Returned": "yellow", | ||
} | ||
const currency = computed(() => getCurrencySymbol(props.doc.currency)) | ||
const postingDate = computed(() => { | ||
return dayjs(props.doc.posting_date).format("D MMM") | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<template> | ||
<div | ||
class="text-sm text-gray-500 rounded-lg flex flex-col items-center bg-gray-100 p-5" | ||
> | ||
{{ props.message }} | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
const props = defineProps({ | ||
message: { type: String }, | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
<template> | ||
<div class="flex flex-row justify-between items-center"> | ||
<h2 class="text-lg font-semibold text-gray-800">Settle against Advances</h2> | ||
</div> | ||
|
||
<div class="flex flex-col gap-2.5" v-if="expenseClaim.advances?.length"> | ||
<!-- Advance Card --> | ||
<div | ||
v-for="advance in expenseClaim.advances" | ||
:key="advance.name" | ||
class="flex flex-col bg-white border shadow-sm rounded-lg p-3.5" | ||
:class="[ | ||
advance.selected ? 'border-blue-500' : '', | ||
isReadOnly ? '' : 'cursor-pointer', | ||
]" | ||
@click="toggleAdvanceSelection(advance)" | ||
> | ||
<div class="flex flex-row justify-between items-center"> | ||
<div class="flex flex-row items-start gap-3"> | ||
<Input | ||
type="checkbox" | ||
class="mt-0.5" | ||
v-model="advance.selected" | ||
:disabled="isReadOnly" | ||
/> | ||
<div class="flex flex-col items-start gap-1"> | ||
<div class="text-lg font-semibold text-gray-800"> | ||
{{ advance.purpose || advance.employee_advance }} | ||
</div> | ||
<div class="flex flex-row items-center gap-3 justify-between"> | ||
<div class="text-sm font-normal text-gray-500"> | ||
{{ | ||
`Unclaimed Amount: ${currency} ${advance.unclaimed_amount}` | ||
}} | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="flex flex-row items-center gap-2"> | ||
<span class="text-normal"> | ||
{{ currency }} | ||
</span> | ||
<Input | ||
type="number" | ||
class="w-20" | ||
v-model="advance.allocated_amount" | ||
@input="(v) => (advance.selected = v)" | ||
@click.stop | ||
:disabled="isReadOnly" | ||
:max="advance.unclaimed_amount" | ||
min="0" | ||
/> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<EmptyState message="No advances found" v-else /> | ||
</template> | ||
<script setup> | ||
const props = defineProps({ | ||
expenseClaim: { | ||
type: Object, | ||
required: true, | ||
}, | ||
currency: { | ||
type: String, | ||
required: true, | ||
}, | ||
isReadOnly: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
}) | ||
function toggleAdvanceSelection(advance) { | ||
if (props.isReadOnly) return | ||
advance.selected = !advance.selected | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
<template> | ||
<div class="flex flex-col w-full justify-center gap-2.5"> | ||
<div class="flex flex-row items-center justify-between"> | ||
<div class="flex flex-row items-start gap-3 grow"> | ||
<ExpenseIcon class="h-5 w-5 mt-0.5 text-gray-500" /> | ||
<div class="flex flex-col items-start"> | ||
<div class="text-lg font-normal text-gray-800"> | ||
{{ claimTitle }} | ||
</div> | ||
<div class="text-sm font-normal text-gray-500"> | ||
<span> | ||
{{ `${currency} ${props.doc.total_claimed_amount}` }} | ||
</span> | ||
<span class="whitespace-pre"> · </span> | ||
<span class="whitespace-nowrap"> | ||
{{ claimDates }} | ||
</span> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="flex flex-row justify-end items-center gap-2"> | ||
<span | ||
class="text-gray-600 bg-gray-100 font-medium rounded-lg text-xs px-2" | ||
> | ||
{{ props.doc.status }} | ||
</span> | ||
<Badge :colorMap="colorMap" :label="approvalStatus" /> | ||
<FeatherIcon name="chevron-right" class="h-5 w-5 text-gray-500" /> | ||
</div> | ||
</div> | ||
<div | ||
v-if="props.isTeamRequest" | ||
class="flex flex-row items-center gap-2 pl-8" | ||
> | ||
<EmployeeAvatar :employeeID="props.doc.employee" /> | ||
<div class="text-sm text-gray-600 grow"> | ||
{{ props.doc.employee_name }} | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import { FeatherIcon, Badge } from "frappe-ui" | ||
import { computed, inject } from "vue" | ||
import { getCompanyCurrencySymbol } from "@/data/currencies" | ||
import EmployeeAvatar from "@/components/EmployeeAvatar.vue" | ||
import ExpenseIcon from "@/components/icons/ExpenseIcon.vue" | ||
const dayjs = inject("$dayjs") | ||
const props = defineProps({ | ||
doc: { | ||
type: Object, | ||
}, | ||
isTeamRequest: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
}) | ||
const colorMap = { | ||
Approved: "green", | ||
Rejected: "red", | ||
Pending: "yellow", | ||
} | ||
const claimTitle = computed(() => { | ||
let title = props.doc.expense_type | ||
if (props.doc.total_expenses > 1) { | ||
title += ` & ${props.doc.total_expenses - 1} more` | ||
} | ||
return title | ||
}) | ||
const claimDates = computed(() => { | ||
if (!props.doc.from_date && !props.doc.to_date) | ||
return dayjs(props.doc.posting_date).format("D MMM") | ||
if (props.doc.from_date === props.doc.to_date) { | ||
return dayjs(props.doc.from_date).format("D MMM") | ||
} else { | ||
return `${dayjs(props.doc.from_date).format("D MMM")} - ${dayjs( | ||
props.doc.to_date | ||
).format("D MMM")}` | ||
} | ||
}) | ||
const currency = computed(() => getCompanyCurrencySymbol(props.doc.company)) | ||
const approvalStatus = computed(() => { | ||
return props.doc.approval_status === "Draft" | ||
? "Pending" | ||
: props.doc.approval_status | ||
}) | ||
</script> |
Oops, something went wrong.