Skip to content

Commit

Permalink
Merge pull request #518 from GSA/feature/issue-181/admin-edit-user
Browse files Browse the repository at this point in the history 
Feature/issue 181/admin edit user
  • Loading branch information
@john-labbate
john-labbate authored Mar 15, 2024
2 parents 4829667 + de50462 commit 83ffd61
Show file tree
Hide file tree
Showing 13 changed files with 521 additions and 157 deletions.
255 changes: 127 additions & 128 deletions training-front-end/src/components/AdminEditReporting.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,21 @@
import USWDSComboBox from "./USWDSComboBox.vue";
import { bureauList, agencyList, setSelectedAgencyId, selectedAgencyId} from '../stores/agencies'
import { useStore } from '@nanostores/vue'
import AdminEditUserDetails from "./AdminEditUserDetails.vue";
const props = defineProps({
user: {
type: Object,
required: true,
}
})
const editing = ref(false)
// Copy to avoid modifying parent prop and allow cancelling edits
const agencies = ref([...props.user.report_agencies])
defineEmits(['cancel', 'save'])
const emit = defineEmits(['cancel', 'save', 'userUpdateSuccess'])
const agency_options = useStore(agencyList)
const bureaus = useStore(bureauList)
Expand All @@ -39,96 +42,93 @@
agencies.value = agencies.value.filter(agency => agency.id != e.id)
}
}
function editUser(){
editing.value = true
}
watch(() => user_input.agency_id, async() => {
setSelectedAgencyId(user_input.agency_id)
})
async function updateUser(successMessage) {
emit('userUpdateSuccess', successMessage)
editing.value = false
}
function cancelUpdate() {
editing.value = false;
}
</script>

<template>
<div class="usa-prose">
<h3>
Edit User
</h3>
</div>
<div class="grid-row grid-gap">
<div class="tablet:grid-col">
<label
for="input-full-name"
class="usa-label"
>
Full Name
</label>
<input
id="input-full-name"
class="usa-input bg-base-lightest"
name="input-full-name"
:value="user.name"
disabled
>
<button
id="cancel"

Check warning on line 66 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

Expected indentation of 4 spaces but found 6 spaces
type="button"

Check warning on line 67 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

Expected indentation of 4 spaces but found 6 spaces
class="usa-button usa-button--unstyled margin-y-2"

Check warning on line 68 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

Expected indentation of 4 spaces but found 6 spaces
@click="$emit('cancel')"

Check warning on line 69 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

Expected indentation of 4 spaces but found 6 spaces
>
Return to User Search Results
</button>
<div v-if="!editing">
<div class="usa-prose">
<h3>
User Profile
</h3>
</div>
<div class="tablet:grid-col">
<label
for="input-email"
class="usa-label"
>
Email
</label>
<input
id="input-email"
class="usa-input bg-base-lightest"
name="input-email"
:value="user.email"
disabled
>
<div class="grid-row grid-gap padding-top-4">
<div class="tablet:grid-col">
<dt class="font-sans-xs">Full Name</dt>

Check warning on line 81 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

Expected 1 line break after opening tag (`<dt>`), but no line breaks found

Check warning on line 81 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

Expected 1 line break before closing tag (`</dt>`), but no line breaks found
<dd id="user-name-value" :aria-label="'User Name: ' + user.name" class="margin-left-0 text-bold font-sans-sm">{{ user.name }}</dd>

Check warning on line 82 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

':aria-label' should be on a new line

Check warning on line 82 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

'class' should be on a new line

Check warning on line 82 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

Expected 1 line break after opening tag (`<dd>`), but no line breaks found

Check warning on line 82 in training-front-end/src/components/AdminEditReporting.vue

View workflow job for this annotation

GitHub Actions / unit-tests-and-lint 

