@simitgroup/simpleapp-generator 1.2.7 → 1.3.0-alpha

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

@@ -1,123 +1,134 @@
 <template>
-    <div v-if="schema" class="flex flex-col">          
-        <div v-if="hidelabel"></div>
-        <label v-else-if="error" class="simpleapp-input-label text-danger-600 overflow-hidden" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
-        <label v-else  :for="uuid" class="simpleapp-input-label whitespace-nowrap	text-gray-500 truncate">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
-        
-        <!-- <div :uuid="uuid" >{{ modelValue }}</div> -->
-        <!-- <div v-if="typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' &&  readonly ==true " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div> -->
-        <!-- <div v-else-if="readonly==true" :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div> -->
-        <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->
-        <slot name="default" :uuid="uuid" :error="error"></slot>
+  <div v-if="schema" :class="getLayoutClass()">
+    <label v-if="hidelabel"></label>
+    <label v-else :for="uuid" :class="getLabelClass()"
+      >{{ fieldlabel }}
+      <span
+        v-if="props.setting.isrequired && fieldlabel"
+        class="text-danger-600 dark:text-danger-400"
+        >*</span
+      ></label
+    >
+    <!-- <label v-else-if="error" class="simpleapp-input-label text-danger-600 overflow-hidden" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
+        <label v-else  :for="uuid" class="simpleapp-input-label whitespace-nowrap	text-gray-500 truncate">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>         -->
 
-        <small v-if="error" class="text-danger-600">{{ error }}</small>
-        <small v-else class="input-desc">{{ fielddesc }}</small>
-    </div>
-    <div v-else :class="defaultcssclass">
-        <label class="etext-danger-600">wrong path in getField()</label>
-        <div class="text-danger-600">{{ props.setting.path }}</div>
-    </div>
+    <!-- <div :uuid="uuid" >{{ modelValue }}</div> -->
+    <!-- <div v-if="typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' &&  readonly ==true " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div> -->
+    <!-- <div v-else-if="readonly==true" :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div> -->
+    <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->    
+    <slot name="default" :uuid="uuid" :error="error"></slot>    
+    
+
+    <small v-if="error" class="text-danger-600 dark:text-danger-400">{{ error }}</small>
+    <small v-else class="input-desc">{{ fielddesc }}</small>
+  </div>
+  <div v-else :class="defaultcssclass">
+    <label class="etext-danger-600 dark:text-danger-400">wrong path in getField()</label>
+    <div class="text-danger-600 dark:text-danger-400">{{ props.setting.path }}</div>
+  </div>
 </template>
 <script setup lang="ts">
-import SimpleAppValue from './SimpleAppValue.vue'
+import SimpleAppValue from "./SimpleAppValue.vue";
 // import {camelCaseToWords} from './helper'
 // import {computed,setBlockTracking,watch} from 'vue'
 
-import {ref} from 'vue'
-
+import { ref } from "vue";
 
-const uuid =  randomUUID();
+const uuid = randomUUID();
 // const fieldlabel = ref('')
 // const fielddesc = ref('')
-const defaultcssclass='simpleapp-input-container'
-const fieldcontainerclass = ref(defaultcssclass)
-let instancepath = ref('')
+const defaultcssclass = "simpleapp-input-container";
+const fieldcontainerclass = ref(defaultcssclass);
+let instancepath = ref("");
 const props = defineProps<{
-    label?: string,    
-    description?: string,
-    instancepath?:string,
-    hidelabel?:boolean,
-    readonly?:boolean
-    // error?:string,
-    setting:any
-}>()
+  label?: string;
+  inputType: string;
+  description?: string;
+  instancepath?: string;
+  hidelabel?: boolean;
+  readonly?: boolean;
+  // error?:string,
+  setting: any;
+}>();
 
