forked from jsnbuchanan/crowd-funder-for-time-pwa
Extract LocationSearchSection as vue-facing-decorator component and integrate into AccountViewView
- Created LocationSearchSection.vue using vue-facing-decorator (class-based, TypeScript, @Component, @Prop, @Emit). - Moved 'Location for Searches' UI and logic into the new component. - Replaced original location section markup in AccountViewView.vue with <LocationSearchSection />. - Passed isRegistered and searchAreaLabel props, and wired up @set-search-area event to a new placeholder openSearchAreaDialog() method. - Added placeholder openSearchAreaDialog() with a TODO for future implementation. - Ensured all linter errors are resolved and code is consistent with project conventions.
This commit is contained in:
28
src/components/LocationSearchSection.vue
Normal file
28
src/components/LocationSearchSection.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<section v-if="isRegistered" class="mt-4">
|
||||
<h2 class="text-lg font-semibold mb-2">Location for Searches</h2>
|
||||
<div class="mb-2" v-if="searchAreaLabel">
|
||||
<span class="text-slate-700">Current Area: </span>
|
||||
<span class="font-mono">{{ searchAreaLabel }}</span>
|
||||
</div>
|
||||
<button
|
||||
class="w-full text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
|
||||
@click="setSearchArea"
|
||||
>
|
||||
Set Search Area...
|
||||
</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop, Emit } from 'vue-facing-decorator';
|
||||
|
||||
@Component({ name: 'LocationSearchSection' })
|
||||
export default class LocationSearchSection extends Vue {
|
||||
@Prop({ required: true }) isRegistered!: boolean;
|
||||
@Prop({ required: false }) searchAreaLabel?: string;
|
||||
|
||||
@Emit('set-search-area')
|
||||
setSearchArea() {}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user