From 206d366d5493f30992cfb9bd0284901436887415 Mon Sep 17 00:00:00 2001
From: xft-dev <156914938+xft-dev@users.noreply.github.com>
Date: Thu, 23 May 2024 13:17:47 +0200
Subject: [PATCH] [DPEDE-1720] Investigate add transfer-list in modal component
 (#1204)

* [DPEDE-1720] Investigate add transfer-list in modal component

* [DPEDE-1720] Update

* [DPEDE-1720] PR Correction

---------

Co-authored-by: Jose Lopez Ruiz <jose.luis@ctl.io>
---
 .../ClientSide/DataTableClientView.vue        |  4 +-
 .../example-transfer-list.vue                 | 64 +++++++++++++++++++
 .../views/TransferList/TransferListView.vue   |  1 -
 3 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/chi-vue/src/views/DataTable/DataTableTemplates/example-transfer-list.vue

diff --git a/src/chi-vue/src/views/DataTable/ClientSide/DataTableClientView.vue b/src/chi-vue/src/views/DataTable/ClientSide/DataTableClientView.vue
index e2a9114e4c..e78a7a6b37 100644
--- a/src/chi-vue/src/views/DataTable/ClientSide/DataTableClientView.vue
+++ b/src/chi-vue/src/views/DataTable/ClientSide/DataTableClientView.vue
@@ -91,7 +91,8 @@
         <template v-slot:end>
           <div class="chi-toolbar__actions-desktop">
             <DownloadButtonIcon />
-            <ColumnCustomization :columnsData="toolbar.columnsData" />
+            <!-- <ColumnCustomization :columnsData="toolbar.columnsData" /> -->
+            <TransferListButton />
           </div>
           <div :class="`chi-toolbar__actions-mobile`">
             <button
@@ -192,6 +193,7 @@
 import { ref } from 'vue';
 import DataTable from '../../../components/data-table/DataTable';
 import DownloadButtonIcon from '../DataTableTemplates/example-download.vue';
+import TransferListButton from '../DataTableTemplates/example-transfer-list.vue';
 import DataTableToolbar from '../../../components/data-table-toolbar/DataTableToolbar.vue';
 import SearchInput from '../../../components/search-input/SearchInput';
 import DataTableFilters from '../../../components/data-table-filters/DataTableFilters';
diff --git a/src/chi-vue/src/views/DataTable/DataTableTemplates/example-transfer-list.vue b/src/chi-vue/src/views/DataTable/DataTableTemplates/example-transfer-list.vue
new file mode 100644
index 0000000000..13211278ab
--- /dev/null
+++ b/src/chi-vue/src/views/DataTable/DataTableTemplates/example-transfer-list.vue
@@ -0,0 +1,64 @@
+<template>
+  <Tooltip message="Customize Columns">
+    <button
+      id="modal-transfer-list"
+      class="chi-button chi-modal__trigger -icon -flat"
+      data-target="#modal-1"
+      @click="showModal"
+    >
+      <div class="chi-button__content">
+        <i class="chi-icon icon-table-column-settings" aria-hidden="true"></i>
+      </div>
+    </button>
+  </Tooltip>
+
+  <!-- Modal -->
+  <div class="chi-backdrop -closed">
+    <div class="chi-backdrop__wrapper">
+      <section id="modal-1" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
+        <header class="chi-modal__header">
+          <h2 class="chi-modal__title">Customize columns</h2>
+          <button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
+            <div class="chi-button__content">
+              <i class="chi-icon icon-x" aria-hidden="true"></i>
+            </div>
+          </button>
+        </header>
+        <div class="chi-modal__content">
+          <TransferList
+            :transferListData="list"
+            :config="config"
+            @chiTransferListSave="saveList"
+            @chiTransferListReset="console.log"
+            @chiTransferListChange="handleChange"
+          />
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import Tooltip from '../../../components/tooltip/tooltip';
+import TransferList from '@/components/transfer-list/TransferList.vue';
+import { exampleData, exampleConfig } from '../../TransferList/fixtures';
+const list = exampleData;
+const config = exampleConfig;
+
+declare const chi: any;
+
+const showModal = () => {
+  chi.modal(document.getElementById('modal-transfer-list')).show();
+};
+
+const saveList = () => {
+  chi.modal(document.getElementById('modal-transfer-list')).hide();
+};
+
+const handleChange = (value) => {};
+
+onMounted(() => {
+  chi.modal(document.getElementById('modal-transfer-list'));
+});
+</script>
diff --git a/src/chi-vue/src/views/TransferList/TransferListView.vue b/src/chi-vue/src/views/TransferList/TransferListView.vue
index d9725e88f0..ee28bd678a 100644
--- a/src/chi-vue/src/views/TransferList/TransferListView.vue
+++ b/src/chi-vue/src/views/TransferList/TransferListView.vue
@@ -1,5 +1,4 @@
 <template>
-  <h2>Transfer List</h2>
   <TransferList
     :transferListData="list"
     :config="config"