fix: add label value in link field options of group by

frappe · Jan 6, 2025 · d5e46b1 · d5e46b1
1 parent d51eb03
commit d5e46b1
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 20 deletions.
diff --git a/desk/src/components/ListRows.vue b/desk/src/components/ListRows.vue
@@ -3,15 +3,30 @@
     <div v-for="group in reactiveRows" :key="group.group">
       <ListGroupHeader :group="group">
         <div
-          class="my-2 flex items-center gap-2 text-base font-medium text-ink-gray-8"
+          class="my-2 flex items-center gap-2 text-base font-medium text-ink-gray-8 justify-between w-full"
         >
-          <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2 w-full">
             <component v-if="group.icon" :is="group.icon" />
-            <div v-if="group.group == ' '" class="text-ink-gray-4">
+            <div v-if="group.group.label == ''" class="text-ink-gray-4">
               {{ "Empty" }}
+              <span class="text-xs text-ink-gray-6"
+                >{{ group.rows.length + " Articles" }}
+              </span>
+            </div>
+            <div v-else class="flex items-center gap-1 w-full">
+              <span>{{ group.group.label }}</span>
+              <span class="text-xs text-ink-gray-6"
+                >{{ group.rows.length + " Articles" }}
+              </span>
             </div>
-            <div v-else>{{ group.group }}</div>
           </div>
+          <Dropdown :options="options">
+            <Button variant="ghost">
+              <template #icon>
+                <IconMoreHorizontal class="h-4 w-4" />
+              </template>
+            </Button>
+          </Dropdown>
         </div>
       </ListGroupHeader>
       <ListGroupRows :group="group" id="list-rows">
@@ -41,10 +56,17 @@
 </template>
 
 <script setup>
-import { ListRows, ListRow, ListGroupHeader, ListGroupRows } from "frappe-ui";
-
-import { ref, computed, watch } from "vue";
+import {
+  ListRows,
+  ListRow,
+  ListGroupHeader,
+  ListGroupRows,
+  Dropdown,
+  Button,
+} from "frappe-ui";
 
+import { ref, computed, watch, h } from "vue";
+import IconMoreHorizontal from "~icons/lucide/more-horizontal";
 const props = defineProps({
   rows: {
     type: Array,
@@ -54,6 +76,31 @@ const props = defineProps({
 
 const reactiveRows = ref(props.rows);
 
+const options = [
+  {
+    label: "Edit Title",
+    icon: "edit",
+    onClick: () => {},
+  },
+  {
+    group: "Danger",
+    hideLabel: true,
+    items: [
+      {
+        label: "Delete",
+        component: h(Button, {
+          label: "Delete",
+          variant: "ghost",
+          iconLeft: "trash-2",
+          theme: "red",
+          style: "width: 100%; justify-content: flex-start;",
+          onClick: () => {},
+        }),
+      },
+    ],
+  },
+];
+
 watch(
   () => props.rows,
   (val) => (reactiveRows.value = val)

diff --git a/desk/src/components/ListViewBuilder.vue b/desk/src/components/ListViewBuilder.vue
@@ -92,7 +92,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, provide, computed } from "vue";
+import { reactive, provide, computed, h } from "vue";
 import {
   createResource,
   ListView,
@@ -101,6 +101,7 @@ import {
   ListHeader,
   ListHeaderItem,
   Badge,
+  FeatherIcon,
 } from "frappe-ui";
 
 import {
@@ -204,17 +205,24 @@ function getGroupedByRows(listRows, groupByField) {
   groupByField.options?.forEach((option) => {
     let filteredRows = [];
 
-    if (!option) {
+    if (!option.value) {
       filteredRows = listRows.filter((row) => !row[groupByField.name]);
     } else {
-      filteredRows = listRows.filter((row) => row[groupByField.name] == option);
+      filteredRows = listRows.filter(
+        (row) => row[groupByField.name] == option.value
+      );
     }
 
     let groupDetail = {
       label: groupByField.label,
       group: option || " ",
       collapsed: true,
       rows: filteredRows,
+      icon: h(FeatherIcon, {
+        name: "folder",
+        class: "w-4 h-4",
+        color: "black",
+      }),
     };
     groupedRows.push(groupDetail);
   });

diff --git a/desk/src/pages/knowledge-base/KnowledgeBase.vue b/desk/src/pages/knowledge-base/KnowledgeBase.vue
@@ -26,11 +26,9 @@
 </template>
 
 <script setup lang="ts">
-import { usePageMeta, createListResource } from "frappe-ui";
+import { h } from "vue";
+import { usePageMeta, FeatherIcon } from "frappe-ui";
 import LayoutHeader from "@/components/LayoutHeader.vue";
-import ArticleCard from "@/components/knowledge-base/ArticleCard.vue";
-import { Article } from "@/types";
-import KnowledgeBaseListView from "@/components/knowledge-base/KnowledgeBaseListView.vue";
 import ListViewBuilder from "@/components/ListViewBuilder.vue";
 
 const options = {
@@ -46,7 +44,17 @@ const options = {
     },
     Draft: {
       label: "Draft",
-      theme: "gray",
+      theme: "orange",
+    },
+  },
+  columnConfig: {
+    title: {
+      prefix: () => {
+        return h(FeatherIcon, {
+          name: "file",
+          class: "w-4 h-4",
+        });
+      },
     },
   },
 };

diff --git a/desk/src/pages/knowledge-base/NewArticle.vue b/desk/src/pages/knowledge-base/NewArticle.vue
@@ -30,6 +30,11 @@
           wrap="soft"
           maxlength="140"
           autofocus
+          @input="
+            (e) => {
+              e.target.style.height = e.target.scrollHeight + 'px';
+            }
+          "
         />
         <!-- Article Content -->
         <TextEditor

diff --git a/helpdesk/api/doc.py b/helpdesk/api/doc.py
@@ -238,21 +238,31 @@ def get_options(fieldtype, options):
                 options = list(set([d.get(group_by_field) for d in data]))
                 options = [u for u in options if u]
                 options = [category_name for category_name in options if category_name]
+                options = [
+                    {
+                        "label": frappe.db.get_value(
+                            "HD Article Category", option, "category_name"
+                        ),
+                        "value": option,
+                    }
+                    for option in options
+                    if option
+                ]
                 if has_empty_values:
-                    options.append("")
-                print("\n\n", options, "\n\n")
+                    options.append({"label": "", "value": ""})
+
                 if order_by and group_by_field in order_by:
                     order_by_fields = order_by.split(",")
                     order_by_fields = [
                         (field.split(" ")[0], field.split(" ")[1])
                         for field in order_by_fields
                     ]
                     if (group_by_field, "asc") in order_by_fields:
-                        options.sort()
+                        options.sort(key=lambda x: x.get("label"))
                     elif (group_by_field, "desc") in order_by_fields:
-                        options.sort(reverse=True)
+                        options.sort(reverse=True, key=lambda x: x.get("label"))
                 else:
-                    options.sort()
+                    options.sort(key=lambda x: x.get("label"))
                 return options
 
         for field in fields: