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

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

@@ -7,10 +7,11 @@
       <span
         class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
         @click="clear"
-      ></span>      
+      ></span>
     </div>
 
     <AutoComplete
+      v-if="!isMobile()"
       class="w-full"
       v-model="modelValue"
       ref="autocompleteinput"
@@ -53,6 +54,76 @@
       </template>
       <!-- </slot> -->
     </AutoComplete>
+    <div v-else>
+      <InputGroup class="w-full flex flex-row">
+        <InputText
+          :value="modelValue?.label"
+          @focus="showAutocompleteDialog(false)"
+          :placeholder="placeholdertxt"
+          class="rounded-r-none"
+        ></InputText>
+        <InputGroupAddon
+          @click="showAutocompleteDialog(true)"
+          v-ripple
+          class="bg bg-primary-600 dark:bg-primary-700 text-white rounded-r-lg p-3"
+        >
+          <i :class="`pi ${modelValue ? 'pi-link' : 'pi-angle-down'}`"></i>
+        </InputGroupAddon>
+      </InputGroup>
+
+      <OverlaySideBarCrud
+        v-model="mobileVisible"
+        closeEventName="autocompleteoverlay"
+      >
+        <template v-if="mobileListMode == 'list'">
+          <mobile-toolbar>
+            <template #start>
+              <ButtonText @click="mobileVisible = false">
+                <i class="pi pi-times"></i>
+              </ButtonText>
+            </template>
+            <template #center>
+              <TextTitle>{{ t(docname) }}</TextTitle>
+            </template>
+            <template #end>
+              <div></div>
+              <!-- <ButtonText @click="openViewer(false)">
+            <i class="pi pi-plus"></i>
+            </ButtonText>  -->
+            </template>
+          </mobile-toolbar>
+          <div class="h-16"></div>
+          <ListView
+            :list="list"
+            :withFilter="true"
+            :defaultFilterValue="defaultFilterValue"
+            idField="_id"
+            titleField="code"
+            subTitleField="label"
+            #default="{ item, index }"
+            @click="onClickInMobile"
+          >
+            <div class="flex flex-row justify-end">
+              <div class="flex-1">{{ item.label }}</div>
+              <div>{{ item.code }}</div>
+            </div>
+          </ListView>
+        </template>
+        <template v-else>
+          <component
+            :is="
+              defineAsyncComponent(
+                getDocument(setting.fieldsetting['x-foreignkey']).viewer,
+              )
+            "
+            @after="
+              async (eventType: FormCrudEvent, data: any, result: any) =>
+                await afterRenderMobileForm(eventType, data)
+            "
+          />
+        </template>
+      </OverlaySideBarCrud>
+    </div>
   </div>
   <div
     v-else
@@ -76,9 +147,19 @@
  */
 import { isNull } from "lodash";
 import jsonpath from "jsonpath";
