bit-badger/jobs-jobs-jobs
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 19 Activity

Standardize on continent list component

Browse Source
This commit is contained in:
Daniel J. Summers 2021-08-14 17:34:13 -04:00
parent 837ab35da5
commit 227713fa26
5 changed files with 23 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/JobsJobsJobs/App/src/components/profile/PublicSearchForm.vue
View File

@ -2,14 +2,8 @@
<form class="container">
<div class="row">
<div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="form-floating">
<select id="continentId" class="form-select" :value="criteria.continentId"
@change="updateValue('continentId', $event.target.value)">
<option value="">&ndash; Any &ndash;</option>
<option v-for="c in continents" :key="c.id" :value="c.id">{{c.name}}</option>
</select>
<label for="continentId">Continent</label>
</div>
<continent-list v-model="criteria.continentId" topLabel="Any"
@update:modelValue="(c) => updateValue('continentId', c)" />
</div>
<div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="form-floating">
@ -56,12 +50,13 @@
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, Ref } from 'vue'
import { defineComponent, ref, Ref } from 'vue'
import { PublicSearch } from '@/api'
import { useStore } from '@/store'
import ContinentList from '../ContinentList.vue'
export default defineComponent({
name: 'ProfilePublicSearchForm',
components: { ContinentList },
props: {
modelValue: {
type: Object,
@ -70,17 +65,11 @@ export default defineComponent({
},
emits: ['search', 'update:modelValue'],
setup (props, { emit }) {
const store = useStore()
/** The initial search criteria passed; this is what we'll update and emit when data changes */
const criteria : Ref<PublicSearch> = ref({ ...props.modelValue as PublicSearch })
/** Make sure we have continents */
onMounted(async () => await store.dispatch('ensureContinents'))
return {
criteria,
continents: computed(() => store.state.continents),
updateValue: (key : string, value : string) => {
criteria.value = { ...criteria.value, [key]: value }
emit('update:modelValue', criteria.value)

21
src/JobsJobsJobs/App/src/components/profile/SearchForm.vue
View File

@ -2,14 +2,8 @@
<form class="container">
<div class="row">
<div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="form-floating">
<select id="continentId" class="form-select"
:value="criteria.continentId" @change="updateValue('continentId', $event.target.value)">
<option value="">&ndash; Any &ndash;</option>
<option v-for="c in continents" :key="c.id" :value="c.id">{{c.name}}</option>
</select>
<label for="continentId">Continent</label>
</div>
<continent-list v-model="criteria.continentId" topLabel="Any"
@update:modelValue="(c) => updateValue('continentId', c)" />
</div>
<div class="col col-xs-12 col-sm-6 col-offset-md-2 col-lg-3 col-offset-lg-0">
<label class="jjj-label">Seeking Remote Work?</label><br>
@ -56,12 +50,13 @@
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, Ref, ref } from 'vue'
import { defineComponent, Ref, ref } from 'vue'
import { ProfileSearch } from '@/api'
import { useStore } from '@/store'
import ContinentList from '../ContinentList.vue'
export default defineComponent({
name: 'ProfileSearchForm',
components: { ContinentList },
props: {
modelValue: {
type: Object,
@ -70,17 +65,11 @@ export default defineComponent({
},
emits: ['search', 'update:modelValue'],
setup (props, { emit }) {
const store = useStore()
/** The initial search criteria passed; this is what we'll update and emit when data changes */
const criteria : Ref<ProfileSearch> = ref({ ...props.modelValue as ProfileSearch })
/** Make sure we have continents */
onMounted(async () => await store.dispatch('ensureContinents'))
return {
criteria,
continents: computed(() => store.state.continents),
updateValue: (key : string, value : string) => {
criteria.value = { ...criteria.value, [key]: value }
emit('update:modelValue', criteria.value)

30
src/JobsJobsJobs/App/src/views/citizen/EditProfile.vue
View File

@ -23,14 +23,8 @@
</p>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="form-floating">
<select id="continentId" :class="{ 'form-select': true, 'is-invalid': v$.continentId.$error }"
:value="v$.continentId.$model" @change="continentChanged">
<option v-for="c in continents" :key="c.id" :value="c.id">{{c.name}}</option>
</select>
<label for="continentId" class="jjj-required">Continent</label>
</div>
<div class="invalid-feedback">Please select a continent</div>
<continent-list v-model="v$.continentId.$model" :isInvalid="v$.continentId.$error"
@touch="v$.continentId.$touch() || true" />
</div>
<div class="col-12 col-sm-6 col-md-8">
<div class="form-floating">
@ -116,6 +110,7 @@ import api, { Citizen, LogOnSuccess, Profile, ProfileForm } from '@/api'
import { toastError, toastSuccess } from '@/components/layout/AppToaster.vue'
import { useStore } from '@/store'
import ContinentList from '@/components/ContinentList.vue'
import LoadData from '@/components/LoadData.vue'
import MarkdownEditor from '@/components/MarkdownEditor.vue'
import MaybeSave from '@/components/MaybeSave.vue'
@ -124,6 +119,7 @@ import ProfileSkillEdit from '@/components/profile/SkillEdit.vue'
export default defineComponent({
name: 'EditProfile',
components: {
ContinentList,
LoadData,
MarkdownEditor,
MaybeSave,
@ -175,7 +171,6 @@ export default defineComponent({
/** Retrieve the user's profile and their real name */
const retrieveData = async (errors : string[]) => {
await store.dispatch('ensureContinents')
const profileResult = await api.profile.retreive(undefined, user)
if (typeof profileResult === 'string') {
errors.push(profileResult)
@ -201,21 +196,6 @@ export default defineComponent({
profile.realName = typeof nameResult !== 'undefined' ? (nameResult as Citizen).realName || '' : ''
}
/**
* Mark the continent field as changed
*
* (This works around a really strange sequence where, if the "touch" call is directly wired up to the onChange
* event, the first time a value is selected, it doesn't stick (although the field is marked as touched). On second
* and subsequent times, it worked. The solution here is to grab the value and update the reactive source for the
* form, then manually set the field to touched; this restores the expected behavior. This is probably why the
* library doesn't hook into the onChange event to begin with...)
*/
const continentChanged = (e : Event) : boolean => {
profile.continentId = (e.target as HTMLSelectElement).value
v$.value.continentId.$touch()
return true
}
/** The ID for new skills */
let newSkillId = 0
@ -266,8 +246,6 @@ export default defineComponent({
user,
isNew,
profile,
continents: computed(() => store.state.continents),
continentChanged,
addSkill,
removeSkill,
saveProfile,

7
src/JobsJobsJobs/App/src/views/profile/ProfileSearch.vue
View File

@ -77,7 +77,7 @@ export default defineComponent({
/** An empty set of search criteria */
const emptyCriteria = {
continentId: undefined,
continentId: '',
skill: undefined,
bioExperience: undefined,
remoteWork: ''
@ -98,8 +98,10 @@ export default defineComponent({
searched.value = true
try {
searching.value = true
// Hold variable for ensuring continent ID is not undefined here, but excluded from search payload
const contId = queryValue(route, 'continentId')
const searchParams : ProfileSearch = {
continentId: queryValue(route, 'continentId'),
continentId: contId === '' ? undefined : contId,
skill: queryValue(route, 'skill'),
bioExperience: queryValue(route, 'bioExperience'),
remoteWork: queryValue(route, 'remoteWork') || ''
@ -111,6 +113,7 @@ export default defineComponent({
errors.value.push('The server returned a "Not Found" response (this should not happen)')
} else {
results.value = searchResult
searchParams.continentId = searchParams.continentId || ''
criteria.value = searchParams
}
} finally {

6
src/JobsJobsJobs/App/src/views/profile/Seeking.vue
View File

@ -76,7 +76,7 @@ export default defineComponent({
/** An empty set of search criteria */
const emptyCriteria = {
continentId: undefined,
continentId: '',
region: undefined,
skill: undefined,
remoteWork: ''
@ -97,8 +97,9 @@ export default defineComponent({
searched.value = true
try {
searching.value = true
const contId = queryValue(route, 'continentId')
const searchParams : PublicSearch = {
continentId: queryValue(route, 'continentId'),
continentId: contId === '' ? undefined : contId,
region: queryValue(route, 'region'),
skill: queryValue(route, 'skill'),
remoteWork: queryValue(route, 'remoteWork') || ''
@ -110,6 +111,7 @@ export default defineComponent({
errors.value.push('The server returned a "Not Found" response (this should not happen)')
} else {
results.value = searchResult
searchParams.continentId = searchParams.continentId || ''
criteria.value = searchParams
}
} finally {