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:
@@ -151,12 +151,11 @@
|
||||
<h2 id="searchLocationHeading" class="mb-2 font-bold">
|
||||
Location for Searches
|
||||
</h2>
|
||||
<router-link
|
||||
:to="{ name: 'search-area' }"
|
||||
class="block w-full text-center 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"
|
||||
>
|
||||
{{ isSearchAreasSet ? "Change" : "Set" }} Search Area…
|
||||
</router-link>
|
||||
<LocationSearchSection
|
||||
:is-registered="isRegistered"
|
||||
:search-area-label="searchAreaLabel"
|
||||
@set-search-area="onSetSearchArea"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<!-- User Profile -->
|
||||
@@ -844,6 +843,7 @@ import UserNameDialog from "../components/UserNameDialog.vue";
|
||||
import DataExportSection from "../components/DataExportSection.vue";
|
||||
import IdentitySection from '@/components/IdentitySection.vue';
|
||||
import RegistrationNotice from '@/components/RegistrationNotice.vue';
|
||||
import LocationSearchSection from '@/components/LocationSearchSection.vue';
|
||||
import {
|
||||
AppString,
|
||||
DEFAULT_IMAGE_API_SERVER,
|
||||
@@ -899,6 +899,7 @@ const inputImportFileNameRef = ref<Blob>();
|
||||
DataExportSection,
|
||||
IdentitySection,
|
||||
RegistrationNotice,
|
||||
LocationSearchSection,
|
||||
},
|
||||
mixins: [PlatformServiceMixin],
|
||||
})
|
||||
@@ -1709,5 +1710,21 @@ export default class AccountViewView extends Vue {
|
||||
// TODO: Implement share dialog logic
|
||||
this.notify.info('Share dialog not yet implemented.');
|
||||
}
|
||||
|
||||
get searchAreaLabel(): string {
|
||||
// Return a string representing the current search area, or blank if not set
|
||||
// Example: return this.searchAreaName || '';
|
||||
return this.isSearchAreasSet ? 'Custom Area Set' : '';
|
||||
}
|
||||
|
||||
onSetSearchArea() {
|
||||
// Call the existing logic for setting the search area, e.g., open the dialog
|
||||
this.openSearchAreaDialog();
|
||||
}
|
||||
|
||||
openSearchAreaDialog() {
|
||||
// TODO: Implement search area dialog logic
|
||||
this.notify.info('Search area dialog not yet implemented.');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user