@simitgroup/simpleapp-generator 1.6.4-c-alpha → 1.6.4-d-alpha

package/templates/nuxt/components/renderer/RendererDocHistories.vue.eta

@@ -1,56 +1,116 @@
 <template>
-  <div class="flex flex-row text-xs cursor-pointer" 
-    v-if="data?.updated && data?.updated !=''" @click="viewHistories">    
-    <ImageAvatar v-if="data?.updatedBy" :id="data.updatedBy" :size="12"></ImageAvatar>
-    <div class="flex flex-col p-2">
-      <TextDocStatus v-if="data?.docStatus" :docStatus="data?.docStatus" />
-      <TextSubsubtitle class=" text-gray-400 italic">{{ t('updated') }}:</TextSubsubtitle>
-      <RendererDateTime :value="data?.updated" class="text-gray-400 italic"/>
+  <div
+    class="flex flex-row text-xs cursor-pointer justify-end "
+    v-if="data?.updated && data?.updated != ''"
+    @click="viewHistories"
+  >
+    <ImageAvatar  
+      v-if="data?.updatedBy"
+      :id="data.updatedBy"
+      :size="8"
+    ></ImageAvatar>
+    <div class="flex flex-col flex-1">
+      <TextDocStatus v-if="data?.documentStatus" :docStatus="data?.documentStatus" />
+      <!-- <TextSubsubtitle class="text-gray-400 italic"
+        >{{ t("updated") }}:</TextSubsubtitle
+      > -->
+      <RendererDateAge :value="data?.updated" class="text-gray-400 italic" />
     </div>
-    
 
-    <Dialog v-model:visible="visibleHistories" modal
-      :header="t('histories')" :pt="{root:{class:'w-1/4'}}">
+    <Dialog
+      v-model:visible="visibleHistories"
+      modal
+      :header="t(documentName) + ' ' + t('histories')"
+      :pt="{ root: { class: 'w-1/3' } }"
+    >
       <Timeline :value="events" class="w-full md:w-20rem">
-        <template #opposite="slotProps">
-          <RendererDateTime class="italic text-gray-400 text-xs" :value="slotProps.item.date"/>
+        <template #opposite="{ item }">
+          <div class="flex flex-row">
+            <ImageAvatar :email="item.email" :id="item.uid" :size="12" />
+            <div class="flex flex-col">
+              <span>{{ item.fullName }}</span>
+              <RendererDateAge
+                class="italic text-gray-400 text-xs whitespace-nowrap"
+                :value="item.eventDate"
+              />
+            </div>
+          </div>
         </template>
-        <template #content="slotProps">
+        <template #content="{ item }">
           <div>
-            <div>{{ slotProps.item.status }}</div>
-          </div>  
-          
+            <div>{{ item.status }}</div>
+          </div>
         </template>
-    </Timeline>
+      </Timeline>
     </Dialog>
   </div>
-  
 </template>
 <script lang="ts" setup>
