@simitgroup/simpleapp-generator 1.2.8 → 1.3.0-alpha

package/templates/nuxt/components/list/ListView.vue.eta

@@ -1,68 +1,137 @@
 <template>
-    <div>
-        <div v-if="withFilter" class="">
-            <InputText                 
-                placeholder="search" 
-                v-model="searchvalue"                    
-                class="w-full dark:text-white" 
-                type="search" />                
-        </div>
-        <div class=" overflow-auto" v-if="filterlist.length>0">                        
-            <ul >            
-                <li v-for="(item,index) in filterlist">                    
-                    <div  :class="getSelectedCSS(item)">
-                        <NuxtLink :to="url ? `${url}/${item[idField]}`:undefined">
-                            <slot :item="item" :index="index">
-                                <div class="mr-2">{{item[titleField??'']  }}</div>
-                                <div class="font font-bold text-right">{{item[subTitleField??'']}}</div>
-                            </slot>
-                        </NuxtLink>
-                    </div>
-                
-                </li>
-            </ul>
-        </div>
-        <div v-else class="p-10">            
-            <div class="text-xl text-center dark:text-gray-400 border p-10" >{{ t('noDataFound')  }}</div>
+  <div class="relative  ">
+    <div v-if="withFilter" class="flex flex-row  ">
+      <InputText
+        placeholder="search"
+        v-model="searchvalue"
+        class="w-full dark:text-white"
+        type="search"
+      />
+      <ButtonPrimary v-if="withAddNew" @click="emits('add')"
+        ><i class="pi pi-plus"></i
+      ></ButtonPrimary>
+    </div>
+    <div v-if="showIndex" class="flex flex-col text-sm fixed  left-1 top-1/5 text-primary-600 dark:text-primary-400 p-1 z-10 rounded border bg-white dark:bg-black opacity-90">
+      <A :href="'#'+l" v-for="l in allLetters">{{ l }}</A>
+    </div>
+    
+    <div  v-if="filterlist && filterlist.length > 0">
+      <div >
+        <div v-for="(item, index) in filterlist" :class="isMobile() ? '' : 'overflow overflow-y-scroll overflow-auto '">          
+          <div class="w-full bg-gray-400 dark:bg-gray-500 p-1 pl-2 top-0 sticky opacity-90" v-if="showIndex && titleField &&  showCategoryBar(item[titleField][0])">
+            <a :id="item[titleField][0]">{{ item[titleField][0] }}</a></div>
+          <div :class="getSelectedCSS(item)">
+            <NuxtLink :to="url ? `${url}/${item[idField]}` : undefined">
+              
+              <slot name="default" :item="item" :index="index">
+                <div class="flex flex-row">
+                  <div class="flex-1 mr-2 dark:text-white">
+                    {{ item[titleField ?? ""] }}
+                  </div>
+                  <div class="text-right dark:text-gray-400 text-gray-600">
+                    {{ item[subTitleField ?? ""] }}
+                  </div>
+                </div>
+              </slot>
+            </NuxtLink>
+          </div>
         </div>
+      </div>
     </div>
