Skip to content

Commit

Permalink
fix: modal height exceeding viewport
Browse files Browse the repository at this point in the history
  • Loading branch information
@ruchamahabal
ruchamahabal committed Aug 22, 2023
1 parent 80331de commit 83d39a6
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 155 deletions.
135 changes: 71 additions & 64 deletions frontend/src/components/ListFiltersActionSheet.vue
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,86 @@
<template>
<!-- Filter Action Sheet -->
<div class="bg-white w-full flex flex-col items-center justify-center pb-5">
<div class="w-full pt-8 pb-5 border-b text-center">
<div
class="bg-white w-full flex flex-col items-center justify-center pb-5 max-h-[calc(100vh-5rem)]"
>
<div class="w-full pt-8 pb-5 border-b text-center sticky top-0 z-[100]">
<span class="text-gray-900 font-bold text-xl">Filters</span>
</div>
<div class="w-full flex flex-col items-center justify-center gap-5 p-4">
<div
v-for="filter in filterConfig"
:key="filter.fieldname"
class="flex flex-col w-full gap-1"
>
<!-- Status filter -->

<div class="w-full p-4 overflow-auto">
<div class="flex flex-col gap-5 items-center justify-center">
<div
class="flex flex-col"
v-if="['status', 'approval_status'].includes(filter.fieldname)"
v-for="filter in filterConfig"
:key="filter.fieldname"
class="flex flex-col w-full gap-1"
>
<div class="text-gray-800 font-semibold text-lg">
{{ filter.label }}
</div>
<div class="flex flex-row gap-2 mt-2 flex-wrap">
<Button
v-for="option in filter.options"
appearance="white"
@click="setStatusFilter(filter.fieldname, option)"
:class="[
option === filters[filter.fieldname].value
? '!border !border-blue-500 !text-blue-500'
: '',
]"
>
{{ option }}
</Button>
<!-- Status filter -->
<div
class="flex flex-col"
v-if="['status', 'approval_status'].includes(filter.fieldname)"
>
<div class="text-gray-800 font-semibold text-lg">
{{ filter.label }}
</div>
<div class="flex flex-row gap-2 mt-2 flex-wrap">
<Button
v-for="option in filter.options"
appearance="white"
@click="setStatusFilter(filter.fieldname, option)"
:class="[
option === filters[filter.fieldname].value
? '!border !border-blue-500 !text-blue-500'
: '',
]"
>
{{ option }}
</Button>
</div>
</div>
</div>

<!-- Field filters -->
<div v-else class="flex flex-col gap-2">
<div class="text-gray-800 font-semibold text-lg">
{{ filter.label }}
</div>
<div class="flex flex-row items-center gap-3">
<Autocomplete
v-if="filterConditionMap[filter.fieldtype]"
class="mt-1 w-[75px]"
:options="filterConditionMap[filter.fieldtype]"
v-model="filters[filter.fieldname].condition"
/>
<FormField
class="w-full"
:fieldtype="filter.fieldtype"
:fieldname="filter.fieldname"
:options="filter.options"
v-model="filters[filter.fieldname].value"
/>
<!-- Field filters -->
<div v-else class="flex flex-col gap-2">
<div class="text-gray-800 font-semibold text-lg">
{{ filter.label }}
</div>
<div class="flex flex-row items-center gap-3">
<Autocomplete
v-if="filterConditionMap[filter.fieldtype]"
class="mt-1 w-[75px]"
:options="filterConditionMap[filter.fieldtype]"
v-model="filters[filter.fieldname].condition"
/>
<FormField
class="w-full"
:fieldtype="filter.fieldtype"
:fieldname="filter.fieldname"
:options="filter.options"
v-model="filters[filter.fieldname].value"
/>
</div>
</div>
</div>
</div>
</div>