-import TextSubsubtitle from '../text/TextSubsubtitle.vue';
-import RendererDateTime from './RendererDateTime.vue';
-  const visibleHistories = ref(false)
-  const props=defineProps<{data:any}>()
-  const events = computed(()=>{
-    const list =  [{ status: t('created'), date: props.data.created },]
-
-    if(props.data.updated != props.data.created){
-      list.push({ status: t('paidFeature'), date:''})
-      list.push( { status:  t('lastUpdate'), date: props.data.updated })
-    }     
-    return list   
-  })
-  const severity = computed(()=>{
-    const stat = props.data.docStatus 
-    if(props.data.docStatus=='confirm') return "success"
-    else if(props.data.docStatus=='void') return "danger"
-    else if(props.data.docStatus=='draft') return "secondary"
-    else return "warning"
-  })
-
+import TextSubsubtitle from "../text/TextSubsubtitle.vue";
+import RendererDateTime from "./RendererDateTime.vue";
+import { Documentevent, User } from "~/simpleapp/generate/openapi";
+const eventDoc = useNuxtApp().$DocumenteventDoc();
+const visibleHistories = ref(false);
+const props = defineProps<{ data: any; documentName: string }>();
+type EventHistory = {
+  status: string;
+  eventDate: string;
+  uid?: string;
+  fullName?: string;
+  email?: string;
+};
+const events = ref<EventHistory[]>([]);
+const getEvents = async () => {
+  const simplelog = [
+    {
+      status: t("created"),
+      eventDate: props.data.created,
+      uid: props.data.createdBy,
+    },
+  ];
+  if (props.data.updated != props.data.created) {
+    simplelog.push({
+      status: t("lastUpdate"),
+      eventDate: props.data.updated,
+      uid: props.data.updatedBy,
+    });
+  }
 
-  const viewHistories = () =>{
-    visibleHistories.value=true
-    console.log("histories")
+  // events.value=[];
+  // console.log("Renderer getEvents histories");
+  const list: (Documentevent & { _user: User })[] = await eventDoc.search({
+    filter: {
+      documentName: props.documentName,
+      documentId: props.data._id,
+    },
+    fields: ["created", "createdBy", "eventType"],
+    sorts: [["created", "asc"]],
+    lookup: { "user.uid": "createdBy" },
+  });
+  if (list.length > 0) {
+    events.value = list.map((item) => ({
+      _id: <string>item._id,
+      status: t(<string>item.eventType),
+      eventDate: <string>item.created,
+      uid: <string>item.createdBy,
+      fullName: <string>item._user.fullName,
+      email: <string>item._user.email,
+    }));
+  } else {
+    events.value = simplelog;
   }
+};
+const severity = computed(() => {
+  const stat = props.data.docStatus;
+  if (props.data.docStatus == "confirm") return "success";
+  else if (props.data.docStatus == "void") return "danger";
+  else if (props.data.docStatus == "draft") return "secondary";
+  else return "warning";
+});
+
+const viewHistories = async () => {
+  visibleHistories.value = true;
+  await getEvents();
+  // console.log("histories");
+};
 </script>

package/templates/nuxt/components/search/SearchBox.vue._eta

@@ -0,0 +1,371 @@
+<template>
+  <div
+    v-if="getCurrentXorg() && canPerform('student', 'search')"
+    class="w-full border p-2 rounded-lg flex flex-row gap-1 cursor-pointer justify-between"
+    @click="showDialog"
+  >
+    <i class="pi pi-search p-1" />
+
+    <span>{{ t("search") }}</span>
+    <span
+      v-if="isMacOS"
+      class="bg-green-800 text-white pl-2 pr-2 text-sm rounded border"
+    >
+      ⌘+k
+    </span>
+    <span
+      v-else
+      class="bg-green-800 text-white pl-2 pr-2 text-sm rounded border"
+    >
+      cmd+k
+    </span>
+
+    <Dialog
+      v-model:visible="visiblesearch"
+      :closable="false"
+      dismissable-mask
+      position="top"
+      modal
+      :pt="{ root: { class: 'mt-0 w-1/2 max-h-screen' } }"
+    >
+      <template #header>
+        <div class="flex flex-col w-full">
+          <SearchInput
+            ref="searchbox"
+            id="searchbox"
+            v-model="searchVal"
+            :searchIcon="false"
+            :shortcutIcon="true"
+            :clearIcon="false"
+            :hideShortcutIconOnBlur="false"
+            :selectOnFocus="true"
+            :placeholder="t('searchKeyword')"
+            @update:modelValue="onchange"
+            @keydown="onKeyDown"
+          ></SearchInput>
+        </div>
+      </template>
+      <template #default :tabIndex="tabIndex">
+        <div v-if="searchVal == ''"><SearchBoxBefore /></div>
+        <div v-else-if="searchVal != keyword"><ProgressSpinner /></div>
+        <TabView v-else-if="list.length > 0 || menulist.length > 0" lazy>
+          <TabPanel :header="t('all')">
+            <Listbox
+              ref="alllist"
+              @update:model-value="selectItem"
+              v-model="selecteddata"
+              :options="groupedData"
+              optionGroupLabel="label"
+              optionGroupChildren="items"
+            >
+              <template #optiongroup="{ option, index }">
+                <div class="flex align-items-center font-semibold">
+                  <div>{{ option.label }}</div>
+                </div>
+              </template>
+              <template #option="{ option, index }">
+                <div v-if="option.documentName == 'menu'">
+                  <SearchBoxMenu :item="option.data" />
+                </div>
+                <div v-else>
+                  <SearchBoxStudent
+                    v-if="option.documentName == 'student'"
+                    :item="option.data"
+                  />
+                  <SearchBoxTeacher
+                    v-else-if="option.documentName == 'teacher'"
+                    :item="option.data"
+                  />
+                  <SearchBoxAccTrans
+                    v-else-if="option.documentName == 'accounttransaction'"
+                    :item="option.data"
+                  />
+                  <SearchBoxProduct
+                    v-else-if="option.documentName == 'product'"
+                    :item="option.data"
+                  />
+                  <TextSubsubtitle class="italic"
+                    >{{ option.documentName }}
+                    {{ option.data.score }}</TextSubsubtitle
+                  >
+                </div>
+              </template>
+            </Listbox>
+
+            <!-- <ListView  ref="searchlistel" :list="list" idField="_id" @click="selectItem" #default="{item,index}">                                
+                <SearchBoxMenu  v-if="item.documentName=='menu'" :item="item.data"/>
+                <SearchBoxStudent v-else-if="item.documentName=='student'" :item="item.data"/>
+                <SearchBoxTeacher v-else-if="item.documentName=='teacher'" :item="item.data"/>                
+                <SearchBoxAccTrans v-else-if="item.documentName=='accounttransaction'" :item="item.data"/>
+              </ListView> -->
+          </TabPanel>
+          <TabPanel :header="t('students')" v-if="students.length > 0">
+            <ListView
+              ref="searchstudentlistel"
+              :list="students"
+              idField="_id"
+              #default="{ item, index }"
+            >
+              <SearchBoxStudent :item="item.data" />
+            </ListView>
+          </TabPanel>
+          <TabPanel :header="t('transactions')" v-if="acctrans.length > 0">
+            <ListView
+              ref="searchstudentlistel"
+              :list="acctrans"
+              idField="_id"
+              #default="{ item, index }"
+            >
+              <SearchBoxAccTrans :item="item.data" />
+            </ListView>
+          </TabPanel>
+          <TabPanel :header="t('teacher')" v-if="teachers.length > 0">
+            <ListView
+              ref="searchteacherlistel"
+              :list="teachers"
+              idField="_id"
+              #default="{ item, index }"
+            >
+              <SearchBoxTeacher :item="item.data" />
+            </ListView>
+          </TabPanel>
+        </TabView>
+        <div v-else><NodataLarge /></div>
+      </template>
+    </Dialog>
+  </div>
+</template>
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * last change 2024-02-22
+ * author: Ks Tan
+ */
+import SearchInput from "vue-search-input";
+import { getAllDocuments } from "~/simpleapp/generate/commons/documents";
+import "vue-search-input/dist/styles.css";
+import { debounce } from "lodash"; // Assuming you have Lodash installed
+import {
+  Accounttransaction,
+  Student,
+  Teacher,
+} from "~/simpleapp/generate/openapi";
+import { SimpleAppDocuments, MenuData, ForeignKey } from "~/types";
+import TextSubsubtitle from "../text/TextSubsubtitle.vue";
+const alllist = ref();
+const selecteddata = ref();
+const students = computed(() =>
+  list.value.filter((item) => item.documentName == "student"),
+);
+const parents = computed(() =>
+  list.value.filter((item) => item.documentName == "parent"),
+);
+const teachers = computed(() =>
+  list.value.filter((item) => item.documentName == "teacher"),
+);
+const acctrans = computed(() =>
+  list.value.filter((item) => item.documentName == "accounttransaction"),
+);
+
+type ResultDataType = { _id: string; documentName: string; data: any };
+const list = ref<ResultDataType[]>([]);
+const menulist = ref<ResultDataType[]>([]);
+
+const groupedData = computed(() => [
+  {
+    label: t("menus"),
+    items: menulist.value,
+  },
+  {
+    label: t("results"),
+    items: list.value.sort((a, b) => {
+      const vA = a.data.score;
+      const vB = b.data.score;
+      if (vA < vB) {
+        return 1;
+      }
+      if (vA > vB) {
+        return -1;
+      }
+
+      return 0;
+    }),
+  },
+]);
+
+const searchlistel = ref(null);
+const deviceType: any = useNuxtApp().$device;
+type SearchDoc = {
+  [key: string]: {
+    fields: string[];
+    // search:string[]
+    // sort:string
+  };
+};
+const documents: SearchDoc = {
+  student: {
+    fields: [
+      "studentName",
+      "studentCode",
+      "alternateName",
+      "level",
+      "studentGroup",
+      "status",
+      "updated",
+    ],
+  },
+  parent: {
+    fields: ["parentName", "active", "updated"],
+  },
+  product: {
+    fields: [
+      "productCode",
+      "productName",
+      "defaultPrice",
+      "billingMethod",
+      "category",
+      "categoryType",
+      "active",
+      "updated",
+    ],
+  },
+  teacher: {
+    fields: [
+      "teacherNo",
+      "teacherName",
+      "alternateName",
+      "teacherGroup",
+      "active",
+      "updated",
+    ],
+  },
+  accounttransaction: {
+    fields: [
+      "date",
+      "document",
+      "documentNo",
+      "documentName",
+      "amount",
+      "updated",
+      "student",
+    ],
+  },
+};
+
+const isMacOS = computed(() => deviceType.isMacOS);
+const havedata = ref(false);
+const searchbox = ref();
+const visiblesearch = ref(false);
+const searchVal = ref("");
+const keyword = ref("");
+const tabIndex = ref(0);
+const selectedIndex = ref(0);
+const isloading = ref(false);
+
+const showDialog = () => {
+  searchVal.value = "";
+  keyword.value = "";
+  visiblesearch.value = true;
+  setTimeout(() => {
+    const el = document.querySelector("#searchbox") as HTMLInputElement;
+    if (el !== undefined) el.focus();
+  }, 500);
+};
+
+onMounted(() => {
+  document.onkeydown = function (e) {
+    if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault(); // present "Save Page" from getting triggered.
+      showDialog();
+    } else if (e.key == "Escape") {
+      visiblesearch.value = false;
+    }
+  };
+});
+const onchange = debounce((str: string) => {
+  havedata.value = false;
+  if (searchVal.value == "") return false;
+  keyword.value = searchVal.value;
+  search();
+  havedata.value = true;
+}, 800);
+
+const search = () => {
+  list.value = [];
+  isloading.value = true;
+  searchdocument();
+  for (const key in documents) {
+    const searchdoc = documents[key];
+    if (canPerform(key, "search")) {
+      let doc;
+      if (key == "student") doc = useNuxtApp().$StudentDoc();
+      else if (key == "teacher") doc = useNuxtApp().$TeacherDoc();
+      else if (key == "accounttransaction")
+        doc = useNuxtApp().$AccounttransactionDoc();
+      else if (key == "product") doc = useNuxtApp().$ProductDoc();
+      else if (key == "parent") doc = useNuxtApp().$ParentDoc();
+      else {
+        continue;
+      }
+      doc
+        .runFullTextSearh({
+          keyword: keyword.value,
+        })
+        .then((data: any[]) => {
+          if (data.length > 0) {
+            list.value = list.value.concat(
+              data.map((item) => {
+                const tmp: ResultDataType = {
+                  _id: <string>item._id,
+                  documentName: doc.getDocName(),
+                  data: item,
+                };
+                return tmp;
+              }),
+            );
+          }
+        });
+    }
+  }
+  isloading.value = false;
+  // setTimeout(() => setFocus(), 200);
+};
+
+function onKeyDown(event:KeyboardEvent){
+  if(['ArrowDown','ArrowUp'].includes(event.code)){
+    setFocus()
+  }
+}
+const searchdocument = () => {
+  menulist.value = getAllDocuments()
+    .filter(
+      (item) =>
+        item.page != "" && item.docName.includes(keyword.value.toLowerCase()),
+    )
+    .map((item) => {
+      const tmp: ResultDataType = {
+        _id: item.docName,
+        documentName: "menu",
+        data: item,
+      };
+      return tmp;
+    })
+    .sort();
+};
+
+const selectItem = (item: ResultDataType) => {
+  if (item.documentName == "menu") {
+    goTo(item._id);
+  } else if (item.documentName == "student") {
+    goTo("managestudents", item._id);
+  } else {
+    goTo(item.documentName, item._id);
+  }
+  visiblesearch.value = false;
+};
+
+function setFocus() {
+  const listbodyid = alllist.value?.$el?.id;
+  document.querySelector(`#${listbodyid} .p-listbox-list`)?.focus();
+}
+</script>

