Skip to content

Commit 73ddf78

Browse files
fix: misc ui fixes
1 parent 425b27d commit 73ddf78

File tree

4 files changed

+51
-99
lines changed

4 files changed

+51
-99
lines changed

desk/src/components/ticket/TicketAgentActivities.vue

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,32 @@
11
<template>
2-
<div v-for="(activity, i) in activities" :key="activity.key">
3-
<div class="flex gap-4 px-10">
4-
<div
5-
class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
6-
>
2+
<div class="overflow-y-auto">
3+
<div v-for="(activity, i) in activities" :key="activity.key">
4+
<div class="flex gap-4 px-10">
75
<div
8-
class="z-10 mt-3 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
9-
:class="[
10-
i != activities.length - 1 ? 'before:h-full' : 'before:h-4',
11-
activity.type === 'history' ? 'bg-white' : 'bg-gray-100',
12-
]"
6+
class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
137
>
14-
<component
15-
:is="getActivityIcon(activity.type)"
16-
:class="'text-gray-800'"
8+
<div
9+
class="z-10 mt-3 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
10+
:class="[
11+
i != activities.length - 1 ? 'before:h-full' : 'before:h-4',
12+
activity.type === 'history' ? 'bg-white' : 'bg-gray-100',
13+
]"
14+
>
15+
<component
16+
:is="getActivityIcon(activity.type)"
17+
:class="'text-gray-800'"
18+
/>
19+
</div>
20+
</div>
21+
<div class="mt-4 w-full">
22+
<EmailBox v-if="activity.type === 'email'" v-bind="activity" />
23+
<CommentBox
24+
v-else-if="activity.type === 'comment'"
25+
v-bind="activity"
1726
/>
27+
<HistoryBox v-else v-bind="activity" />
1828
</div>
1929
</div>
20-
<div class="mt-4 w-full">
21-
<EmailBox v-if="activity.type === 'email'" v-bind="activity" />
22-
<CommentBox v-else-if="activity.type === 'comment'" v-bind="activity" />
23-
<HistoryBox v-else v-bind="activity" />
24-
</div>
2530
</div>
2631
</div>
2732
</template>
@@ -35,10 +40,6 @@ defineProps({
3540
type: Array,
3641
required: true,
3742
},
38-
type: {
39-
type: String,
40-
default: "all",
41-
},
4243
});
4344
4445
function getActivityIcon(type) {

desk/src/components/ticket/TicketAgentCustomer.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,19 @@
2323
/>
2424
</Button>
2525
</Tooltip>
26+
<Tooltip text="Show Customer Tickets">
27+
<Button class="h-7 w-7">
28+
<TicketIcon class="h-4 w-4" @click="console.log('tick')" />
29+
</Button>
30+
</Tooltip>
2631
</div>
2732
</div>
2833
</div>
2934
</template>
3035

3136
<script setup lang="ts">
32-
import { Avatar } from "frappe-ui";
33-
import { EmailIcon, LinkIcon } from "@/components/icons/";
37+
import { Avatar, Tooltip } from "frappe-ui";
38+
import { EmailIcon, LinkIcon, TicketIcon } from "@/components/icons/";
3439
import { errorMessage } from "@/utils";
3540
3641
defineProps({

desk/src/components/ticket/TicketAgentFields.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div
3-
class="flex flex-1 flex-col justify-between overflow-hidden overflow-y-auto"
3+
class="flex flex-1 flex-col justify-between overflow-hidden overflow-y-auto border-b"
44
>
55
<div
66
v-for="o in options"
@@ -15,7 +15,7 @@
1515
>
1616
<Autocomplete
1717
:options="o.store.dropdown"
18-
:placeholder="`Select a ${o.label}`"
18+
:placeholder="`Add ${o.label}`"
1919
:value="ticket[o.field]"
2020
/>
2121
</div>

desk/src/pages/TicketAgent2.vue

Lines changed: 19 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -30,31 +30,19 @@
3030
</Dropdown>
3131
</template>
3232
</LayoutHeader>
33-
<div v-if="ticket.data" class="flex h-full">
33+
<div v-if="ticket.data" class="flex h-screen overflow-hidden">
3434
<div class="flex flex-col">
35-
<Tabs
36-
v-slot="{ tab }"
37-
v-model="tabIndex"
38-
:tabs="tabs"
39-
class="overflow-hidden"
35+
<div
36+
class="pr-7.5 flex items-center justify-between border-b py-1 pl-10"
4037
>
41-
<div v-if="tab.label === 'Customer Tickets'" class="py-2">
42-
<TicketsAgentList
43-
:rows="customerTickets?.data?.data"
44-
:columns="customerTickets?.data?.columns"
45-
:options="{
46-
selectable: false,
47-
openInNewTab: true,
48-
}"
49-
:paginate="false"
50-
/>
51-
</div>
52-
<TicketAgentActivities
53-
v-else
54-
:activities="activities"
55-
:type="tab.label === 'Emails' ? 'email' : 'all'"
38+
<span class="text-lg font-semibold">Activity</span>
39+
<Switch
40+
v-model="showFullActivity"
41+
size="sm"
42+
label="Show all activity"
5643
/>
57-
</Tabs>
44+
</div>
45+
<TicketAgentActivities :activities="activities" />
5846
<CommunicationArea
5947
v-model="ticket.data"
6048
v-model:reload="reload_email"
@@ -73,7 +61,7 @@
7361

7462
<script setup lang="ts">
7563
import { computed, ref, h } from "vue";
76-
import { Breadcrumbs, createResource, Dropdown, Tabs } from "frappe-ui";
64+
import { Breadcrumbs, createResource, Dropdown, Switch } from "frappe-ui";
7765
7866
import { useTicketStatusStore } from "@/stores/ticketStatus";
7967
import { createToast } from "@/utils";
@@ -87,32 +75,12 @@ import {
8775
8876
import { TicketAgentActivities, TicketAgentSidebar } from "@/components/ticket";
8977
90-
import {
91-
ActivityIcon,
92-
EmailIcon,
93-
IndicatorIcon,
94-
TicketIcon,
95-
} from "@/components/icons";
78+
import { IndicatorIcon } from "@/components/icons";
9679
9780
const ticketStatusStore = useTicketStatusStore();
9881
99-
const tabIndex = ref(0);
100-
const tabs = [
101-
{
102-
label: "Activity",
103-
icon: ActivityIcon,
104-
},
105-
{
106-
label: "Emails",
107-
icon: EmailIcon,
108-
},
109-
{
110-
label: "Customer Tickets",
111-
icon: TicketIcon,
112-
},
113-
];
82+
const showFullActivity = ref(true);
11483
115-
const customerTickets = ref([]);
11684
const reload_email = ref(false);
11785
11886
const props = defineProps({
@@ -149,30 +117,6 @@ const ticket = createResource({
149117
];
150118
return data;
151119
},
152-
onSuccess(data) {
153-
customerTickets.value = createResource({
154-
url: "helpdesk.api.doc.get_list_data",
155-
params: {
156-
doctype: "HD Ticket",
157-
filters: {
158-
customer: ["=", data.customer],
159-
name: ["!=", props.ticketId],
160-
},
161-
columns: [
162-
{ label: "Name", type: "Data", key: "name", width: "5rem" },
163-
{ label: "Subject", type: "Data", key: "subject", width: "25rem" },
164-
{ label: "Status", type: "Data", key: "status", width: "8rem" },
165-
],
166-
rows: ["name", "subject", "status"],
167-
},
168-
auto: true,
169-
transform(data) {
170-
data.data.forEach((row) => {
171-
row.name = row.name.toString();
172-
});
173-
},
174-
});
175-
},
176120
});
177121
178122
const dropdownOptions = computed(() =>
@@ -203,10 +147,6 @@ const activities = computed(() => {
203147
};
204148
});
205149
206-
if (tabIndex.value === 1) {
207-
return emailProps;
208-
}
209-
210150
const commentProps = ticket.data.comments.map((comment) => {
211151
return {
212152
type: "comment",
@@ -217,6 +157,12 @@ const activities = computed(() => {
217157
};
218158
});
219159
160+
if (!showFullActivity.value) {
161+
return [...emailProps, ...commentProps].sort(
162+
(a, b) => new Date(a.creation) - new Date(b.creation)
163+
);
164+
}
165+
220166
const historyProps = [...ticket.data.history, ...ticket.data.views].map(
221167
(h) => {
222168
return {

0 commit comments

Comments
 (0)