+    <div v-else>
+      <div
+        class="w-full h-20 p-2 border-l-none border-r-none hover-list-primary"
+      >
+        <slot name="nodata">
+          <div class="border-round border-1 surface-border p-4 surface-card">
+            {{ t("noDataFound") }}
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup lang="ts" generic="T extends {[key:string]:any}">
-import {ref} from 'vue'
-import {ListItem} from '~/types/listview'
-const props = withDefaults(defineProps<{
-    list:T[],
-    url?:string,
-    titleField?:string
-    idField?:string
-    subTitleField?:string
-    withFilter?:boolean
-}>(),{
-    idField:'_id'
-})
-// const emit = defineEmits(['clickitem'])
-const searchvalue = ref('')
-const selecteditem =ref('')
-const clickRow=(item:ListItem)=>{
-    // emit('clickitem',item)
-    // selecteditem.value = item.code
-}
-const filterlist =  computed(()=>{    
-    const newlist =props.list.filter((item:any)=>
-    {
-     return   String(item[props.titleField??'']).toLowerCase().includes(searchvalue.value.toLowerCase()) ||
-            String(item[props.subTitleField??'']).toLowerCase().includes(searchvalue.value.toLowerCase())
-    }) 
+<script setup lang="ts" generic="T extends { [key: string]: any }">
+import { ref } from "vue";
+import { ListItem } from "~/types/listview";
+const props = withDefaults(
+  defineProps<{
+    list: T[];
+    url?: string;
+    titleField?: string;
+    idField?: string;
+    subTitleField?: string;
+    withFilter?: boolean;
+    withAddNew?: boolean;
+    showIndex?:boolean
+  }>(),
+  {
+    idField: "_id",
+  },
+);
+const letters =ref<string[]> ([])
+let lastchar=''
+
+const emits = defineEmits(["add"]);
+const searchvalue = ref("");
+const selecteditem = ref("");
+const clickRow = (item: ListItem) => {
+  // emit('clickitem',item)
+  // selecteditem.value = item.code
+};
+const filterlist = computed(() => {
+  let newlist: T[] = [];
+  if (!Array.isArray(props.list)) {
+    return [];
+  }
+  if (props.list !== undefined) {
+    newlist = props.list.filter((item: T) => {
+      return (
+        String(item[props.titleField ?? ""])
+          .toLowerCase()
+          .includes(searchvalue.value.toLowerCase()) ||
+        String(item[props.subTitleField ?? ""])
+          .toLowerCase()
+          .includes(searchvalue.value.toLowerCase())
+      );
+    });
+  }
+
+  return newlist;
+});
+const getSelectedCSS = (item: T) => {
+  if (selecteditem.value == item.code) {
+    return "p-2 border-l-none border-r-none bg-sky-200 border-t-2";
+  } else {
+    return "p-2 border-l-none border-r-none hover-list-primary border-t-2 dark:border-t-gray-700";
+  }
+};
+
+
+const allLetters = computed(()=>{
+  console.log('props.titleFieldprops.titleField',props.titleField,props.list)
+  if(props.titleField && props.list){
+
+    return props.list.filter((item)=>{
+      const titlevalue:string = item[props.titleField as keyof typeof item]
+      if(titlevalue[0]!=lastchar){
+        lastchar = item[props.titleField as keyof typeof item][0]
+        return true
+      }
+    }).map(item=>item[props.titleField  as keyof typeof item][0])
+    
+  }else{
+    return []
+  }
 
-    return newlist
 })
-const getSelectedCSS= (item:T)=>{
-    if(selecteditem.value == item.code){
-        return "p-2 border-l-none border-r-none bg-sky-200 border-t-2"
-    }else{
-        return "p-2 border-l-none border-r-none hover-list-primary border-t-2 dark:border-t-gray-700"
-    }
 
+const showCategoryBar=(letter:string)=>{
+  if(lastchar!=letter){
+    lastchar=letter
+    return true
+  }else{
+    return false
+  }
 }
-
-</script>
+</script>

package/templates/nuxt/components/mobile/MobileToolbar.vue.eta

@@ -0,0 +1,10 @@
+<template>
+  <div
+    class="w-full dark:bg-gray-800 z-20 bg-white justify justify-between absolute h h-14 flex flex-row place-items-center opacity-90 dark:text-white"
+  >
+    <div class="w-full text-left"><slot name="start"></slot></div>
+    <div class="w-full text-center"><slot name="center"></slot></div>
+    <div class="w-full text-right"><slot name="end"></slot></div>
+  </div>
+  <div class="h-14"></div>  
+</template>

package/templates/nuxt/components/overlay/OverlaySideBarCrud.vue.eta

@@ -0,0 +1,21 @@
+<template>
+  <Sidebar
+    position="right"
+    v-if="showDialog"
+    v-model:visible="showDialog"
+    modal
+    :show-close-icon="false"
+    #container
+  >
+    <div class="overflow-y-scroll">
+      <slot name="default"></slot>
+    </div>
+  </Sidebar>
+</template>
+<script lang="ts" setup>
+const showDialog = defineModel<boolean>({ required: true });
+const props = defineProps<{ closeEventName: string }>();
+useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
+  if (props.closeEventName == closeEventName) showDialog.value = false;
+});
+</script>

package/templates/nuxt/components/overlay/OverlayViewer.vue.eta

@@ -0,0 +1,20 @@
+<template>
+  <Sidebar
+    position="bottom"
+    v-if="showDialog"
+    v-model:visible="showDialog"
+    modal
+    :show-close-icon="false"
+    #container
+  >
+    <div class="overflow-y-scroll">
+      <slot name="default"></slot>
+    </div>
+  </Sidebar>
+</template>
+<script lang="ts" setup>
+const showDialog = defineModel<boolean>({ required: true });
+useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
+  if (closeEventName=='viewer') showDialog.value = false;
+});
+</script>

package/templates/nuxt/components/page/PageDocList.vue.eta