-import { AutoCompleteDropdownClickEvent } from "primevue/autocomplete";
-import { autocompletetype, SchemaConfig, SchemaType } from "~/types";
-const autocompleteinput = ref<autocompletetype|undefined>();
+import {
+  AutoCompleteDropdownClickEvent,
+  AutoCompleteProps,
+} from "primevue/autocomplete";
+import {
+  autocompletetype,
+  ForeignKey,
+  FormCrudEvent,
+  SchemaConfig,
+  SchemaType,
+} from "~/types";
+const mobileVisible = ref(false);
+const autocompleteinput = ref<autocompletetype | undefined>();
 const { $event } = useNuxtApp();
 const list = ref<any[]>([]);
 const props = withDefaults(
@@ -87,9 +168,11 @@ const props = withDefaults(
     allowAddNew?: boolean;
     showNull?: boolean;
     readonly?: boolean;
-    placeholder?:string;
-    hidelabel?:boolean;
+    placeholder?: string;
+    hidelabel?: boolean;
     inputId: string;
+    componentProps?: AutoCompleteProps;
+    autocompleteFilter?: any;
     pt?: any;
   }>(),
   {
@@ -97,7 +180,8 @@ const props = withDefaults(
     showNull: true,
   },
 );
-
+const mobileListMode = ref("list");
+const defaultFilterValue = ref("");
 const path = "$" + props.setting.instancepath;
 const modifiedpath = path.replaceAll("/", ".");
 const queryresult = jsonpath.query(props.setting.defaultValue, modifiedpath)[0];
@@ -106,18 +190,22 @@ const schema: SchemaType = <SchemaType>remotedoc?.docClass.getSchema();
 const labelfield = schema["x-simpleapp-config"].documentTitle as string;
 const codefield = schema["x-simpleapp-config"].uniqueKey as string;
 const docname = props.setting.fieldsetting["x-foreignkey"];
-const placeholdertxt = computed(()=> props.placeholder ?? t(docname)   )
-const emptyautocomplete = computed((): autocompletetype => queryresult);
+const placeholdertxt = computed(() => props.placeholder ?? t(docname));
+const emptyautocomplete = computed(() => undefined); //((): autocompletetype => queryresult);
 const cancelShowList = ref(false);
-const autocompleteitem = ref<autocompletetype|undefined>(emptyautocomplete.value);
-const modelValue = defineModel<autocompletetype|undefined>({ required: true });
+const autocompleteitem = ref<autocompletetype | undefined>(
+  emptyautocomplete.value,
+);
+const modelValue = defineModel<autocompletetype | undefined>({
+  required: true,
+});
 if (modelValue.value && modelValue.value._id) {
   autocompleteitem.value = { ...modelValue.value };
 }
 //clear auto complete auto set value = empty
 const clear = () => {
-  autocompleteitem.value = undefined
-  modelValue.value = undefined
+  autocompleteitem.value = undefined;
+  modelValue.value = undefined;
 };
 
 //if record picked, click button show record info instead
@@ -140,13 +228,30 @@ const onBlurAutocomplete = () => {
   }
 };
 