-const readonly = computed(()=>{
-   return props.readonly ??  props.setting.readonly ?? false
-})
-// if(props.readonly !== undefined){
-//     readonly.value=props.readonly
-// }else if(props.setting.readonly !==undefined){
-//     readonly.value=props.readonly
-// }
-// console.log("props.setting.format",props.setting.format)
-const modelValue = defineModel()
-const readonlyclass="simpleapp-value-readonly"
+const readonly = computed(() => {
+  return props.readonly ?? props.setting.readonly ?? false;
+});
+
+const modelValue = defineModel<any>(); //this model value support all kind of data, string, number, autocomplete and etc
+const readonlyclass = "simpleapp-value-readonly";
 // console.log('props.setting',modelValue.value,props.setting)
-let schema:any 
+let schema: any;
 
-const fielddesc = computed(()=>{
-    return props.description ?? ''
-})
+const getLayoutClass = () =>
+  `simpleapp-input-container flex  ${
+    props.inputType == "checkbox"
+      ? " flex-row gap-4 mt-1 ml-1 "
+      : "flex flex-col "
+  }`;
 
-if(props.setting.fieldsetting && props.setting.fieldsetting.type){
-    
-    schema = props.setting.fieldsetting
-    // console.log("schema setting",props.setting,schema)
-    if(props?.instancepath) instancepath.value =props.instancepath
-    else if(props.setting?.instancepath) instancepath.value = props.setting.instancepath
-    else instancepath.value='/unknown'
+const getLabelClass = () => {
+  let class1 =
+    "simpleapp-input-label text-left text-gray-500  dark:text-gray-200 ";
 
-    const fieldnamearr = instancepath.value.split('/')
-    const fieldname = camelCaseToWords(fieldnamearr[fieldnamearr.length-1])
+  if (!isMobile()) class1 += "whitespace-nowrap truncate";
+  else if (props.inputType == "checkbox") class1 += " ml-1 dark:text-gray-200";
+  else if (props.inputType != "autocomplete" && modelValue.value)
+    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+  else if (props.inputType == "autocomplete" && modelValue.value?.label)
+    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+  else if (modelValue.value !== undefined)
+    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+  else class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100 hidden";
+  return class1;
+};
 
-   
-    
-    
-    // if(props.description)fielddesc.value = props.description 
-    // else if (schema?.description != 'undefined') fielddesc.value=schema.description
-    // else fielddesc.value=''
+const fielddesc = computed(() => {
+  return props.description ?? "";
+});
+
+if (props.setting.fieldsetting && props.setting.fieldsetting.type) {
+  schema = props.setting.fieldsetting;
+  // console.log("schema setting",props.setting,schema)
+  if (props?.instancepath) instancepath.value = props.instancepath;
+  else if (props.setting?.instancepath)
+    instancepath.value = props.setting.instancepath;
+  else instancepath.value = "/unknown";
 
-   
+  const fieldnamearr = instancepath.value.split("/");
+  const fieldname = camelCaseToWords(fieldnamearr[fieldnamearr.length - 1]);
 
+  // if(props.description)fielddesc.value = props.description
+  // else if (schema?.description != 'undefined') fielddesc.value=schema.description
+  // else fielddesc.value=''
 }
-const fieldlabel = computed(()=>{
-       
-       if(props.label){
-           return t(props.label)
-       }
-       else if (schema.title ) {
-           return  t(schema.title)
-       }
-       else{
-           return  t(props.setting.key)
-       }
-   })
-const errormsg = computed(()=>{
-    
-    props.setting.errors[instancepath.value]
-})
-const error = ref("")
-watch(props.setting.errors,(newvalue,oldvalue)=>{
-    //it is array
-    error.value=''
-    if(newvalue[instancepath.value]){
-        const errlist:any[] = newvalue[instancepath.value]
-        for(let i=0;i<errlist.length;i++){
-            error.value += errlist[i].message +','
-        }
-        fieldcontainerclass.value=defaultcssclass + ' input-error'
-    }else{
-        error.value=''
-        fieldcontainerclass.value=defaultcssclass
+const fieldlabel = computed(() => {
+  if (props.label) {
+    return t(props.label);
+  } else if (schema.title) {
+    return t(schema.title);
+  } else {
+    return t(props.setting.key);
+  }
+});
+const errormsg = computed(() => {
+  props.setting.errors[instancepath.value];
+});
+const error = ref("");
+watch(props.setting.errors, (newvalue, oldvalue) => {
+  //it is array
+  error.value = "";
+  if (newvalue[instancepath.value]) {
+    const errlist: any[] = newvalue[instancepath.value];
+    for (let i = 0; i < errlist.length; i++) {
+      error.value += errlist[i].message + ",";
     }
-    // console.log("validation result",props.setting.instancepath,)
-    // error.value = newvalue[props.setting.instancepath].message
-})
-
+    fieldcontainerclass.value = defaultcssclass + " input-error";
+  } else {
+    error.value = "";
+    fieldcontainerclass.value = defaultcssclass;
+  }
+  // console.log("validation result",props.setting.instancepath,)
+  // error.value = newvalue[props.setting.instancepath].message
+});
 </script>
-<style scoped>
-.simpleapp-input-container{
-    @apply flex flex-col
-}
-</style>

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

@@ -1,107 +1,199 @@
 <template>
-    <!-- dont modify this component -->
-    <div class="simpleapp-tool-bar flex flex-row text-left gap-4">           
-        <div v-for="(menu,index) in menus" :key="index">
-            <div>
-                <ButtonDefault v-if="showMenuButton(menu)" @click="emitEvent(menu,$event)">{{ menu.label  }}</ButtonDefault>
-            </div>
-            
-        </div>  
-        <div v-for="(menu,index) in getDocActions()" :key="index">
-            <div>
-                <ButtonDefault @click="emitEvent(menu,$event)">{{ menu.label  }}</ButtonDefault>
-            </div>
-            
-        </div>     
-        <ConfirmPopup></ConfirmPopup>    
-    </div>
+  <div v-if="isMobile()" class="w-full">
+    <MobileToolbar>
+      <template #start>
+        <ButtonText class="text-xl" @click="callClose"
+          ><i class="pi pi-angle-left"></i
+        ></ButtonText>
+      </template>
+      <template #center>
+        <TextTitle>{{ title }}</TextTitle>
+      </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>
+      </template>
+    </MobileToolbar>
+    <ConfirmDialog></ConfirmDialog>
+  </div>
+  <div v-else class="simpleapp-tool-bar">
+    <Toolbar>
+      <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>
+          </div>
+        </div>
+      </template>
+      <template #center>
+        <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>
+          </div>
+        </div>
+      </template>
+      <template #end> </template>
+    </Toolbar>
+
+    <ConfirmPopup></ConfirmPopup>
+  </div>
 </template>
 <script setup lang="ts">
-
-import { SimpleAppClient } from '~/simpleapp/generate/clients/SimpleAppClient';
+import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
 import { useConfirm } from "primevue/useconfirm";
+import { FormActions, FormCrudEvent, FormMenu } from "~/types";
+import { MenuItem } from "primevue/menuitem";
 const confirm = useConfirm();
-import {FormActions,FormMenu} from '~/types'
-
-const ismodify = ref(false)
+const emits = defineEmits(["on", "close"]);
 const props = defineProps<{
-    document: SimpleAppClient<any,any>,    
-    disableaction? : string[]
-}>()
+  document: SimpleAppClient<any, any>;
+  disableaction?: string[];
+}>();
+const createData = async () => await doc.create();
+const updateData = async () => await doc.update();
+const deleteData = async () => await doc.delete();
 
-const emits = defineEmits(['on'])
-const doc = props.document
-const data = doc.getReactiveData()
+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>(
+  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) =>
+    showMenuButton(item),
+  ),
+);
 
