Enable posting tree node selected keys via fetch (#18)

Fohn-Group · Aug 19, 2024 · 03c3d0b · 03c3d0b
1 parent f7feefc
commit 03c3d0b
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fohn-ui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Javascript library for Fohn-Ui php framework.",
   "main": "dist/fohn-ui.min.js",
   "files": [

diff --git a/src/components/Tree/composable/tree.js b/src/components/Tree/composable/tree.js
@@ -1,4 +1,10 @@
 import apiService from '../../../services/api.service';
+import { ref, watch } from 'vue';
+
+const isTreeFetching = ref(false);
+const useIsTreeFetching = () => {
+  return isTreeFetching;
+};
 
 /**
  *
@@ -43,13 +49,17 @@ const useExtendedNode = (nodes, options) => {
  *  - the raw value of the entire tree node,
  *
  */
-const usePostData = (url, action, key, selectedKeys, treeValue) => {
+const useFetch = (url, payload) => {
   const options = {
     method: 'POST',
-    body: JSON.stringify({ __nodeAction: action, __nodeKey: key, __nodeKeys: selectedKeys, __treeValue: treeValue }),
+    body: JSON.stringify(payload),
   };
 
-  const { data, onFetchFinally } = apiService.fetchAsResponse(url, options);
+  const { isFetching, data, onFetchFinally } = apiService.fetchAsResponse(url, options);
+  watch(isFetching, (inProgress) => {
+    isTreeFetching.value = inProgress;
+  });
+
   onFetchFinally(() => {
     const js = data.value?.jsRendered;
     if (js) {
@@ -58,4 +68,4 @@ const usePostData = (url, action, key, selectedKeys, treeValue) => {
   });
 };
 
-export { useStringKey, useExtendedNode, usePostData };
+export { useStringKey, useExtendedNode, useFetch, useIsTreeFetching };
diff --git a/src/components/Tree/tree.component.vue b/src/components/Tree/tree.component.vue
@@ -1,7 +1,7 @@
 <script>
 
 import { computed, onMounted, ref } from 'vue';
-import { useExtendedNode, usePostData, useStringKey } from './composable/tree';
+import { useExtendedNode, useFetch, useStringKey, useIsTreeFetching } from './composable/tree';
 
 export default {
   name: 'fohn-tree',
@@ -15,8 +15,12 @@ export default {
     nodeValue: {
       type: Object,
     },
-    // Callback url. When a tree node is select or unselect.
-    callbackUrl: String,
+    // Callback url to fetch for posting selected nodes.
+    postUrl: String,
+    // data-ui-name of the post value btn.
+    postBtnName: String,
+    // Callback url to fetch when a tree node is select or unselect.
+    nodeChangedUrl: String,
     // Node options like collapse and expanded icons.
     extendedNodeOptions: {
       type: Object,
@@ -32,27 +36,36 @@ export default {
   },
   setup: function (props, { attrs, slots, emit }) {
     const ptProps = props.ptProps;
+    const container = ref(null);
+    const postBtnEl = ref();
     const selectedKey = ref(props.nodeValue);
     const selectionMode = props.ptProps.selectionMode || 'single';
+    const isFetching = useIsTreeFetching();
 
     const extendedNodes = props.useExtendedNodes ? useExtendedNode(useStringKey(props.nodes), props.extendedNodeOptions) : useStringKey(props.nodes);
 
     const selectNode = (node) => {
-      if (props.callbackUrl) {
-        usePostData(props.callbackUrl, 'select', node.key, currentSelection.value, selectedKey.value);
+      if (props.nodeChangedUrl) {
+        useFetch(props.nodeChangedUrl, { __nodeAction: 'select', __nodeKey: node.key });
       }
     };
 
     const unSelectNode = (node) => {
-      if (props.callbackUrl) {
-        usePostData(props.callbackUrl, 'unselect', node.key, currentSelection.value, selectedKey.value);
+      if (props.nodeChangedUrl) {
+        useFetch(props.nodeChangedUrl, { __nodeAction: 'unselect', __nodeKey: node.key });
       }
     };
 
     const updateSelection = (node) => {
       selectedKey.value = node;
     };
 
+    const postValue = () => {
+      if (props.postUrl) {
+        useFetch(props.postUrl, { __nodeKeys: currentSelection.value, __treeValue: selectedKey.value });
+      }
+    };
+
     const currentSelection = computed(() => {
       if (selectionMode === 'single' || selectionMode === 'multiple') {
         return Object.keys(selectedKey.value);
@@ -69,32 +82,43 @@ export default {
       return [];
     });
 
-    onMounted(() => {
+    const canFetch = computed(() => currentSelection.value.length > 0);
 
+    onMounted(() => {
+      postBtnEl.value = container.value.querySelector('button[data-ui-name=' + props.postBtnName + ']');
     });
 
     return {
       extendedNodes,
+      postValue,
       selectNode,
       unSelectNode,
       selectedKey,
       updateSelection,
       ptProps,
+      container,
+      isFetching,
+      canFetch,
     };
   },
 };
 </script>
 
 <template>
-  <slot
-    :nodes="extendedNodes"
-    :selectNode="selectNode"
-    :unSelectNode="unSelectNode"
-    :selectedKey="selectedKey"
-    :updateSelection="updateSelection"
-    :ptProps="ptProps"
-    v-bind="$attrs">
-  </slot>
+  <div ref="container">
+    <slot
+      :isFetching="isFetching"
+      :canFetch="canFetch"
+      :nodes="extendedNodes"
+      :postValue="postValue"
+      :selectNode="selectNode"
+      :unSelectNode="unSelectNode"
+      :selectedKey="selectedKey"
+      :updateSelection="updateSelection"
+      :ptProps="ptProps"
+      v-bind="$attrs">
+    </slot>
+  </div>
 </template>
 
 <style scoped>