directus-extension-flow-manager 1.0.0 → 1.1.0

package/README.md

@@ -1 +1,18 @@
 # directus-extension-flow-manager
+This directus module extension allows you to manage your flow content from directus.
+
+You can install it via ``npm install directus-extension-flow-manager``
+
+- [x] Duplicate flow
+- [x] Export and import flow
+- [ ] Add flow validation when Restore
+
+Screenshoots
+![Alt text](screenshoots/image.png)
+
+Changelogs:
+- 1.0.0: (13 July 2023)
+  * Initial release
+- 1.1.0: (21 July 2023)
+  * Add Backup and Restore feature
+  * Allow user to click the flow row and bring to flow detail page

package/dist/index.js

@@ -0,0 +1 @@
+import{useStores as e,useApi as t,defineModule as o}from"@directus/extensions-sdk";import{defineComponent as n,ref as i,unref as a,resolveComponent as l,resolveDirective as r,openBlock as s,createBlock as c,withCtx as u,withDirectives as d,createVNode as p,createCommentVNode as f,normalizeClass as v,createTextVNode as m,toDisplayString as g,createElementVNode as y}from"vue";import{useRouter as w}from"vue-router";var h=n({setup(){const{useFlowsStore:o,useNotificationsStore:n}=e(),l=o(),r=n(),s=t(),c=w(),u=i(l.flows),d=i(null);return{headers:i([{text:"",value:"icon",width:50,sortable:!1},{text:"Status",value:"status"},{text:"Name",value:"name",width:400}]),flows:u,restoredFile:d,duplicate:p,backup:async function(e){const t={name:e.name,icon:e.icon,color:e.color,description:e.description,trigger:e.trigger,options:e.options,operation:e.operation,operations:e.operations.map((e=>({id:e.id,name:e.name,key:e.key,type:e.type,position_x:e.position_x,position_y:e.position_y,options:e.options,resolve:e.resolve,reject:e.reject})))},o=new Blob([JSON.stringify(t,null,2)],{type:"application/json"});var n=window.URL.createObjectURL(o),i=document.createElement("a");i.href=n,i.setAttribute("download",`${function(){const e=new Date,t=e.getFullYear(),o=(e.getMonth()+1).toString().padStart(2,"0"),n=e.getDate().toString().padStart(2,"0"),i=e.getHours().toString().padStart(2,"0"),a=e.getMinutes().toString().padStart(2,"0"),l=e.getSeconds().toString().padStart(2,"0");return`${t}${o}${n}${i}${a}${l}`}()}-${e.name}.json`),document.body.appendChild(i),i.click()},onRestoredFileChanged:function(e){var t;const o=null==(t=null==e?void 0:e.target)?void 0:t.files[0];if(!o)return;const n=new FileReader;n.onload=async e=>{var t;try{const o=null==(t=e.target)?void 0:t.result,n=JSON.parse(o);console.log({parsedResult:n}),await p(n,!1)}catch(e){console.log(e)}},n.readAsText(o)},onRestoreButtonClicked:function(){var e;console.log("restore button clicked"),null==(e=d.value)||e.click()},goToFlow:function({item:e}){console.log("go to flow",e),c.push(`/settings/flows/${e.id}`)}};async function p(e,t=!0){try{let o=function(t){const o={};function i(e){return t.find((t=>t.id===e))}function a(e){if(!e)return null;return{name:e.name,position_x:e.position_x,position_y:e.position_y,key:e.key,type:e.type,options:e.options,flow:n.data.data.id,resolve:a(i(e.resolve)),reject:a(i(e.reject))}}const l=i(e.operation);return o.name=null==l?void 0:l.name,o.position_x=null==l?void 0:l.position_x,o.position_y=null==l?void 0:l.position_y,o.key=null==l?void 0:l.key,o.type=null==l?void 0:l.type,o.options=null==l?void 0:l.options,o.flow=n.data.data.id,o.resolve=a(i((null==l?void 0:l.resolve)||null)),o.reject=a(i((null==l?void 0:l.reject)||null)),o};const n=await s.post("/flows",{name:t?`${e.name} - Copy`:e.name,status:"inactive",icon:e.icon,accountability:e.accountability,description:e.description,trigger:e.trigger,options:e.options}),i=o(e.operations);await s.patch(`/flows/${n.data.data.id}`,{operation:e.operation?i:null}),await l.hydrate(),u.value=a(l.flows),r.add({type:"success",title:t?"Flow Duplicated successfully":`Flow ${e.name} restored successfully`,closeable:!0,persist:!0})}catch(e){console.log(e)}}}});var b=[],k=[];!function(e,t){if(e&&"undefined"!=typeof document){var o,n=!0===t.prepend?"prepend":"append",i=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(i){var l=b.indexOf(a);-1===l&&(l=b.push(a)-1,k[l]={}),o=k[l]&&k[l][n]?k[l][n]:k[l][n]=r()}else o=r();65279===e.charCodeAt(0)&&(e=e.substring(1)),o.styleSheet?o.styleSheet.cssText+=e:o.appendChild(document.createTextNode(e))}function r(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var o=Object.keys(t.attributes),i=0;i<o.length;i++)e.setAttribute(o[i],t.attributes[o[i]]);var l="prepend"===n?"afterbegin":"beforeend";return a.insertAdjacentElement(l,e),e}}(".active-chip[data-v-b52a34f6] {\n  background-color: var(--primary);\n}\n.inactive-chip[data-v-b52a34f6] {\n  background-color: var(--foreground-subdued);\n}",{}),h.render=function(e,t,o,n,i,a){const w=l("v-icon"),h=l("v-chip"),b=l("v-list-item-icon"),k=l("v-list-item-content"),_=l("v-list-item"),C=l("v-list"),S=l("v-menu"),x=l("v-table"),F=l("v-button"),j=l("private-view"),$=r("tooltip");return s(),c(j,{title:"Flow Manager"},{actions:u((()=>[d((s(),c(F,{rounded:"",icon:"",onClick:e.onRestoreButtonClicked},{default:u((()=>[p(w,{name:"file_upload"})])),_:1},8,["onClick"])),[[$,"Restore",void 0,{bottom:!0}]])])),default:u((()=>[p(x,{items:e.flows,headers:e.headers,"onUpdate:headers":t[0]||(t[0]=t=>e.headers=t),"onClick:row":e.goToFlow},{"item.icon":u((({item:e})=>[e.icon?(s(),c(w,{key:0,name:e.icon},null,8,["name"])):f("v-if",!0)])),"item.status":u((({item:e})=>[p(h,{rounded:"",class:v("active"===e.status?"active-chip":"inactive-chip")},{default:u((()=>[m(g(e.status),1)])),_:2},1032,["class"])])),"item-append":u((({item:t})=>[p(S,{placement:"bottom-end","show-arrow":"","close-on-content-click":!0},{activator:u((({toggle:e})=>[p(w,{name:"more_vert",class:"ctx-toggle",onClick:e},null,8,["onClick"])])),default:u((()=>[p(C,null,{default:u((()=>[p(_,{clickable:"",onClick:o=>e.duplicate(t)},{default:u((()=>[p(b,null,{default:u((()=>[p(w,{name:"content_copy"})])),_:1}),p(k,null,{default:u((()=>[m(" Duplicate ")])),_:1})])),_:2},1032,["onClick"]),p(_,{clickable:"",onClick:o=>e.backup(t)},{default:u((()=>[p(b,null,{default:u((()=>[p(w,{name:"file_download"})])),_:1}),p(k,null,{default:u((()=>[m(" Backup ")])),_:1})])),_:2},1032,["onClick"])])),_:2},1024)])),_:2},1024)])),_:2},1032,["items","headers","onClick:row"]),y("input",{ref:"restoredFile",type:"file",accept:"application/json",onChange:t[1]||(t[1]=(...t)=>e.onRestoredFileChanged&&e.onRestoredFileChanged(...t)),style:{display:"none"}},null,544)])),_:1})},h.__scopeId="data-v-b52a34f6",h.__file="src/module.vue";var _=o({id:"flow-manager",name:"Flow Manager",icon:"bolt",routes:[{path:"",component:h}]});export{_ as default};

