From 24bca1834352a3bfd43559cc04f06c69e0b180a2 Mon Sep 17 00:00:00 2001
From: Caroline Desprat <cdesprat@icij.org>
Date: Wed, 24 Jul 2024 14:31:51 +0000
Subject: [PATCH] feat : add document action entry and document actions

---
 components.d.ts                               |  9 +-
 ...ionButton.vue => DocumentActionsEntry.vue} | 36 ++++---
 src/components/DocumentActionsGroup.vue       | 98 +++++++++++++++++++
 .../DocumentActionsButton.stories.js          | 32 ------
 .../DocumentActionsEntry.stories.js           | 29 ++++++
 .../DocumentActionsGroup.stories.js           | 37 +++++++
 6 files changed, 196 insertions(+), 45 deletions(-)
 rename src/components/{DocumentActionButton.vue => DocumentActionsEntry.vue} (67%)
 create mode 100644 src/components/DocumentActionsGroup.vue
 delete mode 100644 src/stories/components/DocumentActionsButton.stories.js
 create mode 100644 src/stories/components/DocumentActionsEntry.stories.js
 create mode 100644 src/stories/components/DocumentActionsGroup.stories.js

diff --git a/components.d.ts b/components.d.ts
index 3f7a56336e..8c13cd9b42 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    '(feat': addv document action entry and document actions)
     2: typeof import('./src/components/Document/DocumentMetadata/DocumentMetadataActions/DocumentMetadataActionsEntry copy 2.vue')['default']
     3: typeof import('./src/components/Document/DocumentLocalSearch/DocumentLocalSearch copy 3.vue')['default']
     Api: typeof import('./src/components/Api.vue')['default']
