Merge pull request #108 from gormurad/develop

Develop

Author: NavidMitchell

structures-frontend-next/package-lock.json

@@ -59,6 +59,16 @@ class CrudTable extends Vue {
   @Prop({ default: false }) enableViewSwitcher!: boolean
   @Prop({ default: 'No items yet' }) emptyStateText!: string
   @Prop({ default: '' }) search!: string
+  @Prop({ default: true }) showPagination!: boolean
+@Prop({ default: true }) enableRowHover!: boolean;
+
+getRowClass() {
+  return {
+    'dynamic-hover': this.enableRowHover,
+    'transition-all': true,
+  };
+}
+
 
   items: DescriptiveIdentifiable[] = []
   totalItems = 0
@@ -97,6 +107,8 @@ class CrudTable extends Vue {
   }
 
   mounted() {
+    console.log(this.showPagination, "VVVVVVVVVVVVVVVVV")
+    console.log(this.items.length, "kasjdlsajdksajdl")
     const urlSearch = (this.$route.query.search as string) || ''
     this.loading = true
     this.initialSearchCompleted = false
@@ -205,7 +217,10 @@ class CrudTable extends Vue {
         this.totalItems = page.totalElements ?? 0
         this.items = page.content ?? []
         this.initialSearchCompleted = true
+
+        this.$emit('items-count', this.items.length)
       })
+
       .catch((error: unknown) => {
         console.error('[CRUD Table Alert]:', error)
         this.loading = false
@@ -223,20 +238,21 @@ export default toNative(CrudTable)
       <template #start>
         <IconField class="w-full max-w-sm">
           <InputIcon class="pi pi-search" />
-          <InputText v-model="searchText" placeholder="Search" @input="onSearchChange" @keyup.enter="find" />
+          <InputText v-model="searchText" placeholder="Search" size="small" @input="onSearchChange"
+            @keyup.enter="find" />
         </IconField>
       </template>
 
       <template #end>
         <div class="flex items-center gap-2 h-[33px]">
-          <SelectButton v-if="enableViewSwitcher" v-model="activeView" :options="viewOptions" optionValue="value"
-            dataKey="value" class="h-[33px]">
+          <SelectButton size="small" v-if="enableViewSwitcher" v-model="activeView" :options="viewOptions"
+            optionValue="value" dataKey="value">
             <template #option="slotProps">
               <i :class="slotProps.option.icon"></i>
             </template>
           </SelectButton>
-          <Button v-if="!disableModifications && isShowAddNew" @click="addItem" :label="createNewButtonText"
-            icon="pi pi-plus" class="h-[33px]" />
+          <Button size="small" v-if="!disableModifications && isShowAddNew" @click="addItem"
+            :label="createNewButtonText" icon="pi pi-plus" />
         </div>
       </template>
     </Toolbar>
@@ -245,38 +261,56 @@ export default toNative(CrudTable)
       <div v-if="isColumnView">
         <div v-if="items.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
           <Card v-for="(item, index) in items" :key="item.id || index"
-            class="cursor-pointer hover:shadow-md transition-shadow h-[152px] flex flex-col justify-between"
+            class="cursor-pointer relative hover:shadow-md transition-shadow h-[170px] flex flex-col justify-between"
             @click="handleCardClick(item, index)">
+            <template #title>
+              <h3 class="">{{ item?.id }}</h3>
+            </template>
+
             <template #content>
-              <div>
-                <h3 class="font-semibold text-[#101010] mb-1">{{ item?.id }}</h3>
-                <p class="text-sm text-gray-500 truncate">{{ item?.description }}</p>
-              </div>
-              <div class="flex gap-2 mt-3">
-                <Button severity="secondary" text class="p-2"
+              <p class="truncate-multiline max-h-[46px]">{{ item?.description }}</p>
+
+            </template>
+
+            <template #footer>
+              <div class="flex p-5 gap-4 absolute bottom-0 left-0">
+                <Button severity="secondary" text class="!p-0"
                   @click.stop="$router.push({ path: '/graphql', query: { namespace: item.id } })">
                   <img src="@/assets/graphql.svg" alt="GraphQL" class="w-5 h-5" />
                 </Button>
-                <Button severity="secondary" text class="p-2"
+                <Button severity="secondary" text class="!p-0"
                   @click.stop="$router.push('/scalar-ui.html?namespace=' + item.id)">
                   <img src="@/assets/scalar.svg" alt="OpenAPI" class="w-5 h-5" />
                 </Button>
               </div>
             </template>
           </Card>
+
         </div>
         <div v-else class="flex flex-col items-center justify-center text-gray-500 py-20 h-[calc(100vh-300px)]">
           <p class="text-sm">{{ emptyStateText }}</p>
         </div>
 
         <Paginator :rows="options.rows" :totalRecords="totalItems" @page="onPaginatorPage" class="mt-4"
-          v-if="items.length !== 0" />
+          v-if="showPagination" />
       </div>
 
       <div v-if="isBurgerView" class="p-4 border text-[color:var(--surface-200)] rounded-xl">
-        <DataTable :value="items" :rows="options.rows" :totalRecords="totalItems" :loading="loading"
-          :paginator="items.length > 0" :first="options.first" :rowsPerPageOptions="[5, 10, 20]" dataKey="id"
-          @page="onDataTablePage" @row-click="onRowClick" sortMode="multiple" table>
+ <DataTable 
+    :value="items" 
+    :rows="options.rows" 
+    :totalRecords="totalItems" 
+    :loading="loading"
+    :paginator="showPagination" 
+    :first="options.first" 
+    :rowsPerPageOptions="[5, 10, 20]" 
+    dataKey="id"
+    @page="onDataTablePage"
+    @row-click="onRowClick" 
+    sortMode="multiple"
+    :rowClass="getRowClass"
+    
+  >
           <Column v-for="col in computedHeaders" :key="col.field" :field="col.field" :header="col.header"
             :sortable="col.sortable !== false">
             <template #body="slotProps">
@@ -316,4 +350,17 @@ export default toNative(CrudTable)
   border: none !important;
   box-shadow: none !important;
 }
+
+.truncate-multiline {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dynamic-hover:hover {
+  cursor: pointer;
+  background-color: var(--row-hover-color, #eff6ff) !important;
+  transition: background-color 0.3s ease !important;
+}
 </style>

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

@@ -7,6 +7,7 @@ import type { IDataSource, Identifiable, IterablePage, Pageable } from '@kinotic
 import { APPLICATION_STATE } from '@/states/IApplicationState'
 import { Project, Structures } from '@kinotic/structures-api'
 import type { CrudHeader } from '@/types/CrudHeader'
+import DatetimeUtil from "@/util/DatetimeUtil"
 
 @Component({
   components: { CrudTable, NewProjectSidebar, ProjectStructuresTable }
@@ -63,7 +64,7 @@ export default class ProjectList extends Vue {
   get projectsCount() {
     return APPLICATION_STATE.projectsCount
   }
-
+  public DatetimeUtil = DatetimeUtil
   refreshTable(): void {
     this.crudTable?.find?.()
   }
@@ -140,11 +141,16 @@ export default class ProjectList extends Vue {
       createNewButtonText="New Project"
       emptyStateText="No projects yet"
       :isShowAddNew="true"
+      class="!text-sm"
     >
       <template #item.id="{ item }">
         <span>{{ item.id }}</span>
       </template>
-
+      <template #item.updated="{ item }">
+        <span>
+          {{ DatetimeUtil.formatRelativeDate(item.updated) }}
+        </span>
+      </template>
       <template #additional-actions="{ item }">
         <Button text class="!text-[#334155] !bg-white" title="GraphQL">
           <RouterLink :to="{ path: '/graphql', query: { namespace: item.id } }">

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

@@ -6,6 +6,7 @@ import { Structure, Structures } from '@kinotic/structures-api'
 import type { CrudHeader } from '@/types/CrudHeader'
 import { APPLICATION_STATE } from '@/states/IApplicationState'
 import type { Identifiable, IterablePage, Pageable } from '@kinotic/continuum-client'
+import DatetimeUtil from "@/util/DatetimeUtil"
 
 @Component({
   components: { CrudTable, StructureItemModal }
@@ -30,6 +31,7 @@ export default class ProjectStructuresTable extends Vue {
   showModal = false
   selectedStructure: Structure | null = null
   isInitialized = false
+  public DatetimeUtil = DatetimeUtil
 
   mounted() {
     this.searchText = (this.$route.query['search-structure'] as string) || ''
@@ -137,10 +139,21 @@ export default class ProjectStructuresTable extends Vue {
       @onRowClick="handleRowClick"
       createNewButtonText="New Structure"
       emptyStateText="No structures yet for this project"
+      class="!text-sm"
     >
       <template #item.name="{ item }">
         <span class="font-semibold">{{ item.name }}</span>
       </template>
+      <template #item.created="{ item }">
+        <span>
+          {{ DatetimeUtil.formatMonthDayYear(item.created) }}
+        </span>
+      </template>
+      <template #item.updated="{ item }">
+        <span>
+          {{ DatetimeUtil.formatRelativeDate(item.updated) }}
+        </span>
+      </template>
       <template #item.description="{ item }">
         <span>{{ item.description }}</span>
       </template>

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

@@ -46,7 +46,7 @@ export default class Sidebar extends Vue {
 
   navigateTo(path: string) {
     if (this.route.path !== path) {
-      this.router.push(path)
+      this.router.push(path) 
     }
   }
 
@@ -70,38 +70,33 @@ export default class Sidebar extends Vue {
         })) as Array<{ icon: string; label: string; path: string }>
     }
   }
+
+  isActive(path: string): boolean {
+    return this.route.path === path
+  }
 }
 </script>
 
 <template>
-  <div
-    :class="[
-      'bg-surface-50 fixed top-[64px] left-0 z-40 flex flex-col justify-between px-4 py-4 h-[calc(100vh-64px)]',
-      'transition-[width] duration-300 ease-in-out',
-      collapsed ? 'w-[64px]' : 'w-[256px]'
-    ]"
-  >
-    <div class="flex flex-col gap-2 w-full">
-      <SidebarItem
-        v-for="item in sidebarItems"
-        :key="item.path"
-        :icon="item.icon"
-        :label="item.label"
-        :collapsed="collapsed"
-        @click="navigateTo(item.path)"
-      />
-    </div>
+  <div class="p-2 fixed rounded-xl top-[64px] left-0 z-40 h-[calc(100vh-64px)]"
+    :class="[collapsed ? 'w-[64px]' : 'w-[256px]']">
+    <div :class="['bg-surface-50 rounded-xl flex flex-col justify-between px-4 py-4 h-full', 'transition-[width] duration-300 ease-in-out w-full']">
+      <div class="flex flex-col w-full">
+        <SidebarItem
+          v-for="item in sidebarItems"
+          :key="item.path"
+          :icon="item.icon"
+          :label="item.label"
+          :collapsed="collapsed"
+          :path="item.path"
+          :isActive="isActive(item.path)"
+          @click="navigateTo(item.path)"
+        />
+      </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 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>
     </div>
   </div>
 </template>

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

@@ -1,31 +1,42 @@
-<!-- SidebarItem.vue -->
 <script setup lang="ts">
 import { computed } from 'vue'
 
 const props = defineProps<{
   icon: string,
   label: string,
   collapsed: boolean,
-  textColor?: string
+  textColor?: string,
+  path: string,
+  isActive: boolean
 }>()
 
-const textClass = computed(() => props.textColor ?? 'text-black')
+const textClass = computed(() => {
+  return props.isActive ? 'text-surface-800' : 'text-surface-500';
+});
+
+const iconClass = computed(() => {
+  return props.isActive ? 'text-primary-500' : 'text-surface-500';
+});
 </script>
 
 <template>
   <div
-    class="flex items-center px-[10px] py-[9px] mb-[7px] cursor-pointer w-full rounded-md hover:bg-gray-200 transition-colors duration-200"
+    :class="[
+      'flex items-center py-[9px] cursor-pointer w-full rounded-md hover:bg-surface-200 p-2 transition-colors duration-200', 
+      props.isActive ? '' : 'bg-transparent'
+    ]"
+    @click="$emit('click')"
   >
     <div class="min-w-[20px] flex justify-center">
-      <i :class="['pi', icon, 'text-base']" />
+      <i :class="['pi', icon, 'text-base', iconClass]" />
     </div>
     <div class="w-[8px]"></div>
     <div class="overflow-hidden">
       <span
-        :class="[
-          'inline-block whitespace-nowrap text-sm font-normal transform transition-all duration-300 origin-left',
-          textClass,
-          collapsed ? 'opacity-0 scale-x-0' : 'opacity-100 scale-x-100'
+        :class="[ 
+          'inline-block whitespace-nowrap text-sm font-normal transform transition-all duration-300 origin-left', 
+          textClass, 
+          props.collapsed ? 'opacity-0 scale-x-0' : 'opacity-100 scale-x-100'
         ]"
       >
         {{ label }}