fix: made email template & whatsapp template list responsive

This commit is contained in:
Shariq Ansari 2024-05-27 19:03:40 +05:30
parent f375a26af0
commit 8e291d65fa
2 changed files with 13 additions and 4 deletions

View File

@ -16,7 +16,7 @@
</TextInput> </TextInput>
<div <div
v-if="filteredTemplates.length" v-if="filteredTemplates.length"
class="mt-2 grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto" class="mt-2 grid max-h-[560px] sm:grid-cols-3 gris-cols-1 gap-2 overflow-y-auto"
> >
<div <div
v-for="template in filteredTemplates" v-for="template in filteredTemplates"

View File

@ -16,7 +16,7 @@
</TextInput> </TextInput>
<div <div
v-if="filteredTemplates.length" v-if="filteredTemplates.length"
class="mt-2 grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto" class="mt-2 grid max-h-[560px] grid-cols-1 gap-2 overflow-y-auto sm:grid-cols-3"
> >
<div <div
v-for="template in filteredTemplates" v-for="template in filteredTemplates"
@ -41,7 +41,11 @@
<div class="text-lg text-gray-500"> <div class="text-lg text-gray-500">
{{ __('No templates found') }} {{ __('No templates found') }}
</div> </div>
<Button :label="__('Create New')" class="mt-4" /> <Button
:label="__('Create New')"
class="mt-4"
@click="newWhatsappTemplate"
/>
</div> </div>
</div> </div>
</template> </template>
@ -68,7 +72,7 @@ const templates = createListResource({
doctype: 'WhatsApp Templates', doctype: 'WhatsApp Templates',
cache: ['whatsappTemplates'], cache: ['whatsappTemplates'],
fields: ['name', 'template', 'footer'], fields: ['name', 'template', 'footer'],
filters: { status: 'APPROVED', for_doctype: ['in', [props.doctype, '']]}, filters: { status: 'APPROVED', for_doctype: ['in', [props.doctype, '']] },
orderBy: 'modified desc', orderBy: 'modified desc',
pageLength: 99999, pageLength: 99999,
auto: true, auto: true,
@ -88,5 +92,10 @@ const filteredTemplates = computed(() => {
) )
}) })
function newWhatsappTemplate() {
show.value = false
window.open('/app/whatsapp-templates/new')
}
watch(show, (value) => value && nextTick(() => searchInput.value?.el?.focus())) watch(show, (value) => value && nextTick(() => searchInput.value?.el?.focus()))
</script> </script>