package/templates/nuxt/components/search/SearchBoxBefore.vue._eta

@@ -0,0 +1,11 @@
+<template>
+    
+</template>
+<script setup lang="ts">
+/**
+ * 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
+ */
+</script>

package/templates/nuxt/components/search/SearchBoxProduct.vue._eta

@@ -0,0 +1,26 @@
+<template>
+
+  <div class="flex flex-row justify-between cursor-pointer">
+    <div>
+        <div class="font-semibold">
+          {{ item.productCode }} - {{ item.productName }}
+        </div>
+    </div>
+    <div class="flex flex-col text-right">
+        <RendererMoney class="font-semibold" :value="item.defaultPrice" />
+        <div>{{ item.billingMethod }}</div>  
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+/**
+ * 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 {  Product } from "~/simpleapp/generate/openapi";
+import {SimpleAppDocuments} from "~/types"
+const props = defineProps<{item:Product}>()
+
+</script>

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

@@ -4,6 +4,7 @@
     class="p-2 border rounded-lg border-gray-300 dark:border-blue-900/40"
   >
     <button
+      type="button"
       :readonly="readonly"
       class="cursor-pointer text-primary-600 dark:text-primary-400"
       tabindex="0"
@@ -16,9 +17,12 @@
     v-else-if="modelValue !== undefined"
     class="p-2 border rounded-lg border-gray-300 dark:border-blue-900/40 relative"
   >
+  <!-- readonly -->
     <button
       ref="autocompleteinput"
-      readonly
+      type="button"
+      :id="inputId"
+      
       class="cursor-pointer text-primary-600 dark:text-primary-400"
       @click="openViewer(true)"
     >
@@ -29,6 +33,7 @@
       class="absolute h-full top-0 right-0 text-right text-white z-10 align-middle p-3"
     >
       <button
+      type="button"
         class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
         @click="clear"
         tabindex="0"
@@ -189,7 +194,7 @@ import {
   SchemaType,
 } from "~/types";
 const mobileVisible = ref(false);
-const autocompleteinput = ref<autocompletetype | undefined>();
+const autocompleteinput = ref();
 const { $event } = useNuxtApp();
 const list = ref<any[]>([]);
 const props = withDefaults(
@@ -237,6 +242,13 @@ if (modelValue.value && modelValue.value._id) {
 const clear = () => {
   autocompleteitem.value = undefined;
   modelValue.value = undefined;
+  if(!isMobile()){
+    setTimeout(()=>{    
+    const autoel = autocompleteinput.value.$el
+    autoel?.firstElementChild?.focus()    
+  },100)  
+  }
+  
 };
 
 //if record picked, click button show record info instead
@@ -285,7 +297,10 @@ const getListFromAutocompleteApi = (event: any) => {
       console.log("Run autocomplete?");
       list.value = res.data;
 
-      if (props.allowAddNew && canPerform(upperFirst(targetDocument),'create')) {
+      if (
+        props.allowAddNew &&
+        canPerform(upperFirst(targetDocument), "create")
+      ) {
         list.value = list.value.concat({
           _id: "new",
           label: "<" + t("new") + ">",
@@ -323,6 +338,12 @@ watch(modelValue, (newvalue: any) => {
 });
 const emitChanges = () => {
   emits("change", modelValue.value);
+  if(!isMobile()){
+    setTimeout(()=>{    
+    const autoel = autocompleteinput.value
+    autoel?.focus()    
+  },100)}
+
 };
 
 const setFocus = (ev: any) => {

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

@@ -1,6 +1,7 @@
 <template>
   <Calendar
     :pt="pt"
+    :dateFormat="getPrimevueCalendarDateFormat()"
     :inputId="uuid"
     :path="setting.instancepath"
     v-model="datetimevalue"

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

@@ -11,19 +11,23 @@
         </ButtonDefault>
       </div>
     </div>
-    <ListView
+    <ListContainer
       class="p-2 dark:bg-slate-900 bg-slate-200 rounded-lg"
       :list="list"
-      #default="{ index, item }"
+      #default="{item,index }"
       @click="showRow"
     >
       <slot name="listbody" :item="item" :index="index">
         <div class="flex flex-row">item {{ item._id }}</div>
       </slot>
-    </ListView>
+    </ListContainer>
 
-    <Dialog v-model:visible="showDialog"
-       modal :header="t('editDetails')" :pt="{root:{class:'w-1/2'}}">
+    <Dialog
+      v-model:visible="showDialog"
+      modal
+      :header="t('editDetails')"
+      :pt="{ root: { class: 'w-1/2' } }"
+    >
       <div class="flex flex-col p-2 gap-4">
         <slot name="popupbody" :index="rowIndex" :item="list[rowIndex]">
           row {{ rowIndex }} define SimpleAppInputs here
@@ -40,6 +44,7 @@
 </template>
 <script setup lang="ts" generic="T extends { [key: string]: any }">
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
+import ListContainer from "../list/ListContainer.vue";
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR