test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: attachments tab design similar to tasks

Browse Source
This commit is contained in:
Shariq Ansari 2024-10-17 17:15:23 +05:30
parent 3c7ba5e079
commit dc1c2d36a0
3 changed files with 79 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/Activities/Activities.vue
View File

@ -67,13 +67,7 @@
v-else-if="title == 'Tasks'" v-else-if="title == 'Tasks'"
class="px-3 pb-3 sm:px-10 sm:pb-5 overflow-x-auto sm:w-full w-max" class="px-3 pb-3 sm:px-10 sm:pb-5 overflow-x-auto sm:w-full w-max"
> >
<TaskArea <TaskArea :modalRef="modalRef" :tasks="activities" :doctype="doctype" />
v-model="all_activities"
v-model:doc="doc"
:modalRef="modalRef"
:tasks="activities"
:doctype="doctype"
/>
</div> </div>
<div v-else-if="title == 'Calls'" class="activity"> <div v-else-if="title == 'Calls'" class="activity">
<div v-for="(call, i) in activities"> <div v-for="(call, i) in activities">
@ -104,19 +98,14 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="title == 'Attachments'"> <div
<div class="flex flex-col gap-2 px-3 sm:px-10 mb-4"> v-else-if="title == 'Attachments'"
<div class="px-3 pb-3 sm:px-10 sm:pb-5 overflow-x-auto sm:w-full w-max"
v-for="attachment in activities" >
:key="attachment.name" <AttachmentArea
class="activity" :attachments="activities"
> @reload="all_activities.reload() && scroll()"
<AttachmentArea />
:attachment="attachment"
@reload="all_activities.reload() && scroll()"
/>
</div>
</div>
</div> </div>
<div <div
v-else v-else

122
frontend/src/components/Activities/AttachmentArea.vue
View File

@ -1,59 +1,75 @@
<template> <template>
<div <div v-if="attachments.length">
class="flex justify-between gap-2 border rounded text-base px-3 py-2 cursor-pointer" <div v-for="(attachment, i) in attachments" :key="attachment.name">
@click="openFile"
>
<div class="flex gap-2 truncate">
<div <div
class="size-11 rounded overflow-hidden flex-shrink-0 flex justify-center items-center" class="activity flex justify-between gap-2 hover:bg-gray-50 rounded text-base p-2.5 cursor-pointer"
:class="{ border: !isImage(attachment.file_type) }" @click="openFile(attachment)"
> >
<img <div class="flex gap-2 truncate">
v-if="isImage(attachment.file_type)" <div
class="size-full object-cover" class="size-11 bg-white rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
:src="attachment.file_url" :class="{ border: !isImage(attachment.file_type) }"
:alt="attachment.file_name"
/>
<component v-else class="size-4" :is="fileIcon(attachment.file_type)" />
</div>
<div class="flex flex-col justify-center gap-1 truncate">
<div class="text-base text-gray-800 truncate">
{{ attachment.file_name }}
</div>
<div class="mb-1 text-sm text-gray-600">
{{ convertSize(attachment.file_size) }}
</div>
</div>
</div>
<div class="flex flex-col items-end gap-2 flex-shrink-0">
<Tooltip :text="dateFormat(attachment.creation, dateTooltipFormat)">
<div class="text-sm text-gray-600">
{{ __(timeAgo(attachment.creation)) }}
</div>
</Tooltip>
<div class="flex gap-1">
<Tooltip
:text="attachment.is_private ? __('Make public') : __('Make private')"
>
<Button
class="!size-5"
@click.stop="togglePrivate(attachment.name, attachment.is_private)"
> >
<FeatherIcon <img
:name="attachment.is_private ? 'lock' : 'unlock'" v-if="isImage(attachment.file_type)"
class="size-3 text-gray-700" class="size-full object-cover"
:src="attachment.file_url"
:alt="attachment.file_name"
/> />
</Button> <component
</Tooltip> v-else
<Tooltip :text="__('Delete attachment')"> class="size-4"
<Button :is="fileIcon(attachment.file_type)"
class="!size-5" />
@click.stop="() => deleteAttachment(attachment.name)" </div>
> <div class="flex flex-col justify-center gap-1 truncate">
<FeatherIcon name="trash-2" class="size-3 text-gray-700" /> <div class="text-base text-gray-800 truncate">
</Button> {{ attachment.file_name }}
</Tooltip> </div>
<div class="mb-1 text-sm text-gray-600">
{{ convertSize(attachment.file_size) }}
</div>
</div>
</div>
<div class="flex flex-col items-end gap-2 flex-shrink-0">
<Tooltip :text="dateFormat(attachment.creation, dateTooltipFormat)">
<div class="text-sm text-gray-600">
{{ __(timeAgo(attachment.creation)) }}
</div>
</Tooltip>
<div class="flex gap-1">
<Tooltip
:text="
attachment.is_private ? __('Make public') : __('Make private')
"
>
<Button
class="!size-5"
@click.stop="
togglePrivate(attachment.name, attachment.is_private)
"
>
<FeatherIcon
:name="attachment.is_private ? 'lock' : 'unlock'"
class="size-3 text-gray-700"
/>
</Button>
</Tooltip>
<Tooltip :text="__('Delete attachment')">
<Button
class="!size-5"
@click.stop="() => deleteAttachment(attachment.name)"
>
<FeatherIcon name="trash-2" class="size-3 text-gray-700" />
</Button>
</Tooltip>
</div>
</div>
</div> </div>
<div
v-if="i < attachments.length - 1"
class="mx-2 h-px border-t border-gray-200"
/>
</div> </div>
</div> </div>
</template> </template>
@ -72,15 +88,15 @@ import {
} from '@/utils' } from '@/utils'
const props = defineProps({ const props = defineProps({
attachment: Object, attachments: Array,
}) })
const emit = defineEmits(['reload']) const emit = defineEmits(['reload'])
const { $dialog } = globalStore() const { $dialog } = globalStore()
function openFile() { function openFile(attachment) {
window.open(props.attachment.file_url, '_blank') window.open(attachment.file_url, '_blank')
} }
function togglePrivate(fileName, isPrivate) { function togglePrivate(fileName, isPrivate) {

2
frontend/src/components/Activities/TaskArea.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div v-if="tasks.length"> <div v-if="tasks.length">
<div v-for="(task, i) in tasks"> <div v-for="(task, i) in tasks" :key="task.name">
<div <div
class="activity flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50" class="activity flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50"
@click="modalRef.showTask(task)" @click="modalRef.showTask(task)"