Merge pull request #2014 from RitvikSardana/kb-new-styles

fix(styles): new customer portal knowledge base
frappe · Oct 15, 2024 · 4dac6b5 · 4dac6b5
2 parents ed74fd3 + bcee948
commit 4dac6b5
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 86 deletions.
diff --git a/desk/src/components/knowledge-base-v2/KnowledgeBaseCategory.vue b/desk/src/components/knowledge-base-v2/KnowledgeBaseCategory.vue
@@ -24,51 +24,50 @@
         </template>
       </FormControl>
     </section>
-    <!-- Sub categories Section -->
-    <section
-      class="flex flex-col gap-3 mb-8"
-      v-if="!!category.subCategories.length"
-    >
-      <h3 class="text-lg font-semibold text-gray-900">Sub-categories</h3>
-      <!-- sub category card container-->
-      <div class="flex gap-5 flex-wrap text-lg">
-        <!-- sub category card -->
-        <div
-          v-for="subCategory in category.subCategories"
-          class="border rounded px-3.5 py-3 cursor-pointer max-w-[220px] min-w-[220px] hover:border-gray-500"
-          @click="handleSubCategoryClick(subCategory)"
-        >
-          <h5 class="truncate text-lg">{{ subCategory?.category_name }}</h5>
-          <span class="text-sm text-gray-600">
-            {{ subCategory.articles.length }} articles
-          </span>
+    <div class="overflow-scroll">
+      <!-- Sub categories Section -->
+      <section
+        class="flex flex-col gap-3 mb-8"
+        v-if="!!category.subCategories.length"
+      >
+        <h3 class="text-lg font-semibold text-gray-900">Sub-categories</h3>
+        <!-- sub category card container-->
+        <div class="flex gap-5 flex-wrap text-lg">
+          <!-- sub category card -->
+          <div
+            v-for="subCategory in category.subCategories"
+            class="border rounded px-3.5 py-3 cursor-pointer max-w-[190px] min-w-[190px] hover:border-gray-500"
+            @click="handleSubCategoryClick(subCategory)"
+          >
+            <h5 class="truncate text-lg">{{ subCategory?.category_name }}</h5>
+            <span class="text-sm text-gray-600">
+              {{ subCategory.articles.length }} articles
+            </span>
+          </div>
         </div>
+      </section>
+      <!-- Article List View -->
+      <section class="flex flex-col gap-3" v-if="!!_articles.length">
+        <h4 class="text-lg font-semibold text-gray-900">
+          {{ showAllArticles ? "All Articles" : "Articles" }}
+        </h4>
+        <!-- Article Container -->
+        <div class="flex flex-col gap-x-2 divide-y max-w-full">
+          <!-- Article Card -->
+          <ArticleCard
+            v-for="article in _articles"
+            :article="article"
+            :author="category.authors[article.author]"
+            :key="article.name"
+          />
+        </div>
+      </section>
+      <div
+        v-else
+        class="flex items center justify-center h-[300px] w-full text-gray-600"
+      >
+        No articles found
       </div>
-    </section>
-    <!-- Article List View -->
-    <section
-      class="flex flex-col gap-3 overflow-scroll"
-      v-if="!!_articles.length"
-    >
-      <h4 class="text-lg font-semibold text-gray-900">
-        {{ showAllArticles ? "All Articles" : "Articles" }}
-      </h4>
-      <!-- Article Container -->
-      <div class="flex flex-col gap-x-2 divide-y max-w-full">
-        <!-- Article Card -->
-        <ArticleCard
-          v-for="article in _articles"
-          :article="article"
-          :author="category.authors[article.author]"
-          :key="article.name"
-        />
-      </div>
-    </section>
-    <div
-      v-else
-      class="flex items center justify-center h-[300px] w-full text-gray-600"
-    >
-      No articles found
     </div>
   </div>
   <div

diff --git a/desk/src/pages/TicketNew.vue b/desk/src/pages/TicketNew.vue
@@ -1,16 +1,19 @@
 <template>
   <div class="flex flex-col overflow-y-auto">
-    <TicketBreadcrumbs
-      :parent="route.meta.parent"
-      title="New"
-      :current="route.name"
-    />
+    <LayoutHeader>
+      <template #left-header>
+        <Breadcrumbs :items="breadcrumbs" />
+      </template>
+    </LayoutHeader>
     <!-- Container -->
-    <div class="max-w-screen-xl mx-5 flex flex-col gap-5 mb-5">
-      <div v-if="Boolean(template.data?.about)" class="mx-5 my-3">
-        {{ template.data.about }}
+    <div
+      class="max-w-screen-lg flex flex-col gap-5 m-5 w-full h-full flex-1 self-center"
+    >
+      <!-- custom fields descriptions -->
+      <div v-if="Boolean(template.data?.about)" class="">
         <div class="prose-f" v-html="sanitize(template.data.about)" />
       </div>
