Develop

structures-frontend-next/components.d.ts

@@ -9,22 +9,19 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ApplicationSidebar: typeof import('./src/components/ApplicationSidebar.vue')['default']
-    ArrayNode: typeof import('./src/components/nodes/ArrayNode.vue')['default']
     Breadcrumb: typeof import('./src/components/Breadcrumb.vue')['default']
     Button: typeof import('primevue/button')['default']
     Calendar: typeof import('primevue/calendar')['default']
     Card: typeof import('primevue/card')['default']
     CascadeSelect: typeof import('primevue/cascadeselect')['default']
-    Checkbox: typeof import('primevue/checkbox')['default']
     Column: typeof import('primevue/column')['default']
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     ConfirmDialog: typeof import('primevue/confirmdialog')['default']
-    ConfirmPopup: typeof import('primevue/confirmpopup')['default']
     ContainerMedium: typeof import('./src/components/ContainerMedium.vue')['default']
     CrudEntityAddEdit: typeof import('./src/components/CrudEntityAddEdit.vue')['default']
     CrudTable: typeof import('./src/components/CrudTable.vue')['default']
+    DashboardWidgetCard: typeof import('./src/components/DashboardWidgetCard.vue')['default']
     DataTable: typeof import('primevue/datatable')['default']
-    Dropdown: typeof import('primevue/dropdown')['default']
     EmptyState: typeof import('./src/components/EmptyState.vue')['default']
     EnumNode: typeof import('./src/components/nodes/EnumNode.vue')['default']
     ERTable: typeof import('./src/components/modals/ERTable.vue')['default']
