F t34968 add dp bulk edit header to storybook

CHANGELOG.md

@@ -12,6 +12,7 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 - ([#621](https://github.com/demos-europe/demosplan-ui/pull/621)) Bump Vue Peer dependency to 2.5.17 ([@spiess-demos](https://github.com/spiess-demos))
 
 ### Added
+- ([#615](https://github.com/demos-europe/demosplan-ui/pull/615)) Add DpBulkEditHeader documentation to Storybook ([@ahmad-demos](https://github.com/@ahmad-demos))
 - ([#605](https://github.com/demos-europe/demosplan-ui/pull/605)) Add DpEditableList documentation to Storybook ([@ahmad-demos](https://github.com/@ahmad-demos))
 - ([#591](https://github.com/demos-europe/demosplan-ui/pull/591)) Add label tests for form components ([@hwiem](https://github.com/hwiem))
 

src/components/core/DpBulkEditHeader.stories.mdx

@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/addon-docs'
+import DpBulkEditHeader from './DpBulkEditHeader'
+
+<Meta
+    title="Components/BulkEditHeader"
+    component={DpBulkEditHeader}
+/>
+
+# BulkEditHeader
+
+The BulkEditHeader component allows users to perform bulk editing operations on a set of data or records.
+
+In a data management system, users often need to edit multiple records simultaneously.
+Instead of editing each record individually, a bulk edit functionality allows users to select multiple records
+and apply changes to specific fields in one go.
+
+## Custom usage
+
+```html
+<div>
+  <dp-bulk-edit-header
+      v-if="selectedItemsCount.length > 0"
+      :selected-items-count="selectedItemsCount.length"
+      selection-text="Elements"
+      @reset-selection="resetSelection"
+      v-bind="args">
+    <button
+        class="btn-icns u-m-0"
+        type="button"
+        @click.prevent="deleteSelection">
+      <i class="fa fa-times u-mr-0_125" />
+      Delete
+    </button>
+  </dp-bulk-edit-header>
+  <input
+      type="checkbox"
+      @click="toggleSelectAll"> Select all
+  <div
+      class="u-mt-0_5"
+      v-for="item in args.options"
+      :key="item.id">
+    <input
+        :id="item.id"
+        v-model="item.checked"
+        :checked="!item.checked === false"
+        type="checkbox"/>
+    {{ item.label }}
+  </div>
+</div>
+```

src/components/core/DpBulkEditHeader.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue'
+import DpBulkEditHeader from './DpBulkEditHeader.vue'
+
+const meta: Meta<typeof DpBulkEditHeader> = {
+    component: DpBulkEditHeader,
+    title: 'Components/BulkEditHeader',
+    render: (args) => ({
+        components: {
+            DpBulkEditHeader
+        },
+        computed: {
+            selectedItemsCount () {
+                return args.options.filter(checked => checked.checked == true)
+            }
+        },
+        setup() {
+            const toggleSelectAll = () => {
+                for (let element of args.options) {
+                    if(element.checked === false) {
+                        element.checked = true
+                    } else {
+                        element.checked = false
+                    }
+                }
+            }
+
+            const resetSelection = () => {
+                for (const element of args.options) {
+                    element.checked = false
+                }
+            }
+
+            const deleteSelection = () => {
+                for (let element of args.options) {
+                    if(element.checked === true) {
+                        args.options = args.options.filter(checked => checked.checked != true)
+                    }
+                }
+            }
+
+            return { args, deleteSelection, resetSelection, toggleSelectAll }
+        },
+        template: `
+          <div>
+              <dp-bulk-edit-header
+                  v-if="selectedItemsCount.length > 0"
+                  :selected-items-count="selectedItemsCount.length"
+                  selection-text="Elements"
+                  @reset-selection="resetSelection"
+                  v-bind="args">
+                <button
+                    class="btn-icns u-m-0"
+                    type="button"
+                    @click.prevent="deleteSelection">
+                  <i class="fa fa-times u-mr-0_125" />
+                  Delete
+                </button>
+              </dp-bulk-edit-header>
+              <input
+                  type="checkbox"
+                  @click="toggleSelectAll"> Select all
+              <div
+                  class="u-mt-0_5"
+                  v-for="item in args.options"
+                  :key="item.id">
+                <input
+                    :id="item.id"
+                    v-model="item.checked"
+                    :checked="!item.checked === false"
+                    type="checkbox"/>
+                {{ item.label }}
+              </div>
+          </div>
+        `,
+    })
+}
+
+interface IDpBulkEditHeader {
+    options: object[]
+}
+
+type Story = StoryObj<IDpBulkEditHeader>
+
+export default meta
+
+export const Default: Story = {
+    args: {
+        options: [
+            { label: 'Option 1', id: '1', checked: false },
+            { label: 'Option 2', id: '2', checked: false },
+            { label: 'Option 3', id: '3', checked: false }
+
+        ]
+    },
+    argTypes: {}
+}

src/components/core/DpBulkEditHeader.vue

@@ -12,12 +12,14 @@
       type="button"
       class="btn btn--secondary float-right"
       @click="$emit('reset-selection')">
-      {{ Translator.trans('unselect') }}
+      {{ unselect }}
     </button>
   </div>
 </template>
 
 <script>
+import { de } from '~/components/shared/translations'
+
 export default {
   name: 'DpBulkEditHeader',
 
@@ -38,6 +40,10 @@ export default {
   computed: {
     selectedItemsText () {
       return this.selectedItemsCount + ' ' + this.selectionText
+    },
+
+    unselect () {
+      return de.operations.deselect.element
     }
   }
 }

src/components/shared/translations.js

@@ -86,7 +86,8 @@ const de = {
     add: 'Hinzufügen',
     delete: 'Löschen',
     deselect: {
-      all: 'Alle abwählen'
+      all: 'Alle abwählen',
+      element: 'Auswahl aufheben'
     },
     new: 'Neu',
     none: 'Keine',