feat(Viewer): Add copyToClipboard on qualification click

cozy · Jan 30, 2025 · ff1c7dd · ff1c7dd
1 parent df33cf3
commit ff1c7dd
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 6 deletions.
diff --git a/packages/cozy-viewer/src/Panel/Qualifications/QualificationListItemContact.jsx b/packages/cozy-viewer/src/Panel/Qualifications/QualificationListItemContact.jsx
@@ -5,6 +5,7 @@ import {
   getTranslatedNameForContact,
   formatContactValue
 } from 'cozy-client/dist/models/paper'
+import { copyToClipboard } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
@@ -13,6 +14,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import QualificationListItemText from './QualificationListItemText'
@@ -23,6 +25,7 @@ const QualificationListItemContact = forwardRef(
   ({ file, isReadOnly, toggleActionsMenu }, ref) => {
     const { lang } = useI18n()
     const { contacts, isLoadingContacts } = useReferencedContactName(file)
+    const { showAlert } = useAlert()
 
     if (isLoadingContacts) {
       return (
@@ -41,6 +44,14 @@ const QualificationListItemContact = forwardRef(
     const formattedTitle = getTranslatedNameForContact({ lang })
     const qualificationLabel = file.metadata.qualification.label
 
+    const handleClick = async () => {
+      if (!formattedValue) return
+      await copyToClipboard().action(undefined, {
+        showAlert,
+        copyValue: formattedValue
+      })
+    }
+
     return (
       <>
         <IntentOpener
@@ -51,7 +62,10 @@ const QualificationListItemContact = forwardRef(
           }}
           disabled={!!formattedValue || isReadOnly}
         >
-          <ListItem button={!formattedValue && !isReadOnly}>
+          <ListItem
+            button={!!formattedValue || !isReadOnly}
+            onClick={handleClick}
+          >
             <ListItemIcon>
               <Icon icon={PeopleIcon} />
             </ListItemIcon>

diff --git a/packages/cozy-viewer/src/Panel/Qualifications/QualificationListItemDate.jsx b/packages/cozy-viewer/src/Panel/Qualifications/QualificationListItemDate.jsx
@@ -7,6 +7,7 @@ import {
   getTranslatedNameForDateMetadata,
   formatDateMetadataValue
 } from 'cozy-client/dist/models/paper'
+import { copyToClipboard } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import CalendarIcon from 'cozy-ui/transpiled/react/Icons/Calendar'
@@ -16,6 +17,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import QualificationListItemText from './QualificationListItemText'
@@ -28,6 +30,8 @@ const QualificationListItemDate = forwardRef(
     ref
   ) => {
     const { f, lang } = useI18n()
+    const { showAlert } = useAlert()
+
     const { name, value } = formattedMetadataQualification
     const qualificationLabel = file.metadata.qualification.label
     const formattedTitle = getTranslatedNameForDateMetadata(name, { lang })
@@ -37,6 +41,11 @@ const QualificationListItemDate = forwardRef(
     })
     const isExpirationDate = name === 'expirationDate'
 
+    const handleClick = async () => {
+      if (!value) return
+      await copyToClipboard().action(undefined, { showAlert, copyValue: value })
+    }
+
     return (
       <IntentOpener
         action="OPEN"
@@ -46,7 +55,7 @@ const QualificationListItemDate = forwardRef(
         }}
         disabled={!!value || isReadOnly}
       >
-        <ListItem button={!value && !isReadOnly}>
+        <ListItem button={!!value || !isReadOnly} onClick={handleClick}>
           <ListItemIcon>
             <Icon icon={CalendarIcon} />
           </ListItemIcon>

diff --git a/packages/cozy-viewer/src/Panel/Qualifications/QualificationListItemInformation.jsx b/packages/cozy-viewer/src/Panel/Qualifications/QualificationListItemInformation.jsx
@@ -6,6 +6,7 @@ import {
   formatInformationMetadataValue,
   KNOWN_INFORMATION_METADATA_NAMES
 } from 'cozy-client/dist/models/paper'
+import { copyToClipboard } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import BellIcon from 'cozy-ui/transpiled/react/Icons/Bell'
@@ -20,11 +21,11 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import QualificationListItemText from './QualificationListItemText'
 import IntentOpener from '../../components/IntentOpener'
-
 const KNOWN_INFORMATION_METADATA_ICONS = [
   NumberIcon,
   NumberIcon,
@@ -49,6 +50,8 @@ const QualificationListItemInformation = forwardRef(
     ref
   ) => {
     const { lang } = useI18n()
+    const { showAlert } = useAlert()
+
     const { name, value } = formattedMetadataQualification
     const qualificationLabel = file.metadata.qualification.label
 
@@ -66,6 +69,11 @@ const QualificationListItemInformation = forwardRef(
     const titleComponent =
       formattedTitle === name ? <MidEllipsis text={name} /> : formattedTitle
 
+    const handleClick = async () => {
+      if (!value) return
+      await copyToClipboard().action(undefined, { showAlert, copyValue: value })
+    }
+
     return (
       <IntentOpener
         action="OPEN"
@@ -75,7 +83,7 @@ const QualificationListItemInformation = forwardRef(
         }}
         disabled={!!value || isReadOnly}
       >
-        <ListItem button={!value && !isReadOnly}>
+        <ListItem button={!!value || !isReadOnly} onClick={handleClick}>
           <ListItemIcon>
             <Icon icon={InformationIcon} />
           </ListItemIcon>

diff --git a/packages/cozy-viewer/src/Panel/Qualifications/QualificationListItemOther.jsx b/packages/cozy-viewer/src/Panel/Qualifications/QualificationListItemOther.jsx
@@ -5,6 +5,7 @@ import {
   getTranslatedNameForOtherMetadata,
   formatOtherMetadataValue
 } from 'cozy-client/dist/models/paper'
+import { copyToClipboard } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
@@ -14,6 +15,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import QualificationListItemText from './QualificationListItemText'
@@ -25,6 +27,8 @@ const QualificationListItemOther = forwardRef(
     ref
   ) => {
     const { lang } = useI18n()
+    const { showAlert } = useAlert()
+
     const { name, value } = formattedMetadataQualification
     const qualificationLabel = file.metadata.qualification.label
 
@@ -38,6 +42,11 @@ const QualificationListItemOther = forwardRef(
       name
     })
 
+    const handleClick = async () => {
+      if (!value) return
+      await copyToClipboard().action(undefined, { showAlert, copyValue: value })
+    }
+
     return (
       <IntentOpener
         action="OPEN"
@@ -47,7 +56,7 @@ const QualificationListItemOther = forwardRef(
         }}
         disabled={!!value || isReadOnly}
       >
-        <ListItem button={!value && !isReadOnly}>
+        <ListItem button={!!value || !isReadOnly} onClick={handleClick}>
           <ListItemIcon>
             <Icon icon={FileIcon} />
           </ListItemIcon>

diff --git a/packages/cozy-viewer/src/providers/DemoProvider.jsx b/packages/cozy-viewer/src/providers/DemoProvider.jsx
@@ -2,6 +2,7 @@ import React, { Fragment } from 'react'
 
 import { CozyProvider } from 'cozy-client'
 import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg'
+import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import I18n from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -102,7 +103,9 @@ const DemoProvider = ({
     <CozyProvider client={mockClient}>
       <BreakpointsProvider>
         <I18n dictRequire={lang => locales[lang]} lang={lang}>
-          <Wrapper {...wrapperProps}>{children}</Wrapper>
+          <AlertProvider>
+            <Wrapper {...wrapperProps}>{children}</Wrapper>
+          </AlertProvider>
         </I18n>
       </BreakpointsProvider>
     </CozyProvider>