+      <!-- custom fields -->
       <div
         class="grid grid-cols-1 gap-4 sm:grid-cols-3"
         v-if="Boolean(visibleFields)"
@@ -23,46 +26,47 @@
           @change="templateFields[field.fieldname] = $event.value"
         />
       </div>
-      <div>
+      <!-- existing fields -->
+      <div class="flex flex-col flex-1" :class="subject.length >= 2 && 'gap-5'">
         <FormControl
           v-model="subject"
           type="text"
           label="Subject*"
           placeholder="A short description"
         />
-      </div>
-      <TicketNewArticles v-if="isCustomerPortal" :search="subject" />
-      <div v-if="isCustomerPortal">
-        <TicketTextEditor
-          v-show="subject.length > 2 || description.length > 0"
-          ref="editor"
-          v-model:attachments="attachments"
-          v-model:content="description"
-          placeholder="Detailed explanation"
-          expand
-        >
-          <template #bottom-right>
-            <Button
-              label="Submit"
-              theme="gray"
-              variant="solid"
-              :disabled="
-                $refs.editor.editor.isEmpty || ticket.loading || !subject
-              "
-              @click="() => ticket.submit()"
-            />
-          </template>
-        </TicketTextEditor>
-        <h4
-          v-show="subject.length <= 2 && description.length === 0"
-          class="text-lg text-gray-500"
-        >
-          Please enter a subject to continue
-        </h4>
+        <TicketNewArticles v-if="isCustomerPortal" :search="subject" />
+        <div v-if="isCustomerPortal">
+          <h4
+            v-show="subject.length <= 2 && description.length === 0"
+            class="text-p-sm text-gray-500 ml-1"
+          >
+            Please enter a subject to continue
+          </h4>
+          <TicketTextEditor
+            v-show="subject.length > 2 || description.length > 0"
+            ref="editor"
+            v-model:attachments="attachments"
+            v-model:content="description"
+            placeholder="Detailed explanation"
+            expand
+          >
+            <template #bottom-right>
+              <Button
+                label="Submit"
+                theme="gray"
+                variant="solid"
+                :disabled="
+                  $refs.editor.editor.isEmpty || ticket.loading || !subject
+                "
+                @click="() => ticket.submit()"
+              />
+            </template>
+          </TicketTextEditor>
+        </div>
       </div>
 
       <!-- for agent portal -->
-      <div v-else>
+      <div v-if="!isCustomerPortal">
         <TicketTextEditor
           ref="editor"
           v-model:attachments="attachments"
@@ -90,11 +94,17 @@
 <script setup lang="ts">
 import { ref, computed, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { createResource, usePageMeta, Button, FormControl } from "frappe-ui";
+import {
+  createResource,
+  usePageMeta,
+  Button,
+  FormControl,
+  Breadcrumbs,
+} from "frappe-ui";
 import sanitizeHtml from "sanitize-html";
 import { isEmpty } from "lodash";
 import { useError } from "@/composables/error";
-import { UniInput } from "@/components";
+import { LayoutHeader, UniInput } from "@/components";
 import TicketBreadcrumbs from "./ticket/TicketBreadcrumbs.vue";
 import TicketNewArticles from "./ticket/TicketNewArticles.vue";
 import TicketTextEditor from "./ticket/TicketTextEditor.vue";
@@ -180,6 +190,24 @@ function sanitize(html: string) {
   });
 }
 
+const breadcrumbs = computed(() => {
+  const items = [
+    {
+      label: "Tickets",
+      route: {
+        name: "TicketsCustomer",
+      },
+    },
+    {
+      label: "New Ticket",
+      route: {
+        name: "TicketNew",
+      },
+    },
+  ];
+  return items;
+});
+
 usePageMeta(() => ({
   title: "New Ticket",
 }));

diff --git a/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue b/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue
@@ -22,8 +22,7 @@ import { LayoutHeader } from "@/components";
 import KnowledgeBaseSidebar from "@/components/knowledge-base-v2/KnowledgeBaseSidebar.vue";
 import KnowledgeBaseCategory from "@/components/knowledge-base-v2/KnowledgeBaseCategory.vue";
 import { useRouter } from "vue-router";
-import { Breadcrumbs, createResource, call } from "frappe-ui";
-import { reactive } from "vue";
+import { Breadcrumbs } from "frappe-ui";
 
 const router = useRouter();
 const defaultCategory = computed(