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

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

@@ -1,21 +1,31 @@
 <template>
   <div class="relative">
-    <div v-if="withFilter" class="flex flex-row">
-      <InputText
-        :placeholder="t('searchKeyword')"
-        v-model="searchvalue"
-        class="w-full dark:text-white"
-        type="search"
-        ref="listviewfilter"
-      />
-      <template v-if="withAddNew">
-        <ButtonText v-if="isMobile()" @click="emits('add')"
-          ><i class="pi pi-plus"></i
-        ></ButtonText>
-        <ButtonPrimary v-else @click="emits('add')"
-          ><i class="pi pi-plus"></i
-        ></ButtonPrimary>
-      </template>
+    <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>
+        </InputGroupAddon>
+        <InputText
+          :placeholder="t('searchKeyword')"
+          v-model="searchvalue"
+          class="w-full dark:text-white text-sm"
+          type="search"
+          ref="listviewfilter"
+        />
+        <InputGroupAddon v-if="withAddNew">
+          <ButtonPrimary @click="emits('add')">
+            <i class="pi pi-plus"></i>
+          </ButtonPrimary>
+        </InputGroupAddon>
+      </InputGroup>
     </div>
 
     <div
@@ -46,12 +56,15 @@
             <span>{{ item[titleField][0] }}</span>
           </div>
           <div
