Feature - Desktop view: Implement ticket overviews (iteration 1)

Co-authored-by: Benjamin Scharf <[email protected]> Co-authored-by: Dominik Klein <[email protected]> Co-authored-by: Dusan Vuckovic <[email protected]> Co-authored-by: Florian Liebe <[email protected]> Co-authored-by: Martin Gruner <[email protected]>
dineshkummarc · Jan 24, 2025 · d741a73 · d741a73
1 parent b5c2fc9
commit d741a73
Show file tree

Hide file tree

Showing 194 changed files with 6,175 additions and 1,684 deletions.
diff --git a/app/channels/graphql_channel.rb b/app/channels/graphql_channel.rb
@@ -12,10 +12,11 @@ def execute(data)
 
     # context must be kept in sync with GraphqlController!
     context = {
-      sid:          sid,
-      current_user: current_user,
+      sid:             sid,
+      current_user:    current_user,
+      current_user_id: current_user&.id,
       # :channel is required for ActionCableSubscriptions and MUST NOT be used otherwise.
-      channel:      self,
+      channel:         self,
     }
 
     result = UserInfo.with_user_id(current_user&.id) do

diff --git a/app/controllers/graphql_controller.rb b/app/controllers/graphql_controller.rb
@@ -49,10 +49,11 @@ def single_query
   def context
     # context must be kept in sync with GraphqlChannel!
     {
-      sid:          session.id,
-      current_user: current_user,
+      sid:             session.id,
+      current_user:    current_user,
+      current_user_id: current_user&.id,
       # :controller is used by login/logout mutations and MUST NOT be used otherwise.
-      controller:   self,
+      controller:      self,
     }
   end
 

diff --git a/app/frontend/apps/desktop/AppDesktop.vue b/app/frontend/apps/desktop/AppDesktop.vue
@@ -20,6 +20,7 @@ import { useSessionStore } from '#shared/stores/session.ts'
 import emitter from '#shared/utils/emitter.ts'
 
 import { initializeConfirmationDialog } from '#desktop/components/CommonConfirmationDialog/initializeConfirmationDialog.ts'
+import { useTicketOverviewsStore } from '#desktop/entities/ticket/stores/ticketOverviews.ts'
 import { useUserCurrentTaskbarTabsStore } from '#desktop/entities/user/current/stores/taskbarTabs.ts'
 
 const router = useRouter()
@@ -71,6 +72,7 @@ watch(
   (newValue, oldValue) => {
     if (!newValue || oldValue) return
 
+    useTicketOverviewsStore()
     useUserCurrentTaskbarTabsStore()
     initializeDefaultObjectAttributes()
   },

diff --git a/app/frontend/apps/desktop/components/CommonBreadcrumb/CommonBreadcrumb.vue b/app/frontend/apps/desktop/components/CommonBreadcrumb/CommonBreadcrumb.vue
@@ -68,6 +68,15 @@ const sizeClasses = computed(() => {
           }}
         </h1>
 
+        <CommonBadge
+          v-if="item.count !== undefined"
+          class="font-bold leading-snug ltr:ml-1.5 rtl:mr-1.5"
+          size="xs"
+          rounded
+        >
+          {{ item.count }}
+        </CommonBadge>
+
         <CommonIcon
           v-if="idx !== items.length - 1"
           :name="

diff --git a/app/frontend/apps/desktop/components/CommonBreadcrumb/types.ts b/app/frontend/apps/desktop/components/CommonBreadcrumb/types.ts
@@ -7,4 +7,5 @@ export interface BreadcrumbItem {
   noOptionLabelTranslation?: boolean
   route?: string
   icon?: string
+  count?: number
 }
diff --git a/...ntend/apps/desktop/components/CommonCalendarPreviewFlyout/CommonCalendarPreviewFlyout.vue b/...ntend/apps/desktop/components/CommonCalendarPreviewFlyout/CommonCalendarPreviewFlyout.vue
@@ -12,8 +12,8 @@ import openExternalLink from '#shared/utils/openExternalLink.ts'
 
 import CommonFlyout from '#desktop/components/CommonFlyout/CommonFlyout.vue'
 import CommonLoader from '#desktop/components/CommonLoader/CommonLoader.vue'
-import CommonSimpleTable from '#desktop/components/CommonSimpleTable/CommonSimpleTable.vue'
-import type { TableHeader } from '#desktop/components/CommonSimpleTable/types.ts'
+import CommonSimpleTable from '#desktop/components/CommonTable/CommonSimpleTable.vue'
+import type { TableSimpleHeader } from '#desktop/components/CommonTable/types'
 import { useCalendarIcsFileEventsQuery } from '#desktop/entities/calendar/ics-file/graphql/queries/events.api.ts'
 
 interface Props {
@@ -32,7 +32,7 @@ const calendarEventsQuery = new QueryHandler(
 const calendarEventsQueryResult = calendarEventsQuery.result()
 const calendarEventsQueryLoading = calendarEventsQuery.loading()
 
-const tableHeaders: TableHeader[] = [
+const tableHeaders: TableSimpleHeader[] = [
   {
     key: 'summary',
     label: __('Event Summary'),
@@ -95,6 +95,7 @@ const downloadCalendar = () => {
   >
     <CommonLoader :loading="calendarEventsQueryLoading">
       <CommonSimpleTable
+        :caption="__('Preview Calendar')"
         class="mb-4 w-full"
         :headers="tableHeaders"
         :items="tableItems"

diff --git a/app/frontend/apps/desktop/components/CommonObjectAttribute/CommonObjectAttribute.vue b/app/frontend/apps/desktop/components/CommonObjectAttribute/CommonObjectAttribute.vue
@@ -15,7 +15,11 @@ defineProps<Props>()
       {{ $t(label) }}
     </CommonLabel>
 
-    <CommonLabel size="medium" class="text-gray-100 dark:text-neutral-400">
+    <CommonLabel
+      tag="div"
+      size="medium"
+      class="text-gray-100 dark:text-neutral-400"
+    >
       <slot>{{ body }}</slot>
     </CommonLabel>
   </div>

diff --git a/app/frontend/apps/desktop/components/CommonSimpleTable/CommonSimpleTable.vue b/app/frontend/apps/desktop/components/CommonSimpleTable/CommonSimpleTable.vue