-const menus = ref<FormMenu[]>([])
+const isShow = computed(
+  () => menus.value.filter((item) => item.action != undefined).length > 0,
+);
+const toggleMenu = (event: MouseEvent) => {
+  menu.value.toggle(event);
+};
 
+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 actionname: string = itemevent.item.action;
+  const event = itemevent.originalEvent;
+  emitEvent({ action: actionname, type: "crud", label: "" }, event);
+};
 
 const getActions = () => {
-    const actions = doc.getActions()
-    
-    // Object.keys(actions).forEach((key)=>{ //crud, api, docstatus
-        actions['crud'].forEach((item)=>{ 
-            if(props.disableaction && props.disableaction.includes(item)){/*skip this item*/}
-            else{                
-                menus.value.push({
-                    action: item,
-                    label: t(item),                    
-                    type: 'crud'               
-                })
-            }
-        })
-    // })        
-    return actions
-}
+  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)) {
+      /*skip this item*/
+    } else {
+      crudmenus.push({
+        action: item,
+        label: t(item),
+        type: "crud",
+        command: emitMobileEvent,
+      });
+    }
+  });
+  // })
+  return crudmenus;
+};
 
-getActions()
+const emitEvent = async (menu: FormMenu, clickEvent: MouseEvent) => {
+  if (menu.action == "delete") {
+    confirm.require({
+      target: clickEvent.target as HTMLElement,
+      header: t("deleteRecord"),
+      message: `${t("deleteThisRecord?")}`,
 
-const emitEvent = (menu:FormMenu, clickEvent:any)=>{  
-    if(menu.action=='delete'){
-        confirm.require({
-            target: clickEvent.currentTarget as HTMLElement,
-            message: `${t("delete")}?`,
-            icon: "pi pi-exclamation-triangle",
-            acceptClass: "p-button-danger",
-            accept: () => emits('on',menu.action)
-        });
-    }else{
-        emits('on',menu.action)    
-    }   
-    
-}
+      // icon: "pi pi-exclamation-triangle gap-4",
+      acceptClass: "p-button-danger",
+      accept: async () => {
+        if (await deleteData()) emits("on", FormCrudEvent.delete);
+      },
+    });
+  } else {
+    if (menu.action == "create") {
+      if (await createData()) emits("on", FormCrudEvent.create);
+    }
+    else if (menu.action == "update") {
+      if (await updateData()) emits("on", FormCrudEvent.update);
+    }
+    else if (menu.type == "setDocStatus")
+      emits("on", FormCrudEvent.setDocStatus, menu.action);
+    else if (menu.action == FormCrudEvent.exit)
+      emits("on", FormCrudEvent.exit);
+  } 
+};
 
