@mixd-id/web-scaffold 0.1.240411096 → 0.1.240411099

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411096",
+  "version": "0.1.240411099",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/List.vue

@@ -923,6 +923,7 @@ export default{
     }
 
     this.useSocket().off('connect', this.onConnect)
+    this.queue?.cancel()
   },
 
   computed: {

package/src/components/PostmanAPI.vue

@@ -50,7 +50,10 @@
         </ContextMenu>
       </div>
 
-      <div class="flex-1 overflow-y-auto p-2 pt-5">
+      <div v-if="loadingState === 1" class="flex-1 flex items-center justify-center">
+        <svg class="animate-spin aspect-square w-[24px] h-[24px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+      </div>
+      <div v-else class="flex-1 overflow-y-auto p-2 pt-5">
         <TreeView v-model="items">
 
           <template #item="{ item }">
@@ -148,7 +151,7 @@
             </template>
           </Textbox>
           <div class="flex-1"></div>
-          <Button v-if="selectedItemChanged" class="p-1 px-5 rounded-full" @click="saveApiDocs([selectedItem]).then(snapshotSelectedItem)">Save</Button>
+          <Button v-if="selectedItemChanged" ref="saveBtn" class="p-1 px-5 rounded-full" @click="saveApiDoc(selectedItem).then(snapshotSelectedItem)">Save</Button>
         </div>
 
         <button type="button" class="flex flex-row items-center text-left gap-1 p-3 px-6"
@@ -585,6 +588,7 @@
 <script setup>
 
 import {computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef, watch} from "vue";
+import { queueForLater } from '../utils/helpers.mjs'
 import { VueMonacoEditor, useMonaco } from "@guolao/vue-monaco-editor";
 const { appContext } = getCurrentInstance()
 
@@ -614,9 +618,11 @@ const items = ref([])
 const env = ref([])
 
 const isSending = ref(false)
+const loadingState = ref(1)
 
 const envEdit = useTemplateRef('envEdit')
 const workspaceEdit = useTemplateRef('workspaceEdit')
+const saveBtn = useTemplateRef('saveBtn')
 
 const alert = inject('alert')
 const confirm = inject('confirm')
@@ -1046,6 +1052,8 @@ async function reloadApiDocs(id){
   applyDocUpdates(Array.isArray(res.docs) ? res.docs : [])
 }
 
+const queueReloadApiDocs = queueForLater({ delay: 1000, pop: (ids) => reloadApiDocs(ids) })
+
 function removeApiDocs(uids) {
   const removeFrom = (list) => {
     for(let i = list.length - 1; i >= 0; i--) {
@@ -1077,12 +1085,28 @@ async function saveApiDocs(docs) {
   applyDocUpdates(Array.isArray(res.docs) ? res.docs : [])
 }
 
+async function saveApiDoc(doc) {
+  try{
+    saveBtn.value.setState(2)
+    const clean = cleanDocs([doc])[0]
+    const updated = await socket.send(`${controller}.save-api-doc`, clean)
+    applyDocUpdates([updated])
+  }
+  catch(e){
+    alert(e)
+  }
+  finally{
+    saveBtn.value.resetState()
+  }
+}
+
 function load(){
   socket.send(`${controller}.load`, {})
       .then(res => {
         workspaces.value = res.workspaces || []
         env.value = res.env || []
       })
+      .finally(_ => loadingState.value = 0)
 }
 
 async function saveWorkspace(workspace) {
@@ -1144,7 +1168,7 @@ function onEvent(model, event, items){
         removeApiDocs(items.map(i => i.uid))
       }
       else{
-        reloadApiDocs(items.map(i => i.id))
+        queueReloadApiDocs(items.map(i => i.id))
       }
       break
 
@@ -1298,8 +1322,19 @@ const savedItemSnapshot = ref(null)
 
 function itemSnapshot(item) {
   if(!item) return null
-  const { lastResponse, ...rest } = item
-  return JSON.stringify(rest)
+  const { lastResponse, items, ...rest } = item
+  return JSON.stringify({
+    id:item.id,
+    name:item.name,
+    headers: item.headers,
+    query: item.query,
+    body: item.body,
+    method: item.method,
+    url: item.url,
+    type: item.type,
+    formData: item.formData,
+    script: item.script
+  })
 }
 
 const selectedItemChanged = computed(() => {
@@ -1399,7 +1434,7 @@ function onKeydown(e) {
   if((e.ctrlKey || e.metaKey) && e.key === 's') {
     e.preventDefault()
     if(selectedItem.value && selectedItemChanged.value) {
-      saveApiDocs([selectedItem.value]).then(snapshotSelectedItem)
+      saveApiDoc(selectedItem.value).then(snapshotSelectedItem)
     }
   }
 }
@@ -1414,6 +1449,7 @@ onUnmounted(() => {
   socket.send('user.unsubscribe', { name: ['api-doc', 'api-workspace', 'api-env'] })
   socket.offAny(onEvent)
   window.removeEventListener('keydown', onKeydown)
+  queueReloadApiDocs.cancel()
 })
 
 

package/src/utils/helpers.mjs

@@ -406,8 +406,8 @@ const queueForLater = (params) => {
 
     run: () => {
       const items = instance.items.splice(0, instance.items.length);
-      typeof instance.pop === 'function' ? instance.pop(items) : null;
       instance.timeoutId = null
+      typeof instance.pop === 'function' ? instance.pop(items) : null;
     },
 
     queue(item) {
@@ -417,11 +417,19 @@ const queueForLater = (params) => {
         instance.items.push(item)
 
       if(!instance.timeoutId)
-        instance.timeoutId = window.setTimeout(instance.run, instance.delay);
+        instance.timeoutId = setTimeout(instance.run, instance.delay);
+    },
+
+    cancel() {
+      clearTimeout(instance.timeoutId)
+      instance.timeoutId = null
+      instance.items = []
     }
   }
 
-  return instance.queue
+  const queue = instance.queue.bind(instance)
+  queue.cancel = instance.cancel
+  return queue
 }
 
 const queueForLaterWithKey = (params) => {