From f7414c4445c5fd241efe12a1f880a14f331ee2af Mon Sep 17 00:00:00 2001
From: dingyongliang <dingyongliang@easycorp.ltd>
Date: Fri, 9 Jun 2023 16:00:03 +0800
Subject: [PATCH] * refactor ajaxcustom.

---
 module/datatable/ui/ajaxcustom.html.php | 133 +++++++++++++++++++++---
 module/execution/ui/task.html.php       |   3 +-
 2 files changed, 122 insertions(+), 14 deletions(-)

diff --git a/module/datatable/ui/ajaxcustom.html.php b/module/datatable/ui/ajaxcustom.html.php
index 428933794a..b8db9fcdea 100644
--- a/module/datatable/ui/ajaxcustom.html.php
+++ b/module/datatable/ui/ajaxcustom.html.php
@@ -12,22 +12,129 @@ declare(strict_types=1);
 
 namespace zin;
 
-setClass('edit-cols');
-set::title($lang->datatable->custom);
-set::titleClass('flex-none');
-to::header(span($lang->datatable->customTip, setClass('text-gray', 'text-md')));
-set::footerClass('justify-center');
-
+global $lang, $app;
+$app->loadLang('datatable');
+$formGID = null;
 jsVar('ajaxSaveUrl', $this->createLink('datatable', 'ajaxSave', "module={$module}&method={$method}"));
 
-toolbar
-(
-    btn
+function buildItem($item)
+{
+    global $lang;
+
+    $isRequired = $item['required'];
+    return li
     (
-        set::text($lang->save),
-        set::type('primary'),
-        set::class('w-28'),
-        on::click('saveCustomCols')
+        setClass('row', 'items-center', 'border', 'px-5', 'h-9'),
+        set('data-key', $item['name']),
+        $isRequired ? setClass('required-col') : null,
+        checkbox
+        (
+            set::disabled($isRequired),
+            set::name($item['name']),
+            set::checked($item['show'] || $isRequired)
+        ),
+        h::label
+        (
+            setClass('flex-auto'),
+            set::for($item['name'] . '_'),
+            $item['title']
+        ),
+        div
+        (
+            setClass('row', 'items-center', 'gap-1'),
+            span($lang->datatable->width),
+            input
+            (
+                setClass('w-8', 'h-5', 'shadow-none', 'px-1', 'text-center'),
+                set::value($item['width']),
+            ),
+            span('px'),
+        ),
+    );
+}
+
+function buildBody()
+{
+    global $formGID;
+    $itemsList = array(
+        // 'left' => array(),
+        // 'flex' => array(),
+        // 'right' => array(),
+    );
+
+    $body = form
+    (
+        setClass('col', 'gap-0.5'),
+        set::grid(false),
+        set::actions(null),
+    );
+
+    foreach($itemsList as $key => $items)
+    {
+        if(empty($items)) continue;
+
+        $ul = dragUl(setClass("{$key}-cols"));
+        foreach ($items as $item) $ul->add(buildItem($item));
+        $body->add($ul);
+    }
+
+    $body->setProp('data-zin-gid', $body->gid);
+    $formGID = $body->gid;
+    return $body;
+}
+
+function submitFunc()
+{
+    global $formGID;
+
+    return <<<FUNC
+        const formData = [];
+        let index = 0;
+        const types = ['left', 'no', 'right'];
+        const getSelector = (value) => '[data-zin-gid="{$formGID}"] .drag-ul.' + value + '-cols';
+        const colsList = types.map(x => document.querySelector(getSelector(x)));
+
+        for(let i = 0; i < colsList.length; i++)
+        {
+            const cols = colsList[i];
+            if(!cols) continue;
+
+            const children = Array.from(cols.children);
+            for(let j = 0; j < children.length; j++)
+            {
+                const li = children[j];
+                const checkbox = li.querySelector('input[type="checkbox"]');
+                const input = li.querySelector('input[type="text"]');
+                formData.push({
+                    id: li.dataset.key,
+                    order: ++index,
+                    show: checkbox.checked,
+                    width: input.value + 'px',
+                    fixed: types[i],
+                });
+            }
+        }
+
+        fetch(ajaxSaveUrl, {method: 'post', body: JSON.stringify(formData)})
+            .then(res => res.json())
+            .then((json) => {if(json.result === 'success') loadTable();});
+    FUNC;
+}
+
+setClass('edit-cols');
+set::title($lang->datatable->custom);
+to::header(span($lang->datatable->customTip, setClass('text-gray', 'text-md')));
+set::footerClass('justify-center');
+buildBody();
+to::footer
+(
+    toolbar
+    (
+        item
+        (
+            set(array('text' => $lang->save, 'type' => 'primary', 'class' => 'w-28', 'data-dismiss' => 'modal')),
+            on::click($this->submitFunc())
+        )
     )
 );
 
diff --git a/module/execution/ui/task.html.php b/module/execution/ui/task.html.php
index 9480a80d31..25f25f29e6 100644
--- a/module/execution/ui/task.html.php
+++ b/module/execution/ui/task.html.php
@@ -194,7 +194,8 @@ dtable
         set::recTotal($recTotal),
         set::linkCreator(helper::createLink('execution', 'task', "executionID={$execution->id}&status={$status}&param={$param}&orderBy=$orderBy&recTotal={$recTotal}&recPerPage={recPerPage}&page={page}"))
     ),
-    set::checkInfo(jsRaw('function(checkedIDList){return window.setStatistics(this, checkedIDList);}'))
+    set::checkInfo(jsRaw('function(checkedIDList){return window.setStatistics(this, checkedIDList);}')),
+    set::customCols(true)
 );
 
 render();