Expected 1 line break before closing tag (`</dd>`), but no line breaks found
</div>
<div class="tablet:grid-col">
<dt class="font-sans-xs">Email</dt>
<dd id="user-email-value" :aria-label="'Email: ' + user.email" class="margin-left-0 text-bold font-sans-sm">{{ user.email }}</dd>
</div>
</div>
</div>
<div class="grid-row grid-gap">
<div class="tablet:grid-col">
<label
for="input-agency"
class="usa-label"
>
Agency / Organization
</label>
<input
id="input-agency"
class="usa-input bg-base-lightest"
name="input-agency"
:value="user.agency.name"
disabled
>
<div class="grid-row grid-gap padding-top-2">
<div class="tablet:grid-col">
<dt class="font-sans-xs">Agency / Organization</dt>
<dd id="user-agency-organization-value" :aria-label="'Agency / Organization: ' + user.agency.name" class="margin-left-0 text-bold font-sans-sm">{{ user.agency.name }}</dd>
</div>
<div class="tablet:grid-col">
<dt class="font-sans-xs">Sub-Agency, Organization, or Bureau</dt>
<dd id="user-bureau-value" :aria-label="'Sub-Agency, Organization, or Bureau: ' + user.agency.bureau" class="margin-left-0 text-bold font-sans-sm">{{ user.agency.bureau }}</dd>
</div>
</div>
<div class="tablet:grid-col">
<label
class="usa-label"
for="input-bureau"
>
Sub-Agency, Organization, or Bureau
</label>
<input
id="input-bureau"
class="usa-input bg-base-lightest"
name="input-bureau"
:value="user.agency.bureau"
disabled
<div class="margin-top-3">
<button
id="toggle-user-edit"
class="usa-button usa-button--outline"
@click="editUser()"
>
Edit User Profile
</button>
</div>
</div>
<div v-if="editing">
<admin-edit-user-details
:userToEdit="user"
@cancel="cancelUpdate"
@complete-user-update="updateUser">
</admin-edit-user-details>
</div>

<section class="margin-top-5">

<section class="margin-top-5" v-if="!editing">
<hr class="margin-bottom-5">
<div class="usa-prose">
<h4>
Add Agency/Organization Reporting Access
Add Reporting Access
</h4>
</div>
<div class="grid-row grid-gap">
<div class="tablet:grid-col">
<div>
<USWDSComboBox
v-model="user_input.agency_id"
:items="agency_options"
name="agency"
label="Which agency or organization should this person receive reports for?"
label="Select agency or organization user should receive reports for?"
/>

<div
Expand All @@ -145,71 +145,70 @@
<div class="margin-top-3">
<button
id="update-user"
class="usa-button"
class="usa-button usa-button--outline"
@click="$emit('save', user.id, agencies)"
>
Update
Add Reporting Access
</button>
</div>
<button
id="cancel"
type="button"
class="usa-button usa-button--unstyled margin-y-2"
@click="$emit('cancel')"
>
Cancel and return to search results
</button>
</div>
<div class="tablet:grid-col">
<table class="usa-table usa-table--borderless width-full">
<thead>
<tr>
<th
scope="col"
class="text-no-wrap"
>
Agency/Organization
</th>
<th
scope="col"
class="text-no-wrap"
>
Sub-Agency, Org, or Bureau
</th>
</tr>
</thead>
<tbody>
<tr v-if="agencies.length == 0">
<td colspan="4">
None
</td>
</tr>
<tr
v-for="agency in agencies"
:key="agency.id"
>
<td>
{{ agency.name }}
</td>
<td>
<div class="display-flex flex-justify">
<div>
{{ agency.bureau }}
</div>
<div class="flex-align-self-center">
<button
class="usa-button usa-button--unstyled font-serif-lg"
@click="editUserAgencies(agency, false)"
>
<DeleteIcon />
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="margin-top-5" v-if="!editing">
<div>
<div class="usa-prose">
<h4>
Granted Reporting Access
</h4>
</div>
<table class="usa-table usa-table--borderless width-full">
<thead>
<tr>
<th
scope="col"
class="text-no-wrap"
>
Agency/Organization
</th>
<th
scope="col"
class="text-no-wrap"
>
Sub-Agency, Org, or Bureau
</th>
</tr>
</thead>
<tbody>
<tr v-if="agencies.length == 0">
<td colspan="4">
None
</td>
</tr>
<tr
v-for="agency in agencies"
:key="agency.id"
>
<td>
{{ agency.name }}
</td>
<td>
<div class="display-flex flex-justify">
<div>
{{ agency.bureau }}
</div>
<div class="flex-align-self-center">
<button
class="usa-button usa-button--unstyled font-serif-lg"
@click="editUserAgencies(agency, false)"
>
<DeleteIcon />
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</template>
Loading

0 comments on commit 83ffd61

Please sign in to comment.