@simitgroup/simpleapp-generator 1.6.3-alpha → 1.6.4-alpha

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

@@ -1,30 +1,50 @@
 <template>
   <div class="relative">
+    <div v-if="header">
+      <slot name="header">
+        <TextMain class="text-gray-800 pl-2 pt-2">{{ header }}</TextMain>
+      </slot>
+      <hr class="mt-2" />
+    </div>
     <div v-if="withFilter" class="flex flex-row p-2">
-      <InputGroup>
-        <InputGroupAddon v-if="filter">
-          <ButtonText
-            @click="showMoreFilter"
-            v-if="Object.keys(filter) == 0"
-          >
-            <i class="pi pi-filter"></i>
-          </ButtonText>
-          <ButtonWarning @click="showMoreFilter" v-else>
-            <i class="pi pi-filter"></i>
-          </ButtonWarning>
+      <InputGroup :pt="{ root: { class: 'p-0' } }">
+        <InputGroupAddon
+          v-if="filter !== undefined && Object.keys(filter).length > 0"
+          :pt="{
+            root: {
+              class:
+                'p-0 pi pi-filter cursor-pointer bg-warning-400 text-white p-3',
+            },
+          }"
+          @click="showMoreFilter"
+        >
+        </InputGroupAddon>
+        <InputGroupAddon
+          v-else
+          :pt="{ root: { class: 'p-0 pi pi-filter cursor-pointer p-3' } }"
+          @click="showMoreFilter"
+        >        
         </InputGroupAddon>
         <InputText
           :placeholder="t('searchKeyword')"
           v-model="searchvalue"
-          class="w-full dark:text-white text-sm"
           type="search"
+          :pt="{ root: { class: 'p-1' } }"
           ref="listviewfilter"
         />
-        <InputGroupAddon v-if="withAddNew">
-          <ButtonPrimary @click="emits('add')">
-            <i class="pi pi-plus"></i>
-          </ButtonPrimary>
+        <InputGroupAddon
+          :pt="{
+            root: {
+              class:
+                'p-0 cursor-pointer bg-primary-400 pi pi-plus p-3 text-white',
+            },
+          }"
+          v-if="withAddNew"
+          @click="emits('add')"
+        >
+
         </InputGroupAddon>
+        <slot name="inputAddOn"></slot>
       </InputGroup>
     </div>
 
@@ -90,10 +110,14 @@
       </div>
     </div>
 
-    <Dialog v-model:visible="visibleMoreFilter" :header="t('filter')">
+    <Dialog
+      v-model:visible="visibleMoreFilter"
+      :header="t('filter')"
+      :pt="{ root: { class: 'w-1/3' } }"
+    >
       <slot name="filter"> define filter in #filter </slot>
       <template #footer>
-        <div class="flex flex-row">
+        <div class="flex flex-row gap-4">
           <ButtonDefault @click="clearFilter" class="flex flex-row p-2">
             <i class="pi pi-times mr-1" />
             <span class="mr-1">{{ t("clear") }}</span>