@@ -40,7 +37,6 @@ declare module 'vue' {
     Paginator: typeof import('primevue/paginator')['default']
     Password: typeof import('primevue/password')['default']
     Popover: typeof import('primevue/popover')['default']
-    PrimitiveNode: typeof import('./src/components/nodes/PrimitiveNode.vue')['default']
     ProjectList: typeof import('./src/components/ProjectList.vue')['default']
     ProjectStructuresTable: typeof import('./src/components/ProjectStructuresTable.vue')['default']
     PropertyType: typeof import('./src/components/structures/flow-components/PropertyType.vue')['default']
@@ -52,7 +48,6 @@ declare module 'vue' {
     SideBar: typeof import('./src/components/SideBar.vue')['default']
     SidebarItem: typeof import('./src/components/SidebarItem.vue')['default']
     SideNav: typeof import('./src/components/SideNav.vue')['default']
-    Structure: typeof import('./src/components/structures/flow-components/Structure.vue')['default']
     StructureDataViewModal: typeof import('./src/components/modals/StructureDataViewModal.vue')['default']
     StructureItemModal: typeof import('./src/components/modals/StructureItemModal.vue')['default']
     StructureNode: typeof import('./src/components/structures/flow-components/StructureNode.vue')['default']
@@ -69,7 +64,6 @@ declare module 'vue' {
     Toast: typeof import('primevue/toast')['default']
     ToggleButton: typeof import('primevue/togglebutton')['default']
     Toolbar: typeof import('primevue/toolbar')['default']
-    UnionGroupNode: typeof import('./src/components/nodes/UnionGroupNode.vue')['default']
     UnionNode: typeof import('./src/components/nodes/UnionNode.vue')['default']
   }
 }

structures-frontend-next/src/components/DashboardWidgetCard.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+defineProps<{ title: string; preview: string; draggable?: boolean }>()
+</script>
+
+<template>
+  <div
+    class="border border-[#E6E7EB] rounded-lg p-4 bg-white relative select-none"
+  >
+    <h3 class="text-sm font-semibold mb-2 text-surface-800">{{ title }}</h3>
+    <div class="text-surface-500 text-sm min-h-[40px]">{{ preview }}</div>
+  </div>
+</template>
+
+<style scoped>
+</style>
+
+

structures-frontend-next/src/components/ProjectStructuresTable.vue

@@ -14,6 +14,8 @@ import DatetimeUtil from "@/util/DatetimeUtil"
 })
 export default class ProjectStructuresTable extends Vue {
   @Prop({ required: true }) applicationId!: string
+  @Prop({ required: false, default: false }) showNewStructureButton!: boolean
+  @Prop({ required: false, default: "New Structure" }) newStructureButtonText!: string
   @Ref('crudTable') crudTable!: InstanceType<typeof CrudTable>
 
   get projectId(): string {
@@ -124,7 +126,9 @@ export default class ProjectStructuresTable extends Vue {
   }
 
   handleRowClick(item: Structure) {
-    this.openModal(item)
+    if (item.published) {
+      this.openModal(item)
+    }
   }
 
   toggleMenu(event: Event, item: Structure, index: number) {
@@ -209,10 +213,12 @@ export default class ProjectStructuresTable extends Vue {
       @add-item="onAddItem"
       @edit-item="onEditItem"
       @onRowClick="handleRowClick"
-      createNewButtonText="New Structure"
+      :isShowAddNew="showNewStructureButton"
+      :createNewButtonText="newStructureButtonText"
       emptyStateText="No structures yet for this project"
       class="!text-sm"
     >
+      <!-- createNewButtonText="New Structure" -->
       <template #item.name="{ item }">
         <span class="font-semibold">{{ item.name }}</span>
       </template>

structures-frontend-next/src/components/SideBar.vue

@@ -78,10 +78,10 @@ export default class Sidebar extends Vue {
 </script>
 
 <template>
-  <div class="p-2 fixed rounded-xl top-[64px] left-0 z-40 h-[calc(100vh-64px)]"
-    :class="[collapsed ? 'w-[67px]' : 'w-[256px]']">
-    <div :class="['bg-surface-50 rounded-xl flex flex-col justify-between px-2 py-2 h-full', 'transition-[width] duration-300 ease-in-out w-full']">
-      <div class="flex flex-col w-full">
+  <div class="fixed rounded-xl top-[64px] left-0 z-40 h-[calc(100vh-67px)] pl-[8px] pt-[8px] pb-[8px] box-border"
+    :class="[collapsed ? 'w-[75px]' : 'w-[256px]']">
+    <div :class="['bg-surface-50 rounded-xl flex flex-col justify-between h-full', 'transition-[width] duration-300 ease-in-out w-full box-border', collapsed ? 'px-1 py-2 items-center' : 'px-2 py-2']">
+      <div class="flex flex-col w-full" :class="collapsed ? 'justify-center items-center' : 'pl-[10px]'">
         <SidebarItem
           v-for="item in sidebarItems"
           :key="item.path"
@@ -94,8 +94,8 @@ export default class Sidebar extends Vue {
         />
       </div>
 
-      <div @click="toggleSidebar" class="cursor-pointer p-2 hover:bg-gray-200 rounded-lg transition max-w-max">
-        <img :src="collapsed ? strExpand : strCollapse" alt="Toggle Sidebar" class="w-5 h-5 transition-transform duration-300" :class="collapsed ? 'rotate-180' : ''"/>
+      <div @click="toggleSidebar" class="cursor-pointer p-2 hover:bg-gray-200 rounded-lg transition w-max !pl-3">
+        <img :style="{ width: '14px', height: '14px' }" :src="collapsed ? strExpand : strCollapse" alt="Toggle Sidebar" class="w-5 h-5 transition-transform duration-300" :class="collapsed ? 'rotate-180' : ''"/>
       </div>
     </div>
   </div>

structures-frontend-next/src/components/SidebarItem.vue

@@ -22,19 +22,20 @@ const iconClass = computed(() => {
 <template>
   <div
     :class="[
-      'flex items-center py-[9px] cursor-pointer w-full rounded-md hover:bg-surface-200 px-2 pl-1 transition-colors duration-200',
-      props.isActive ? '' : 'bg-transparent'
+      'flex items-center cursor-pointer w-max pb-2 rounded-md hover:bg-surface-200 pl-1 transition-colors duration-200',
+      props.isActive ? '' : 'bg-transparent', 
+      props.collapsed ? 'justify-center' : 'px-2 '
     ]"
     @click="$emit('click')"
   >
-    <div class="min-w-[20px] flex justify-center items-center">
+    <div class="min-w-[20px] flex justify-center items-center h-[24px]">
       <i
         :class="['pi', icon, props.collapsed ? '' : 'text-base', iconClass]"
-        :style="props.collapsed ? { fontSize: '14px', lineHeight: '14px' } : {}"
+        :style="{ fontSize: '14px', lineHeight: '14px' }"
       />
     </div>
     <div class="w-[8px]"></div>
-    <div class="overflow-hidden">
+    <div v-if="!props.collapsed">
       <span
         :class="[ 
           'inline-block whitespace-nowrap text-sm font-normal transform transition-all duration-300 origin-left', 

structures-frontend-next/src/components/StructuresList.vue

@@ -20,6 +20,8 @@ export default class StructuresList extends Vue {
   @Prop({ required: true }) applicationId!: string;
   @Prop({ required: false, default: undefined }) projectId?: string;
   @Prop({ required: false, default: "" }) initialSearch!: string;
+  @Prop({ required: false, default: false }) showNewStructureButton!: boolean;
+  @Prop({ required: false, default: "New Structure" }) newStructureButtonText!: string;
 
   @Ref("crudTable") crudTable!: InstanceType<typeof CrudTable>;
 
@@ -138,7 +140,9 @@ export default class StructuresList extends Vue {
   }
 
   handleRowClick(item: Structure): void {
-    this.openModal(item);
+    if (item.published) {
+      this.openModal(item);
+    }
   }
 
   onEditItem(item: Identifiable<string>): void {
@@ -221,7 +225,8 @@ export default class StructuresList extends Vue {
       @update:search="updateRouteQuery"
       @edit-item="onEditItem"
       @onRowClick="handleRowClick"
-      createNewButtonText="New Structure"
+      :isShowAddNew="showNewStructureButton"
+      :createNewButtonText="newStructureButtonText"
       class="!text-sm"
       emptyStateText="No structures yet"
     >

structures-frontend-next/src/components/structures/sidebar-dashboard/StructureSettings.vue

@@ -14,6 +14,48 @@ export default class StructureSettings extends Vue {
     {key: 'NONE', name: 'None'},
     {key: 'SHARED', name: 'Shared'}
   ]
+
+  get entityType() {
+    const entityDecorator = this.structureStore.structure?.entityDefinition?.decorators?.find(
+      (d: any) => d.type === 'Entity'
+    ) as any
+    return entityDecorator?.entityType || 'TABLE'
+  }
+
+  set entityType(value: string) {
+    const entityDecorator = this.structureStore.structure?.entityDefinition?.decorators?.find(
+      (d: any) => d.type === 'Entity'
+    ) as any
+    if (entityDecorator) {
+      entityDecorator.entityType = value
+    }
+  }
+
+  get multiTenancyType() {
+    const entityDecorator = this.structureStore.structure?.entityDefinition?.decorators?.find(
+      (d: any) => d.type === 'Entity'
+    ) as any
+    return entityDecorator?.multiTenancyType || 'NONE'
+  }
+
+  set multiTenancyType(value: string) {
+    const entityDecorator = this.structureStore.structure?.entityDefinition?.decorators?.find(
+      (d: any) => d.type === 'Entity'
+    ) as any
+    if (entityDecorator) {
+      entityDecorator.multiTenancyType = value
+    }
+  }
+
+  get description() {
+    return this.structureStore.structure?.description || ''
+  }
+
+  set description(value: string) {
+    if (this.structureStore.structure) {
+      this.structureStore.structure.description = value
+    }
+  }
 }
 </script>
 
@@ -31,7 +73,7 @@ export default class StructureSettings extends Vue {
         >
           <RadioButton
               size="small"
-              v-model="structureStore.structure.entityType"
+              v-model="entityType"
               :inputId="category.key"
               name="category"
               :value="category.key"
@@ -49,7 +91,7 @@ export default class StructureSettings extends Vue {
         >
           <RadioButton
               size="small"
-              v-model="structureStore.structure.multiTenancyType"
+              v-model="multiTenancyType"
               :inputId="access.key"
               name="access"
               :value="access.key"
@@ -61,7 +103,7 @@ export default class StructureSettings extends Vue {
       <div>
         <p class="text-xs font-medium text-gray-500 mb-1">Description</p>
         <Textarea
-            v-model="structureStore.structure.description"
+            v-model="description"
             autoResize
             size="small"
             rows="5" cols="30"