wip

src/views/HomeView.vue

@@ -9,6 +9,7 @@ import { authClient } from '@/lib/auth-client.ts'
 import type { Issue } from '@/api/issue.api.ts'
 import type { Project } from '@/api/project.api.ts'
 import DashboardCountCard from '@/components/DashboardCountCard.vue'
+import LabelText from '@/components/LabelText.vue'
 
 const ACTIVE_STATUSES: Issue['status'][] = ['OPEN', 'IN_PROGRESS']
 
@@ -177,18 +178,8 @@ function onClickCard(status?: string) {
             </v-card-title>
             <v-divider />
             <v-list v-if="projects.length" density="compact">
-              <v-list-item
-                v-for="project in projects.slice(0, 6)"
-                :key="project.id"
-                class="cursor-pointer"
-                @click="openProject(project)"
-              >
-                <template #prepend>
-                  <v-chip size="small" color="primary" variant="flat" density="compact">{{ project.key }}</v-chip>
-                </template>
-                <template #title>
-                  <span class="ml-2">{{ project.name }}</span>
-                </template>
+              <v-list-item v-for="project in projects.slice(0, 6)" :key="project.id" @click="openProject(project)">
+                <label-text :label="project.key" :text="project.name" />
               </v-list-item>
             </v-list>
             <v-card-text v-else class="text-medium-emphasis">Нет проектов</v-card-text>

src/views/project/ProjectsListView.vue

@@ -21,13 +21,6 @@ const totalPages = ref(0)
 const serverItems = ref<Project[]>([])
 const loading = ref(false)
 
-const headers = [
-  { key: 'key', title: 'Key', sortable: false },
-  { key: 'name', title: 'Name', sortable: false },
-  { key: 'createdAt', title: 'Created', sortable: false },
-  { key: 'actions', title: '', sortable: false, align: 'end' as const },
-]
-
 async function fetch() {
   loading.value = true
   try {
@@ -124,7 +117,6 @@ async function onDelete(project: Project) {
     deletingId.value = null
   }
 }
-
 </script>
 
 <template>
@@ -138,7 +130,12 @@ async function onDelete(project: Project) {
       hover
       hide-default-footer
       :loading="loading"
-      :headers="headers"
+      :headers="[
+        { key: 'key', title: 'Key', sortable: false, width: '8rem' },
+        { key: 'name', title: 'Name', sortable: false },
+        { key: 'createdAt', title: 'Created', sortable: false },
+        { key: 'actions', title: '', sortable: false, align: 'end' as const },
+      ]"
       :items-per-page="itemsPerPage"
       :page="page"
       :items="serverItems"
@@ -147,6 +144,10 @@ async function onDelete(project: Project) {
       @update:options="loadItems"
       @click:row="(_e: unknown, { item }: { item: Project }) => openIssues(item)"
     >
+      <template #[`item.key`]="{ item }">
+        <v-chip size="small" color="primary" variant="flat" density="compact" :text="item.key" />
+      </template>
+
       <template #[`item.createdAt`]="{ item }">
         {{ new Date(item.createdAt).toLocaleDateString('ru-RU') }}
       </template>