refactor(review): rollback-only flow and compact change summary

This commit is contained in:
Ruslan Bakiev
2026-02-23 15:28:46 +07:00
parent f716a0ea26
commit df8c06d313
3 changed files with 51 additions and 132 deletions

View File

@@ -12,25 +12,20 @@ const props = defineProps<{
activeChangeStepNumber: number;
activeChangeItems: ChangeItem[];
activeChangeItem: ChangeItem | null;
activeChangeApproved: boolean;
activeChangeIndex: number;
selectedRollbackCount: number;
rollbackableCount: number;
changeActionBusy: boolean;
describeChangeEntity: (entity: string) => string;
describeChangeAction: (action: string) => string;
isReviewItemApproved: (item: ChangeItem | null | undefined) => boolean;
}>();
const emit = defineEmits<{
(e: "close"): void;
(e: "active-approval-change", event: Event): void;
(e: "item-approval-change", payload: { itemId: string; event: Event }): void;
(e: "open-item-target", item: ChangeItem): void;
(e: "rollback-item", itemId: string): void;
(e: "rollback-all"): void;
(e: "prev-step"): void;
(e: "next-step"): void;
(e: "approve-all"): void;
(e: "mark-all-rollback"): void;
(e: "rollback-selected"): void;
(e: "done"): void;
}>();
</script>
@@ -58,23 +53,13 @@ const emit = defineEmits<{
{{ props.describeChangeEntity(props.activeChangeItem.entity) }}
{{ props.describeChangeAction(props.activeChangeItem.action) }}
</p>
<label class="mt-1 inline-flex items-center gap-2 text-xs">
<input
type="checkbox"
class="checkbox checkbox-xs"
:checked="props.activeChangeApproved"
:disabled="props.activeChangeItem.rolledBack"
@change="emit('active-approval-change', $event)"
>
<span>{{ props.activeChangeItem.rolledBack ? "Already rolled back" : "Approve this step" }}</span>
</label>
</div>
<div class="mt-2 max-h-40 space-y-1 overflow-y-auto pr-1">
<div
v-for="(item, index) in props.activeChangeItems"
:key="`review-step-${item.id}`"
class="flex items-center gap-2 rounded-lg border px-2 py-1"
class="group flex items-center gap-2 rounded-lg border px-2 py-1"
:class="index === props.activeChangeIndex ? 'border-primary/45 bg-primary/10' : 'border-base-300 bg-base-100'"
>
<button
@@ -88,13 +73,15 @@ const emit = defineEmits<{
{{ props.describeChangeEntity(item.entity) }}
</p>
</button>
<input
type="checkbox"
class="checkbox checkbox-xs"
:checked="props.isReviewItemApproved(item)"
:disabled="item.rolledBack"
@change="emit('item-approval-change', { itemId: item.id, event: $event })"
<button
v-if="!item.rolledBack"
class="btn btn-ghost btn-xs opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
:disabled="props.changeActionBusy"
@click="emit('rollback-item', item.id)"
>
Rollback
</button>
<span v-else class="text-[10px] font-medium uppercase tracking-wide text-warning">Rolled back</span>
</div>
</div>
@@ -116,19 +103,17 @@ const emit = defineEmits<{
</button>
</div>
<p class="text-[11px] text-base-content/70">
Rollback marked: {{ props.selectedRollbackCount }}
Rollback available: {{ props.rollbackableCount }}
</p>
</div>
<div class="mt-2 flex flex-wrap gap-2">
<button class="btn btn-xs btn-outline" @click="emit('approve-all')">Approve all</button>
<button class="btn btn-xs btn-outline" @click="emit('mark-all-rollback')">Mark all rollback</button>
<button
class="btn btn-xs btn-warning"
:disabled="props.changeActionBusy || props.selectedRollbackCount === 0"
@click="emit('rollback-selected')"
:disabled="props.changeActionBusy || props.rollbackableCount === 0"
@click="emit('rollback-all')"
>
{{ props.changeActionBusy ? "Applying..." : "Rollback selected" }}
{{ props.changeActionBusy ? "Applying..." : "Rollback all" }}
</button>
<button class="btn btn-xs btn-primary ml-auto" @click="emit('done')">Done</button>
</div>