Feature - Desktop view: Implement ticket update possibilities.

Co-authored-by: Benjamin Scharf <bs@zammad.com>
Co-authored-by: Dominik Klein <dk@zammad.com>
Co-authored-by: Dusan Vuckovic <dv@zammad.com>
Co-authored-by: Florian Liebe <fl@zammad.com>
Co-authored-by: Mantas Masalskis <mm@zammad.com>
Co-authored-by: Martin Gruner <mg@zammad.com>

app/frontend/apps/desktop/components/CommonActionMenu/CommonActionMenu.vue

@@ -43,6 +43,7 @@ const props = withDefaults(defineProps<Props>(), {
   placement: 'arrowStart',
   orientation: 'autoVertical',
   defaultButtonVariant: 'neutral',
+  defaultIcon: 'three-dots-vertical',
   noPaddedDefaultButton: true,
 })
 
@@ -139,7 +140,7 @@ const variantClasses = computed(() => {
         ]"
         :variant="defaultButtonVariant as ButtonVariant"
         :size="buttonSize"
-        :icon="defaultIcon || 'three-dots-vertical'"
+        :icon="defaultIcon"
         @click="toggle"
       />
 

app/frontend/apps/desktop/components/CommonButton/CommonButton.vue

@@ -139,7 +139,7 @@ const iconSizeClass = computed(() => {
 
 <template>
   <button
-    class="-:inline-flex -:focus:outline-none -:focus:outline-0 -:focus:outline-offset-0 -:border-0 h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 font-normal shadow-none transition duration-200 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:hover:outline focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] dark:hover:outline-blue-900"
+    class="-:inline-flex -:focus:outline-none -:focus:outline-0 -:focus:outline-offset-0 -:border-0 h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 font-normal shadow-none transition duration-200 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:hover:outline focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] focus:active:!outline-blue-800 dark:hover:outline-blue-900"
     :class="[
       ...variantClasses,
       ...sizeClasses,

app/frontend/apps/desktop/components/CommonConfirmationDialog/CommonConfirmationDialog.vue

@@ -12,11 +12,13 @@ import type { ConfirmationVariantOptions } from './types.ts'
 
 const { confirmationOptions } = useConfirmation()
 
-const handleConfirmation = (isCancel: boolean) => {
+const handleConfirmation = (isCancel?: boolean) => {
   if (isCancel) {
     confirmationOptions.value?.cancelCallback()
-  } else {
+  } else if (isCancel === false) {
     confirmationOptions.value?.confirmCallback()
+  } else {
+    confirmationOptions.value?.closeCallback()
   }
 
   confirmationOptions.value = undefined

app/frontend/apps/desktop/components/CommonConfirmationDialog/__tests__/CommonConfirmationDialog.spec.ts

@@ -33,6 +33,7 @@ describe('dialog confirm behaviour', () => {
       text: 'Test heading',
       confirmCallback: confirmCallbackSpy,
       cancelCallback: vi.fn(),
+      closeCallback: vi.fn(),
     }
 
     await waitForNextTick()
@@ -53,6 +54,7 @@ describe('dialog confirm behaviour', () => {
       confirmationVariant: 'delete',
       confirmCallback: confirmCallbackSpy,
       cancelCallback: vi.fn(),
+      closeCallback: vi.fn(),
     }
 
     await waitForNextTick()
@@ -81,6 +83,7 @@ describe('dialog confirm behaviour', () => {
       buttonVariant: 'danger',
       confirmCallback: confirmCallbackSpy,
       cancelCallback: vi.fn(),
+      closeCallback: vi.fn(),
     }
 
     await waitForNextTick()
@@ -103,6 +106,7 @@ describe('dialog confirm behaviour', () => {
       text: 'Test heading',
       confirmCallback: confirmCallbackSpy,
       cancelCallback: cancelCallbackSpy,
+      closeCallback: vi.fn(),
     }
 
     await waitForNextTick()

app/frontend/apps/desktop/components/CommonDialog/CommonDialog.vue

@@ -42,14 +42,14 @@ defineOptions({
 })
 
 const emit = defineEmits<{
-  close: [cancel: boolean]
+  close: [cancel?: boolean]
 }>()
 
 const dialogElement = ref<HTMLElement>()
 const footerElement = ref<HTMLElement>()
 const contentElement = ref<HTMLElement>()
 
-const close = async (cancel = true) => {
+const close = async (cancel?: boolean) => {
   emit('close', cancel)
   await closeDialog(props.name)
 }
@@ -127,7 +127,7 @@ onMounted(() => {
         <slot name="footer">
           <CommonDialogActionFooter
             v-bind="footerActionOptions"
-            @cancel="close()"
+            @cancel="close(true)"
             @action="close(false)"
           />
         </slot>

app/frontend/apps/desktop/components/CommonDialog/__tests__/CommonDialog.spec.ts

@@ -77,7 +77,7 @@ describe('visuals for common dialog', () => {
     const emitted = view.emitted()
 
     expect(emitted.close).toHaveLength(1)
-    expect(emitted.close[0]).toEqual([true])
+    expect(emitted.close[0]).toEqual([undefined])
 
     await view.events.click(view.getByLabelText('Close dialog'))
     expect(emitted.close).toHaveLength(2)

app/frontend/apps/desktop/components/CommonFlyout/CommonFlyout.vue

@@ -23,8 +23,8 @@ import { getFirstFocusableElement } from '#shared/utils/getFocusableElements.ts'
 
 import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
 import CommonOverlayContainer from '#desktop/components/CommonOverlayContainer/CommonOverlayContainer.vue'
-import { useResizeLine } from '#desktop/components/ResizeLine/composables/useResizeLine.ts'
 import ResizeLine from '#desktop/components/ResizeLine/ResizeLine.vue'
+import { useResizeLine } from '#desktop/components/ResizeLine/useResizeLine.ts'
 
 import CommonFlyoutActionFooter from './CommonFlyoutActionFooter.vue'
 import { closeFlyout } from './useFlyout.ts'
@@ -153,12 +153,13 @@ const handleKeyStroke = (e: KeyboardEvent, adjustment: number) => {
   resizeCallback(newWidth)
 }
 
-const { startResizing, isResizingHorizontal } = useResizeLine(
+const { startResizing, isResizing } = useResizeLine(
   resizeCallback,
   resizeHandleComponent.value?.resizeLine,
   handleKeyStroke,
   {
     calculateFromRight: true,
+    orientation: 'vertical',
   },
 )
 
@@ -239,7 +240,7 @@ onMounted(() => {
     :no-close-on-backdrop-click="noCloseOnBackdropClick"
     :show-backdrop="showBackdrop"
     :style="{ width: `${flyoutContainerWidth}px` }"
-    :class="{ 'transition-all': !isResizingHorizontal }"
+    :class="{ 'transition-all': !isResizing }"
     :aria-label="$t('Side panel')"
     :aria-labelledby="`${flyoutId}-title`"
     @click-background="close()"
@@ -306,8 +307,7 @@ onMounted(() => {
       v-if="resizable"
       ref="resizeHandleComponent"
       :label="$t('Resize side panel')"
-      class="absolute top-[7px] h-[calc(100%-14px)] overflow-clip ltr:left-0 ltr:-translate-x-1/2 rtl:right-0 rtl:translate-x-1/2"
-      button-class="ltr:rounded-tl-sm rtl:rounded-tr-sm ltr:rounded-bl-sm rtl:rounded-br-sm"
+      class="absolute top-2 h-[calc(100%-16px)] overflow-clip ltr:left-px ltr:-translate-x-1/2 rtl:right-px rtl:translate-x-1/2"
       orientation="vertical"
       :values="{
         current: flyoutContainerWidth,

app/frontend/apps/desktop/components/CommonInputCopyToClipboard/CommonInputCopyToClipboard.vue

@@ -1,7 +1,7 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { useCopyToClipboard } from '#desktop/composables/useCopyToClipboard.ts'
+import { useCopyToClipboard } from '#shared/composables/useCopyToClipboard.ts'
 
 import CommonButton from '../CommonButton/CommonButton.vue'
 
@@ -30,7 +30,7 @@ const { copyToClipboard } = useCopyToClipboard()
     readonly
   >
     <template #link="context">
-      <div class="mb-2 ms-2 flex h-full items-center">
+      <div class="mb-0.5 ms-2 flex h-full items-center">
         <CommonButton
           prefix-icon="files"
           size="medium"

app/frontend/apps/desktop/components/CommonPopoverMenu/CommonPopoverMenu.vue

@@ -35,6 +35,7 @@ const showHeaderLabel = computed(() => {
 
 const onClickItem = (event: MouseEvent, item: MenuItem) => {
   if (item.onClick) {
+    event.preventDefault()
     item.onClick(props.entity)
   }
 

app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts.snapshot.txt

@@ -76,6 +76,7 @@
           buttonsize="medium"
           class="flex items-center justify-center"
           defaultbuttonvariant="neutral"
+          defaulticon="three-dots-vertical"
           entity="[object Object]"
           hidearrow="false"
           nopaddeddefaultbutton="true"