+const showAutocompleteDialog = (isbutton: boolean) => {
+  mobileListMode.value='list'
+  if (modelValue.value && isbutton) {
+    openViewer(false);
+  } else {
+    //  if(!modelValue.value && !isbutton ){
+    mobileVisible.value = true;
+    defaultFilterValue.value =
+      modelValue.value && modelValue.value?._id ? modelValue.value.label : "";
+    getListFromAutocompleteApi({ query: "" });
+  }
+};
 //obtain remote data
 const getListFromAutocompleteApi = (event: any) => {
-  const keyword = event.query ?? "";
+  const keyword = event?.query ?? "";
+  const defaultfilter: any = schema.properties["active"]
+    ? { active: true }
+    : {};
+  const morefilter = props.autocompleteFilter ?? defaultfilter;
   const targetDocument = props.setting.fieldsetting["x-foreignkey"];
   getDocumentApi(targetDocument)
-    .autoComplete(keyword)
+    .autoComplete(keyword, morefilter)
     .then((res: any) => {
+      console.log("Run autocomplete?");
       list.value = res.data;
 
       if (props.allowAddNew) {
@@ -161,16 +266,20 @@ const getListFromAutocompleteApi = (event: any) => {
 //on select
 const pickAutoComplete = (event: any) => {
   if (event.value._id === "") {
-    modelValue.value = emptyautocomplete.value;
-    autocompleteitem.value = emptyautocomplete.value;
+    modelValue.value = undefined; //emptyautocomplete.value;
+    autocompleteitem.value = undefined; //emptyautocomplete.value;
   } else if (event.value._id === "new") {
-    modelValue.value = emptyautocomplete.value;
-    autocompleteitem.value = emptyautocomplete.value;
-    openViewer(false);
+    modelValue.value = undefined; // emptyautocomplete.value;
+    autocompleteitem.value = undefined; //emptyautocomplete.value;
+    if (isMobile()) {
+      mobileListMode.value = "form";
+      return;
+    } else openViewer(false);
   } else if (typeof event.value.query == "undefined") {
     modelValue.value = event.value;
     autocompleteitem.value = event.value;
   }
+  mobileVisible.value = false;
 };
 
 const emits = defineEmits([
@@ -191,7 +300,7 @@ const setFocus = (ev: any) => {
 
 //pop up records
 const openViewer = (readonly: boolean) => {
-  if (remotedoc) {
+  if (remotedoc) {    
     $event("ViewRecord", {
       _id: modelValue.value?._id as string,
       eventId: randomUUID(),
@@ -203,24 +312,61 @@ const openViewer = (readonly: boolean) => {
       documentName: docname,
 
       //after create, auto copy value into auto complete
-      after: (eventType: string, data: any, result: any) => {
-        autocompleteitem.value = {
-          _id: data._id,
-          code: data[codefield],
-          label: data[labelfield],
-        };
-        if (schema["x-simpleapp-config"].additionalAutoCompleteFields) {
-          const addfields =
-            schema["x-simpleapp-config"].additionalAutoCompleteFields;
-          for (let i = 0; i < addfields.length; i++) {
-            const fieldname = addfields[i] as string;
-            autocompleteitem.value[fieldname] = data[fieldname];
+      after: async (eventType: FormCrudEvent, data: any) => {
+        if (
+          eventType == FormCrudEvent.create ||
+          eventType == FormCrudEvent.update
+        ) {
+          autocompleteitem.value = {
+            _id: data._id,
+            code: data[codefield],
+            label: data[labelfield],
+          };
+          if (schema["x-simpleapp-config"].additionalAutoCompleteFields) {
+            const addfields =
+              schema["x-simpleapp-config"].additionalAutoCompleteFields;
+            for (let i = 0; i < addfields.length; i++) {
+              const fieldname = addfields[i] as string;
+              autocompleteitem.value[fieldname] = data[fieldname];
+            }
           }
+          modelValue.value = { ...autocompleteitem.value };
+          emitChanges();
         }
-        modelValue.value = { ...autocompleteitem.value };
-        emitChanges();
       },
     });
   }
 };
+
+const onClickInMobile = (id: string, item: ForeignKey) => {
+  pickAutoComplete({ value: item });
+};
+
+const afterRenderMobileForm = async (
+  eventType: FormCrudEvent,
+  data: any,
+  result: any,
+) => {
+  console.log("afterRenderMobileForm", eventType);
+  if (eventType == FormCrudEvent.create || eventType == FormCrudEvent.update) {
+    autocompleteitem.value = {
+      _id: data._id,
+      code: data[codefield],
+      label: data[labelfield],
+    };
+    if (schema["x-simpleapp-config"].additionalAutoCompleteFields) {
+      const addfields =
+        schema["x-simpleapp-config"].additionalAutoCompleteFields;
+      for (let i = 0; i < addfields.length; i++) {
+        const fieldname = addfields[i] as string;
+        autocompleteitem.value[fieldname] = data[fieldname];
+      }
+    }
+    modelValue.value = { ...autocompleteitem.value };
+    emitChanges();
+    mobileVisible.value = false;
+  } else if (eventType == FormCrudEvent.exit) {
+    mobileVisible.value = false;
+  }
+};
 </script>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-row">
+      <div class="p-2 flex-1">
+        <TextTitle v-if="title">{{ title }}</TextTitle>
+      </div>
+      <div class="pr-2">
+        <ButtonDefault v-if="!readOnly" @click="addRow"
+          ><i class="pi pi-plus"></i
+        ></ButtonDefault>
+      </div>
+    </div>
+    <ListView
+      class="p-2 dark:bg-slate-900 bg-slate-200 rounded-lg"
+      :list="list"
+      #default="{ index, item }"
+      @click="showRow"
+    >
+      <slot name="listbody" :item="item" :index="index">
+        <div class="flex flex-row">item {{ item._id }}</div>
+      </slot>
+    </ListView>
+
+    <Dialog v-model:visible="showDialog" modal :header="t('editDetails')">
+      <div class="flex flex-col p-2 gap-4">
+        <slot name="popupbody" :index="rowIndex" :item="list[rowIndex]">
+          row {{ rowIndex }} define SimpleAppInputs here
+        </slot>
+      </div>
+      <template #footer>
+        <div v-if="!readOnly" class="flex flex-row gap-2 w-full">
+          <ButtonDanger @click="deleteItem">{{ t("delete") }}</ButtonDanger>
+          <ButtonPrimary @click="updateItem">{{ t("ok") }}</ButtonPrimary>
+        </div>
+      </template>
+    </Dialog>
+  </div>
+</template>
+<script setup lang="ts" generic="T extends { [key: string]: any }">
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2024-03-01
+ * Author: Ks Tan
+ */
+const showDialog = ref(false);
+const rowIndex = ref(0);
+const emits = defineEmits(["addrow", "deleteitem", "itemupdated"]);
+const props = defineProps<{ list: T[]; title?: string; readOnly?: boolean }>();
+
+const showRow = (index: number, item: T) => {
+  showDialog.value = true;
+  rowIndex.value = index;
+};
+const deleteItem = () => {
+  showDialog.value = false;
+  props.list.splice(rowIndex.value, 1);
+  emits("deleteitem");
+};
+const updateItem = () => {
+  showDialog.value = false;
+  emits("itemupdated", rowIndex.value);
+};
+const addRow = (event:MouseEvent) =>{
+
+  emits('addrow', MouseEvent)
+  const lineno =  props.list.length -1
+  showRow(lineno, props.list[lineno])
+}
+</script>

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

@@ -1,37 +1,43 @@
-
 <template>
-    
-        <div class="flex flex-row w-full">
-            <InputText 
-                @focus="setFocus"              
-                :readonly="readonly"
-                v-model="modelValue"    
-                :placeholder="placeholder"
-                :pt="pt"
-                :class=" !pt ? 'flex-1 w-full rounded-lg  '+ ( props.readonly?'':'rounded-tr-none rounded-br-none') : ''"
-            />
-            <span class="" v-if="!readonly">
-                <button  type="button" @click="toggle"  tabindex="-1"
-                    class="'btn btn-primary p-3 dark:border-blue-900/40 rounded-lg rounded-tl-none rounded-bl-none">
-                    <i class="pi pi-angle-down"></i>
-                </button>
-                <OverlayPanel ref="op" class="p-4">           
-                    <div class="m-4">
-                        <ul>                      
-                            <li v-for="docno in docFormatlist" class="hover-list-primary p-2" >
-                                <a class="" @click="chooseFormat(docno)">
-                                    <span class="pi pi-hashtag mr-2"></span>
-                                    <span class="">{{docno.docNoFormatName}}</span>
-                                    <span class=" text text-green-600">{{docno.sample}}</span>
-                                </a>
-                            </li>                    
-                        </ul>
-                    </div>         
-                </OverlayPanel>
-            </span>
-            <!-- {{ Object.getOwnPropertyNames(setting) }} -->
+  <div class="flex flex-row w-full">
+    <InputText
+      @focus="setFocus"
+      :readonly="readonly"
+      v-model="modelValue"
+      :placeholder="placeholder"
+      :pt="pt"
+      :class="
+        !pt
+          ? 'flex-1 w-full rounded-lg  ' +
+            (props.readonly ? '' : 'rounded-tr-none rounded-br-none')
+          : ''
+      "
+    />
+    <span class="" v-if="!readonly">
+      <button v-ripple
+        type="button"
+        @click="toggle"
+        tabindex="-1"
+        class="'btn btn-primary p-3 dark:border-blue-900/40 rounded-lg rounded-tl-none rounded-bl-none"
+      >
+        <i class="pi pi-angle-down"></i>
+      </button>
+      <OverlayPanel ref="op" class="p-4">
+        <div class="m-4">
+          <ul>
+            <li v-for="docno in docFormatlist" class="hover-list-primary p-2">
+              <a class="" @click="chooseFormat(docno)">
+                <span class="pi pi-hashtag mr-2"></span>
+                <span class="">{{ docno.docNoFormatName }}</span>
+                <span class="text text-green-600">{{ docno.sample }}</span>
+              </a>
+            </li>
+          </ul>
         </div>
-    
+      </OverlayPanel>
+    </span>
+    <!-- {{ Object.getOwnPropertyNames(setting) }} -->
+  </div>
 </template>
 <script lang="ts" setup>
 /**
@@ -40,52 +46,50 @@
  * last change 2023-10-28
  * Author: Ks Tan
  */
-import {ForeignKey} from '~/types'
-import OverlayPanel from 'primevue/overlaypanel';
-import InputText from 'primevue/inputtext';
-import {DocNoFormat} from "~/types"
+import { ForeignKey } from "~/types";
+import OverlayPanel from "primevue/overlaypanel";
+import InputText from "primevue/inputtext";
+import { DocNoFormat } from "~/types";
 const props = defineProps<{
-    setting:any    
-    readonly?:boolean
-    pt?:any
-}>()
+  setting: any;
+  readonly?: boolean;
+  pt?: any;
+}>();
 const op = ref();
-const placeholder = ref('')
-const docFormatlist = ref()
-const modelValue = defineModel<string>({required:true})
-const docNoFormat = props.setting.document.getReactiveData().value.docNoFormat
-const emits = defineEmits(['update:docNoFormat'])
-
-const documenttype = props.setting.document.doctype
-
-const toggle = async (event:any) => {
-    op.value.toggle(event);            
-}
+const placeholder = ref("");
+const docFormatlist = ref();
+const modelValue = defineModel<string>({ required: true });
+const docNoFormat = props.setting.document.getReactiveData().value.docNoFormat;
+const emits = defineEmits(["update:docNoFormat"]);
 
-const chooseFormat =  (item:any) =>{
-    placeholder.value = item.sample    
-    const f = item
-    docNoFormat.value = { _id : f._id, label : f.docNoFormatName}
-    op.value.toggle();
-    emits('update:docNoFormat',item)
-}
+const documenttype = props.setting.document.doctype;
 
-const loadDocFormats = async () =>{
-    docFormatlist.value= await getDocFormats(documenttype)    
-    if(docFormatlist.value.length>0){
-        const f = docFormatlist.value[0]
-        docNoFormat.value = { _id : f._id, label : f.docNoFormatName}
-        placeholder.value = docFormatlist.value[0].sample        
-    }
-}
+const toggle = async (event: any) => {
+  op.value.toggle(event);
+};
 
+const chooseFormat = (item: any) => {
+  placeholder.value = item.sample;
+  const f = item;
+  docNoFormat.value = { _id: f._id, label: f.docNoFormatName };
+  op.value.toggle();
+  emits("update:docNoFormat", item);
+};
 
-const setFocus = (ev:any) => {
-    if(!isMobile()) ev.target.select()
-}
+const loadDocFormats = async () => {
+  docFormatlist.value = await getDocFormats(documenttype);
+  if (docFormatlist.value.length > 0) {
+    const f = docFormatlist.value[0];
+    docNoFormat.value = { _id: f._id, label: f.docNoFormatName };
+    placeholder.value = docFormatlist.value[0].sample;
+  }
+};
 
-onMounted(()=>{
-    loadDocFormats()
+const setFocus = (ev: any) => {
+  if (!isMobile()) ev.target.select();
+};
 
-})
-</script>
+onMounted(() => {
+  loadDocFormats();
+});
+</script>