@@ -123,11 +147,13 @@ const props = withDefaults(
   defineProps<{
     list: T[];
     url?: string;
+    urlsuffix?: string;
+    header?: string;
     titleField?: string;
     idField?: string;
     subTitleField?: string;
     withFilter?: boolean;
-    filter?: Object;
+    filter?: { [key: string]: any };
     withAddNew?: boolean;
     showIndex?: boolean;
     showClickEffect?: boolean;
@@ -147,9 +173,14 @@ const clickRow = (item: ListItem) => {
   // selecteditem.value = item.code
 };
 const getUrl = (item: any) => {
+  const urlsuffix =
+    props.urlsuffix === undefined || props.urlsuffix == ""
+      ? ""
+      : "/" + props.urlsuffix;
   if (props.url && props.idField) {
-    if (_.last(props.url) == "/") return `${props.url}${item[props.idField]}`;
-    else return `${props.url}/${item[props.idField]}`;
+    if (_.last(props.url) == "/")
+      return `${props.url}${item[props.idField]}${urlsuffix}`;
+    else return `${props.url}/${item[props.idField]}${urlsuffix}`;
   } else return undefined;
   // :to="url ? `${url}/${item[idField]}` : undefined"
 };
@@ -159,22 +190,20 @@ const filterlist = computed(() => {
     return [];
   }
   if (props.list !== undefined) {
-    const searchstr = searchvalue.value.toLowerCase()
-    
+    const searchstr = searchvalue.value.toLowerCase();
+
     newlist = props.list.filter((item: T) => {
-      let res = false
-      if(searchstr.length==0) return true
-      if(props.titleField && item[props.titleField]){
-          res = item[props.titleField].toLowerCase()
-                .includes(searchstr)
-              }
-      if(res) return true
+      let res = false;
+      if (searchstr.length == 0) return true;
+      if (props.titleField && item[props.titleField]) {
+        res = item[props.titleField].toLowerCase().includes(searchstr);
+      }
+      if (res) return true;
+
+      if (props.subTitleField && item[props.subTitleField])
+        res = item[props.subTitleField].toLowerCase().includes(searchstr);
+      if (res) return true;
 
-      if(props.subTitleField && item[props.subTitleField])
-      res = item[props.subTitleField].toLowerCase()
-        .includes(searchstr)
-      if(res) return true
-      
       return false;
     });
   }

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

@@ -1,15 +1,16 @@
 <template>
   <Sidebar
-    :position="position??'right'"
+    :position="position ?? 'right'"
     v-if="showDialog"
     v-model:visible="showDialog"
     modal
     :show-close-icon="false"
     :dismissable="dismissable"
+    :pt="{root:{class:'w-2/3 border-0 border-l border-l-gray-500'}}"
     #container
   >
-    <div class="overflow-y-scroll border-l-2">
-      <MobileToolbar class="bg-gray-800 text-white">
+    <div class="overflow-y-scroll">
+      <MobileToolbar class="">
         <template #start>
           <slot name="headerLeft"></slot>
         </template>
@@ -37,7 +38,7 @@ const showDialog = defineModel<boolean>({ required: true });
 const props = defineProps<{
   closeEventName: string;
   dismissable?: boolean;
-  position?:string
+  position?: "right" | "full" | "left" | "top" | "bottom" | undefined;
 }>();
 // const position = ref(props?.position ?? 'right')
 useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {

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

@@ -2,21 +2,22 @@
   <Dialog
     v-if="showDialog"
     v-model:visible="showDialog"
-    
     maximizable
     :dismissable="false"
     :show-close-icon="false"
     :closeOnEscape="false"
     :modal="true"
-    :pt="{root:{class:'w-11/12 border top-0'}, mask: {
-            style: 'backdrop-filter: blur(2px);background-color: red;'
-        }}"   
-
+    :pt="{
+      root: { class: 'w-11/12 border top-0' },
+      mask: {
+        style: 'backdrop-filter: blur(2px);background-color: red;',
+      },
+    }"
   >
     <template #header>
-      <slot name="header">{{t(title)}}</slot>
+      <slot name="header">{{ t(title) }}</slot>
     </template>
-    <div class="overflow-y-scroll bg-white">
+    <div class="overflow-y-scroll bodycolorclass">
       <slot name="default"></slot>
     </div>
   </Dialog>
@@ -32,5 +33,4 @@ 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

@@ -8,6 +8,7 @@
       </div>
       <div>
         <ButtonText
+          v-if="allowAction('create')"
           @click="goTo(doc.getDocName(), 'new')"
           class="pi pi-plus"
         ></ButtonText>
@@ -36,12 +37,13 @@
     >
       <template #toolbar>
         <div class="w-full text-left">
-          <ButtonPrimary
-            class="pi pi-plus"
+          <ButtonPrimary          
             @click="newData"
             v-tooltip="t('new')"
-            v-if="canPerform(resourcename, 'create')"
-          ></ButtonPrimary>
+            v-if="allowAction('create') && canPerform(resourcename, 'create')"
+          >
+            <i class="pi pi-plus"></i>
+          </ButtonPrimary>
         </div>
       </template>
       <template #default>
@@ -65,6 +67,14 @@
                 :fields="[col]"
               >
               </RendererLink>
+              <TextMain v-else-if="col == 'documentStatus'">{{
+                t(data[col])
+              }}</TextMain>
+              <RendererMoney
+                v-else-if="schemacols[col]['format'] == 'money'"
+                v-model="data[col]"
+              >
+              </RendererMoney>
               <span v-else-if="typeof schemacols[col].enum != 'undefined'">
                 {{ t(data[col]) }}
               </span>
@@ -78,6 +88,12 @@
               >
                 {{ data[col]?.label ?? data[col]?.code ?? data[col] }}
               </RendererForeignKey>
+              <span v-else-if="schemacols[col].format == 'date'">
+                <RendererDate v-model="data[col]" />
+              </span>
+              <span v-else-if="schemacols[col].format == 'datetime'">
+                <RendererDateTime v-model="data[col]" />
+              </span>
               <span v-else-if="data[col]?.label !== undefined">{{
                 data[col].label
               }}</span>
@@ -105,15 +121,15 @@
       }}</TextTitle>
     </template>
     <template #headerRight>
