#2490: added support for multiple project cards per row instead of th…

…e legacy table
NationalSecurityAgency · Jun 11, 2024 · 82b6ba9 · 82b6ba9
1 parent dbd2702
commit 82b6ba9
Show file tree

Hide file tree

Showing 11 changed files with 286 additions and 798 deletions.
diff --git a/dashboard-prime/src/common-components/stores/UseAppConfig.js b/dashboard-prime/src/common-components/stores/UseAppConfig.js
@@ -85,7 +85,6 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
   const expireUnusedProjectsOlderThan = computed(() => config.value.expireUnusedProjectsOlderThan)
   const minimumProjectPoints = computed(() => config.value.minimumProjectPoints)
   const maxProjectsPerAdmin = computed(() => config.value.maxProjectsPerAdmin)
-  const numProjectsForTableView = computed(() => config.value.numProjectsForTableView)
   const minimumSubjectPoints = computed(() => config.value.minimumSubjectPoints)
   const maxSubjectsPerProject = computed(() => config.value.maxSubjectsPerProject)
   const userCommunityBeforeLabel = computed(() => config.value.userCommunityBeforeLabel || '')
@@ -123,6 +122,7 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
   const minUsernameLength = computed(() => config.value.minUsernameLength)
   const minPasswordLength = computed(() => config.value.minPasswordLength)
   const maxPasswordLength = computed(() => config.value.maxPasswordLength)
+  const numProjectsToStartShowingAsCards = computed(() => config.value.numProjectsToStartShowingAsCards)
   return {
     loadConfigState,
     refreshConfig,
@@ -166,7 +166,6 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
     expireUnusedProjectsOlderThan,
     minimumProjectPoints,
     maxProjectsPerAdmin,
-    numProjectsForTableView,
     minimumSubjectPoints,
     maxSubjectsPerProject,
     userCommunityBeforeLabel,
@@ -204,5 +203,6 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
     minUsernameLength,
     minPasswordLength,
     maxPasswordLength,
+    numProjectsToStartShowingAsCards,
   }
 })
diff --git a/dashboard-prime/src/components/projects/MyProject.vue b/dashboard-prime/src/components/projects/MyProject.vue
@@ -18,12 +18,14 @@ import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
 import ReminderMessage from '@/components/utils/misc/ReminderMessage.vue'
 import { useNumberFormat } from '@/common-components/filter/UseNumberFormat.js'
 import ProjectExpirationWarning from '@/components/projects/ProjectExpirationWarning.vue'
+import { useAdminProjectsState } from '@/stores/UseAdminProjectsState.js'
 
 const props = defineProps(['project', 'disableSortControl'])
 const appConfig = useAppConfig()
 const accessState = useAccessState()
 const emit = defineEmits(['project-deleted', 'copy-project', 'pin-removed', 'sort-changed-requested'])
 const numberFormat = useNumberFormat()
+const projectsState = useAdminProjectsState()
 const announcer = useSkillsAnnouncer()
 
 // data items
@@ -169,7 +171,11 @@ defineExpose({
   <div data-cy="projectCard" class="h-100">
     <Card :data-cy="`projectCard_${projectInternal.projectId}`" class="relative">
       <template #content>
-        <div class="flex flex-wrap">
+        <div class="flex flex-wrap"
+             :class="{
+            'flex-column gap-1 justify-content-left': projectsState.shouldTileProjectsCards,
+            '': !projectsState.shouldTileProjectsCards
+          }">
           <div class="text-truncate">
             <router-link
                 :to="{ name:'Subjects', params: { projectId: projectInternal.projectId }}"
@@ -317,8 +323,6 @@ defineExpose({
 }
 
 .sort-control:hover, .sort-control i:hover {
-  cursor: grab !important;
-  color: $info !important;
   font-size: 1.5rem;
 }
 </style>