You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.8 KiB
101 lines
2.8 KiB
<template>
|
|
<div class="flex justify-between">
|
|
<!-- Left side - Bulk selection controls -->
|
|
<div class="">
|
|
<div v-if="!showGiveNumbers" class="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
:checked="allContactsSelected"
|
|
class="align-middle ml-2 h-6 w-6"
|
|
data-testId="contactCheckAllTop"
|
|
@click="emitToggleAllSelection"
|
|
/>
|
|
<button
|
|
v-if="!showGiveNumbers"
|
|
:class="copyButtonClass"
|
|
:disabled="copyButtonDisabled"
|
|
data-testId="copySelectedContactsButtonTop"
|
|
@click="emitCopySelected"
|
|
>
|
|
Copy
|
|
</button>
|
|
<font-awesome
|
|
icon="circle-info"
|
|
class="text-2xl text-blue-500 ml-2"
|
|
@click="emitShowCopyInfo"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side - Action buttons -->
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
v-if="showGiveNumbers"
|
|
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
|
|
:class="giveAmountsButtonClass"
|
|
@click="emitToggleGiveTotals"
|
|
>
|
|
{{ giveAmountsButtonText }}
|
|
<font-awesome icon="left-right" class="fa-fw" />
|
|
</button>
|
|
|
|
<button
|
|
class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
|
|
@click="emitToggleShowActions"
|
|
>
|
|
{{ showActionsButtonText }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
|
|
|
|
/**
|
|
* ContactListHeader - Contact list header component
|
|
*
|
|
* Provides bulk selection controls and action buttons for the contact list.
|
|
* Handles copy operations and give amounts display toggles.
|
|
*
|
|
* @author Matthew Raymer
|
|
*/
|
|
@Component({
|
|
name: "ContactListHeader",
|
|
})
|
|
export default class ContactListHeader extends Vue {
|
|
@Prop({ required: true }) showGiveNumbers!: boolean;
|
|
@Prop({ required: true }) allContactsSelected!: boolean;
|
|
@Prop({ required: true }) copyButtonClass!: string;
|
|
@Prop({ required: true }) copyButtonDisabled!: boolean;
|
|
@Prop({ required: true }) giveAmountsButtonText!: string;
|
|
@Prop({ required: true }) showActionsButtonText!: string;
|
|
@Prop({ required: true }) giveAmountsButtonClass!: Record<string, boolean>;
|
|
|
|
// Emit methods using @Emit decorator
|
|
@Emit("toggle-all-selection")
|
|
emitToggleAllSelection() {
|
|
// No parameters needed
|
|
}
|
|
|
|
@Emit("copy-selected")
|
|
emitCopySelected() {
|
|
// No parameters needed
|
|
}
|
|
|
|
@Emit("show-copy-info")
|
|
emitShowCopyInfo() {
|
|
// No parameters needed
|
|
}
|
|
|
|
@Emit("toggle-give-totals")
|
|
emitToggleGiveTotals() {
|
|
// No parameters needed
|
|
}
|
|
|
|
@Emit("toggle-show-actions")
|
|
emitToggleShowActions() {
|
|
// No parameters needed
|
|
}
|
|
}
|
|
</script>
|
|
|