package/package.json

@@ -2,8 +2,10 @@
 	"name": "directus-extension-flow-manager",
 	"description": "This is a custom module for managing Flow",
 	"icon": "extension",
-	"version": "1.0.0",
-  "author": "Bagus Andreanto<andreanto.bagus@gmail.com>",
+	"version": "1.1.0",
+	"author": "Bagus Andreanto<andreanto.bagus@gmail.com>",
+	"homepage": "https://github.com/baguse/directus-extension-flow-manager",
+	"license": "MIT",
 	"keywords": [
 		"directus",
 		"directus-extension",
@@ -26,6 +28,7 @@
 		"vue": "^3.3.4"
 	},
 	"dependencies": {
-		"sass": "^1.63.6"
+		"sass": "^1.63.6",
+		"vue-router": "^4.2.4"
 	}
 }

package/src/index.ts

@@ -4,7 +4,7 @@ import ModuleComponent from './module.vue';
 export default defineModule({
 	id: 'flow-manager',
 	name: 'Flow Manager',
-	icon: 'box',
+	icon: 'bolt',
 	routes: [
 		{
 			path: '',

package/src/module.vue

@@ -1,6 +1,6 @@
 <template>
   <private-view title="Flow Manager">
-    <v-table :items="flows" v-model:headers="headers">
+    <v-table :items="flows" v-model:headers="headers" @click:row="goToFlow">
       <template #[`item.icon`]="{ item }">
         <v-icon v-if="item.icon" :name="item.icon" />
       </template>
@@ -21,16 +21,31 @@
               </v-list-item-icon>
               <v-list-item-content> Duplicate </v-list-item-content>
             </v-list-item>
+            <v-list-item clickable @click="backup(item)">
+              <v-list-item-icon>
+                <v-icon name="file_download" />
+              </v-list-item-icon>
+              <v-list-item-content> Backup </v-list-item-content>
+            </v-list-item>
           </v-list>
         </v-menu>
       </template>
     </v-table>
+
+    <template #actions>
+      <v-button v-tooltip.bottom="'Restore'" rounded icon @click="onRestoreButtonClicked">
+        <v-icon name="file_upload" />
+      </v-button>
+    </template>
+
+    <input ref="restoredFile" type="file" accept="application/json" @change="onRestoredFileChanged" style="display: none" />
   </private-view>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, unref } from "vue";
 import { useStores, useApi } from "@directus/extensions-sdk";
+import {useRouter} from 'vue-router'
 
 interface IOperation {
   id: string;
@@ -78,9 +93,12 @@ export default defineComponent({
     const flowsStore = useFlowsStore();
     const notificationsStore = useNotificationsStore();
     const api = useApi();
+    const router = useRouter();
 
     const flows = ref(flowsStore.flows);
 
+    const restoredFile = ref(null);
+
     const headers = ref([
       {
         text: "",
@@ -102,13 +120,18 @@ export default defineComponent({
     return {
       headers,
       flows,
+      restoredFile,
       duplicate,
+      backup,
+      onRestoredFileChanged,
+      onRestoreButtonClicked,
+      goToFlow,
     };
 
-    async function duplicate(item: IFlow) {
+    async function duplicate(item: IFlow, isDuplicate = true) {
       try {
         const response = await api.post("/flows", {
-          name: `${item.name} - Copy`,
+          name: isDuplicate ? `${item.name} - Copy` : item.name,
           status: "inactive",
           icon: item.icon,
           accountability: item.accountability,
@@ -169,13 +192,87 @@ export default defineComponent({
 
         notificationsStore.add({
           type: "success",
-          text: "Flow duplicated successfully",
+          title: isDuplicate ? "Flow Duplicated successfully" : `Flow ${item.name} restored successfully`,
           closeable: true,
+          persist: true,
         });
       } catch (error) {
         console.log(error);
       }
     }
+
+    function getTimestamp() {
+      const date = new Date();
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const day = date.getDate().toString().padStart(2, "0");
+      const hour = date.getHours().toString().padStart(2, "0");
+      const minute = date.getMinutes().toString().padStart(2, "0");
+      const second = date.getSeconds().toString().padStart(2, "0");
+
+      return `${year}${month}${day}${hour}${minute}${second}`;
+    }
+
+    async function backup(item: IFlow) {
+      interface ISanitizedFlow extends Partial<Omit<IFlow, "operations">> {
+        operations: Partial<IOperation>[];
+      }
+      const sanitizedFlow: ISanitizedFlow = {
+        name: item.name,
+        icon: item.icon,
+        color: item.color,
+        description: item.description,
+        trigger: item.trigger,
+        options: item.options,
+        operation: item.operation,
+        operations: item.operations.map((operation) => ({
+          id: operation.id,
+          name: operation.name,
+          key: operation.key,
+          type: operation.type,
+          position_x: operation.position_x,
+          position_y: operation.position_y,
+          options: operation.options,
+          resolve: operation.resolve,
+          reject: operation.reject,
+        })),
+      };
+      const blob = new Blob([JSON.stringify(sanitizedFlow, null, 2)], { type: "application/json" });
+      var fileObj = window.URL.createObjectURL(blob);
+
+      var docUrl = document.createElement("a");
+      docUrl.href = fileObj;
+      docUrl.setAttribute("download", `${getTimestamp()}-${item.name}.json`);
+      document.body.appendChild(docUrl);
+      docUrl.click();
+    }
+
+    function onRestoredFileChanged($event: Event) {
+      const file: File = $event?.target?.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        try {
+          const result = e.target?.result;
+          const parsedResult = JSON.parse(result as string);
+          console.log({ parsedResult });
+          await duplicate(parsedResult, false);
+        } catch (error) {
+          console.log(error);
+        }
+      };
+      reader.readAsText(file);
+    }
+
+    function onRestoreButtonClicked() {
+      console.log("restore button clicked");
+      restoredFile.value?.click();
+    }
+
+    function goToFlow({ item }: { item: IFlow }) {
+      console.log("go to flow", item);
+      router.push(`/settings/flows/${item.id}`);
+    }
   },
 });
 </script>