@simitgroup/simpleapp-generator 1.3.3-alpha → 1.3.4-alpha

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

@@ -1,131 +1,133 @@
 <template>
-    <form class="simpleapp-form" @submit.prevent="true">        
-        <slot name="header"><h3 class="flex flex-col">{{ title }}</h3></slot>
-        <slot  name="default" :data="document.getData()" :getField="getField"></slot>
-    </form>
+  <form class="simpleapp-form" @submit.prevent="true">
+    <slot name="default" :data="document.getData()" :getField="getField"></slot>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
  * last change 2023-10-28
  * Author: Ks Tan
  */
-import jsonpath from 'jsonpath';
-import { SimpleAppClient } from  '~/simpleapp/generate/clients/SimpleAppClient'
-import type { JSONSchema7,JSONSchema7Definition } from 'json-schema';
-import * as alldefaults from '~/simpleapp/generate/defaults'
-import _, { upperFirst } from 'lodash'
-    const props = defineProps<{
-        title?:string,
-        document: SimpleAppClient<any,any>
-        readonly?:boolean
-    }>()
-    if(!props.document){
-        throw "undefine SimpleAppForm property 'document'"
-    }
+import jsonpath from "jsonpath";
+import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
+import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
+import * as alldefaults from "~/simpleapp/generate/defaults";
+import _, { upperFirst } from "lodash";
+const props = defineProps<{
+  
+  document: SimpleAppClient<any, any>;
+  readonly?: boolean;
+}>();
+if (!props.document) {
+  throw "undefine SimpleAppForm property 'document'";
+}
 
-    const isreadonly = computed(()=> props.readonly ? props.readonly: props.document.isReadOnly())
+const isreadonly = computed(() =>
+  props.readonly ? props.readonly : props.document.isReadOnly(),
+);
 
-    // const obj = {schema:props.schema,data: props.schema}
-    const getField = (path:string)=>{
-        // console.log("simpleform topath",path)
-        const data = props.document.getData()
-        const schema = props.document.getSchema() as JSONSchema7 //force type for compatibility
-        const fieldsetting = getPathObject(schema,path)
-        // console.log("setting",fieldsetting)
-        
-        type defaulttype = typeof alldefaults
-        type keytype = keyof defaulttype
-        
-        const x : keytype = 'Default'+ props.document.getDocName(true)   as keytype
-        const defaultvalue = alldefaults[x](randomUUID())
-        return {
-            path: path,
-            key: _.last(path.split('/')),
-            instancepath: getInstancePath(schema,path),
-            fieldsetting: fieldsetting,
-            modelObject: data,
-            document: props.document,
-            apiObj:props.document.getApi(),
-            modelField: 'email',
-            isrequired: getIsRequired(schema,path),
-            errors: props.document.getErrors(),
-            readonly: isreadonly.value,
-            defaultValue: defaultvalue
-        } //as SimpleAppFieldSetting
-    }
+// const obj = {schema:props.schema,data: props.schema}
+const getField = (path: string) => {
+  // console.log("simpleform topath",path)
+  const data = props.document.getData();
+  const schema = props.document.getSchema() as JSONSchema7; //force type for compatibility
+  const fieldsetting = getPathObject(schema, path);
+  // console.log("setting",fieldsetting)
+
+  type defaulttype = typeof alldefaults;
+  type keytype = keyof defaulttype;
 
-    //    "schemaPath": "#/properties/email/format",
+  const x: keytype = ("Default" + props.document.getDocName(true)) as keytype;
+  const defaultvalue = alldefaults[x](randomUUID());
+  return {
+    path: path,
+    key: _.last(path.split("/")),
+    instancepath: getInstancePath(schema, path),
+    fieldsetting: fieldsetting,
+    modelObject: data,
+    document: props.document,
+    apiObj: props.document.getApi(),
+    modelField: "email",
+    isrequired: getIsRequired(schema, path),
+    errors: props.document.getErrors(),
+    readonly: isreadonly.value,
+    defaultValue: defaultvalue,
+  }; //as SimpleAppFieldSetting
+};
 
