refactor(review): rollback-only flow and compact change summary
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user