forked from jsnbuchanan/crowd-funder-for-time-pwa
Fix duplicate export declarations and migrate ContactsView with sub-components
- Remove duplicate NOTIFY_INVITE_MISSING and NOTIFY_INVITE_PROCESSING_ERROR exports - Update InviteOneAcceptView.vue to use correct NOTIFY_INVITE_TRUNCATED_DATA constant - Migrate ContactsView to PlatformServiceMixin and extract into modular sub-components - Resolves TypeScript compilation errors preventing web build
This commit is contained in:
75
src/components/ContactListHeader.vue
Normal file
75
src/components/ContactListHeader.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<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="$emit('toggle-all-selection')"
|
||||
/>
|
||||
<button
|
||||
v-if="!showGiveNumbers"
|
||||
:class="copyButtonClass"
|
||||
:disabled="copyButtonDisabled"
|
||||
data-testId="copySelectedContactsButtonTop"
|
||||
@click="$emit('copy-selected')"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
<font-awesome
|
||||
icon="circle-info"
|
||||
class="text-2xl text-blue-500 ml-2"
|
||||
@click="$emit('show-copy-info')"
|
||||
/>
|
||||
</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="$emit('toggle-give-totals')"
|
||||
>
|
||||
{{ 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="$emit('toggle-show-actions')"
|
||||
>
|
||||
{{ showActionsButtonText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } 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>;
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user