@@ -0,0 +1,170 @@
+<template>
+  <title v-if="!id">{{ t(doc.getDocName()) }}</title>
+  <div v-if="isMobile()" class="w-full">
+    <div class="p-2 flex flex-row justify-end place-items-center h-14">
+      <div class="flex-1">
+        <TextTitle>{{ t(doc.getDocName()) }}</TextTitle>
+      </div>
+      <div>
+        <ButtonText
+          @click="goTo(doc.getDocName(), 'new')"
+          class="pi pi-plus"
+        ></ButtonText>
+      </div>
+    </div>
+    <ListDocument
+      v-if="recordlist"
+      @click="showDialogForm"
+      :recordlist="recordlist as T[]"
+      :unique-key="uniqueKey"
+      :document-title="documentTitle"
+    >
+      <template #default="{ index, item }">
+        <slot name="mobileList" :index="index" :item="item as T"></slot>
+      </template>
+    </ListDocument>
+  </div>
+  <div v-else class="simpleapp-crudsimple">
+    <ListDocumentTable
+      v-if="recordlist"
+      :value="recordlist as T[]"
+      :title="doc.getDocName()"
+      :unique-key="<string>uniqueKey"
+      :document-title="<string>documentTitle"
+      :columns="columns"
+    >
+      <template #toolbar>
+        <div class="w-full text-left">
+          <ButtonPrimary
+            class="pi pi-plus"
+            @click="newData"
+            v-tooltip="t('new')"
+            v-if="canPerform(resourcename, 'create')"
+          ></ButtonPrimary>
+        </div>
+      </template>
+      <template #default>
+        <slot name="dataTableColumns">
+          <Column v-for="col in columns.filter((item,index)=>index<6)" :header="t(col)" class="min-w-[5rem]" #body="{index,data}">                        
+              <RendererLink   v-if="uniqueKey === col || documentTitle === col"
+                  :value="data" :setting="{ path: resourcename.toLocaleLowerCase() }"
+                  :fields="[col]" >
+                  {{ data[col] }}
+              </RendererLink>
+            <span v-else-if="data[col]?.label !==undefined">{{ data[col].label }}</span>
+            <span v-else>{{ data[col] }}</span>              
+          </Column>
+
+        </slot> 
+      </template>
+    </ListDocumentTable>
+  </div>
+  <OverlaySideBarCrud
+    v-model="showDialog"
+    :closeEventName="doc.getDocName()"
+    #default
+    ><slot name="default">
+      <NuxtPage :_id="id"></NuxtPage>
+    </slot>
+  </OverlaySideBarCrud>
+</template>
+
+<script setup lang="ts" generic="T extends { [key: string]: any }">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DO NOT MODIFY IT BY HAND.
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
+import { ref } from "vue";
+import _ from "lodash";
+import { SearchBody } from "~/types";
+import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
+const props = defineProps<{
+  document: SimpleAppClient<any, any>;
+  data: T;
+  columns: string[];
+  mobileColumns?: string[];
+  sorts?: string[][];
+}>();
+
+const emits = defineEmits(["selectRow"]);
+const id = computed(() => getPathPara("id"));
+const resourcename = ref(_.upperFirst(props.document.getDocName()));
+const visible = ref(false);
+const showDialog = ref(false);
+const op = ref();
+const doc = props.document;
+const disabled = ref(false);
+
+const router = useRouter();
+const route = useRoute();
+const filters = ref();
+const popuptitle = ref(t(doc.getDocName()));
+const systemwindows = ref(false);
+const { $event, $listen } = useNuxtApp();
+const recordlist = ref<T[]>();
+const uniqueKey = doc.getSchema()["x-simpleapp-config"].uniqueKey;
+const documentTitle = doc.getSchema()["x-simpleapp-config"].documentTitle;
+
+const refresh = () => {
+  const searchbody: SearchBody = {
+    fields: props.columns,
+    sorts: props.sorts,
+  };
+  doc.search(searchbody).then((res: any) => {
+    recordlist.value = res;
+    disabled.value = false;
+  });
+};
+const newData = () => {
+  router.push({ path: getDocumentUrl(doc.getDocName(), "new") });
+  popuptitle.value = t(doc.getDocName());
+  doc.setNew();
+  visible.value = true;
+};
+
+onMounted(() => {
+  refresh();
+});
+$listen("RefreshDocumentList", (data) => {
+  if (data.documentName == doc.getDocName()) {
+    refresh();
+  }
+});
+const showDialogForm = (item: T) => {
+  goTo(doc.getDocName(), item._id);
+  popuptitle.value = <string>item[documentTitle as keyof T];
+};
+
+watch(showDialog, () => {
+  if (!showDialog.value) {
+    goTo(props.document.getDocName());
+  }
+});
+watch(
+  () => useRoute().path,
+  async () => {
+    if (getPathPara("id")) {
+      showDialog.value = true;
+    } else {
+      showDialog.value = false;
+    }
+  },
+);
+
+onMounted(() => {
+  if (id.value) {
+    showDialog.value = true;
+  } else {
+    showDialog.value = false;
+  }
+
+  useNuxtApp().$listen("CloseDialog", (documentName: string) => {
+    if (documentName == doc.getDocName()) {
+      goTo(resourcename.value);
+      showDialog.value = false;
+    }
+  });
+});
+</script>

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

