feat: add page table td actions

ICIJ · Jul 24, 2024 · 63b2fb0 · 63b2fb0
1 parent 657f096
commit 63b2fb0
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 5 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -87,7 +87,7 @@ 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/Display/DisplayStatus copy.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']
@@ -216,8 +216,10 @@ declare module 'vue' {
     PageSettingsTitle: typeof import('./src/components/PageSettings/PageSettingsTitle.vue')['default']
     PageTable: typeof import('./src/components/PageTable/PageTable.vue')['default']
     PageTableTd: typeof import('./src/components/PageTable/PageTableTd.vue')['default']
+    PageTableTdActions: typeof import('./src/components/PageTable/PageTableTdActions.vue')['default']
     PageTableTh: typeof import('./src/components/PageTable/PageTableTh.vue')['default']
     PageTableTr: typeof import('./src/components/PageTable/PageTableTr.vue')['default']
+    PageTableTrActions: typeof import('./src/components/PageTable/PageTableTrActions.vue')['default']
     Pagination: typeof import('./src/components/Pagination.vue')['default']
     Plugins: typeof import('./src/components/Plugins.vue')['default']
     ProjectButton: typeof import('./src/components/Project/ProjectButton.vue')['default']

diff --git a/src/components/PageTable/PageTableTdActions.vue b/src/components/PageTable/PageTableTdActions.vue
@@ -0,0 +1,18 @@
+<template>
+  <b-td class="page-table-td-actions">
+    <div class="d-flex">
+      <slot />
+    </div>
+  </b-td>
+</template>
+
+<style lang="scss">
+.page-table-td-actions > * {
+  visibility: hidden;
+}
+
+.page-table-tr--active > .page-table-td-actions > *,
+.page-table-tr:hover > .page-table-td-actions > * {
+  visibility: visible;
+}
+</style>
diff --git a/src/stories/components/PageTable/PageTable.stories.js b/src/stories/components/PageTable/PageTable.stories.js
@@ -1,10 +1,12 @@
+import DisplayDatetime from '@/components/Display/DisplayDatetime'
+import DisplayStatus from '@/components/Display/DisplayStatus'
+import DisplayVisibility from '@/components/Display/DisplayVisibility'
+import IconButton from '@/components/IconButton'
 import PageTable from '@/components/PageTable/PageTable'
+import PageTableTdActions from '@/components/PageTable/PageTableTdActions'
 import PageTableTh from '@/components/PageTable/PageTableTh'
 import PageTableTr from '@/components/PageTable/PageTableTr'
 import ProjectLabel from '@/components/Project/ProjectLabel'
-import DisplayStatus from '@/components/Display/DisplayStatus'
-import DisplayVisibility from '@/components/Display/DisplayVisibility'
-import DisplayDatetime from '@/components/Display/DisplayDatetime'
 
 export default {
   title: 'Components/PageTable/PageTable',
@@ -79,11 +81,13 @@ export default {
 export const Default = {}
 
 export const WithoutSelectMode = {
-  render: (args) => ({
+  render: () => ({
     components: {
+      IconButton,
       PageTable,
       PageTableTh,
       PageTableTr,
+      PageTableTdActions,
       ProjectLabel,
       DisplayStatus,
       DisplayVisibility,
@@ -100,6 +104,7 @@ export const WithoutSelectMode = {
           <page-table-th label="Project" icon="circles-three-plus" />
           <page-table-th label="Author" icon="user-circle" />
           <page-table-th label="Created" icon="calendar-blank" />
+          <page-table-th label="Actions" hide-label />
         </template>
         <page-table-tr>
           <td><display-status value="queued" /></td>
@@ -110,6 +115,11 @@ export const WithoutSelectMode = {
           <td><project-label project="Project 1" hide-thumbnail /></td>
           <td>John Doe</td>
           <td><display-datetime value="2021-09-01" /></td>
+          <page-table-td-actions>
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="magnifying-glass" class="border-0 me-1" />
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="arrow-clockwise" class="border-0 me-1" />
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="trash" class="border-0 me-1" />
+          </page-table-td-actions>
         </page-table-tr>
         <page-table-tr>
           <td><display-status value="success" /></td>
@@ -120,6 +130,11 @@ export const WithoutSelectMode = {
           <td><project-label project="Project 2" hide-thumbnail /></td>
           <td>Jane Doe</td>
           <td><display-datetime value="2021-09-02" /></td>
+          <page-table-td-actions>
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="magnifying-glass" class="border-0 me-1" />
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="arrow-clockwise" class="border-0 me-1" />
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="trash" class="border-0 me-1" />
+          </page-table-td-actions>
         </page-table-tr>
         <page-table-tr>
           <td><display-status value="failure" /></td>
@@ -130,6 +145,11 @@ export const WithoutSelectMode = {
           <td><project-label project="Project 3" hide-thumbnail /></td>
           <td>Jan Doe</td>
           <td><display-datetime value="2021-09-03" /></td>
+          <page-table-td-actions>
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="magnifying-glass" class="border-0 me-1" />
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="arrow-clockwise" class="border-0 me-1" />
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="trash" class="border-0 me-1" />
+          </page-table-td-actions>
         </page-table-tr>
         <page-table-tr>
           <td><display-status value="draft" /></td>
@@ -140,6 +160,11 @@ export const WithoutSelectMode = {
           <td><project-label project="Project 4" hide-thumbnail /></td>
           <td>Jin Doe</td>
           <td><display-datetime value="2021-09-04" /></td>
+          <page-table-td-actions>
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="magnifying-glass" class="border-0 me-1" />
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="arrow-clockwise" class="border-0 me-1" />
+            <icon-button variant="outline-tertiary" square hide-label size="sm" icon-left="trash" class="border-0 me-1" />
+          </page-table-td-actions>
         </page-table-tr>
       </page-table>
     `