Skip to content

Commit

Permalink
[Cleanup] Adopt eslint vue/recommended: Grant Finder: app files (#2811)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffsmohan
jeffsmohan authored Mar 22, 2024
1 parent bc1b74b commit 1ed9b2c
Show file tree
Hide file tree
Showing 7 changed files with 330 additions and 183 deletions.
5 changes: 0 additions & 5 deletions packages/client/.eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,6 @@ module.exports = {
// ARPA Reporter: annual performance reporter
'./src/views/ArpaAnnualPerformanceReporter.vue',

// Grant Finder: app files
'./src/App.vue',
'./src/main.js',
'./src/components/Layout.vue',

// Grant Finder: search modals
'./src/components/Modals/AddKeyword.vue',
'./src/components/Modals/SavedSearchPanel.vue',
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div id="app">
<router-view></router-view>
<router-view />
</div>
</template>

Expand Down
320 changes: 320 additions & 0 deletions packages/client/src/components/BaseLayout.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,320 @@
<template>
<div>
<b-navbar
:type="navBarType"
:variant="navBarVariant"
class="header-dropshadow py-1"
>
<b-navbar-brand
:to="{ name: 'grants' }"
class="d-flex align-items-center"
>
<b-img
v-if="myProfileEnabled"
:src="require('../assets/usdr_logo_standard_wide.svg')"
style="height: 2.5rem;"
alt="United States Digital Response - Home"
/>
<b-img
v-else
:src="require('../assets/usdr_logo_white_wide.svg')"
style="height: 2.5rem;"
alt="United States Digital Response - Home"
/>
<h1 class="ml-3 mb-0 h4">
Federal Grant Finder
</h1>
</b-navbar-brand>
<b-collapse
id="nav-collapse"
is-nav
>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown
v-if="loggedInUser && myProfileEnabled"
right
no-caret
menu-class="w-100"
>
<!-- Using 'button-content' slot -->
<template
v-if="myProfileEnabled"
#button-content
>
<div
class="d-inline-flex justify-content-start align-items-center"
style="width: 242px"
>
<UserAvatar
:user-name="loggedInUser.name"
:color="loggedInUser.avatar_color"
size="2.5rem"
/>
<div class="ml-2 mr-5 text-black">
<p class="m-0 font-weight-bold">
{{ loggedInUser.name }}
</p>
<p class="m-0">
{{ selectedTeam ? selectedTeam.name : '' }}
</p>
</div>
<p class="text-black m-0 ml-auto">
<b-icon
icon="caret-down-fill"
scale="0.8"
/>
</p>
</div>
</template>
<template
v-else
#button-content
>
<em>{{ loggedInUser.email }}</em>
</template>
<b-dropdown-item :to="{ name: 'myProfile' }">
<b-icon
icon="person-circle"
scale="1"
class="dropdown-icon"
/>
<p class="dropdown-item-text">
My profile
</p>
</b-dropdown-item>
<b-dropdown-item-button
href="#"
@click="giveFeedback"
>
<b-icon
icon="chat-square-text"
scale="1"
class="dropdown-icon"
/>
<p class="dropdown-item-text">
Give feedback
</p>
</b-dropdown-item-button>
<b-dropdown-item-button
href="#"
@click="trainingGuide"
>
<b-icon
icon="book"
scale="1"
class="dropdown-icon"
/>
<p class="dropdown-item-text">
Training guide
</p>
</b-dropdown-item-button>
<b-dropdown-item-button
href="#"
@click="logout"
>
<b-icon
icon="box-arrow-right"
scale="1"
class="dropdown-icon"
/>
<p class="dropdown-item-text">
Sign out
</p>
</b-dropdown-item-button>
</b-nav-item-dropdown>

<b-nav-text v-if="!myProfileEnabled">
<b-badge>{{ selectedTeam ? selectedTeam.name : '' }}</b-badge>
</b-nav-text>

<b-nav-item-dropdown
v-if="loggedInUser && !myProfileEnabled"
right
>
<!-- Using 'button-content' slot -->
<template #button-content>
<em>{{ loggedInUser.email }}</em>
</template>
<b-dropdown-item-button
href="#"
@click="settingsClicked"
>
Settings
</b-dropdown-item-button>
<b-dropdown-item-button
href="#"
@click="giveFeedback"
>
Give Feedback
</b-dropdown-item-button>
<b-dropdown-item-button
href="#"
@click="trainingGuide"
>
Training Guide
</b-dropdown-item-button>
<b-dropdown-item-button
href="#"
@click="logout"
>
Sign Out
</b-dropdown-item-button>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-col
v-if="showTabs"
cols="12"
>
<b-nav
tabs
justified
fill
style="margin-top: 20px"
>
<b-nav-item
to="/grants"
active-class="active"
>
Browse Grants
</b-nav-item>
<b-nav-item
to="/my-grants"
active-class="active"
>
My Grants
</b-nav-item>
<b-nav-item
to="/dashboard"
active-class="active"
>
Dashboard
</b-nav-item>
<b-nav-item
v-if="userRole === 'admin'"
to="/users"
active-class="active"
>
Users
</b-nav-item>
<b-nav-item
:to="newTerminologyEnabled ? '/teams' : '/agencies'"
active-class="active"
>
{{ newTerminologyEnabled ? 'Teams' : 'Agencies' }}
</b-nav-item>
<b-nav-item
v-if="canSeeOrganizationsTab"
:to="newTerminologyEnabled ? '/organizations' : '/tenants'"
active-class="active"
>
{{ newTerminologyEnabled ? 'Organizations' : 'Tenants' }}
</b-nav-item>
</b-nav>
</b-col>

<div style="margin-top: 10px">
<section
class="container-fluid"
style="display: flex; justify-content: center;"
>
<AlertBox
v-for="(alert, alertId) in alerts"
:key="alertId"
v-bind="alert"
@dismiss="dismissAlert(alertId)"
/>
</section>

<router-view />
</div>
<ProfileSettingsModal :show-modal.sync="showProfileSettingModal" />
</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { myProfileEnabled, newTerminologyEnabled } from '@/helpers/featureFlags';
import ProfileSettingsModal from '@/components/Modals/ProfileSettings.vue';
import AlertBox from '../arpa_reporter/components/AlertBox.vue';
import UserAvatar from './UserAvatar.vue';
export default {
name: 'BaseLayout',
components: {
AlertBox,
ProfileSettingsModal,
UserAvatar,
},
data() {
return {
showProfileSettingModal: false,
showOptInEmailBanner: true,
};
},
computed: {
...mapGetters({
loggedInUser: 'users/loggedInUser',
userRole: 'users/userRole',
selectedTeam: 'users/selectedAgency',
alerts: 'alerts/alerts',
}),
canSeeOrganizationsTab() {
return this.loggedInUser && this.loggedInUser.isUSDRSuperAdmin;
},
newTerminologyEnabled() {
return newTerminologyEnabled();
},
myProfileEnabled() {
return myProfileEnabled();
},
showTabs() {
return !(this.$route.meta.hideLayoutTabs === true);
},
navBarType() {
return myProfileEnabled() ? 'light' : 'dark';
},
navBarVariant() {
return myProfileEnabled() ? 'white' : 'dark';
},
},
methods: {
logout(e) {
e.preventDefault();
this.$store
.dispatch('users/logout')
.then(() => this.$router.push({ path: '/login' }));
},
settingsClicked() {
this.showProfileSettingModal = true;
},
giveFeedback() {
window.open('https://usdr.link/grants/feedback');
},
trainingGuide() {
window.open('https://go.usdigitalresponse.org/hubfs/Grants/USDR-Federal-Grants-Finder-User-Guide-Sep2023.pdf', '_blank');
},
dismissAlert(alertId) {
this.$store.commit('alerts/dismissAlert', alertId);
},
},
};
</script>

<style scoped lang="scss">
.dropdown-icon {
margin-right: 1rem;
}
.dropdown-item-text {
font-size: 14px;
display: inline;
text-align: left;
padding: 0;
}
.text-black {
color: #000;
}
</style>
Loading

0 comments on commit 1ed9b2c

Please sign in to comment.