chore: pet transfer enchancements

api-node/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klinok/api-node",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "private": true,
   "type": "module",
   "main": "./dist/server.js",

e2e/pet-transfer.spec.ts

@@ -479,6 +479,11 @@ test("pet card moves in both directions through one overlay flow", async ({ brow
   await ownerBPage.setViewportSize({ width: 390, height: 844 });
   await expect(ownerBPage.locator(".transfer-table thead")).toBeHidden();
   expect(await ownerBPage.locator(".pet-transfer-manager").evaluate((element) => element.scrollWidth <= element.clientWidth + 1)).toBe(true);
+  const mobileStatusCell = await incomingRow.locator("td").nth(3).boundingBox();
+  const mobileActionsCell = await incomingRow.locator("td").nth(5).boundingBox();
+  expect(mobileStatusCell).not.toBeNull();
+  expect(mobileActionsCell).not.toBeNull();
+  expect(Math.abs(mobileStatusCell!.y - mobileActionsCell!.y)).toBeLessThanOrEqual(1);
   await incomingRow.getByRole("button", { name: "Принять передачу" }).click();
   const staleAcceptance = ownerBPage.getByRole("alertdialog", { name: "Принять передачу питомца?" });
   await expect(staleAcceptance).toBeVisible();

package.json

@@ -1,7 +1,7 @@
 {
   "name": "klinok",
   "private": true,
-  "version": "0.14.2",
+  "version": "0.14.3",
   "type": "module",
   "workspaces": [
     "api-node",

packages/contracts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klinok/contracts",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "private": true,
   "type": "module",
   "main": "./dist/index.js",

src/components/PetTransferManager.vue

@@ -265,7 +265,7 @@ async function cancelTransfer() {
       <table class="owner-access-table transfer-table">
         <thead><tr><th>Питомец</th><th>Текущий владелец</th><th>Новый владелец</th><th>Статус</th><th>Создан</th><th>Действия</th></tr></thead>
         <tbody>
-          <tr v-for="request in pagedRows" :key="request.transferRequestId">
+          <tr v-for="request in pagedRows" :key="request.transferRequestId" :class="{ 'transfer-row-has-actions': request.status === 'pending' }">
             <td data-label="Питомец"><strong>{{ request.petSpecies }} {{ request.petName }}</strong><small>{{ request.petId }}</small></td>
             <td data-label="Текущий владелец"><PersonIdentity :display-name="ownerDisplayName(request.fromOwnerDisplayName, request.fromOwnerAccountId)" :account-id="request.fromOwnerAccountId" /></td>
             <td data-label="Новый владелец"><PersonIdentity :display-name="ownerDisplayName(request.toOwnerDisplayName, request.toOwnerAccountId)" :account-id="request.toOwnerAccountId" /></td>
@@ -318,7 +318,7 @@ async function cancelTransfer() {
       </form>
     </ModalDialog>
 
-    <ConfirmationDialog v-model="rejectOpen" title="Отклонить запрос передачи?" :description="rejectTarget ? `Передача питомца ${rejectTarget.petName} не состоится.` : ''" confirm-label="Отклонить запрос" :error="rejectError" :busy="decisionBusy" :confirm-disabled="rejectStale" @confirm="rejectTransfer" />
+    <ConfirmationDialog v-model="rejectOpen" title="Отклонить запрос передачи?" :description="rejectTarget ? `Передача питомца ${rejectTarget.petName} не состоится.` : ''" confirm-label="Отклонить запрос" cancel-label="Сохранить запрос" :error="rejectError" :busy="decisionBusy" :confirm-disabled="rejectStale" @confirm="rejectTransfer" />
     <ConfirmationDialog v-model="cancelOpen" title="Отменить запрос передачи?" :description="cancelTarget ? `Запрос передачи питомца ${cancelTarget.petName} будет отменён.` : ''" confirm-label="Отменить запрос" cancel-label="Сохранить запрос" :error="cancelError" :busy="decisionBusy" :confirm-disabled="cancelStale" @confirm="cancelTransfer" />
   </section>
 </template>

src/styles.css

@@ -3438,6 +3438,30 @@ label > input[type="checkbox"] {
   .transfer-table { min-width: 0; }
   .transfer-table :is(th, td):nth-child(4),
   .transfer-table :is(th, td):nth-child(5) { white-space: normal; }
+  .transfer-table tr.transfer-row-has-actions {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .transfer-table tr.transfer-row-has-actions > td { grid-column: 1 / -1; }
+  .transfer-table tr.transfer-row-has-actions > td:nth-child(1) { grid-row: 1; }
+  .transfer-table tr.transfer-row-has-actions > td:nth-child(2) { grid-row: 2; }
+  .transfer-table tr.transfer-row-has-actions > td:nth-child(3) { grid-row: 3; }
+  .transfer-table tr.transfer-row-has-actions > td:nth-child(4) {
+    grid-column: 1;
+    grid-row: 4;
+    grid-template-columns: minmax(76px, .45fr) minmax(0, 1fr);
+  }
+  .transfer-table tr.transfer-row-has-actions > td:nth-child(5) { grid-row: 5; }
+  .transfer-table tr.transfer-row-has-actions > td:nth-child(6) {
+    display: flex;
+    width: auto;
+    grid-column: 2;
+    grid-row: 4;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding-inline-start: 0;
+  }
+  .transfer-table tr.transfer-row-has-actions > td:nth-child(6)::before { display: none; }
   .transfer-review dl > div { grid-template-columns: minmax(104px, .45fr) minmax(0, 1fr); }
 }
 .laboratory-study-create, .laboratory-study-list { display: grid; gap: 1rem; }

tests/petTransfer.spec.ts

@@ -626,6 +626,7 @@ describe("pet transfer request manager", () => {
     ]);
     expect(rows[0]!.findAll(".transfer-row-actions button").map((button) => button.attributes("title")))
       .toEqual(["Принять передачу", "Отклонить запрос передачи"]);
+    expect(rows.every((row) => row.classes().includes("transfer-row-has-actions"))).toBe(true);
 
     await wrapper.get('button[title="Принять передачу"]').trigger("click");
     await flushPromises();
@@ -653,6 +654,18 @@ describe("pet transfer request manager", () => {
     expect(mocks.cancelPetTransfer).toHaveBeenCalledWith("transfer-2");
   });
 
+  it("marks only pending transfer rows for the compact status action layout", () => {
+    state.medical.transferRequests = [
+      transfer(),
+      transfer({ transferRequestId: "transfer-2", status: "rejected" }),
+    ];
+    const wrapper = mount(PetTransferManager, { global: { plugins: [createPinia()] } });
+    const rows = wrapper.findAll(".transfer-table tbody tr");
+
+    expect(rows[0]!.classes()).toContain("transfer-row-has-actions");
+    expect(rows[1]!.classes()).not.toContain("transfer-row-has-actions");
+  });
+
   it("shows the new Owner's retained-access choice without letting the current Owner change it", async () => {
     state.medical.transferRequests = [transfer({ retainDoctorAccess: true })];
     const wrapper = mount(PetTransferManager, { global: { plugins: [createPinia()] } });
@@ -758,7 +771,9 @@ describe("pet transfer request manager", () => {
     await wrapper.get('[role="alertdialog"] button[title="Отмена"]').trigger("click");
     expect(wrapper.find('[role="alertdialog"]').exists()).toBe(false);
     await wrapper.get('button[title="Отклонить запрос передачи"]').trigger("click");
-    await wrapper.get('[role="alertdialog"] button.outline-action').trigger("click");
+    const rejectionDialog = wrapper.get('[role="alertdialog"]');
+    expect(rejectionDialog.get("button.outline-action").text()).toBe("Сохранить запрос");
+    await rejectionDialog.get("button.outline-action").trigger("click");
     expect(wrapper.find('[role="alertdialog"]').exists()).toBe(false);
     await wrapper.get('button[title="Отменить запрос передачи"]').trigger("click");
     const cancellationDialog = wrapper.get('[role="alertdialog"]');