@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/columnlist/index.es.js

@@ -1,54 +1,80 @@
-import { reactive as P, defineComponent as _, mergeModels as q, useModel as U, ref as F, shallowRef as J, computed as M, watch as K, createElementBlock as x, openBlock as y, Fragment as B, renderList as T, createCommentVNode as z, mergeProps as I, withModifiers as g, createVNode as E } from "vue";
-import { _ as G } from "../checkbox/index.es.js";
-import { _ as H } from "../icon/index.es.js";
-import { c as Q } from "../vendor/lodash-es/cloneDeep.es.js";
-const W = (o, u, l) => {
-  if (u && l > u) {
-    let r = 0;
-    return o.map((n) => {
-      const c = u !== void 0 && r < u, d = n.checkedByDefault !== !1 && u === void 0 || n.checkedByDefault !== !1 && c;
-      return d && r++, {
-        ...n,
-        visible: d
+import { reactive, defineComponent, mergeModels, useModel, ref, shallowRef, computed, watch, createElementBlock, openBlock, Fragment, renderList, createCommentVNode, mergeProps, withModifiers, createVNode } from "vue";
+import { _ as _sfc_main$2 } from "../checkbox/index.es.js";
+import { _ as _sfc_main$1 } from "../icon/index.es.js";
+import { c as cloneDeep } from "../vendor/lodash-es/cloneDeep.es.js";
+const setVisibilityByMaxColumn = (column, maxColumn, currentVisibleColumnsLength) => {
+  if (maxColumn && currentVisibleColumnsLength > maxColumn) {
+    let visibleColumnsLength = 0;
+    return column.map((col) => {
+      const spaceAvailable = maxColumn !== void 0 && visibleColumnsLength < maxColumn;
+      const visible = col.checkedByDefault !== false && maxColumn === void 0 || col.checkedByDefault !== false && spaceAvailable;
+      if (visible) visibleColumnsLength++;
+      return {
+        ...col,
+        visible
       };
     });
   }
-  return o;
-}, b = "tableConfigs", X = () => "user-" + (JSON.parse(localStorage.getItem("user") ?? "{}")._id ?? "unknown"), A = async () => {
-  let o = null;
-  return new Promise((u) => {
-    const l = indexedDB.open(X(), 1);
-    l.onupgradeneeded = (r) => {
-      o = r.target.result, o.createObjectStore(b);
-    }, l.onsuccess = (r) => {
-      o = r.target.result, u(o);
+  return column;
+};
+const STORE_NAME = "tableConfigs";
+const getDBName = () => {
+  const user = JSON.parse(localStorage.getItem("user") ?? "{}");
+  return "user-" + (user._id ?? "unknown");
+};
+const openDatabase = async () => {
+  let db = null;
+  return new Promise((resolve) => {
+    const request = indexedDB.open(getDBName(), 1);
+    request.onupgradeneeded = (event) => {
+      db = event.target.result;
+      db.createObjectStore(STORE_NAME);
+    };
+    request.onsuccess = (event) => {
+      db = event.target.result;
+      resolve(db);
     };
   });
-}, Y = async () => {
-  const l = (await A()).transaction(b, "readonly").objectStore(b);
-  return new Promise((r) => {
-    let n, c;
-    l.getAllKeys().onsuccess = (d) => {
-      n = d.target.result;
-    }, l.getAll().onsuccess = (d) => {
-      c = d.target.result;
-      const v = {};
-      n.forEach((m, p) => {
-        v[m] = c[p];
-      }), r(v);
+};
+const getConfig = async () => {
+  const db = await openDatabase();
+  const transaction = db.transaction(STORE_NAME, "readonly");
+  const store = transaction.objectStore(STORE_NAME);
+  return new Promise((resolve) => {
+    let keys;
+    let values;
+    store.getAllKeys().onsuccess = (event) => {
+      keys = event.target.result;
+    };
+    store.getAll().onsuccess = (e) => {
+      values = e.target.result;
+      const config2 = {};
+      keys.forEach((key, index) => {
+        config2[key] = values[index];
+      });
+      resolve(config2);
     };
   });
-}, h = P({}), Z = async () => {
-  const o = async (u, l) => {
-    h[u] = l, (await A()).transaction(b, "readwrite").objectStore(b).put(l, u);
+};
+const config = reactive({});
+const useDataTableStore = async () => {
+  const setConfig = async (id, columnsConfig) => {
+    config[id] = columnsConfig;
+    const db = await openDatabase();
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    const store = tx.objectStore(STORE_NAME);
+    store.put(columnsConfig, id);
   };
-  return Object.assign(h, await Y()), {
-    config: h,
-    setConfig: o
+  Object.assign(config, await getConfig());
+  return {
+    config,
+    setConfig
   };
-}, ee = ["id", "data-item-dragable", "draggable", "onDragenter", "onDragstart"], se = /* @__PURE__ */ _({
+};
+const _hoisted_1 = ["id", "data-item-dragable", "draggable", "onDragenter", "onDragstart"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ColumnList",
-  props: /* @__PURE__ */ q({
+  props: /* @__PURE__ */ mergeModels({
     tableId: {},
     defaultColumns: {},
     visibleColumns: {},
@@ -56,149 +82,201 @@ const W = (o, u, l) => {
     type: {},
     savedColumns: {}
   }, {
-    modelValue: {},
-    modelModifiers: {}
+    "modelValue": {},
+    "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(o, { expose: u }) {
-    const l = o, r = U(o, "modelValue"), n = F([]), c = J(), d = M(() => [...n.value].filter((a) => a.visible !== !1)), v = M(() => l.maxColumn ? d.value.length >= l.maxColumn : !1), m = (a) => a.dragable !== !1 && p(a), p = (a) => {
-      if (!v.value) return !0;
-      const t = r.value.findIndex((e) => e.field === a.field) > 0;
-      return v.value && t;
-    }, S = () => {
-      n.value = W(
-        n.value,
-        l.maxColumn,
-        d.value.length
-      ), r.value = [...d.value];
-    }, C = async () => {
-      const a = n.value.map(
-        (e) => ({
-          field: e.field,
-          width: e.width ?? "max-content",
-          visible: e.visible !== !1,
-          fixed: !!e.fixed
-        })
-      ), { setConfig: t } = await Z();
-      await t(l.tableId, a);
-    }, N = () => {
-      r.value = [...n.value];
-    }, R = (a, t, e) => {
-      const { dataTransfer: i } = a;
-      c.value = t, i && (i.dropEffect = "move", i.effectAllowed = "move", i.setData("field", t.field), i.setData("index", e.toString()));
-    }, L = async () => {
-      c.value = void 0, N(), await C();
-    }, j = (a, t) => {
-      var e, i;
-      if (a.preventDefault(), m(t)) {
-        const f = a.target, s = f.tagName === "LI" ? f : f.closest("li");
-        if (s == null || s.classList.add("bg-primary-50"), (e = s == null ? void 0 : s.nextElementSibling) == null || e.classList.remove("bg-primary-50"), (i = s == null ? void 0 : s.previousElementSibling) == null || i.classList.remove("bg-primary-50"), !s || !c.value) return;
-        const D = n.value.findIndex(
-          (k) => {
-            var V;
-            return k.field === ((V = c.value) == null ? void 0 : V.field);
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const columnReorderData = ref([]);
+    const draggedColumn = shallowRef();
+    const filteredVisibleColumn = computed(() => {
+      return [...columnReorderData.value].filter((col) => col.visible !== false);
+    });
+    const hasReachMaxColumn = computed(() => {
+      if (!props.maxColumn) return false;
+      return filteredVisibleColumn.value.length >= props.maxColumn;
+    });
+    const dragable = (item) => {
+      return item.dragable !== false && isSelectAble(item);
+    };
+    const isSelectAble = (item) => {
+      if (!hasReachMaxColumn.value) return true;
+      const isChecked = model.value.findIndex((c) => c.field === item.field) > 0;
+      return hasReachMaxColumn.value && isChecked;
+    };
+    const updateVisibleColumnsModel = () => {
+      columnReorderData.value = setVisibilityByMaxColumn(
+        columnReorderData.value,
+        props.maxColumn,
+        filteredVisibleColumn.value.length
+      );
+      model.value = [...filteredVisibleColumn.value];
+    };
+    const setColumnVisibilityConfig = async () => {
+      const columnsConfig = columnReorderData.value.map(
+        (col) => {
+          return {
+            field: col.field,
+            width: col.width ?? "max-content",
+            visible: col.visible !== false,
+            fixed: !!col.fixed
+          };
+        }
+      );
+      const { setConfig } = await useDataTableStore();
+      await setConfig(props.tableId, columnsConfig);
+    };
+    const reorderVisibleColumn = () => {
+      model.value = [...columnReorderData.value];
+    };
+    const startReorderColumn = (event, item, index) => {
+      const { dataTransfer } = event;
+      draggedColumn.value = item;
+      if (dataTransfer) {
+        dataTransfer.dropEffect = "move";
+        dataTransfer.effectAllowed = "move";
+        dataTransfer.setData("field", item.field);
+        dataTransfer.setData("index", index.toString());
+      }
+    };
+    const onColumnReorder = async () => {
+      draggedColumn.value = void 0;
+      reorderVisibleColumn();
+      await setColumnVisibilityConfig();
+    };
+    const onDragEnter = (e, col) => {
+      var _a, _b;
+      e.preventDefault();
+      if (dragable(col)) {
+        const target = e.target;
+        const dropTargetLi = target.tagName === "LI" ? target : target.closest("li");
+        dropTargetLi == null ? void 0 : dropTargetLi.classList.add("bg-primary-50");
+        (_a = dropTargetLi == null ? void 0 : dropTargetLi.nextElementSibling) == null ? void 0 : _a.classList.remove("bg-primary-50");
+        (_b = dropTargetLi == null ? void 0 : dropTargetLi.previousElementSibling) == null ? void 0 : _b.classList.remove("bg-primary-50");
+        if (!dropTargetLi || !draggedColumn.value) return;
+        const draggedIndex = columnReorderData.value.findIndex(
+          (item) => {
+            var _a2;
+            return item.field === ((_a2 = draggedColumn.value) == null ? void 0 : _a2.field);
           }
-        ), w = n.value.findIndex(
-          (k) => k.field === s.id
         );
-        D !== -1 && w !== -1 && ([
-          n.value[D],
-          n.value[w]
-        ] = [
-          n.value[w],
-          n.value[D]
-        ]);
+        const dropTargetIndex = columnReorderData.value.findIndex(
+          (item) => item.field === dropTargetLi.id
+        );
+        if (draggedIndex !== -1 && dropTargetIndex !== -1) {
+          [
+            columnReorderData.value[draggedIndex],
+            columnReorderData.value[dropTargetIndex]
+          ] = [
+            columnReorderData.value[dropTargetIndex],
+            columnReorderData.value[draggedIndex]
+          ];
+        }
       }
-    }, O = (a) => {
-      const t = a.target.querySelector("label");
-      t && t.click();
-    }, $ = () => {
-      const a = Q(l.defaultColumns);
-      if (l.maxColumn && a.length > l.maxColumn) {
-        let t = 0;
-        n.value = a.map((e) => {
-          const i = l.maxColumn !== void 0 && t < l.maxColumn, f = e.checkedByDefault !== !1 && l.maxColumn === void 0 || e.checkedByDefault !== !1 && i;
-          return f && t++, {
-            ...e,
-            visible: f
+    };
+    const checkTheCheckbox = (event) => {
+      const label = event.target.querySelector("label");
+      if (label) label.click();
+    };
+    const resetToDefault = () => {
+      const defaultColumnClone = cloneDeep(props.defaultColumns);
+      if (props.maxColumn && defaultColumnClone.length > props.maxColumn) {
+        let visibleColumnsLength = 0;
+        columnReorderData.value = defaultColumnClone.map((column) => {
+          const spaceAvailable = props.maxColumn !== void 0 && visibleColumnsLength < props.maxColumn;
+          const visible = column.checkedByDefault !== false && props.maxColumn === void 0 || column.checkedByDefault !== false && spaceAvailable;
+          if (visible) visibleColumnsLength++;
+          return {
+            ...column,
+            visible
           };
         });
-      } else
-        n.value = a;
-      r.value = [...d.value], C();
+      } else {
+        columnReorderData.value = defaultColumnClone;
+      }
+      model.value = [...filteredVisibleColumn.value];
+      setColumnVisibilityConfig();
     };
-    return K(
-      () => l.savedColumns,
-      (a) => {
-        n.value = a ?? [];
+    watch(
+      () => props.savedColumns,
+      (newVal) => {
+        columnReorderData.value = newVal ?? [];
       },
-      { immediate: !0 }
-    ), u({
-      setColumnVisibilityConfig: C,
-      resetToDefault: $,
-      updateVisibleColumnsModel: S
-    }), (a, t) => (y(), x("ul", null, [
-      (y(!0), x(B, null, T(n.value, (e, i) => {
-        var f;
-        return y(), x(B, null, [
-          e.reorderable !== !1 ? (y(), x("li", I(
-            {
-              id: e.field,
-              key: e.field,
-              ref_for: !0
-            },
-            a.$preset.customcolumn.menuitem({
-              props: l,
-              context: { dragable: m(e) }
-            }),
-            {
-              "data-item-dragable": m(e),
-              draggable: m(e),
-              onClick: O,
-              onDragend: L,
-              onDragenter: g((s) => j(s, e), ["prevent"]),
-              onDragleave: t[2] || (t[2] = g(() => {
-              }, ["prevent"])),
-              onDragover: t[3] || (t[3] = g(() => {
-              }, ["prevent"])),
-              onDragstart: (s) => R(s, e, i),
-              onMouseenter: t[4] || (t[4] = (s) => s.target.classList.add("bg-primary-50")),
-              onMouseleave: t[5] || (t[5] = (s) => s.target.classList.remove("bg-primary-50")),
-              "data-wv-section": "custom-column-menu-item"
-            }
-          ), [
-            E(H, I(
+      { immediate: true }
+    );
+    __expose({
+      setColumnVisibilityConfig,
+      resetToDefault,
+      updateVisibleColumnsModel
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ul", null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(columnReorderData.value, (item, index) => {
+          var _a;
+          return openBlock(), createElementBlock(Fragment, null, [
+            item.reorderable !== false ? (openBlock(), createElementBlock("li", mergeProps(
               {
-                onClick: t[0] || (t[0] = g(() => {
-                }, ["stop"])),
-                ref_for: !0
+                id: item.field,
+                key: item.field,
+                ref_for: true
               },
-              (f = a.$preset.customcolumn) == null ? void 0 : f.dragicon({
-                context: { dragable: m(e) }
+              _ctx.$preset.customcolumn.menuitem({
+                props,
+                context: { dragable: dragable(item) }
               }),
-              { icon: "dragable-menu" }
-            ), null, 16),
-            E(G, {
-              "aria-label": e.header,
-              disabled: e.fixed,
-              label: e.header,
-              "model-value": e.visible !== !1,
-              selectable: p(e),
-              onClick: t[1] || (t[1] = g(() => {
-              }, ["stop"])),
-              "onUpdate:modelValue": (s) => {
-                e.visible = !!s, S(), C();
-              },
-              class: "!w-full"
-            }, null, 8, ["aria-label", "disabled", "label", "model-value", "selectable", "onUpdate:modelValue"])
-          ], 16, ee)) : z("", !0)
-        ], 64);
-      }), 256))
-    ]));
+              {
+                "data-item-dragable": dragable(item),
+                draggable: dragable(item),
+                onClick: checkTheCheckbox,
+                onDragend: onColumnReorder,
+                onDragenter: withModifiers(($event) => onDragEnter($event, item), ["prevent"]),
+                onDragleave: _cache[2] || (_cache[2] = withModifiers(() => {
+                }, ["prevent"])),
+                onDragover: _cache[3] || (_cache[3] = withModifiers(() => {
+                }, ["prevent"])),
+                onDragstart: ($event) => startReorderColumn($event, item, index),
+                onMouseenter: _cache[4] || (_cache[4] = ($event) => $event.target.classList.add("bg-primary-50")),
+                onMouseleave: _cache[5] || (_cache[5] = ($event) => $event.target.classList.remove("bg-primary-50")),
+                "data-wv-section": "custom-column-menu-item"
+              }
+            ), [
+              createVNode(_sfc_main$1, mergeProps(
+                {
+                  onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                  }, ["stop"])),
+                  ref_for: true
+                },
+                (_a = _ctx.$preset.customcolumn) == null ? void 0 : _a.dragicon({
+                  context: { dragable: dragable(item) }
+                }),
+                { icon: "dragable-menu" }
+              ), null, 16),
+              createVNode(_sfc_main$2, {
+                "aria-label": item.header,
+                disabled: item.fixed,
+                label: item.header,
+                "model-value": item.visible !== false,
+                selectable: isSelectAble(item),
+                onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                }, ["stop"])),
+                "onUpdate:modelValue": (event) => {
+                  item.visible = !!event;
+                  updateVisibleColumnsModel();
+                  setColumnVisibilityConfig();
+                },
+                class: "!w-full"
+              }, null, 8, ["aria-label", "disabled", "label", "model-value", "selectable", "onUpdate:modelValue"])
+            ], 16, _hoisted_1)) : createCommentVNode("", true)
+          ], 64);
+        }), 256))
+      ]);
+    };
   }
 });
 export {
-  se as _,
-  W as s,
-  Z as u
+  _sfc_main as _,
+  setVisibilityByMaxColumn as s,
+  useDataTableStore as u
 };

package/components.d.ts

@@ -57,24 +57,3 @@ export { default as Tree } from './tree';
 export { default as UserGroup } from './usergroup';
 export { default as UserName } from './username';
 export { default as ValidatorMessage } from './validatormessage';
-
-export { default as Badge } from './badge';
-export { default as Changelog } from './changelog';
-export { default as ChangelogPage } from './changelogpage';
-export { default as Comment } from './comment';
-export { default as DetailMember } from './detailmember';
-export { default as DetailSprint } from './detailsprint';
-export { default as DialogAdjustmentTask } from './dialogadjustmenttask';
-export { default as DialogDetailComponent } from './dialogdetailcomponent';
-export { default as DialogDetailPbi } from './dialogdetailpbi';
-export { default as DialogImprovementTask } from './dialogimprovementtask';
-export { default as DialogPreparePbi } from './dialogpreparepbi';
-export { default as DialogReportBug } from './dialogreportbug';
-export { default as InputInitialName } from './inputinitialname';
-export { default as InputRepositoryName } from './inputrepositoryname';
-export { default as NotificationItem } from './notificationitem';
-export { default as SummaryAccordion } from './summaryaccordion';
-export { default as TaskDetail } from './taskdetail';
-export { default as TaskDetailPbi } from './taskdetailpbi';
-export { default as TaskTable } from './tasktable';
-export { default as WorkCalendar } from './workcalendar';

package/config/defaultProps.es.js

@@ -1,17 +1,17 @@
-import { getImageURL as a, MemberServices as r } from "@fewangsit/workspace-api-services";
-import { g as i } from "../utils/genPlaceholder.util.es.js";
-const l = {
+import { getImageURL, MemberServices } from "@fewangsit/workspace-api-services";
+import { g as genPlaceholder } from "../utils/genPlaceholder.util.es.js";
+const defaultProps = {
   ButtonBulkAction: {
     naming: "data"
   },
   Image: {
-    getImageURL: a,
-    placeholder: i("WS", 125).toDataURL()
+    getImageURL,
+    placeholder: genPlaceholder("WS", 125).toDataURL()
   },
   UserName: {
-    async getUserDetail(e) {
-      const { data: t } = await r.getMemberDetail(e);
-      return t.data;
+    async getUserDetail(userId) {
+      const { data } = await MemberServices.getMemberDetail(userId);
+      return data.data;
     },
     type: "picture",
     detailUserPath: "/tim-member/member/{userId}/detail-member",
@@ -20,5 +20,5 @@ const l = {
   }
 };
 export {
-  l as d
+  defaultProps as d
 };

package/config/index.es.js

@@ -1,12 +1,13 @@
-import { c as o } from "../plugins/WangsVue.es.js";
-import { d as a } from "./defaultProps.es.js";
-import { l as r } from "./locale.es.js";
-import { a as s } from "../utils/toast.util.es.js";
-const t = {
-  locale: r,
-  defaultProps: a,
-  useToastConfig: s
-}, n = o(t);
+import { c as createWangsVuePlugin } from "../plugins/WangsVue.es.js";
+import { d as defaultProps } from "./defaultProps.es.js";
+import { l as locale } from "./locale.es.js";
+import { u as useToastConfig } from "../utils/toast.util.es.js";
+const config = {
+  locale,
+  defaultProps,
+  useToastConfig
+};
+const index = createWangsVuePlugin(config);
 export {
-  n as i
+  index as i
 };

package/config/locale.es.js

@@ -1,4 +1,4 @@
-const a = {
+const locale = {
   global: {
     emptySearchMessage: "Tidak ada hasil"
   },
@@ -37,5 +37,5 @@ const a = {
   }
 };
 export {
-  a as l
+  locale as l
 };