-            @click="onClick(index, item)"
+            @click="onClick(index, item, $event)"
             :class="`border-l-none border-r-none listview-item dark:border-t-gray-700 ${
               index > 0 ? 'border-t-2' : ''
             }`"
           >
-            <NuxtLink :to="getUrl(item)" :class="`p-2 ${showClickEffect ? 'listlink' :''}`">
+            <NuxtLink
+              :to="getUrl(item)"
+              :class="`p-2 ${showClickEffect ? 'listlink' : ''}`"
+            >
               <slot name="default" :item="item" :index="index">
                 <div class="flex flex-row">
                   <div class="flex-1 mr-2 dark:text-white">
@@ -76,6 +89,22 @@
         </slot>
       </div>
     </div>
+
+    <Dialog v-model:visible="visibleMoreFilter" :header="t('filter')">
+      <slot name="filter"> define filter in #filter </slot>
+      <template #footer>
+        <div class="flex flex-row">
+          <ButtonDefault @click="clearFilter" class="flex flex-row p-2">
+            <i class="pi pi-times mr-1" />
+            <span class="mr-1">{{ t("clear") }}</span>
+          </ButtonDefault>
+          <ButtonPrimary @click="runFilter" class="flex flex-row p-2">
+            <i class="pi pi-filter mr-1" />
+            <span class="mr-1">{{ t("ok") }}</span>
+          </ButtonPrimary>
+        </div>
+      </template>
+    </Dialog>
   </div>
 </template>
 <script setup lang="ts" generic="T extends { [key: string]: any }">
@@ -88,6 +117,7 @@
 import { ref } from "vue";
 import { ListItem } from "~/types/listview";
 import _ from "lodash";
+const visibleMoreFilter = ref(false);
 const listviewfilter = ref();
 const props = withDefaults(
   defineProps<{
@@ -97,9 +127,10 @@ const props = withDefaults(
     idField?: string;
     subTitleField?: string;
     withFilter?: boolean;
+    filter?: Object;
     withAddNew?: boolean;
     showIndex?: boolean;
-    showClickEffect?:boolean
+    showClickEffect?: boolean;
   }>(),
   {
     idField: "_id",
@@ -108,7 +139,7 @@ const props = withDefaults(
 const letters = ref<string[]>([]);
 let lastchar = "";
 
-const emits = defineEmits(["add", "click"]);
+const emits = defineEmits(["add", "runFilter", "clearFilter", "click"]);
 const searchvalue = ref("");
 const selecteditem = ref("");
 const clickRow = (item: ListItem) => {
@@ -128,15 +159,23 @@ const filterlist = computed(() => {
     return [];
   }
   if (props.list !== undefined) {
+    const searchstr = searchvalue.value.toLowerCase()
+    
     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())
-      );
+      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
+      
+      return false;
     });
   }
 
@@ -168,10 +207,21 @@ const showCategoryBar = (letter: string) => {
   }
 };
 
-const onClick = (index: number, data: T) => {
-  emits("click", index, data);
+const onClick = (index: number, data: T, event: Event | MouseEvent) => {
+  emits("click", index, data, event);
 };
 
+const showMoreFilter = () => {
+  visibleMoreFilter.value = true;
+};
+const clearFilter = () => {
+  visibleMoreFilter.value = false;
+  emits("clearFilter");
+};
+const runFilter = () => {
+  visibleMoreFilter.value = false;
+  emits("runFilter");
+};
 onMounted(() => {
   // if(props.withFilter) listviewfilter.value.$el.focus()
 });

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

@@ -1,13 +1,14 @@
 <template>
   <Sidebar
-    position="right"
+    :position="position??'right'"
     v-if="showDialog"
     v-model:visible="showDialog"
     modal
     :show-close-icon="false"
+    :dismissable="dismissable"
     #container
   >
-    <div class="overflow-y-scroll">
+    <div class="overflow-y-scroll border-l-2">
       <MobileToolbar class="bg-gray-800 text-white">
         <template #start>
           <slot name="headerLeft"></slot>
@@ -19,7 +20,7 @@
           <slot name="headerRight"></slot>
         </template>
       </MobileToolbar>
-      <div >
+      <div class="p-2">
         <slot name="default"></slot>
       </div>
     </div>
@@ -33,7 +34,12 @@
  * Author: Ks Tan
  */
 const showDialog = defineModel<boolean>({ required: true });
-const props = defineProps<{ closeEventName: string }>();
+const props = defineProps<{
+  closeEventName: string;
+  dismissable?: boolean;
+  position?:string
+}>();
+// const position = ref(props?.position ?? 'right')
 useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
   if (props.closeEventName == closeEventName) {
     showDialog.value = false;

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

@@ -3,12 +3,18 @@
     position="right"
     v-if="showDialog"
     v-model:visible="showDialog"
-    modal
-    :show-close-icon="false"
+    :dismissable="dismissable"
+    modal    
     #container
-  >
-    <div class="overflow-y-scroll">
-      <slot name="default"></slot>
+  > 
+    <div class="border-l-2 pl-2">
+      <div class="flex flex-row justify-end p-2" v-if="title">
+        <TextTitle class="dark:text-white line-clamp-2 flex-1">{{title}}</TextTitle>
+        <ButtonText @click="showDialog=false"><i class="pi pi-times" /></ButtonText>
+      </div>
+      <div class="overflow-y-scroll">
+        <slot name="default"></slot>
+      </div>
     </div>
   </Sidebar>
 </template>
@@ -20,7 +26,12 @@
  * Author: Ks Tan
  */
 const showDialog = defineModel<boolean>({ required: true });
-const props = defineProps<{ closeEventName: string }>();
+const props = defineProps<{ 
+  closeEventName: string   
+  title?:string
+  dismissable?:boolean
+
+}>();
 useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
   if (props.closeEventName == closeEventName) {
     showDialog.value = false;

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

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

@@ -1,9 +1,10 @@
 <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>
+        <TextMain>{{ t(doc.getDocName()) }}</TextMain>
       </div>
       <div>
         <ButtonText
@@ -45,37 +46,82 @@
       </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 }"
+          <!-- :sortable="schemacols[col] && schemacols[col].type!='object'" -->
+          <template
+            v-for="col in columns.filter((item, index) => index < maxcolumns)"
           >
-            <RendererLink
-              v-if="uniqueKey === col || documentTitle === col"
-              :value="data"
-              :setting="{ path: resourcename.toLocaleLowerCase() }"
-              :fields="[col]"
+            <Column
+              v-if="schemacols[col]"
+              :header="t(col)"
+              sortable
+              :field="schemacols[col]['x-foreignkey'] ? col + '.label' : col"
+              :class="`min-w-[5rem] ${getCssClass(col)}`"
+              #body="{ index, data }"
             >
-              {{ data[col] }}
-            </RendererLink>
-            <span v-else-if="data[col]?.label !== undefined">{{
-              data[col].label
-            }}</span>
-            <span v-else>{{ data[col] }}</span>
-          </Column>
+              <RendererLink
+                v-if="uniqueKey === col || documentTitle === col"
+                :value="data"
+                :setting="{ path: resourcename.toLocaleLowerCase() }"
+                :fields="[col]"
+              >
+              </RendererLink>
+              <span v-else-if="typeof schemacols[col].enum != 'undefined'">
+                {{ t(data[col]) }}
+              </span>
+              <span v-else-if="schemacols[col].type == 'boolean'">
+                <RendererBoolean v-model="data[col]" />
+              </span>
+              <RendererForeignKey
+                v-else-if="schemacols[col]['x-foreignkey']"
+                v-model="data[col]"
+                :setting="{ collection: schemacols[col]['x-foreignkey'] }"
+              >
+                {{ data[col]?.label ?? data[col]?.code ?? data[col] }}
+              </RendererForeignKey>
+              <span v-else-if="data[col]?.label !== undefined">{{
+                data[col].label
+              }}</span>
+              <span v-else>{{ data[col] }}</span>
+            </Column>
+          </template>
         </slot>
       </template>
     </ListDocumentTable>
   </div>
-  <OverlaySideBarCrud
+  <OverlayPanelWithToolBar
     v-model="showDialog"
     :closeEventName="doc.getDocName()"
-    #default
-    ><slot name="default">
-      <NuxtPage :_id="id"></NuxtPage>
-    </slot>
-  </OverlaySideBarCrud>
+    :dismissable="false"
+    :position="sidebarposition"
+  >
+    <template #headerLeft>
+      <ButtonText @click="showDialog = false">
+        <i class="pi pi-times"></i>
+      </ButtonText>
+    </template>
+    <template #headerCenter>
+      <TextTitle class="text-center text-white">{{
+        t(doc.getDocName())
+      }}</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>
+        
+    </template>
+
+    <div class="p-2">
+      <slot name="default">
+        <NuxtPage :_id="id"></NuxtPage>
+      </slot>
+    </div>
+  </OverlayPanelWithToolBar>
 </template>
 
 <script setup lang="ts" generic="T extends { [key: string]: any }">
@@ -89,14 +135,16 @@ import { ref } from "vue";
 import _ from "lodash";
 import { SearchBody } from "~/types";
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
+const sidebarposition = ref('right')
 const props = defineProps<{
   document: SimpleAppClient<any, any>;
   data: T;
+  dismissable?: boolean;
   columns: string[];
   mobileColumns?: string[];
   sorts?: string[][];
 }>();
-
+const maxcolumns = 16;
 const emits = defineEmits(["selectRow"]);
 const id = computed(() => getPathPara("id"));
 const resourcename = ref(_.upperFirst(props.document.getDocName()));
@@ -115,7 +163,13 @@ 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 schemacols = doc.getSchema().properties;
+const getCssClass = (col: string) => {
+  if (schemacols[col]?.type == "number") return "text-right";
+  else if (schemacols[col]?.type == "boolean")
+    return "text-center place-items-center";
+  else return "text-left";
+};
 const refresh = () => {
   const searchbody: SearchBody = {
     fields: props.columns,
@@ -154,7 +208,7 @@ watch(showDialog, () => {
 watch(
   () => useRoute().path,
   async () => {
-    if(!isMobile()){
+    if (!isMobile()) {
       if (getPathPara("id")) {
         showDialog.value = true;
       } else {

package/templates/nuxt/components/select/SelectTemplate.vue.eta

@@ -1,11 +1,15 @@
 <template>
   <div>
-    <div class="flex flex-row ">
+    <div class="flex flex-row">
       <label v-if="!hideLabel" :for="fieldid" class="pt-2">
-      {{t(documentName)}}
+        {{ t(documentName) }}
       </label>
-      <ButtonText v-if="allowAddNew" @click="addnew" class="text-xs text-blue-600">
-        <span>{{t('new')}}</span>
+      <ButtonText
+        v-if="allowAddNew"
+        @click="addnew"
+        class="text-xs text-blue-600"
+      >
+        <span>{{ t("new") }}</span>
       </ButtonText>
     </div>
     <MultiSelect
@@ -20,7 +24,6 @@
       :placeholder="placeholder"
     />
     <Dropdown
-
       :input-id="fieldid"
       v-else
       @update:modelValue="change"
@@ -40,20 +43,25 @@
  * Author: Ks Tan
  */
 import Dropdown from "primevue/dropdown";
-import { ForeignKey, FormCrudEvent } from "~/types";
+
+import { ForeignKey,SimpleAppDocuments, FormCrudEvent } from "~/types";
 const emits = defineEmits(["change"]);
-const modelValue = defineModel<string | string[]>();
-const list = ref<ForeignKey[]>([]);
-const fieldid = randomUUID()
+
 const props = defineProps<{
-  documentName: string;
+  documentName: SimpleAppDocuments;
   placeholder?: string;
   showNull?: boolean;
   allowAddNew?: boolean;
   filter?: any;
   multiple?: boolean;
-  hideLabel?:boolean
+  hideLabel?: boolean;
 }>();
+// const initvalue = props.multiple==true ? [] : ''
+const modelValue = defineModel<string | string[]>();
+
+const list = ref<ForeignKey[]>([]);
+const fieldid = randomUUID();
+
 const options = ref<
   {
     value: string;
@@ -79,30 +87,34 @@ onMounted(async () => {
 });
 const getItem = (id: string) => list.value?.find((item) => item._id == id);
 
-const change = (id: string) => {
+const change = (id: string|string[]) => {
   const selectedItem = getItem(id);
   emits("change", id, selectedItem);
-  
 };
 
-const addnew=()=>{
-  
-    const doc = getDocument(props.documentName)?.docClass;
-    if (doc) {
-      const tmpdata = doc?.getReactiveData();
-      type DataType = typeof tmpdata.value;
-      onScreenAddDocument<DataType>(
-        props.documentName,
-        undefined,
-        async (eventType: FormCrudEvent, data: DataType) => {
-          if (eventType == FormCrudEvent.create) {
-            await getListOptions();
-            modelValue.value = data._id;
-            emits("change", data._id, getItem(data._id));
+const addnew = () => {
+  const doc = getDocument(props.documentName )?.docClass;
+  if (doc) {
+    const tmpdata = doc?.getReactiveData();
+    type DataType = typeof tmpdata.value;
+    onScreenAddDocument<DataType>(
+      props.documentName ,
+      undefined,
+      async (eventType: FormCrudEvent, data: DataType) => {
+        if (eventType == FormCrudEvent.create) {
+          await getListOptions();
+          if(props.multiple) {
+            if(modelValue.value===undefined) modelValue.value=[data._id]
+            else if(Array.isArray(modelValue.value))
+                modelValue.value.push(data._id);
+
+
           }
-        },
-      );
-   
+          else modelValue.value = data._id;
+          emits("change", data._id, getItem(data._id));
+        }
+      },
+    );
   }
-}
+};
 </script>

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

@@ -1,7 +1,41 @@
 <template>
-  <div v-if="!readonly" class="relative">
+  <div
+    v-if="readonly"
+    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40"
+  >
+    <button
+      :readonly="readonly"
+      class="cursor-pointer text-primary-600 dark:text-primary-400"
+      tabindex="0"
+      @click="openViewer(true)"
+      >{{ modelValue && modelValue.label ? modelValue.label : "-" }}</button
+    >
+  </div>
+  <div
+    v-else-if="modelValue !== undefined"
+    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40 relative"
+  >
+    <button
+      ref="autocompleteinput"
+      readonly
+      class="cursor-pointer text-primary-600 dark:text-primary-400"
+      
+      @click="openViewer(true)"
+      >{{ modelValue && modelValue.label ? modelValue.label : "-" }}</button>
+
+    <div
+      class="absolute h-full top-0 right-0 text-right text-white z-10 align-middle p-3"
+    >
+      <button
+        class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
+        @click="clear" tabindex="0"
+
+      ></button>
+    </div>
+  </div>
+  <div v-else class="relative">
     <div
-      class="absolute h-full top-0 right-10 text-right dark:text-white z-10 align-middle p-3"
+      class="absolute h-full top-0 right-10 text-right text-white z-10 align-middle p-3"
       v-if="modelValue?._id"
     >
       <span
@@ -24,14 +58,15 @@
       :dropdown="true"
       @clear="clear"
       :dropdown-mode="'current'"
+      :readonly="readonly"
       :pt="pt"
       :delay="500"
       :disabled="readonly"
+      @click="clickAutocomplete"
       :suggestions="list"
       @blur="onBlurAutocomplete"
       :inputId="inputId"
       :path="setting.instancepath"
-      :readonly="readonly"
     >
       <template #header>
         <slot name="header">
@@ -46,7 +81,7 @@
       </template>
       <template #option="{ index, option }">
         <slot name="option" :index="index" :option="option">
-          <div class="flex flex-row text-white">
+          <div class="flex flex-row dark:text-white">
             <div class="w w-1/3">{{ option.code }}</div>
             <div class="w w-2/3">{{ option.label }}</div>
           </div>
@@ -91,7 +126,7 @@
             <i class="pi pi-plus"></i>
             </ButtonText>  -->
             </template>
-          </mobile-toolbar>          
+          </mobile-toolbar>
           <ListView
             :list="list"
             :withFilter="true"
@@ -124,18 +159,6 @@
       </OverlaySideBarCrud>
     </div>
   </div>
-  <div
-    v-else
-    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40"
-  >
-    <span
-      :readonly="readonly"
-      class="cursor-pointer text-primary-600 dark:text-primary-400"
-      tabindex="0"
-      @click="openViewer(true)"
-      >{{ modelValue && modelValue.label ? modelValue.label : "-" }}</span
-    >
-  </div>
 </template>
 <script setup lang="ts">
 /**
@@ -368,4 +391,9 @@ const afterRenderMobileForm = async (
     mobileVisible.value = false;
   }
 };
+
+const clickAutocomplete = (a, b) => {
+  console.log("clickAutocomplete", a, b);
+  return false;
+};
 </script>