<!-- Filter Buttons -->
<div class="flex w-full flex-row items-center justify-between gap-3">
<Button
@click="emit('clear-filters')"
appearance="secondary"
class="w-full py-3 px-12"
>
Clear All
</Button>
<Button
@click="emit('apply-filters')"
appearance="primary"
class="w-full py-3 px-12"
>
Apply Filters
</Button>
</div>
<!-- Filter Buttons -->
<div
class="flex w-full flex-row items-center justify-between gap-3 sticky bottom-0 border-t p-4 z[100]"
>
<Button
@click="emit('clear-filters')"
appearance="secondary"
class="w-full py-3 px-12"
>
Clear All
</Button>
<Button
@click="emit('apply-filters')"
appearance="primary"
class="w-full py-3 px-12"
>
Apply Filters
</Button>
</div>
</div>
</template>
Expand Down
188 changes: 97 additions & 91 deletions frontend/src/components/RequestActionSheet.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<template>
<div
v-if="document?.doc"
class="bg-white w-full flex flex-col items-center justify-center pb-5"
class="bg-white w-full flex flex-col items-center justify-center pb-5 max-h-[calc(100vh-5rem)]"
>
<!-- Header -->
<div
class="w-full flex flex-row gap-2 pt-8 pb-5 border-b justify-center items-center"
class="w-full flex flex-row gap-2 pt-8 pb-5 border-b justify-center items-center sticky top-0 z-[100]"
>
<span class="text-gray-900 font-bold text-xl text-center">
{{ document?.doctype }}
Expand All @@ -15,104 +16,109 @@
@click="openFormView"
/>
</div>
<div class="w-full flex flex-col items-center justify-center gap-5 p-4">
<!-- Request Summary -->
<div
v-for="field in fieldsWithValues"
:key="field.fieldname"
:class="[
['Small Text', 'Text', 'Long Text', 'Table'].includes(field.fieldtype)
? 'flex-col'
: 'flex-row items-center justify-between',
'flex w-full',
]"
>
<div class="text-gray-600 text-base">{{ field.label }}</div>
<component
v-if="field.fieldtype === 'Table'"
:is="field.component"
:doc="document?.doc"
/>
<FormattedField
v-else
:value="field.value"
:fieldtype="field.fieldtype"
:fieldname="field.fieldname"
/>
</div>
<!-- Attachments -->
<div
class="flex flex-col gap-2 w-full"
v-if="attachedFiles?.data?.length"
>
<div class="text-gray-600 text-base">Attachments</div>
<ul class="w-full flex flex-col items-center gap-2">
<li
class="bg-gray-100 rounded-lg p-2 w-full"
v-for="(file, index) in attachedFiles.data"
:key="index"
>
<div
class="flex flex-row items-center justify-between text-gray-700 text-sm"
<!-- Request Summary -->
<div class="w-full p-4 overflow-auto">
<div class="flex flex-col items-center justify-center gap-5">
<div
v-for="field in fieldsWithValues"
:key="field.fieldname"
:class="[
['Small Text', 'Text', 'Long Text', 'Table'].includes(
field.fieldtype
)
? 'flex-col'
: 'flex-row items-center justify-between',
'flex w-full',
]"
>
<div class="text-gray-600 text-base">{{ field.label }}</div>
<component
v-if="field.fieldtype === 'Table'"
:is="field.component"
:doc="document?.doc"
/>
<FormattedField
v-else
:value="field.value"
:fieldtype="field.fieldtype"
:fieldname="field.fieldname"
/>
</div>
<!-- Attachments -->
<div
class="flex flex-col gap-2 w-full"
v-if="attachedFiles?.data?.length"
>
<div class="text-gray-600 text-base">Attachments</div>
<ul class="w-full flex flex-col items-center gap-2">
<li
class="bg-gray-100 rounded-lg p-2 w-full"
v-for="(file, index) in attachedFiles.data"
:key="index"
>
<a target="_blank" :href="file.file_url">
<span class="grow">{{ file.file_name || file.name }}</span>
</a>
</div>
</li>
</ul>
<div
class="flex flex-row items-center justify-between text-gray-700 text-sm"
>
<a target="_blank" :href="file.file_url">
<span class="grow">{{ file.file_name || file.name }}</span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Actions -->
<div
v-if="['Open', 'Draft'].includes(document?.doc?.[approvalField])"
class="flex w-full flex-row items-center justify-between gap-3"
<!-- Actions -->
<div
v-if="['Open', 'Draft'].includes(document?.doc?.[approvalField])"
class="flex w-full flex-row items-center justify-between gap-3 sticky bottom-0 border-t z-[100] p-4"
>
<Button
@click="updateDocumentStatus({ status: 'Rejected' })"
class="w-full py-3 px-12 bg-red-100 text-red-600"
icon-left="x"
>
<Button
@click="updateDocumentStatus({ status: 'Rejected' })"
class="w-full py-3 px-12 bg-red-100 text-red-600"
icon-left="x"
>
Reject
</Button>
<Button
@click="updateDocumentStatus({ status: 'Approved' })"
class="w-full bg-green-600 text-white py-3 px-12"
icon-left="check"
>
Approve
</Button>
</div>
Reject
</Button>
<Button
@click="updateDocumentStatus({ status: 'Approved' })"
class="w-full bg-green-600 text-white py-3 px-12"
icon-left="check"
>
Approve
</Button>
</div>
<div
v-if="
document?.doc?.docstatus === 0 &&
['Approved', 'Rejected'].includes(document?.doc?.[approvalField])
"
class="flex w-full flex-row items-center justify-between gap-3"
<div
v-else-if="
document?.doc?.docstatus === 0 &&
['Approved', 'Rejected'].includes(document?.doc?.[approvalField])
"
class="flex w-full flex-row items-center justify-between gap-3 sticky bottom-0 border-t z-[100] p-4"
>
<Button
@click="updateDocumentStatus({ docstatus: 1 })"
class="w-full py-3 px-12"
appearance="primary"
>
<Button
@click="updateDocumentStatus({ docstatus: 1 })"
class="w-full py-3 px-12"
appearance="primary"
>
Submit
</Button>
</div>
Submit
</Button>
</div>
<div
v-else-if="document?.doc?.docstatus === 1"
class="flex w-full flex-row items-center justify-between gap-3"
<div
v-else-if="document?.doc?.docstatus === 1"
class="flex w-full flex-row items-center justify-between gap-3 sticky bottom-0 border-t z-[100] p-4"
>
<Button
@click="updateDocumentStatus({ docstatus: 2 })"
class="w-full py-3 px-12 bg-red-100 text-red-600"
icon-left="x"
>
<Button
@click="updateDocumentStatus({ docstatus: 2 })"
class="w-full py-3 px-12 bg-red-100 text-red-600"
icon-left="x"
>
Cancel
</Button>
</div>
Cancel
</Button>
</div>
</div>
</template>
Expand Down

0 comments on commit 83d39a6

Please sign in to comment.