-
-
-      
-
-      <ButtonText @click="sidebarposition = sidebarposition == 'right' ? sidebarposition='full': 'right'">
-        <i v-if="sidebarposition=='right'" class="pi pi-window-maximize"/>
-        <i v-if="sidebarposition=='full'" class="pi pi-window-minimize"/>
+      <ButtonText
+        @click="
+          sidebarposition =
+            sidebarposition == 'right' ? (sidebarposition = 'full') : 'right'
+        "
+      >
+        <i v-if="sidebarposition == 'right'" class="pi pi-window-maximize" />
+        <i v-if="sidebarposition == 'full'" class="pi pi-window-minimize" />
       </ButtonText>
-        
     </template>
 
     <div class="p-2">
@@ -135,7 +151,7 @@ import { ref } from "vue";
 import _ from "lodash";
 import { SearchBody } from "~/types";
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
-const sidebarposition = ref('right')
+const sidebarposition = ref("right");
 const props = defineProps<{
   document: SimpleAppClient<any, any>;
   data: T;
@@ -143,6 +159,7 @@ const props = defineProps<{
   columns: string[];
   mobileColumns?: string[];
   sorts?: string[][];
+  availableActions?:string[]
 }>();
 const maxcolumns = 16;
 const emits = defineEmits(["selectRow"]);
@@ -164,6 +181,12 @@ const recordlist = ref<T[]>();
 const uniqueKey = doc.getSchema()["x-simpleapp-config"].uniqueKey;
 const documentTitle = doc.getSchema()["x-simpleapp-config"].documentTitle;
 const schemacols = doc.getSchema().properties;
+const allowAction = (actname:string)=>{
+  if(props.availableActions === undefined) return true
+  else if(Array.isArray(props.availableActions) &&  props.availableActions.length>0 && !props.availableActions.includes(actname)) 
+    return false
+  else return true
+}
 const getCssClass = (col: string) => {
   if (schemacols[col]?.type == "number") return "text-right";
   else if (schemacols[col]?.type == "boolean")

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

@@ -1,5 +1,10 @@
 <template>
-  <span v-if="modelValue">{{ toUTCDate(modelValue) }}</span>
+  <span v-if="modelValue">
+    {{ dateRenderToDateStr(modelValue) }}
+  </span>
+  <span v-else-if="value">
+    {{ dateRenderToDateStr(value) }}
+  </span>
   <span v-else>-</span>
 </template>
 <script lang="ts" setup>
@@ -9,5 +14,6 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const modelValue = defineModel<Date|string>()
+const modelValue = defineModel<Date | string>();
+  const props = defineProps<{value:Date|string}>()
 </script>

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

@@ -1,5 +1,10 @@
 <template>
-  <span v-if="modelValue">{{ toUTCDateTime(modelValue) }}</span>
+  <span v-if="modelValue">
+    {{ dateRenderToDateTimeStr(modelValue) }}
+  </span>
+  <span v-else-if="value">
+    {{ dateRenderToDateTimeStr(value) }}
+  </span>
   <span v-else>-</span>
 </template>
 <script lang="ts" setup>
@@ -10,4 +15,5 @@
  * author: Ks Tan
  */
 const modelValue = defineModel<Date | string>();
+const props = defineProps<{value:Date|string}>()
 </script>

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

@@ -0,0 +1,56 @@
+<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>
+    
+
+    <Dialog v-model:visible="visibleHistories" modal
+      :header="t('histories')" :pt="{root:{class:'w-1/4'}}">
+      <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>
+        <template #content="slotProps">
+          <div>
+            <div>{{ slotProps.item.status }}</div>
+          </div>  
+          
+        </template>
+    </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"
+  })
+
+
+  const viewHistories = () =>{
+    visibleHistories.value=true
+    console.log("histories")
+  }
+</script>

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

@@ -21,25 +21,26 @@ import { ForeignKey, FormCrudEvent, SimpleAppDocumentType } from "~/types";
 
 type SettingProp = { collection: SimpleAppDocumentType; displayField?: string };
 const modelValue = defineModel<ForeignKey>();
+
 const emits = defineEmits(["after"]);
