Merge pull request #2016 from frappe/develop

chore(release): dev to main

desk/src/components/ColumnSettings.vue

@@ -154,6 +154,10 @@ let props = defineProps({
     type: Boolean,
     default: false,
   },
+  isCustomerPortal: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 function resetToDefault(close) {

desk/src/components/Filter.vue

@@ -213,7 +213,7 @@ function setfilter(data) {
 function updateFilter(
   index: number,
   field = null,
-  value: string = null,
+  value: string = "",
   operator: string = null
 ) {
   let filter = JSON.parse(JSON.stringify(props.filters[index]));

desk/src/components/Settings/EmailAdd.vue

@@ -68,7 +68,7 @@
               :name="field.name"
               :type="field.type"
             />
-            <p class="text-xs text-gray-500">{{ field.description }}</p>
+            <p class="text-gray-500 text-p-sm">{{ field.description }}</p>
           </div>
         </div>
         <ErrorMessage v-if="error" class="ml-1" :message="error" />

desk/src/components/Settings/EmailEdit.vue

@@ -52,7 +52,7 @@
             :name="field.name"
             :type="field.type"
           />
-          <p class="text-xs text-gray-500">{{ field.description }}</p>
+          <p class="text-p-sm text-gray-500">{{ field.description }}</p>
         </div>
       </div>
       <ErrorMessage v-if="error" class="ml-1" :message="error" />

desk/src/components/SidebarLink.vue

@@ -5,8 +5,8 @@
       'w-full': isExpanded,
       'w-8': !isExpanded,
       'shadow-sm': isActive,
-      'bg-white': isActive,
-      'hover:bg-gray-100': !isActive,
+      [bgColor]: isActive,
+      [hvColor]: !isActive,
     }"
     @click="handle"
   >
@@ -40,16 +40,20 @@ import { Icon } from "@iconify/vue";
 interface P {
   icon: unknown;
   label: string;
-  isExpanded: boolean;
+  isExpanded?: boolean;
   isActive?: boolean;
   onClick?: () => void;
   to?: string;
+  bgColor?: string;
+  hvColor?: string;
 }
 
 const props = withDefaults(defineProps<P>(), {
   isActive: false,
   onClick: () => () => true,
   to: "",
+  bgColor: "bg-white",
+  hvColor: "hover:bg-gray-100",
 });
 const router = useRouter();
 

desk/src/components/UserAvatar.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex items-center gap-2">
-    <Avatar :label="user.name" :image="user.user_image" v-bind="$attrs" />
+    <Avatar
+      :label="user.name"
+      :image="user.user_image"
+      v-bind="$attrs"
+      v-if="!hideAvatar"
+    />
     <span
       v-if="expand"
       class="truncate"
@@ -31,6 +36,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hideAvatar: {
+    type: Boolean,
+    default: false,
+  },
 });
 const user = userStore.getUser(props.name);
 </script>

desk/src/components/ViewControls.vue

@@ -84,6 +84,7 @@
       <ColumnSettings
         :fields="column.fields"
         :columns="column.columns"
+        :is-customer-portal="isCustomerPortal"
         @event:column="(e) => emitToParent(e, 'event:column')"
       />
     </div>
@@ -114,82 +115,92 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  isCustomerPortal: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { isMobileView } = useScreenSize();
 
 const quickFilterList = computed(() => {
   let filters = [{ name: "name", label: "ID", fieldtype: "Data" }];
-
   return filters;
 });
 
-const presetFilters = [
-  {
-    label: "All Tickets",
-    onClick: (e) => {
-      setTitle("Helpdesk");
-      emitToParent(
-        {
-          event: "clear",
-        },
-        "event:filter"
-      );
+const presetFilters = computed(() => {
+  const _presetFilters = [
+    {
+      label: "All Tickets",
+      onClick: (e) => {
+        setTitle("Helpdesk");
+        emitToParent(
+          {
+            event: "clear",
+          },
+          "event:filter"
+        );
+      },
     },
-  },
-  {
-    label: "My Open Tickets",
-    onClick: (e) => {
-      const preset = getPresetFilters("Open");
-      emitToParent(
-        {
-          event: "preset",
-          data: preset,
-        },
-        "event:filter"
-      );
+    {
+      label: "My Open Tickets",
+      onClick: (e) => {
+        const preset = getPresetFilters("Open");
+        emitToParent(
+          {
+            event: "preset",
+            data: preset,
+          },
+          "event:filter"
+        );
+      },
     },
-  },
-  {
-    label: "My Replied Tickets",
-    onClick: (e) => {
-      const preset = getPresetFilters("Replied");
-      emitToParent(
-        {
-          event: "preset",
-          data: preset,
-        },
-        "event:filter"
-      );
+    {
+      label: "My Closed Tickets",
+      onClick: (e) => {
+        const preset = getPresetFilters("Closed");
+        emitToParent(
+          {
+            event: "preset",
+            data: preset,
+          },
+          "event:filter"
+        );
+      },
     },
-  },
-  {
-    label: "My Resolved Tickets",
-    onClick: (e) => {
-      const preset = getPresetFilters("Resolved");
-      emitToParent(
-        {
-          event: "preset",
-          data: preset,
+  ];
+  if (!props.isCustomerPortal) {
+    _presetFilters.push(
+      {
+        label: "My Replied Tickets",
+        onClick: (e) => {
+          const preset = getPresetFilters("Replied");
+          emitToParent(
+            {
+              event: "preset",
+              data: preset,
+            },
+            "event:filter"
+          );
         },
-        "event:filter"
-      );
-    },
-  },
-  {
-    label: "My Closed Tickets",
-    onClick: (e) => {
-      const preset = getPresetFilters("Closed");
-      emitToParent(
-        {
-          event: "preset",
-          data: preset,
+      },
+      {
+        label: "My Resolved Tickets",
+        onClick: (e) => {
+          const preset = getPresetFilters("Resolved");
+          emitToParent(
+            {
+              event: "preset",
+              data: preset,
+            },
+            "event:filter"
+          );
         },
-        "event:filter"
-      );
-    },
-  },
-];
+      }
+    );
+  }
+  return _presetFilters;
+});
 
 function setTitle(title: string) {
   document.title = title;
@@ -198,27 +209,35 @@ function setTitle(title: string) {
 function getPresetFilters(status: string) {
   setTitle(`My ${status} Tickets`);
   document.title = `My ${status} Tickets`;
-  return {
-    filters: [
-      {
-        field: props.filter.filterableFields.find(
-          (f) => f.fieldname === "status"
-        ),
-        operator: "is",
-        value: status,
-      },
-      {
-        field: props.filter.filterableFields.find(
-          (f) => f.fieldname === "_assign"
-        ),
-        operator: "is",
-        value: authStore.userId,
-      },
-    ],
-    filtersToApply: {
-      status: ["=", status],
-      _assign: ["LIKE", `%${authStore.userId}%`],
+
+  const filtersToApply = {
+    status: ["=", status],
+  };
+
+  const filters = [
+    {
+      field: props.filter.filterableFields.find(
+        (f) => f.fieldname === "status"
+      ),
+      operator: "is",
+      value: status,
     },
+  ];
+
+  if (!props.isCustomerPortal) {
+    filtersToApply["_assign"] = ["LIKE", `%${authStore.userId}%`];
+    filters.push({
+      field: props.filter.filterableFields.find(
+        (f) => f.fieldname === "_assign"
+      ),
+      operator: "is",
+      value: authStore.userId,
+    });
+  }
+
+  return {
+    filters,
+    filtersToApply,
   };
 }
 

desk/src/components/knowledge-base-v2/ArticleCard.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="flex justify-between items-center cursor-pointer w-full"
+    @click="handleArticleClick"
+  >
+    <!-- Left Side -->
+    <div class="flex p-2 gap-3 flex-1 max-w-[50%]">
+      <Avatar label="JD" shape="square" size="2xl" :image="articleImg" />
+      <div class="flex flex-col gap-1.5 w-full">
+        <h5 class="text-lg font-semibold text-gray-800">
+          {{ article.title }}
+        </h5>
+        <div class="text-sm text-gray-600 truncate max-w-[70%]">
+          {{ articleSubTitle }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Side -->
+    <div class="flex flex-1 justify-between p-2 items-center gap-10">
+      <div class="flex gap-2 items-center">
+        <Avatar :label="author.name" :image="author.image" />
+        <span class="text-sm text-gray-600 flex-1 truncate">{{
+          author.name
+        }}</span>
+      </div>
+      <!-- <span class="text-sm text-gray-600">{{ "24, Aug 2024" }}</span> -->
+      <span class="text-sm text-gray-600">{{
+        dayjs.tz(article.published_on).format("DD, MMM YYYY")
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Avatar } from "frappe-ui";
+import { dayjs } from "@/dayjs";
+import { Article, Author } from "@/types";
+import { useRouter } from "vue-router";
+
+const props = defineProps<{
+  article: Article;
+  author: Author;
+}>();
+
+const router = useRouter();
+const articleSubTitle = computed(
+  () =>
+    props.article.subtitle ||
+    "This article helps you understand the topic effectively."
+);
+
+const articleImg = computed(
+  () => props.article.article_image || "/assets/helpdesk/desk/article-2.png"
+);
+
+function handleArticleClick() {
+  const routerCategory = router.currentRoute.value.query.category as string;
+  const category = routerCategory || props.article.category;
+  const subCategory = !routerCategory ? props.article.category : "";
+  const articleId = props.article.name;
+
+  const articleData = {
+    category,
+    subCategory,
+    articleId,
+  };
+
+  router.push({
+    name: "KBArticlePublicNew",
+    params: articleData,
+    query: {
+      category,
+      subCategory,
+    },
+  });
+}
+</script>
+
+<style scoped></style>