@simitgroup/simpleapp-generator 1.1.14 → 1.1.16

package/templates/nuxt/components/header/button/task/HeaderButtonTaskList.vue.eta

@@ -1,6 +1,9 @@
 <template>
     <button class="text-center border-none  cursor-pointer p-1" @click="visible=true" >
-        <i class="pi pi-bell"></i>
+        <i class="pi pi-bell">
+            <Badge :value="taskqty" severity="danger"></Badge>
+        </i>
+
         <Sidebar v-model:visible="visible" position="right"  :modal="false" :dismissable="false">            
             <template #header>
                 <div class="text text-lg font-bold">{{ t('mytasks') }}</div>
@@ -14,52 +17,44 @@
             :close-on-escape="false" >                
             <template #header>
                 <div class="text text-lg font-bold">
-                    {{ selectedtask.processName }} / {{ selectedtask.name }}
+                    {{ selectedtask?.processName }} / {{ selectedtask?.name }}
                 </div>            
             </template>
             <template #default>
-                <div >
-
-                    <div>                       
-                        <pre>{{ selectedtask.data}}</pre>
-                    </div>
-                    <div class="border " v-if="formSchema">
-                        <SimpleAppJsonSchemaForm :schema="formSchema" v-model="data"  #default="o" >                                                        
-                        <Card>
-                            <template #header>Response</template>
-                            <template #content>
-                              <div >                                                            
-                                    <div v-for="field in Object.keys(formSchema.properties)" class="border p-2">                                      
-                                        <SimpleAppInput :setting="o.getField(`#/properties/${field}`)" 
-                                         :input-type="autoPickInput(formSchema.properties[field])"
-                                         v-model="data[field]" />                                         
-                                    </div>                                    
-                              </div>                                
-                            </template>
-                            <template #footer>
-                                <Button class="btn-primary" @click="o.validate(validateCallBack)">{{ t('submit') }}</Button>
-                                
-                            </template>
-                        </Card> 
-                        </SimpleAppJsonSchemaForm>                                
-
-                    </div>                                                   
+                <div v-if="componentresolver && formSchema" >
+                    <component :is="componentresolver"                
+                        :processName="selectedtask?.processName ?? ''"
+                        :taskName="selectedtask?.name??''"                  
+                        :instanceData="instanceData"                        
+                        :jsonschema="formSchema"                    
+                        v-model="data"
+                        @submit="invokeTask"
+                    />
                 </div>
             </template>                
         </Dialog>
     </button>
 </template>
 <script setup lang="ts">
-import {UserTaskType,SimpleAppInputType} from '~/types'
+import {UserTaskType,NotificationStatus} from '~/types'
 import { useDialog } from 'primevue/usedialog';
+import * as forms from '~/simpleapp/workflows/forms'
+import {getFormComponent} from '~/components/workflow/forms'
 const dialog = useDialog()
 const dialogvisible = ref(false)
 const visible = ref(false)
-const selectedtask = ref()
+const selectedtask = ref<UserTaskType>()
 const tasklist = ref<UserTaskType[]>([])
 const formSchema = ref()
+const formkey = ref<string>('')
 const data = ref<any>({})