@@ -87,7 +88,6 @@ declare module 'vue' {
     ColumnFilterBadge: typeof import('./src/components/ColumnFilterBadge.vue')['default']
     ColumnFilterDropdown: typeof import('./src/components/ColumnFilterDropdown.vue')['default']
     ContentTypeBadge: typeof import('./src/components/ContentTypeBadge.vue')['default']
-    copy: typeof import('./src/components/PageTable/PageTableTr copy.vue')['default']
     DismissableAlert: typeof import('./src/components/Dismissable/DismissableAlert.vue')['default']
     DismissableToastBody: typeof import('./src/components/Dismissable/DismissableToastBody.vue')['default']
     DisplayContentLength: typeof import('./src/components/Display/DisplayContentLength.vue')['default']
@@ -101,7 +101,13 @@ declare module 'vue' {
     DisplayUser: typeof import('./src/components/Display/DisplayUser.vue')['default']
     DisplayVisibility: typeof import('./src/components/Display/DisplayVisibility.vue')['default']
     DocumentActionButton: typeof import('./src/components/DocumentActionButton.vue')['default']
+    DocumentActionLink: typeof import('./src/components/DocumentActionLink.vue')['default']
     DocumentActions: typeof import('./src/components/DocumentActions.vue')['default']
+    DocumentActionsEntry: typeof import('./src/components/DocumentActionsEntry.vue')['default']
+    DocumentActionsEntryDownload: typeof import('./src/components/DocumentActionsEntryDownload.vue')['default']
+    DocumentActionsEntryDownloadDropdown: typeof import('./src/components/DocumentActionsEntryDownloadDropdown.vue')['default']
+    DocumentActionsEntryDownloadPopover: typeof import('./src/components/DocumentActionsEntryDownloadPopover.vue')['default']
+    DocumentActionsGroup: typeof import('./src/components/DocumentActionsGroup.vue')['default']
     DocumentAttachments: typeof import('./src/components/DocumentAttachments.vue')['default']
     DocumentCard: typeof import('./src/components/Document/DocumentCard/DocumentCard.vue')['default']
     DocumentCardCheckbox: typeof import('./src/components/Document/DocumentCard/DocumentCardCheckbox.vue')['default']
@@ -299,6 +305,7 @@ declare module 'vue' {
     WidgetTreeMap: typeof import('./src/components/Widget/WidgetTreeMap.vue')['default']
   }
   export interface ComponentCustomProperties {
+    vBModal: typeof import('bootstrap-vue-next')['vBModal']
     vBTooltip: typeof import('bootstrap-vue-next')['vBTooltip']
   }
 }
diff --git a/src/components/DocumentActionButton.vue b/src/components/DocumentActionsEntry.vue
similarity index 67%
rename from src/components/DocumentActionButton.vue
rename to src/components/DocumentActionsEntry.vue
index 34a7688480..2256db10fa 100644
--- a/src/components/DocumentActionButton.vue
+++ b/src/components/DocumentActionsEntry.vue
@@ -3,11 +3,14 @@
     :id="btnId"
     :icon-left="iconName"
     :icon-left-weight="iconWeight"
-    class="btn"
-    :class="btnClassDefinition"
-    :tooltip-placement="tooltipPlacement"
+    :icon-left-hover-weight="iconHoverWeight"
     :label="label"
     hide-label
+    :tooltipPlacement="tooltipPlacement"
+    square
+    variant="outline-tertiary"
+    class="document-actions-entry border-0 "
+    :class="{'document-actions-entry--filled': isFilled}"
     :disabled="disabled"
   />
 </template>
@@ -18,7 +21,7 @@ import uniqueId from 'lodash/uniqueId'
 
 import IconButton from '@/components/IconButton'
 
-defineOptions({ name: 'DocumentActionsButton' })
+defineOptions({ name: 'DocumentActionsEntry' })
 const props = defineProps({
   /**
    * Icon name
@@ -39,7 +42,7 @@ const props = defineProps({
    */
   btnClass: {
     type: String,
-    default: 'btn-link btn-sm'
+    default: 'btn-sm'
   },
   /**
    * Button is filled
@@ -50,17 +53,13 @@ const props = defineProps({
   /**
    * Class to apply to the action button when document is filled
    */
-  filledBtnClass: {
+  tooltipPlacement: {
     type: String,
-    default: 'starred'
+    default: 'bottom'
   },
   /**
-   * Class to apply to the action button when document is filled
+   * Disable button 
    */
-  tooltipPlacement: {
-    type: String,
-    default: 'top'
-  },
   disabled: {
     type: Boolean,
     default: false
@@ -80,4 +79,17 @@ function classAttributeToObject(str) {
 }
 
 const iconWeight = computed(() => (props.isFilled ? 'fill' : 'regular'))
+const iconHoverWeight = computed(() => (props.isFilled ? 'fill' : 'bold'))
 </script>
+<style lang="scss" scoped>
+
+.document-actions-entry  {
+  &--filled {
+    color: $primary;
+  }
+  &:hover{
+    color : $primary;
+  }
+  // this will compile to: --pf-primary-color: #000000;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/DocumentActionsGroup.vue b/src/components/DocumentActionsGroup.vue
new file mode 100644
index 0000000000..965eee96b2
--- /dev/null
+++ b/src/components/DocumentActionsGroup.vue
@@ -0,0 +1,98 @@
+<template>
+  <b-button-group class="document-actions align-items-center" :vertical="vertical" size="sm">
+    <slot name="selection" v-bind="{document}">
+
+    </slot>
+    <slot name="actions" v-bind="{document}">
+      <document-actions-entry icon-name="star" label="Star" @click="clickStar" :tooltipPlacement="tooltipPlacement" :isFilled="isStarred"/>
+      <document-actions-entry icon-name="share" label="Share" @click="clickShare" :tooltipPlacement="tooltipPlacement"/>
+      <document-actions-entry icon-name="download" :disabled="isDownloadAllowed" @click="clickDownload" :label="downloadLabel" :tooltipPlacement="tooltipPlacement" />
+      <document-actions-entry icon-name="arrows-out-simple"  label="Expand"  @click="clickExpand" :tooltipPlacement="tooltipPlacement"/>
+  </slot>
+   
+  </b-button-group>
+</template>
+
+<script setup>
+import { findIndex, uniqueId } from 'lodash'
+import { mapState, useStore } from 'vuex'
+import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import RouterLinkPopup from '@/components/RouterLinkPopup'
+import DocumentActionsEntry from '@/components/DocumentActionsEntry'
+defineProps({
+  /**
+   * The selected document
+   */
+  document: {
+    type: Object
+  },
+  /**
+   * Use a vertical layoutk
+   */
+  vertical: {
+    type: Boolean
+  },
+  /**
+   * Tooltip's placement on each action using Floating UI: https://floating-ui.com/docs/tutorial#placements
+   * @values 'auto', 'auto-start', 'auto-end', 'top', 'right', 'bottom', 'left', 'top-start', 'right-start', 'bottom-start', 'left-start', 'top-end', 'right-end', 'bottom-end', 'left-end'
+   */
+  tooltipPlacement: {
+    type: String,
+    default: 'top'
+  },
+  /**
+   * True if download is allowed for the document
+   */
+  isDownloadAllowed: {
+    type: Boolean
+  },
+  /**
+   * True if download is allowed for the document
+   */
+   isStarred: {
+    type: Boolean
+  }
+})
+
+const { t } = useI18n()
+
+const emit = defineEmits(['click-star','click-download','click-share','click-expand'])
+
+
+
+async function clickStar() {
+  emit("click-star", {id:document.id})
+}
+async function clickDownload() {
+  emit("click-download", {id:document.id})
+}
+async function clickShare() {
+  emit("click-share", {id:document.id})
+}
+async function clickExpand() {
+  emit("click-expand", {id:document.id})
+}
+
+</script>
+
+<style lang="scss" scoped>
+.document-actions {
+  .btn-group {
+    .btn:not(:first-of-type) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .dropdown:last-of-type {
+      display: inline-flex;
+
+      &:deep(.btn) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/stories/components/DocumentActionsButton.stories.js b/src/stories/components/DocumentActionsButton.stories.js
deleted file mode 100644
index 1577e053ba..0000000000
--- a/src/stories/components/DocumentActionsButton.stories.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import DocumentActionsButton from '@/components/DocumentActionButton'
-
-export default {
-  components: { DocumentActionsButton },
-  title: 'Components/DocumentActions/Button',
-  component: DocumentActionsButton,
-  tags: ['autodocs']
-}
-
-export const Default = {
-  args: {
-    iconName: 'star',
-    label: 'Star',
-    tooltipPlacement: 'top',
-    tooltipLabel: 'Test',
-    btnClass: 'btn-link btn-sm',
-    filledBtnClass: 'starred',
-    isFilled: false
-  }
-}
-export const Filled = {
-  args: {
-    iconName: 'star',
-    label: 'Star',
-    tooltipLabel: 'Test',
-    tooltipPlacement: 'top',
-    btnClass: 'btn-link btn-sm',
-    filledBtnClass: 'starred',
-    isFilled: true
-  }
-}
-
diff --git a/src/stories/components/DocumentActionsEntry.stories.js b/src/stories/components/DocumentActionsEntry.stories.js
new file mode 100644
index 0000000000..e221c152eb
--- /dev/null
+++ b/src/stories/components/DocumentActionsEntry.stories.js
@@ -0,0 +1,29 @@
+import DocumentActionsEntry from '@/components/DocumentActionsEntry'
+
+export default {
+  components: { DocumentActionsEntry },
+  title: 'Components/DocumentActionsGroup/Entry',
+  component: DocumentActionsEntry,
+  tags: ['autodocs']
+}
+
+export const Default = {
+  args: {
+    iconName: 'star',
+    label: 'Star',
+    tooltipPlacement: 'right',
+    tooltipLabel: 'Test',
+    filledBtnClass: 'starred',
+    isFilled: false
+  }
+}
+export const Filled = {
+  args: {
+    iconName: 'star',
+    label: 'Star',
+    tooltipLabel: 'Test',
+    tooltipPlacement: 'right',
+    isFilled: true
+  }
+}
+
diff --git a/src/stories/components/DocumentActionsGroup.stories.js b/src/stories/components/DocumentActionsGroup.stories.js
new file mode 100644
index 0000000000..b2fb8391b5
--- /dev/null
+++ b/src/stories/components/DocumentActionsGroup.stories.js
@@ -0,0 +1,37 @@
+import IconButton from '@/components/IconButton'
+import { vueRouter } from 'storybook-vue3-router'
+import DocumentActionsGroup from '@/components/DocumentActionsGroup'
+const routes = [{  name: 'document-modal',path: '/document-modal' }]
+
+export default {
+  decorators: [vueRouter(routes)],
+  components: { DocumentActionsGroup },
+  title: 'Components/DocumentActionsGroup',
+  component: IconButton,
+  tags: ['autodocs'],
+  render: (args) => ({
+    components: {
+      DocumentActionsGroup
+    },
+    setup() {
+      return {
+        args 
+      }
+    },
+    template: `
+      <document-actions-group v-bind="args" />
+    `
+  })
+}
+
+export const Default = {
+  args: {
+    document: {
+      id:"test"
+    },
+    vertical: false,
+    tooltipPlacement: 'top',
+    isStarred: false,
+    isDownloadAllowed: false
+  }
+}