[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>

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';

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>

src/chi-vue/src/views/TransferList/TransferListView.vue

@@ -1,5 +1,4 @@
 <template>
-  <h2>Transfer List</h2>
   <TransferList
     :transferListData="list"
     :config="config"