-//computed(async ()=>await getTaskList())
+const instanceData = ref<any>({})
+const componentresolver = computed(()=>{
+    const workflowform = getFormComponent(formkey.value as string)
+    console.log("workflowformworkflowformworkflowform",workflowform)
+    return workflowform 
+})
+const taskqty = computed(()=>tasklist.value.length)
 
 onMounted(async ()=> syncTask())
 watch(visible,(newvalue)=>{
@@ -78,56 +73,36 @@ const closeDialog = ()=>{
 }
 
 const invokeTask = async ()=>{
-    const res = await invokeUserTask(selectedtask.value.taskId,data)
+    const res = await invokeUserTask(selectedtask.value?.taskId,data)
     syncTask()
     dialogvisible.value=false
 }
 const viewTask = async (task:UserTaskType)=>{
+    
     selectedtask.value=task
-    dialogvisible.value=true
+    instanceData.value=task.data
+    
     const formsettings:any = await getTaskForm(task.processName, task.elementId)
-    formSchema.value = formsettings.schema
-    Object.keys(formsettings.schema.properties).forEach((key)=>{        
-        data.value[key]=null
-    })
-    console.log("data,data",data)
-}
+    formkey.value = formsettings.schema
+    console.log("viewTask formsettings",formsettings)
+    formSchema.value = forms[formkey.value as keyof typeof forms]
+    if(formSchema.value){
+        Object.keys(formSchema.value.properties).forEach((key)=>{        
+            data.value[key]=''
+        })
 
-const autoPickInput = (setting:any) =>{
-    if(setting.type=='boolean'){
-        return SimpleAppInputType.checkbox
-    }if(setting.type=='number'){
-        return SimpleAppInputType.number
-    }
-    else if(setting.enum){
-        return SimpleAppInputType.select
-    }
-    else if(setting.type=='string'){
-        return pickStringInput(setting)        
+        dialogvisible.value=true
     }else{
-        return SimpleAppInputType.text
-    }
-}
-
-const pickStringInput = (setting:any) =>{
-    switch(setting.format){
-        case 'date':
-            return SimpleAppInputType.date
-        break;
-        case 'textarea':
-            return SimpleAppInputType.textarea
-        break;
-        case 'text':
-        default:
-            return SimpleAppInputType.text
-        break;
+        useNuxtApp().$event('Notification',{
+            documentName:task.processName,
+            summary:t('formKeyNotFound',{formKey:formkey.value}),
+            status:NotificationStatus.error,
+            message:t('formKeyNotFound',{formKey:formkey.value}),
+            
+        })
     }
+    
 }
 
-const validateCallBack = async (errors:any)=>{
-    // console.log("After validate",result)
-    if(!errors){
-        await invokeTask()
-    }
-}
+onMounted(()=>syncTask())
 </script>

package/templates/nuxt/components/simpleApp/SimpleAppForm.vue.eta

@@ -21,7 +21,7 @@ import _ from 'lodash'
     const getField = (path:string)=>{
         // console.log("simpleform topath",path)
         const data = props.document.getData()
-        const schema = props.document.getSchema()
+        const schema = props.document.getSchema() as JSONSchema7 //force type for compatibility
         const fieldsetting = getPathObject(schema,path)
         // console.log("setting",fieldsetting)
         

package/templates/nuxt/components/simpleApp/SimpleAppJsonSchemaForm.vue.eta

@@ -10,11 +10,11 @@ import Ajv from 'ajv';
 import addFormats from 'ajv-formats';
 import addErrors from 'ajv-errors';
 import _ from 'lodash'
-const modelValue = defineModel()
+
     const props = defineProps<{
         title?:string,
         schema:JSONSchema7,
-        // data:any,
+        data:any,
         // document: SimpleAppClient<any,any>
         readonly?:boolean
     }>()
@@ -37,9 +37,7 @@ const modelValue = defineModel()
         } //as SimpleAppFieldSetting
     }
 
-    const getModelValue=(data:any,path:string)=>{
-
-    }
+    
     const getIsRequired=(schema:any,path:string)=>{
         if(!path){
             console.error('unknown path')
@@ -142,7 +140,8 @@ const modelValue = defineModel()
     // this.errorlist.value = {};
     // this.hook('pre-validation', this.data.value);
     const validate = ajv.compile(props.schema);
-    const valid = validate(modelValue.value);
+    console.log("validate data",props.data)
+    const valid = validate(props.data);
     if (!valid) {
       const errors = validate.errors;
       const tmp: { [key: string]: any } = {};

package/templates/nuxt/components/workflow/forms/dynamicfield.vue._eta

@@ -0,0 +1,85 @@
+<template>
+    <div >
+        <div>                       
+            <pre>{{ data}}dynamic</pre>
+        </div>
+        <div class="border " v-if="jsonschema">
+            <SimpleAppJsonSchemaForm :schema="jsonschema" :data="data"  #default="o" >                                                        
+            <Card>
+                <template #header>Response</template>
+                <template #content>
+                <div >                                                            
+                        <div v-for="field in Object.keys(jsonschema.properties ?? {} )" class="border p-2">                                      
+                            <SimpleAppInput :setting="o.getField(`#/properties/${field}`)" 
+                            :input-type="autoPickInput( field )"
+                            v-model="data[field]" />                                         
+                        </div>                                    
+                </div>                                
+                </template>
+                <template #footer>
+                    <Button class="btn-primary" @click="o.validate(validateCallBack)">{{ t('submit') }}</Button>
+                    
+                </template>
+            </Card> 
+            </SimpleAppJsonSchemaForm>                                
+
+        </div>                                                   
+        </div>
+</template>
+<script lang="ts" setup>
+    import {UserTaskType,SimpleAppInputType} from '~/types'
+    import type { JSONSchema7 }  from 'json-schema'
+    const props = defineProps<{
+        processName:string
+        taskName:string
+        jsonschema:JSONSchema7
+        instanceData:any
+    }>()
+    // props.jsonschema.properties
+    const modelValue = defineModel<any>({})
+    const emit = defineEmits(['submit'])
+    const validateCallBack = async (errors:any)=>{
+        // console.log("After validate",result)
+        if(!errors){
+            emit('submit',modelValue)
+        }
+    }
+
+    const autoPickInput = (field:string) =>{
+    let setting :JSONSchema7= {type:'string'}
+    
+    if(props.jsonschema.properties && props.jsonschema.properties[field]){
+        setting = props.jsonschema.properties[field] as JSONSchema7 //force type
+    } 
+               
+    
+    if(setting.type=='boolean'){
+        return SimpleAppInputType.checkbox
+    }if(setting.type=='number'){
+        return SimpleAppInputType.number
+    }
+    else if(setting.enum){
+        return SimpleAppInputType.select
+    }
+    else if(setting.type=='string'){
+        return pickStringInput(setting)        
+    }else{
+        return SimpleAppInputType.text
+    }
+}
+
+const pickStringInput = (setting:any) =>{
+    switch(setting.format){
+        case 'date':
+            return SimpleAppInputType.date
+        break;
+        case 'textarea':
+            return SimpleAppInputType.textarea
+        break;
+        case 'text':
+        default:
+            return SimpleAppInputType.text
+        break;
+    }
+}
+</script>

package/templates/nuxt/components/workflow/forms/index.ts._eta

@@ -0,0 +1,10 @@
+import dynamicfield from './dynamicfield.vue'
+import simpleapprove from './simpleapprove.vue'
+
+const forms: {[key:string]:Component}={
+    dynamicfield:dynamicfield,
+    simpleapprove:simpleapprove
+}
+
+export const getFormComponent =(formkey:string)=> forms[formkey] ?? forms['dynamicfield']
+export {dynamicfield,simpleapprove}

package/templates/nuxt/components/workflow/forms/simpleapprove.vue._eta

@@ -0,0 +1,43 @@
+<template>
+    <SimpleAppJsonSchemaForm :schema="jsonschema" :data="modelValue"  #default="o" >                                                        
+        <Card>            
+            <template #content>
+                <div>
+                    <h1>{{t('simpleApproveMessage')}}</h1>
+                </div>
+                <div >                    
+                     <SimpleAppInput :setting="o.getField(`#/properties/decision`)" 
+                            :input-type="SimpleAppInputType.select"
+                            v-model="modelValue.decision" 
+                            />                                         
+                    <SimpleAppInput :setting="o.getField(`#/properties/description`)" 
+                            :input-type="SimpleAppInputType.textarea"
+                            v-model="modelValue.description" 
+                            />                  
+                </div>                                
+            </template>
+            <template #footer>
+                <Button class="btn-primary" @click="o.validate(validateCallBack)">{{ t('submit') }}</Button>
+            </template>
+        </Card> 
+    </SimpleAppJsonSchemaForm> 
+</template>
+<script lang="ts" setup>
+import {UserTaskType,SimpleAppInputType} from '~/types'
+import type { JSONSchema7 }  from 'json-schema'
+const props = defineProps<{
+    processName:string
+    taskName:string
+    jsonschema:JSONSchema7
+    instanceData:any
+}>()
+const modelValue = defineModel<{decision:string,description:string}>()
+
+const emit = defineEmits(['submit'])
+const validateCallBack = async (errors:any)=>{
+    // console.log("After validate",result)
+    if(!errors){
+        emit('submit',modelValue)
+    }
+}
+</script>

package/templates/nuxt/lang/{df.ts.eta → df.ts._eta}

@@ -24,7 +24,10 @@ export default {
     suspend: 'Suspend',
     submit: 'Submit',
     decision: 'Decision',
-
+    simpleApproveMessage: 'Approve or reject',
+    suspendcustomer:"Suspend Customer",
+    formKeyNotFound:'Formkey not found "{formKey}"',
+    
     //auto generate from schema
     <% for(let i=0; i< it.allfields.length; i++){ %>
     <% let f = it.allfields[i] %>

package/templates/nuxt/nuxt.config.ts.eta

@@ -83,7 +83,7 @@ tailwindcss: {
       exclude: ['chart']
     }, 
     directives: {
-      include: ['Ripple', 'Tooltip']
+      include: ['Ripple', 'Tooltip','BadgeDirective']
     },
     cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
     importPT: { as: 'SimpleAppPT', from:  path.resolve(__dirname,'./assets/primevue/passthrough.ts') },

package/templates/nuxt/simpleapp/workflows/bpmn/readme.md._eta

@@ -0,0 +1 @@
+put bpmn files here

package/templates/nuxt/simpleapp/workflows/forms/readme.md._eta

@@ -0,0 +1 @@
+all form for user task obtain from here

package/templates/project/workflows/bpmn/suspendcustomer.bpmn._eta

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
+  <bpmn:process id="process1" name="Suspend Customer" isExecutable="false">
+    <bpmn:extensionElements />
+    <bpmn:startEvent id="StartEvent_1">
+      <bpmn:outgoing>Flow_1a63g0z</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:endEvent id="Event_0qpgd23">
+      <bpmn:incoming>Flow_1oty8vq</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:sequenceFlow id="Flow_1a63g0z" sourceRef="StartEvent_1" targetRef="hello1" />
+    <bpmn:sequenceFlow id="Flow_1rspxq4" sourceRef="hello1" targetRef="approve1" />
+    <bpmn:serviceTask id="hello1" name="hello1">
+      <bpmn:documentation>hello1 doc
+bbb</bpmn:documentation>
+      <bpmn:incoming>Flow_1a63g0z</bpmn:incoming>
+      <bpmn:outgoing>Flow_1rspxq4</bpmn:outgoing>
+    </bpmn:serviceTask>
+    <bpmn:sequenceFlow id="Flow_1khvymz" sourceRef="approve1" targetRef="hello2" />
+    <bpmn:userTask id="approve1" name="approve1" camunda:formKey="simpleapprove" camunda:assignee="kstan">
+      <bpmn:documentation>approve1 doc
+abc</bpmn:documentation>
+      <bpmn:incoming>Flow_1rspxq4</bpmn:incoming>
+      <bpmn:outgoing>Flow_1khvymz</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:sequenceFlow id="Flow_1oty8vq" sourceRef="hello2" targetRef="Event_0qpgd23" />
+    <bpmn:serviceTask id="hello2" name="hello2">
+      <bpmn:documentation>hello2 doc
+ccc</bpmn:documentation>
+      <bpmn:incoming>Flow_1khvymz</bpmn:incoming>
+      <bpmn:outgoing>Flow_1oty8vq</bpmn:outgoing>
+    </bpmn:serviceTask>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process1">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds x="122" y="202" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Event_0qpgd23_di" bpmnElement="Event_0qpgd23">
+        <dc:Bounds x="672" y="202" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_1trhs2m_di" bpmnElement="hello1">
+        <dc:Bounds x="200" y="180" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0l36sc9_di" bpmnElement="approve1">
+        <dc:Bounds x="370" y="180" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_1mg3y6c_di" bpmnElement="hello2">
+        <dc:Bounds x="510" y="180" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_1a63g0z_di" bpmnElement="Flow_1a63g0z">
+        <di:waypoint x="158" y="220" />
+        <di:waypoint x="200" y="220" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1rspxq4_di" bpmnElement="Flow_1rspxq4">
+        <di:waypoint x="300" y="220" />
+        <di:waypoint x="370" y="220" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1khvymz_di" bpmnElement="Flow_1khvymz">
+        <di:waypoint x="470" y="220" />
+        <di:waypoint x="510" y="220" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1oty8vq_di" bpmnElement="Flow_1oty8vq">
+        <di:waypoint x="610" y="220" />
+        <di:waypoint x="672" y="220" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

package/templates/project/workflows/forms/index.ts.eta

@@ -0,0 +1,2 @@
+export {simpleapprove} from './simpleapprove.jsonschema'
+

package/templates/project/workflows/forms/simpleapprove.jsonschema.ts.eta

@@ -0,0 +1,8 @@
+export const simpleapprove = {
+  "type": "object",
+  "required": ["decision"],
+  "properties": {
+    "decision": { "type": "string", "enum": ["", "approve", "reject"] },
+    "description": { "type": "string", "default":"" }
+  }
+}

package/templates/workflow/next/listener.ts.eta

@@ -0,0 +1,76 @@
+/**
+ * This file was automatically generated by simpleapp generator.
+ * --remove-this-line-to-prevent-override--
+ * last change 2023-09-23
+ * Author: Ks Tan
+ */
+import { Injectable,Logger } from "@nestjs/common";
+import { EventEmitter2, OnEvent } from '@nestjs/event-emitter';
+import { InjectModel } from "@nestjs/mongoose";
+import { Model } from "mongoose";
+import { UserContext } from "../../generate/commons/user.context";
+import { User } from "../../services/user.service";
+import { Permission } from "../../services/perm.service";
+import {SimpleAppListenerService} from './simpleapp.listener'
+import {
+  WorkflowSettingApiSchema,
+  WorkflowDataApiSchema,
+  WorkflowProcess,
+  WorkflowTask,
+  UserTaskActors,
+  UserTaskType,
+  ServiceTaskData,
+  UserTaskData,
+  UserTaskEventType,
+  ServiceTaskEventType
+} from '../../generate/workflow/workflow.type';
+
+
+@Injectable()
+export class <%=it.processName%>ListenerService extends SimpleAppListenerService{
+    logger = new Logger()
+    constructor(){      
+        super()             
+    }
+
+    <%for(let i=0; i<it.elements.length;i++){%>
+      <%let e=it.elements[i]%>        
+      <%let datatype = e.type == "bpmn:UserTask" ? "UserTaskData" : "ServiceTaskData" %>
+      
+      <%if(datatype=='UserTaskData'){%>
+    /**
+      * Execute while user task <%= e.name%> invoked (triggered by actor to next step)
+      * bpmn: <%=it.name%>, elementId: <%= e.id%>, taskName: <%= e.name%>, event: invoke
+      * documentation: <%~e.documentation%> 
+      * @param props
+      */
+      @OnEvent('<%=it.name%>.<%= e.id%>.invoke')
+      async <%=`watch_${e.id}_invoke`%>(props:<%=datatype%>){
+        console.log("Running listener  <%=it.name%>.<%= e.id%>.invoke",props)
+      }
+
+    /**
+      * Execute while user task <%= e.name%> reach wait stage (pending actor input)
+      * bpmn: <%=it.name%>, elementId: <%= e.id%>, taskName: <%= e.name%>, event: wait 
+      * documentation: <%= e.documentation %> 
+      * @param props
+      */
+      @OnEvent('<%=it.name%>.<%= e.id%>.wait')
+      async <%=`watch_${e.id}_wait`%>(props:<%=datatype%>){
+        console.log("Running listener  <%=it.name%>.<%= e.id%>.wait",props)
+      }
+      <%}else if( datatype=='ServiceTaskData'){ %>
+
+      /**
+      * Execute ServiceTask event <%= e.name%> (start)
+      * bpmn: <%=it.name%>, elementId: <%= e.id%>, taskName: <%= e.name%>, event: start
+      * documentation: <%=e.documentation%> 
+      * @param props
+      */
+      @OnEvent('<%=it.name%>.<%= e.id%>.start')
+      async <%=`watch_${e.id}_start`%>(props:<%=datatype%>){
+        console.log("Running listener  <%=it.name%>.<%= e.id%>.start",props)
+      }
+      <%}%>
+    <%}%>
+}