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

WIP on profile edit page

Browse Source
This commit is contained in:
Daniel J. Summers 2021-07-24 11:56:44 -04:00
parent 37b8f4adb3
commit d36b01cae5
3 changed files with 184 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/JobsJobsJobs/App/src/router/index.ts
View File

@ -14,6 +14,10 @@ const routes: Array<RouteRecordRaw> = [
{
path: '/citizen/dashboard',
component: () => import(/* webpackChunkName: "logon" */ '../views/citizen/Dashboard.vue')
},
{
path: '/citizen/profile',
component: () => import(/* webpackChurchName: "profedit" */ '../views/citizen/EditProfile.vue')
}
]

8
src/JobsJobsJobs/App/src/views/citizen/Dashboard.vue
View File

@ -45,7 +45,7 @@ export default defineComponent({
const user = store.state.user as LogOnSuccess
/** Error messages from data retrieval */
const errorMessage = ref('')
const errorMessages : string[] = []
/** The user's profile */
const profile : Ref<Profile | undefined> = ref(undefined)
@ -56,13 +56,13 @@ export default defineComponent({
const retrieveData = async () => {
const profileResult = await api.profile.retreive(undefined, user)
if (typeof profileResult === 'string') {
errorMessage.value = profileResult
errorMessages.push(profileResult)
} else if (typeof profileResult !== 'undefined') {
profile.value = profileResult
}
const count = await api.profile.count(user)
if (typeof count === 'string') {
errorMessage.value = `${errorMessage.value}\n${count}`
errorMessages.push(count)
} else {
profileCount.value = count
}
@ -72,7 +72,7 @@ export default defineComponent({
return {
user,
errorMessage,
errorMessages,
profile,
profileCount
}

176
src/JobsJobsJobs/App/src/views/citizen/EditProfile.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<h3>Employment Profile</h3>
<v-form>
<v-container>
<v-row>
<v-col cols="12" sm="10" md="8" lg="6">
<v-text-field label="Real Name"
placeholder="Leave blank to use your NAS display name"
counter="255"
maxlength="255"
:value="realName"></v-text-field>
<div class="form-group">
<label for="realName" class="jjj-label">Real Name</label>
[InputText id="realName" @bind-Value=@ProfileForm.RealName class="form-control"
placeholder="Leave blank to use your NAS display name" /]
[ValidationMessage For=@(() => ProfileForm.RealName) /]
</div>
</v-col>
</v-row>
<div class="form-row">
<div class="col">
<div class="form-check">
[InputCheckbox id="seeking" class="form-check-input" @bind-Value=@ProfileForm.IsSeekingEmployment /]
<label for="seeking" class="form-check-label">I am currently seeking employment</label>
<em v-if="profile?.seekingEmployment">&nbsp; &nbsp; If you have found employment, consider
<router-link to="/success-story/add">telling your fellow citizens about it</router-link>
</em>
</div>
</div>
</div>
<div class="form-row">
<div class="col col-xs-12 col-sm-6 col-md-4">
<div class="form-group">
<label for="continentId" class="jjj-required">Continent</label>
[InputSelect id="continentId" @bind-Value=@ProfileForm.ContinentId class="form-control"]
<option>&ndash; Select &ndash;</option>
@foreach (var (id, name) in Continents)
{
<option value="@id">@name</option>
}
[/InputSelect]
[ValidationMessage For=@(() => ProfileForm.ContinentId) /]
</div>
</div>
<div class="col col-xs-12 col-sm-6 col-md-8">
<div class="form-group">
<label for="region" class="jjj-required">Region</label>
[InputText id="region" @bind-Value=@ProfileForm.Region class="form-control"
placeholder="Country, state, geographic area, etc." /]
[ValidationMessage For=@(() => ProfileForm.Region) /]
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<div class="form-group">
<label for="bio" class="jjj-required">Professional Biography</label>
[MarkdownEditor Id="bio" @bind-Text=@ProfileForm.Biography /]
[ValidationMessage For=@(() => ProfileForm.Biography) /]
</div>
</div>
</div>
<div class="form-row">
<div class="col col-xs-12 col-sm-12 offset-md-2 col-md-4">
<div class="form-check">
[InputCheckbox id="isRemote" class="form-check-input" @bind-Value=@ProfileForm.RemoteWork /]
<label for="isRemote" class="form-check-label">I am looking for remote work</label>
</div>
</div>
<div class="col col-xs-12 col-sm-12 col-md-4">
<div class="form-check">
[InputCheckbox id="isFull" class="form-check-input" @bind-Value=@ProfileForm.FullTime /]
<label for="isFull" class="form-check-label">I am looking for full-time work</label>
</div>
</div>
</div>
<hr>
<h4>
Skills &nbsp;
<button type="button" class="btn btn-outline-primary" @onclick="AddNewSkill">Add a Skill</button>
</h4>
@foreach (var skill in ProfileForm.Skills)
{
[SkillEdit Skill=@skill OnRemove=@RemoveSkill /]
}
<hr>
<h4>Experience</h4>
<p>
This application does not have a place to individually list your chronological job history; however, you can
use this area to list prior jobs, their dates, and anything else you want to include that&rsquo;s not already a
part of your Professional Biography above.
</p>
<div class="form-row">
<div class="col">
[MarkdownEditor Id="experience" @bind-Text=@ProfileForm.Experience /]
</div>
</div>
<div class="form-row">
<div class="col">
<div class="form-check">
[InputCheckbox id="isPublic" class="form-check-input" @bind-Value=@ProfileForm.IsPublic /]
<label for="isPublic" class="form-check-label">
Allow my profile to be searched publicly (outside NA Social)
</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<br>
<button type="submit" class="btn btn-outline-primary">Save</button>
</div>
</div>
</v-container>
</v-form>
<p v-if="!isNew">
<br><router-link :to="'/profile/view/' + user.citizenId"><v-icon icon="file-account-outline" /> View Your User
Profile</router-link>
</p>
<p>
<br>If you want to delete your profile, or your entire account, <router-link to="/so-long/options">see your deletion
options here</router-link>.
</p>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import api, { LogOnSuccess, Profile } from '../../api'
import { useStore } from '../../store'
export default defineComponent({
name: 'EditProfile',
setup () {
const store = useStore()
/** The currently logged-on user */
const user = store.state.user as LogOnSuccess
/** Whether this is a new profile */
const isNew = ref(false)
/** Errors that may be encountered */
const errorMessages : string[] = []
/** The user's current profile */
let profile : Profile | undefined
/** The user's real name */
let realName : string | undefined
/** Retrieve the user's profile */
const loadProfile = async () => {
const profileResult = await api.profile.retreive(undefined, user)
if (typeof profileResult === 'string') {
errorMessages.push(profileResult)
} else if (typeof profileResult === 'undefined') {
isNew.value = true
} else {
profile = profileResult
}
}
onMounted(loadProfile)
return {
user,
isNew,
errorMessages,
profile,
realName
}
}
})
</script>