-    const getIsRequired=(schema:any,path:string)=>{
-        if(!path){
-            console.error('unknown path')
-            return 'xx'
-        }
+//    "schemaPath": "#/properties/email/format",
 
-        try{
-            let paths = path.replace('#/','').split('/')
-            const fieldname = paths[paths.length-1]
-            paths = paths.slice(0, -2);    
-            let tmp = schema
-            for(let i=0;i<paths.length;i++){
-                tmp = tmp[paths[i]]
-                
-            }
-            if(Array.isArray(tmp['required'])   ) {
-                    const arr:string[] = tmp['required']
-                    return arr.includes (fieldname)
-                }else{
-                    return false
-                }
+const getIsRequired = (schema: any, path: string) => {
+  if (!path) {
+    console.error("unknown path");
+    return "xx";
+  }
 
-            // console.log("get instance path",instancepath)
-            
-            // return tmp
-        }catch(err:any){
-            console.error(err.message)
-        }
+  try {
+    let paths = path.replace("#/", "").split("/");
+    const fieldname = paths[paths.length - 1];
+    paths = paths.slice(0, -2);
+    let tmp = schema;
+    for (let i = 0; i < paths.length; i++) {
+      tmp = tmp[paths[i]];
     }
-   const getInstancePath=(schema:any,path:string)=>{
-    if(!path){
-        console.error('unknown path')
-        return 'yy'
+    if (Array.isArray(tmp["required"])) {
+      const arr: string[] = tmp["required"];
+      return arr.includes(fieldname);
+    } else {
+      return false;
     }
-    try{
-        let paths = path.replace('#/','').split('/')    
-        let tmp = schema
-        let instancepath=''
-        for(let i=0;i<paths.length;i++){
-            tmp = tmp[paths[i]]
-            if(tmp['type'] && paths[i] !='items'){
-                instancepath=instancepath+'/'+paths[i]
-            }
-        }
 
-        // console.log("get instance path",instancepath)
-        return instancepath
-        // return tmp
-    }catch(err:any){
-        console.error(err.message)
+    // console.log("get instance path",instancepath)
+
+    // return tmp
+  } catch (err: any) {
+    console.error(err.message);
+  }
+};
+const getInstancePath = (schema: any, path: string) => {
+  if (!path) {
+    console.error("unknown path");
+    return "yy";
+  }
+  try {
+    let paths = path.replace("#/", "").split("/");
+    let tmp = schema;
+    let instancepath = "";
+    for (let i = 0; i < paths.length; i++) {
+      tmp = tmp[paths[i]];
+      if (tmp["type"] && paths[i] != "items") {
+        instancepath = instancepath + "/" + paths[i];
+      }
     }
 
+    // console.log("get instance path",instancepath)
+    return instancepath;
+    // return tmp
+  } catch (err: any) {
+    console.error(err.message);
+  }
 
-    // let paths = path.replace('#/','').split('/')    
-    // return '/'+paths[1]
-   }
-   const getPathObject=(schema:JSONSchema7,path:string):JSONSchema7|undefined=>{    
-    // console.log("path",path)
-    if(!path || !path.includes('#/properties')){
-        console.error('unknown path')
-        return undefined
-    }
-    try{        
-        const modifiedpath = path.replace('#','$').replaceAll('/','.')        
-        const queryresult = jsonpath.query(schema,modifiedpath)[0]
-        return queryresult     
-    }catch(err:any){
-        console.error(err.message)        
-    }    
-   }
-</script>
+  // let paths = path.replace('#/','').split('/')
+  // return '/'+paths[1]
+};
+const getPathObject = (
+  schema: JSONSchema7,
+  path: string,
+): JSONSchema7 | undefined => {
+  // console.log("path",path)
+  if (!path || !path.includes("#/properties")) {
+    console.error("unknown path");
+    return undefined;
+  }
+  try {
+    const modifiedpath = path.replace("#", "$").replaceAll("/", ".");
+    const queryresult = jsonpath.query(schema, modifiedpath)[0];
+    return queryresult;
+  } catch (err: any) {
+    console.error(err.message);
+  }
+};
+</script>

package/templates/nuxt/components/simpleApp/{SimpleAppFormToolBar.vue.eta → SimpleAppFormToolBar.vue._eta}

@@ -1,38 +1,36 @@
 <template>
-  <div v-if="isMobile()" class="w-full">    
-    <MobileToolbar class=" bg-gray-800 text-white">
+  <div v-if="isMobile()" class="w-full">
+    <MobileToolbar class="bg-gray-800 text-white">
       <template #start>
-        <ButtonText class="text-xl" @click="callClose"
-          ><i class="pi pi-times"></i
-        ></ButtonText>
+        <slot name="start" :menu="menu">
+          <ButtonText class="text-xl" @click="callClose"
+            ><i class="pi pi-times"></i
+          ></ButtonText>
+        </slot>
       </template>
       <template #center>
-        <TextTitle class="text-white ">{{ title }}</TextTitle>
+        <slot name="center" :menu="menu">
+          <TextTitle class="text-white line-clamp-2">{{ title }}</TextTitle>
+        </slot>
       </template>
       <template #end>
-        <div class="flex flex-row-reverse gap-1 w-full">
-          <ButtonText class="text-xl" @click="toggleMenu" v-if="isShow">
-            <i class="pi pi-ellipsis-v"></i>
-          </ButtonText>
-
-          <ButtonText
-            class="text text-xl"
-            @click="
-              emitEvent(
-                {
-                  action: doc.isNew() ? 'create' : 'update',
-                  label: '',
-                  type: 'crud',
-                },
-                $event,
-              )
-            "
-          >
-            <i class="pi pi-save"></i>
-          </ButtonText>
-
-          <ContextMenu ref="menu" :model="menus as MenuItem[]" />
-        </div>
+        <slot name="end" :menu="menu">
+          <div class="flex flex-row w-full">
+            <ButtonText
+              class="text-xl"
+              @click="emitEvent(menus[0], $event)"
+              v-if="isShow"
+              v-tooltip="menus[0].label"
+            >
+              <i :class="menus[0].icon"></i>
+            </ButtonText>
+
+            <ButtonText class="text-xl" @click="toggleMenu" v-if="isShow">
+              <i class="pi pi-ellipsis-v"></i>
+            </ButtonText>
+          </div>
+        </slot>
+        <ContextMenu ref="menu" :model="menus as MenuItem[]" />
       </template>
     </MobileToolbar>
     <div class="h-14"></div>
@@ -43,61 +41,87 @@
       <template #start>
         <div v-for="(menu, index) in menus" :key="index">
           <div v-if="menu.label && menu.type == 'crud'">
-            <ButtonDefault @click="emitEvent(menu, $event)">{{
-              menu.label
-            }}</ButtonDefault>
+            <ButtonAction
+              @click="emitEvent(menu, $event)"
+              :action-name="menu.action"
+              >{{ menu.label }}</ButtonAction
+            >
           </div>
         </div>
       </template>
       <template #center>
+        <TextTitle class="text-white line-clamp-2">{{ title }}</TextTitle>
+      </template>
+      <template #end>
         <div v-for="(menu, index) in menus" :key="index">
           <div v-if="menu.label && menu.type == 'docstatus'">
-            <ButtonDefault @click="emitEvent(menu, $event)">{{
-              menu.label
-            }}</ButtonDefault>
+            <ButtonAction
+              @click="emitEvent(menu, $event)"
+              :action-name="menu.action"
+              >{{ menu.label }}</ButtonAction
+            >
           </div>
         </div>
       </template>
-      <template #end> </template>
     </Toolbar>
-
     <ConfirmPopup></ConfirmPopup>
   </div>
 </template>
 <script setup lang="ts">
 /**
- * This file was automatically generated by simpleapp generator. Every
- * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
- * Author: Ks Tan
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
+ * last change 2024-02-22
+ * author: Ks Tan
  */
+
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
 import { useConfirm } from "primevue/useconfirm";
 import { FormActions, FormCrudEvent, FormMenu } from "~/types";
 import { MenuItem } from "primevue/menuitem";
+import { MenuItemCommandEvent } from "primevue/menuitem";
 const confirm = useConfirm();
 const emits = defineEmits(["on", "close"]);
 const props = defineProps<{
   document: SimpleAppClient<any, any>;
   disableaction?: string[];
 }>();
-const createData = async () => {try{ return await doc.create()}catch(e){console.debug('validation error:',e)}};
-const updateData = async () => {try{ return  await doc.update()}catch(e){console.debug('validation error:',e)}};
-const deleteData = async () => {try{ return  await doc.delete()}catch(e){console.debug('validation error:',e)}};
+const createData = async () => {
+  try {
+    return await doc.create();
+  } catch (e) {
+    console.debug("validation error:", e);
+  }
+};
+const updateData = async () => {
+  try {
+    return await doc.update();
+  } catch (e) {
+    console.debug("validation error:", e);
+  }
+};
+const deleteData = async () => {
+  try {
+    return await doc.delete();
+  } catch (e) {
+    console.debug("validation error:", e);
+  }
+};
 
 const doc = props.document;
 const data = doc.getReactiveData();
 type Datatype = keyof typeof data.value;
 const config = doc.getSchema()["x-simpleapp-config"];
-const titlefield = (config.documentTitle ?? config.documentTitle) as Datatype;
-const title = ref<string>(
+const titlefield = (config.uniqueKey ?? config.documentTitle) as Datatype;
+const title = computed(() =>
   data.value[titlefield as Datatype]
     ? data.value[titlefield as Datatype]
     : t(doc.getDocName()),
 );
+
 const menu = ref();
 const menus = computed(() =>
-  [...getActions(), { separator: true }, ...getDocActions()].filter((item) =>
+  [...getActions(),  ...getDocActions()].filter((item) =>
     showMenuButton(item),
   ),
 );
@@ -109,23 +133,22 @@ const toggleMenu = (event: MouseEvent) => {
   menu.value.toggle(event);
 };
 
-const callClose = (e: MouseEvent) => {  
+const callClose = (e: MouseEvent) => {
   useNuxtApp().$event("CloseDialog", doc.getDocName());
   emitEvent({ action: "exit", type: "menu", label: "" }, e);
   // async (menu: FormMenu, clickEvent: MouseEvent)
 };
-const emitMobileEvent = (itemevent: {
-  item: any;
-  originalEvent: MouseEvent;
-}) => {
+const emitMobileEvent = (itemevent: MenuItemCommandEvent) => {
   const actionname: string = itemevent.item.action;
   const event = itemevent.originalEvent;
-  emitEvent({ action: actionname, type: "crud", label: "" }, event);
+  // emitEvent({ action: actionname, type: "crud", label: "" }, event);
+  emitEvent(itemevent.item, event);
 };
 
 const getActions = () => {
   const actions = doc.getActions();
   const crudmenus: any[] = [];
+
   // Object.keys(actions).forEach((key)=>{ //crud, api, docstatus
   actions["crud"].forEach((item) => {
     if (props.disableaction && props.disableaction.includes(item)) {
@@ -135,6 +158,7 @@ const getActions = () => {
         action: item,
         label: t(item),
         type: "crud",
+        icon: getActionIcon(item),
         command: emitMobileEvent,
       });
     }
@@ -161,9 +185,10 @@ const emitEvent = async (menu: FormMenu, clickEvent: MouseEvent) => {
       if (await createData()) emits("on", FormCrudEvent.create);
     } else if (menu.action == "update") {
       if (await updateData()) emits("on", FormCrudEvent.update);
-    } else if (menu.type == "setDocStatus")
+    } else if (menu.type == "docstatus") {
       emits("on", FormCrudEvent.setDocStatus, menu.action);
-    else if (menu.action == FormCrudEvent.exit) emits("on", FormCrudEvent.exit);
+    } else if (menu.action == FormCrudEvent.exit)
+      emits("on", FormCrudEvent.exit);
   }
 };
 
@@ -183,21 +208,60 @@ const getDocActions = () => {
         action: item,
         label: statusNames[item],
         type: "docstatus",
+        icon: getActionIcon(item),
+        command: emitMobileEvent,
       })) ?? [];
   }
   return docactionmenus;
 };
 const showMenuButton = (menu: FormMenu) => {
   if (menu.separator) return true;
-  if (isMobile() && ["create", "update"].includes(menu.action)) return false;
-  if (!canPerform(doc.getDocName(), menu.action)) return false;
+
+  //all document status cannot direct apply regardless new or draft
+  if (menu.type == "docstatus") return true;
+
+  // afterward, new document only acces create action
   if (doc.isNew() && menu.action == "create") return true;
-  if (!doc.isNew() && menu.action == "new") return true;
-  if (!doc.isNew() && menu.action == "update") return true;
-  if (!doc.isNew() && menu.action == "delete") return true;
+  if (doc.isNew() && menu.action != "create") return false;
+
+  //start from here, readonly document all action not allow
+  if (doc.isReadOnly()) return false;
 
-  if (menu.type == "api") return false;
+  //edit draft document, only create not allow
+  if (!doc.isNew() && menu.action == "create") return false;
+  if (!doc.isNew() && menu.action != "create") return true;
 
   return false;
 };
+
+const getActionIcon = (actionName: string) => {
+  let icon = "";
+  switch (actionName) {
+    case "create":
+      icon = "pi-save";
+      break;
+    case "update":
+      icon = "pi-save";
+      break;
+    case "delete":
+      icon = "pi-trash";
+      break;
+    case "confirm":
+      icon = "pi-check";
+      break;
+    case "void":
+      icon = "pi-ban";
+      break;
+    case "print":
+      icon = "pi-print";
+      break;
+    case "draft":
+      icon = "pi-pencil";
+      break;
+    default:
+      icon = "pi-question-circle";
+      break;
+  }
+  return `pi ${icon}`;
+};
 </script>