From 72f27019c4f0be5cdfc1bb3c814a773439113ce7 Mon Sep 17 00:00:00 2001 From: Sabu Siyad Date: Fri, 21 Apr 2023 01:32:57 +0530 Subject: [PATCH 001/107] feat(ui): ticket single view: new design --- desk/src/pages/desk/ticket/CommentItem.vue | 45 +++++ .../pages/desk/ticket/CommunicationList.vue | 25 +++ .../pages/desk/ticket/ConversationItem.vue | 59 ++++++ desk/src/pages/desk/ticket/ResponseEditor.vue | 181 ++++++++++++++++++ desk/src/pages/desk/ticket/SideBar.vue | 117 +++++++++++ desk/src/pages/desk/ticket/TicketNeo.vue | 46 +++++ desk/src/pages/desk/ticket/TopBar.vue | 32 ++++ desk/src/router.js | 2 +- desk/tailwind.config.js | 21 +- 9 files changed, 524 insertions(+), 4 deletions(-) create mode 100644 desk/src/pages/desk/ticket/CommentItem.vue create mode 100644 desk/src/pages/desk/ticket/CommunicationList.vue create mode 100644 desk/src/pages/desk/ticket/ConversationItem.vue create mode 100644 desk/src/pages/desk/ticket/ResponseEditor.vue create mode 100644 desk/src/pages/desk/ticket/SideBar.vue create mode 100644 desk/src/pages/desk/ticket/TicketNeo.vue create mode 100644 desk/src/pages/desk/ticket/TopBar.vue diff --git a/desk/src/pages/desk/ticket/CommentItem.vue b/desk/src/pages/desk/ticket/CommentItem.vue new file mode 100644 index 000000000..ca7d7e2a2 --- /dev/null +++ b/desk/src/pages/desk/ticket/CommentItem.vue @@ -0,0 +1,45 @@ + + + diff --git a/desk/src/pages/desk/ticket/CommunicationList.vue b/desk/src/pages/desk/ticket/CommunicationList.vue new file mode 100644 index 000000000..080c62e87 --- /dev/null +++ b/desk/src/pages/desk/ticket/CommunicationList.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/desk/src/pages/desk/ticket/ConversationItem.vue b/desk/src/pages/desk/ticket/ConversationItem.vue new file mode 100644 index 000000000..806bb24f6 --- /dev/null +++ b/desk/src/pages/desk/ticket/ConversationItem.vue @@ -0,0 +1,59 @@ + + + diff --git a/desk/src/pages/desk/ticket/ResponseEditor.vue b/desk/src/pages/desk/ticket/ResponseEditor.vue new file mode 100644 index 000000000..e971de346 --- /dev/null +++ b/desk/src/pages/desk/ticket/ResponseEditor.vue @@ -0,0 +1,181 @@ + + + + + diff --git a/desk/src/pages/desk/ticket/SideBar.vue b/desk/src/pages/desk/ticket/SideBar.vue new file mode 100644 index 000000000..1edfe6565 --- /dev/null +++ b/desk/src/pages/desk/ticket/SideBar.vue @@ -0,0 +1,117 @@ + + + + + diff --git a/desk/src/pages/desk/ticket/TicketNeo.vue b/desk/src/pages/desk/ticket/TicketNeo.vue new file mode 100644 index 000000000..b98daf06a --- /dev/null +++ b/desk/src/pages/desk/ticket/TicketNeo.vue @@ -0,0 +1,46 @@ + + + diff --git a/desk/src/pages/desk/ticket/TopBar.vue b/desk/src/pages/desk/ticket/TopBar.vue new file mode 100644 index 000000000..804fec2ea --- /dev/null +++ b/desk/src/pages/desk/ticket/TopBar.vue @@ -0,0 +1,32 @@ + + + diff --git a/desk/src/router.js b/desk/src/router.js index 324d27b10..5183723f5 100644 --- a/desk/src/router.js +++ b/desk/src/router.js @@ -131,7 +131,7 @@ const routes = [ { path: "tickets/:ticketId", name: "DeskTicket", - component: () => import("@/pages/desk/Ticket.vue"), + component: () => import("@/pages/desk/ticket/TicketNeo.vue"), props: true, meta: { breadcrumbs(route) { diff --git a/desk/tailwind.config.js b/desk/tailwind.config.js index 73fe0eec0..db5f0df41 100644 --- a/desk/tailwind.config.js +++ b/desk/tailwind.config.js @@ -9,15 +9,30 @@ module.exports = { ], theme: { extend: { - zIndex: { - 5: "5", - }, fontSize: { xs: "12px", sm: "13px", base: "14px", + lg: "16px", + xl: "18px", "2xl": "20px", }, + height: { + 18: "68px", + }, + margin: { + 3.5: "14px", + }, + padding: { + 2.5: "10px", + 3.5: "14px", + }, + width: { + "ticket-sidebar": "310px", + }, + zIndex: { + 5: "5", + }, }, }, plugins: [ From 62e54977e114e99d839172da78694d1d90ed4fbf Mon Sep 17 00:00:00 2001 From: Sabu Siyad Date: Fri, 21 Apr 2023 04:16:12 +0530 Subject: [PATCH 002/107] feat: ticket: sidebar switching with headless-ui --- desk/src/assets/icons/activity.svg | 10 ++ desk/src/assets/icons/alert-circle.svg | 3 + desk/src/assets/icons/details.svg | 3 + desk/src/pages/desk/ticket/ContactDetails.vue | 12 ++ desk/src/pages/desk/ticket/SideBar.vue | 156 ++++++------------ desk/src/pages/desk/ticket/TicketDetails.vue | 118 +++++++++++++ desk/src/pages/desk/ticket/TicketHistory.vue | 12 ++ desk/tailwind.config.js | 3 - 8 files changed, 213 insertions(+), 104 deletions(-) create mode 100644 desk/src/assets/icons/activity.svg create mode 100644 desk/src/assets/icons/alert-circle.svg create mode 100644 desk/src/assets/icons/details.svg create mode 100644 desk/src/pages/desk/ticket/ContactDetails.vue create mode 100644 desk/src/pages/desk/ticket/TicketDetails.vue create mode 100644 desk/src/pages/desk/ticket/TicketHistory.vue diff --git a/desk/src/assets/icons/activity.svg b/desk/src/assets/icons/activity.svg new file mode 100644 index 000000000..8eca2bb53 --- /dev/null +++ b/desk/src/assets/icons/activity.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/desk/src/assets/icons/alert-circle.svg b/desk/src/assets/icons/alert-circle.svg new file mode 100644 index 000000000..8852321fc --- /dev/null +++ b/desk/src/assets/icons/alert-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/desk/src/assets/icons/details.svg b/desk/src/assets/icons/details.svg new file mode 100644 index 000000000..9ef2158a4 --- /dev/null +++ b/desk/src/assets/icons/details.svg @@ -0,0 +1,3 @@ + + + diff --git a/desk/src/pages/desk/ticket/ContactDetails.vue b/desk/src/pages/desk/ticket/ContactDetails.vue new file mode 100644 index 000000000..ff486a588 --- /dev/null +++ b/desk/src/pages/desk/ticket/ContactDetails.vue @@ -0,0 +1,12 @@ + + + diff --git a/desk/src/pages/desk/ticket/SideBar.vue b/desk/src/pages/desk/ticket/SideBar.vue index 1edfe6565..96b9c18a9 100644 --- a/desk/src/pages/desk/ticket/SideBar.vue +++ b/desk/src/pages/desk/ticket/SideBar.vue @@ -1,117 +1,71 @@ diff --git a/desk/src/pages/desk/ticket/TicketDetails.vue b/desk/src/pages/desk/ticket/TicketDetails.vue new file mode 100644 index 000000000..4d5ffbd7f --- /dev/null +++ b/desk/src/pages/desk/ticket/TicketDetails.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/desk/src/pages/desk/ticket/TicketHistory.vue b/desk/src/pages/desk/ticket/TicketHistory.vue new file mode 100644 index 000000000..ca8532c9d --- /dev/null +++ b/desk/src/pages/desk/ticket/TicketHistory.vue @@ -0,0 +1,12 @@ + + + diff --git a/desk/tailwind.config.js b/desk/tailwind.config.js index db5f0df41..2f7fcb477 100644 --- a/desk/tailwind.config.js +++ b/desk/tailwind.config.js @@ -27,9 +27,6 @@ module.exports = { 2.5: "10px", 3.5: "14px", }, - width: { - "ticket-sidebar": "310px", - }, zIndex: { 5: "5", }, From 7f0b933afc6f3959727d424aae217d27c30cd145 Mon Sep 17 00:00:00 2001 From: Sabu Siyad Date: Fri, 21 Apr 2023 23:05:27 +0530 Subject: [PATCH 003/107] feat: sidebar: ticket history --- desk/src/pages/desk/ticket/SideBar.vue | 12 +- desk/src/pages/desk/ticket/TicketHistory.vue | 67 ++++++++++- desk/src/utils/index.js | 112 ++++++++++--------- 3 files changed, 127 insertions(+), 64 deletions(-) diff --git a/desk/src/pages/desk/ticket/SideBar.vue b/desk/src/pages/desk/ticket/SideBar.vue index 96b9c18a9..bcf3ac9de 100644 --- a/desk/src/pages/desk/ticket/SideBar.vue +++ b/desk/src/pages/desk/ticket/SideBar.vue @@ -1,13 +1,11 @@ diff --git a/desk/src/utils/index.js b/desk/src/utils/index.js index 27be1fae8..e413f694f 100644 --- a/desk/src/utils/index.js +++ b/desk/src/utils/index.js @@ -1,9 +1,13 @@ -import _dayjs from "dayjs" -import relativeTime from "dayjs/esm/plugin/relativeTime" -import updateLocale from "dayjs/esm/plugin/updateLocale" +import _dayjs from "dayjs"; +import relativeTime from "dayjs/plugin/relativeTime"; +import updateLocale from "dayjs/plugin/updateLocale"; +import utc from "dayjs/plugin/utc"; +import timezone from "dayjs/plugin/timezone"; -_dayjs.extend(relativeTime) -_dayjs.extend(updateLocale) +_dayjs.extend(relativeTime); +_dayjs.extend(updateLocale); +_dayjs.extend(utc); +_dayjs.extend(timezone); _dayjs.updateLocale("en", { relativeTime: { @@ -21,97 +25,97 @@ _dayjs.updateLocale("en", { y: "1 year", yy: "%d years", }, -}) +}); _dayjs.longFormating = (s) => { if (s === "now" || s === "now ago") { - return "just now" + return "just now"; } - return s -} + return s; +}; _dayjs.shortFormating = (s, ago = false) => { if (s === "now" || s === "now ago") { - return "now" + return "now"; } - const prefix = s.split(" ")[0] - const posfix = s.split(" ")[1] - const isPast = s.includes("ago") - let newPostfix = "" + const prefix = s.split(" ")[0]; + const posfix = s.split(" ")[1]; + const isPast = s.includes("ago"); + let newPostfix = ""; switch (posfix) { case "minute": - newPostfix = "m" - break + newPostfix = "m"; + break; case "minutes": - newPostfix = "m" - break + newPostfix = "m"; + break; case "hour": - newPostfix = "h" - break + newPostfix = "h"; + break; case "hours": - newPostfix = "h" - break + newPostfix = "h"; + break; case "day": - newPostfix = "d" - break + newPostfix = "d"; + break; case "days": - newPostfix = "d" - break + newPostfix = "d"; + break; case "month": - newPostfix = "M" - break + newPostfix = "M"; + break; case "months": - newPostfix = "M" - break + newPostfix = "M"; + break; case "year": - newPostfix = "Y" - break + newPostfix = "Y"; + break; case "years": - newPostfix = "Y" - break + newPostfix = "Y"; + break; } - return `${prefix}${newPostfix}${isPast ? (ago ? " ago" : "") : ""}` -} + return `${prefix}${newPostfix}${isPast ? (ago ? " ago" : "") : ""}`; +}; export function remove_script_and_style(txt) { - const evil_tags = ["script", "noscript", "title", "meta", "base", "head"] + const evil_tags = ["script", "noscript", "title", "meta", "base", "head"]; const regex = new RegExp( evil_tags.map((tag) => `<${tag}>.*<\\/${tag}>`).join("|"), "s" - ) + ); if (!regex.test(txt)) { // no evil tags found, skip the DOM method entirely! - return txt + return txt; } - var div = document.createElement("div") - div.innerHTML = txt - var found = false + var div = document.createElement("div"); + div.innerHTML = txt; + var found = false; evil_tags.forEach(function (e) { - var elements = div.getElementsByTagName(e) - i = elements.length + var elements = div.getElementsByTagName(e); + i = elements.length; while (i--) { - found = true - elements[i].parentNode.removeChild(elements[i]) + found = true; + elements[i].parentNode.removeChild(elements[i]); } - }) + }); // remove links with rel="stylesheet" - var elements = div.getElementsByTagName("link") - var i = elements.length + var elements = div.getElementsByTagName("link"); + var i = elements.length; while (i--) { if (elements[i].getAttribute("rel") == "stylesheet") { - found = true - elements[i].parentNode.removeChild(elements[i]) + found = true; + elements[i].parentNode.removeChild(elements[i]); } } if (found) { - return div.innerHTML + return div.innerHTML; } else { // don't disturb - return txt + return txt; } } -export let dayjs = _dayjs +export let dayjs = _dayjs; From b2431e8ce410ae627801505fbc0ccccd56875271 Mon Sep 17 00:00:00 2001 From: Sabu Siyad Date: Sat, 22 Apr 2023 00:37:08 +0530 Subject: [PATCH 004/107] fix(ux): do not override dayjs locale --- desk/src/pages/desk/ticket/TicketHistory.vue | 2 +- desk/src/utils/index.js | 18 ------------------ 2 files changed, 1 insertion(+), 19 deletions(-) diff --git a/desk/src/pages/desk/ticket/TicketHistory.vue b/desk/src/pages/desk/ticket/TicketHistory.vue index bed14a864..b40e55464 100644 --- a/desk/src/pages/desk/ticket/TicketHistory.vue +++ b/desk/src/pages/desk/ticket/TicketHistory.vue @@ -16,7 +16,7 @@ {{ activity.action }} -
+
{{ activity.dateShort }}
diff --git a/desk/src/utils/index.js b/desk/src/utils/index.js index e413f694f..c1e9b829a 100644 --- a/desk/src/utils/index.js +++ b/desk/src/utils/index.js @@ -9,24 +9,6 @@ _dayjs.extend(updateLocale); _dayjs.extend(utc); _dayjs.extend(timezone); -_dayjs.updateLocale("en", { - relativeTime: { - future: "%s", - past: "%s ago", - s: "now", - m: "1 minute", - mm: "%d minutes", - h: "1 hour", - hh: "%d hours", - d: "1 day", - dd: "%d days", - M: "1 month", - MM: "%d months", - y: "1 year", - yy: "%d years", - }, -}); - _dayjs.longFormating = (s) => { if (s === "now" || s === "now ago") { return "just now"; From 8be03d964f3a2e1360753a8e37fa8dd14b1aa650 Mon Sep 17 00:00:00 2001 From: Sabu Siyad Date: Sat, 22 Apr 2023 10:22:33 +0530 Subject: [PATCH 005/107] feat(ui): sidebar: customer details --- desk/src/assets/icons/call.svg | 3 + desk/src/assets/icons/email.svg | 3 + desk/src/assets/icons/location.svg | 3 + desk/src/assets/icons/teams.svg | 13 ++ desk/src/assets/icons/web-link.svg | 3 + desk/src/pages/desk/ticket/ContactDetails.vue | 149 +++++++++++++++++- 6 files changed, 169 insertions(+), 5 deletions(-) create mode 100644 desk/src/assets/icons/call.svg create mode 100644 desk/src/assets/icons/email.svg create mode 100644 desk/src/assets/icons/location.svg create mode 100644 desk/src/assets/icons/teams.svg create mode 100644 desk/src/assets/icons/web-link.svg diff --git a/desk/src/assets/icons/call.svg b/desk/src/assets/icons/call.svg new file mode 100644 index 000000000..e119ee7cb --- /dev/null +++ b/desk/src/assets/icons/call.svg @@ -0,0 +1,3 @@ + + + diff --git a/desk/src/assets/icons/email.svg b/desk/src/assets/icons/email.svg new file mode 100644 index 000000000..06ebe1e6d --- /dev/null +++ b/desk/src/assets/icons/email.svg @@ -0,0 +1,3 @@ + + + diff --git a/desk/src/assets/icons/location.svg b/desk/src/assets/icons/location.svg new file mode 100644 index 000000000..9867c55a9 --- /dev/null +++ b/desk/src/assets/icons/location.svg @@ -0,0 +1,3 @@ + + + diff --git a/desk/src/assets/icons/teams.svg b/desk/src/assets/icons/teams.svg new file mode 100644 index 000000000..d21ab32ac --- /dev/null +++ b/desk/src/assets/icons/teams.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/desk/src/assets/icons/web-link.svg b/desk/src/assets/icons/web-link.svg new file mode 100644 index 000000000..afe285e38 --- /dev/null +++ b/desk/src/assets/icons/web-link.svg @@ -0,0 +1,3 @@ + + + diff --git a/desk/src/pages/desk/ticket/ContactDetails.vue b/desk/src/pages/desk/ticket/ContactDetails.vue index ff486a588..9c8907b7f 100644 --- a/desk/src/pages/desk/ticket/ContactDetails.vue +++ b/desk/src/pages/desk/ticket/ContactDetails.vue @@ -1,12 +1,151 @@ From d9becd06d08b0483961a6c238437a12d9b311d1a Mon Sep 17 00:00:00 2001 From: Sabu Siyad Date: Sat, 22 Apr 2023 10:23:41 +0530 Subject: [PATCH 006/107] fix(ui): ticket history: use flex for scroll --- desk/src/pages/desk/ticket/TicketHistory.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/desk/src/pages/desk/ticket/TicketHistory.vue b/desk/src/pages/desk/ticket/TicketHistory.vue index b40e55464..361e0565b 100644 --- a/desk/src/pages/desk/ticket/TicketHistory.vue +++ b/desk/src/pages/desk/ticket/TicketHistory.vue @@ -1,10 +1,10 @@