+const getDocActions = () => {
+  const docstatus: string = data.value.documentStatus;
+  const allstatus = doc.getSchema()["x-simpleapp-config"].allStatus;
+  let docactionmenus: FormMenu[] = [];
+  type stringlist = { [key: string]: string };
+  const statusNames: stringlist = {};
+  allstatus?.forEach((item) => {
+    statusNames[item.status] = t(item.statusName);
+  });
+  if (allstatus) {
+    const stateconfig = allstatus.find((item) => item.status === docstatus);
+    docactionmenus =
+      stateconfig?.actions.map((item) => ({
+        action: item,
+        label: statusNames[item],
+        type: "docstatus",
+      })) ?? [];
+  }
+  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;
+  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;
 
-const getDocActions = () =>{
-        const docstatus:string = data.value.documentStatus
-        const allstatus = doc.getSchema()['x-simpleapp-config'].allStatus
-        let docactionmenus:FormMenu[] = []
-        type stringlist = {[key:string]:string}
-        const statusNames:stringlist = {}
-        allstatus?.forEach(item=>{
-            statusNames[item.status]=t(item.statusName)
-        })
-        if(allstatus){
-            const stateconfig = allstatus.find((item)=>item.status===docstatus)
-            docactionmenus = stateconfig?.actions.map(item=>({
-                    action: item,
-                    label: statusNames[item],                    
-                    type: 'docstatus'  
-            })) ?? []                   
-        }
-        return docactionmenus
-    
-}
-const showMenuButton = (menu:FormMenu)=>{
-    
-    if(!canPerform(doc.getDocName(),menu.action)) return false
-    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(menu.type == 'api' ) return false
-    return false
-}
+  if (menu.type == "api") return false;
 
-</script>
+  return false;
+};
+</script>