-const props = defineProps<{ setting: SettingProp }>();
+const props = defineProps<{value?:ForeignKey;  setting: SettingProp }>();
 const displayText = computed(() => {
   const s = props.setting;
-  if (!modelValue.value) return undefined;
-  else if (!s.collection) return modelValue.value;
-  else if (s.displayField) return modelValue.value[s.displayField];
-  else return modelValue.value.label;
+  if (!modelValue.value && !props.value) return undefined;
+  else if (!s.collection) return modelValue.value??props.value;
+  else if (s.displayField) return modelValue.value[s.displayField] ??props.value[s.displayField];
+  else return modelValue.value?.label ??props.value?.label;
 });
 const { $event } = useNuxtApp();
 const viewer = ref();
 const viewRecord = () => {
   viewer.value = getDocument(props.setting.collection)?.viewer;
-
+  const value = modelValue.value?? props.value
   // getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
   //getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
   $event("ViewRecord", {
-    _id: modelValue.value?._id as string,
-    label: modelValue.value?.label as string,
+    _id: value?._id as string,
+    label: value?.label as string,
     eventId: randomUUID(),
     documentName: props.setting.collection,
     viewer: viewer.value,

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

@@ -1,7 +1,10 @@
 <template>
-  <a @click="go" class="text-primary-700 dark:text-primary-300 dark:hover:text-primary-200 hover:text-primary-500 cursor-pointer">
+  <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>
+      <div>{{ value[fields[0]] ?? t('undefined') }}</div>
     </slot>
   </a>
 </template>
@@ -20,6 +23,6 @@ const props = defineProps<{
 }>();
 
 const go = () => {
-  goTo(props.setting.path, props.value._id);  
+  goTo(props.setting.path, props.value._id);
 };
-</script>
+</script>

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

@@ -1,11 +1,15 @@
 <template>
-  <span v-if="typeof modelValue == 'undefined' || typeof modelValue == 'string'"
-    >-</span
-  >
-  <span v-else-if="showCurrency"> {{ currenyValue }}</span>
-  <span v-else>
-    {{ modelValue.toLocaleString(useI18n().defaultLocale, options) }}</span
-  >
+  
+  <span>
+    <span class="mr-1" v-if="showCurrency">{{ getCurrency() }}</span>    
+    <span v-if="typeof modelValue != 'undefined'">{{
+    modelValue.toLocaleString(useI18n().defaultLocale, options)
+      }}</span>
+    <span v-else-if="typeof props.value != 'undefined'">{{
+      props.value.toLocaleString(useI18n().defaultLocale, options)
+      }}</span>
+    <span v-else>-</span>
+  </span>
 </template>
 <script lang="ts" setup>
 /**
@@ -14,20 +18,24 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const currenyValue = computed(() => {
-  if (modelValue.value === undefined) return "-";
-  return Intl.NumberFormat(useI18n().defaultLocale, {
-    // style: "currency",
-    // currency: getUserProfile()?.currency ?? '',
-    // currencyDisplay: "symbol",
-  }).format(modelValue.value);
-});
 const options = {
   style: "decimal", // Other options: 'currency', 'percent', etc.
   minimumFractionDigits: 2,
   maximumFractionDigits: 2,
 };
-const modelValue = defineModel<number>({ required: true });
-const props = defineProps<{ showCurrency?: boolean }>();
+const modelValue = defineModel<number>();
+const props = defineProps<{ showCurrency?: boolean ; value?:number }>();
+
+const currenyValue = computed(() => {
+  if (typeof modelValue.value == 'number'){
+    return Intl.NumberFormat(useI18n().defaultLocale, 
+        {}).format(modelValue.value);
+  }else if(typeof props.value == 'number'){
+    return Intl.NumberFormat(useI18n().defaultLocale,{}).format(props.value);
+  }else return '-'
+  
+  
+});
+
 
 </script>

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

@@ -1,5 +1,10 @@
 <template>
-  <span v-if="modelValue">{{ toUTCTime(modelValue) }}</span>
+  <span v-if="modelValue">
+    {{ dateRenderToTimeStr(modelValue) }}
+  </span>
+  <span v-else-if="value">
+    {{ dateRenderToTimeStr(value) }}
+  </span>
   <span v-else>-</span>
 </template>
 <script lang="ts" setup>
@@ -10,4 +15,5 @@
  * author: Ks Tan
  */
 const modelValue = defineModel<Date | string>();
+const props = defineProps<{ value: Date | string }>();
 </script>

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

@@ -1,12 +1,17 @@
 <template>
-  <a
+  <div v-if="!value"></div>
+  <a v-else
     @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>
+      
+      <TextDanger v-if="!value">{{t('undefined')}}</TextDanger>
+      <TextDanger v-else-if="!Array.isArray(fields) || !fields[0]">{{t('undefinedFields')}}</TextDanger>
+      <div v-else-if="value[fields[0]]">{{ value[fields[0]] }}</div>
+      <div v-else></div>
     </slot>
-  </a>
+  </a> 
 </template>
 <script setup lang="ts">
 /**
@@ -21,18 +26,23 @@ const props = defineProps<{
   setting: RendererSetting;
   value: any;
 }>();
-
+const viewervalue = computed(()=>{
+  return props.value ?? {}
+})
 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,
+    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)
-    }
+    eventId: randomUUID(),
+    after: () => {
+      useNuxtApp().$event("CloseDialog", props.setting.documentName);
+    },
   });
 };
 </script>