@@ -1,5 +1,9 @@
-<template>    
-    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': modelValue, 'pi-times-circle text-red-500': !modelValue }"></i>
+<template>
+  <span class="pi pi-check-circle text-green-500" v-if="modelValue">    
+  </span>
+  <span class="pi pi-times-circle text-red-500" v-else>  
+  </span>
+  
 </template>
 <script lang="ts" setup>
 /**
@@ -8,5 +12,5 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const modelValue = defineModel()
-</script>
+const modelValue = defineModel<boolean>();
+</script>

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

@@ -1,5 +1,5 @@
-<template >
-    <span>{{ toLocalDate(value??'') }}</span>
+<template>
+  <span>{{ toLocalDate(value ?? "") }}</span>
 </template>
 <script lang="ts" setup>
 /**
@@ -8,5 +8,5 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const props = defineProps<{value?:string}>()
-</script>
+const props = defineProps<{ value?: string }>();
+</script>

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

@@ -1,9 +1,9 @@
 <template>
-    <a @click="go" class="text-primary-700 hover:text-primary-500 cursor-pointer">
-        <slot name="default">
-            <div >{{ value[fields[0]] }}</div>
-        </slot>
-    </a>
+  <a @click="go" class="text-primary-700 dark:text-primary-300 dark:hover:text-primary-200 hover:text-primary-500 cursor-pointer">
+    <slot name="default">
+      <div>{{ value[fields[0]] }}</div>
+    </slot>
+  </a>
 </template>
 <script setup lang="ts">
 /**
@@ -14,20 +14,12 @@
  */
 
 const props = defineProps<{
-    fields:any,
-    setting:any,
-    value:any
-}>()
+  fields: any;
+  setting: any;
+  value: any;
+}>();
 
-const go = ()=>{
-    goTo(props.setting.path,props.value._id)
-    // useNuxtApp().$event('ViewRecord',{
-    //     _id: props.value._id ,
-    //     documentName: props.setting.documentName,
-    //     viewer: getDocument(props.setting.documentName)?.viewer,
-    //     label: props.setting.documentName,
-    //     document:getDocument(props.setting.documentName)?.docClass,
-    //     eventId: crypto.randomUUID()
-    // })
-} 
+const go = () => {
+  goTo(props.setting.path, props.value._id);  
+};
 </script>

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

@@ -1,9 +1,12 @@
 <template>
-    <a @click="openViewer" class="text-primary-700 dark:text-primary-400 hover:text-primary-500 cursor-pointer">
-        <slot name="default">
-            <div v-if="fields">{{ value[fields[0]] }}</div>
-        </slot>
-    </a>
+  <a
+    @click="openViewer"
+    class="text-primary-700 dark:text-primary-400 hover:text-primary-500 cursor-pointer"
+  >
+    <slot name="default">
+      <div v-if="fields">{{ value[fields[0]] }}</div>
+    </slot>
+  </a>
 </template>
 <script setup lang="ts">
 /**
@@ -12,21 +15,24 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-import { RendererSetting } from '~/types';
+import { RendererSetting } from "~/types";
 const props = defineProps<{
-    fields?:string[],
-    setting:RendererSetting,
-    value:any
-}>()
+  fields?: string[];
+  setting: RendererSetting;
+  value: any;
+}>();
 
-const openViewer = ()=>{
-    useNuxtApp().$event('ViewRecord',{
-        _id: props.value._id ,
-        documentName: props.setting.documentName,
-        viewer: getDocument(props.setting.documentName)?.viewer,
-        label: props.setting.documentName,
-        document:getDocument(props.setting.documentName)?.docClass,
-        eventId: randomUUID()
-    })
-} 
-</script>
+const openViewer = () => {
+  useNuxtApp().$event("ViewRecord", {
+    _id: props.value._id,
+    documentName: props.setting.documentName,
+    viewer: getDocument(props.setting.documentName)?.viewer,
+    label: props.fields !== undefined ? props.value[props.fields[0]] : props.setting.documentName,
+    document: getDocument(props.setting.documentName)?.docClass,
+    eventId: randomUUID(),    
+    after:()=>{
+      useNuxtApp().$event('CloseDialog',props.setting.documentName)
+    }
+  });
+};
+</script>