Skip to content

Commit

Permalink
Merge pull request #172 from icefoganalytics/test
Browse files Browse the repository at this point in the history 
Dashboard visuals
  • Loading branch information
@datajohnson
datajohnson authored Oct 5, 2023
2 parents 05791ee + b3eed6e commit ca9f82e
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 44 deletions.
25 changes: 12 additions & 13 deletions src/web/src/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ import reportsStore from "@/modules/Administration/store/ReportsStore";
import axios from "axios";
import { APPLICATION_URL, STUDENT_URL } from "../urls";
import router from "@/router";
import { isEmpty } from "lodash";
import { isEmpty, isUndefined } from "lodash";

Vue.use(Vuex);

Expand Down Expand Up @@ -142,18 +142,10 @@ export default new Vuex.Store({
state.selectedApplication = value;
state.selectedApplicationId = value.id;

let isRecent = JSON.parse(localStorage.RECENT_APPLICATIONS).filter((r) => r.id == value.id);

if (isRecent.length == 0) {
if (JSON.parse(localStorage.RECENT_APPLICATIONS).length >= 10) {
const currentRecentApplication = JSON.parse(localStorage.RECENT_APPLICATIONS);
currentRecentApplication.pop();
localStorage.RECENT_APPLICATIONS = JSON.stringify(currentRecentApplication);
localStorage.RECENT_APPLICATIONS = JSON.stringify([value, ...JSON.parse(localStorage.RECENT_APPLICATIONS)]);
} else {
localStorage.RECENT_APPLICATIONS = JSON.stringify([value, ...JSON.parse(localStorage.RECENT_APPLICATIONS)]);
}
}
let currentRecentApplications = JSON.parse(localStorage.RECENT_APPLICATIONS ?? "[]");
currentRecentApplications = currentRecentApplications.filter((r) => r.id != value.id); // take out current application
currentRecentApplications = currentRecentApplications.slice(0, 9);
localStorage.RECENT_APPLICATIONS = JSON.stringify([value, ...currentRecentApplications]);
},
SET_NEW_APPLICATIONS(state, value) {
state.selectedApplication = value;
Expand All @@ -169,6 +161,13 @@ export default new Vuex.Store({
state.selectedStudentId = value.id;
state.selectedStudent = value;

if (!isUndefined(value)) {
let currentRecentStudents = JSON.parse(localStorage.RECENT_STUDENTS ?? "[]");
currentRecentStudents = currentRecentStudents.filter((r) => r.id != value.id); // take out current student
currentRecentStudents = currentRecentStudents.slice(0, 9);
localStorage.RECENT_STUDENTS = JSON.stringify([value, ...currentRecentStudents]);
}

let isRecent = state.recentStudents.filter((r) => r.id == value.id);

if (isRecent.length == 0) {
Expand Down
106 changes: 75 additions & 31 deletions src/web/src/views/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,44 @@
</v-col>

<v-col cols="12" md="4" sm="6">
<v-card class="default mb-5">
<v-toolbar flat color="#e0d5bb" dense>


<v-card class="default mb-5">
<v-toolbar flat color="#ffc850" dense>
Recently Viewed Students
</v-toolbar>
<v-card-text class="py-0 px-3">
<p v-if="recentStudents.length == 0" class="mb-0">None yet</p>

<v-list dense color="#ffffff00" v-if="recentStudents" class="ml-0">
<div v-for="(item, idx) of recentStudents">
<v-list-item :to="`/student/${item.id}`" class="pl-1 ml-0 py-2" style="min-height: auto">
<v-list-item-content class="py-0">
<v-list-item-title>
{{ idx + 1 }}. {{ item.first_name }} {{ item.last_name }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider v-if="idx < recentStudents.length - 1" />
</div>
</v-list>
</v-card-text>
</v-card>

<v-card class="default mb-5 d-none">
<v-toolbar flat color="#ffc850" dense>
Recently Viewed Applications
</v-toolbar>
<v-card-text class="py-0">
<v-card-text class="py-0 px-3">
<p v-if="recentApplications.length == 0" class="mb-0">None yet</p>

<v-list dense color="#ffffff00" v-if="recentApplications">
<v-list dense color="#ffffff00" v-if="recentApplications" class="ml-0">
<div v-for="(item, idx) of recentApplications">
<v-list-item :to="`/application/${item.id}/personal`" class="pl-1">
<v-list-item-content class="">
<v-list-item-title
>{{ getStudentName(item) }} - {{ item.academic_year_id }}: {{ item.main_institution.name }}
<v-list-item :to="`/application/${item.id}/personal`" class="pl-1 ml-0 py-2" style="min-height: auto">
<v-list-item-content class="py-0">
<v-list-item-title>
{{ idx + 1 }}. {{ getStudentName(item) }} - {{ item.academic_year_id }}:
{{ item.main_institution.name }}
</v-list-item-title>
<!-- <v-subheader class="my-0 py-0" style="height: 14px">
<strong>Flags:</strong>&nbsp; {{ item.flags.replace(/,/g, ", ") }}
Expand All @@ -63,10 +88,10 @@
</v-card>

<v-card class="default">
<v-toolbar flat color="#e0d5bb" dense>
<v-toolbar flat color="#ffc850" dense>
Flagged Applications
</v-toolbar>
<v-card-text class="pb-0">
<v-card-text class="pb-0 px-3">
<v-select
label="Select a flag"
class="my-0"
Expand All @@ -82,15 +107,15 @@
<v-switch v-model="filterFlagged" label="Also apply name filter" hide-details class="my-0" />
</div>
<v-divider class="mt-1" />
<p v-if="filteredFlagMatches.length == 0" class="mb-0">None yet</p>
<p v-if="filteredFlagMatches.length == 0" class="mb-0 mt-2">None yet</p>

<v-list dense color="#ffffff00" v-if="filteredFlagMatches" class="mt-0 pt-0">
<div v-for="(item, idx) of filteredFlagMatches">
<v-list-item :to="`/application/${item.id}/personal`" class="pl-1">
<v-list-item-content class="">
<v-list-item-title>{{ item.title }} </v-list-item-title>
<v-subheader class="my-0 py-0" style="height: 14px">
<strong>Flags:</strong>&nbsp; {{ item.flags.replace(/,/g, ", ") }}
<v-list-item :to="`/application/${item.id}/personal`" class="pl-1"">
<v-list-item-content>
<v-list-item-title>{{ idx + 1 }}. {{ item.title }} </v-list-item-title>
<v-subheader class="my-0 py-0 ml-3">
<strong>Flags:</strong> {{ item.flags.replace(/,/g, ", ") }}
</v-subheader>
</v-list-item-content>
</v-list-item>
Expand All @@ -103,10 +128,10 @@
<v-col cols="12" md="4" sm="6">
<v-card class="default">
<v-toolbar flat color="#e0d5bb" dense>
<v-toolbar flat color="#ffc850" dense>
New Applications
</v-toolbar>
<v-card-text class="py-0">
<v-card-text class="py-0 px-3">
<!-- <h3 class="text-h6 font-weight-regular mb-0">New Applications</h3> -->
<div v-if="loading">Loading...</div>
Expand All @@ -116,9 +141,9 @@
<div v-for="(item, idx) of newApplications">
<v-list-item :to="`/application/${item.id}/personal`" class="pl-1">
<v-list-item-content class="">
<v-list-item-title>{{ item.title }} </v-list-item-title>
<v-subheader class="my-0 py-0" style="height: 14px">
<strong>Submitted:</strong>&nbsp; {{ getFormattedDate(item.online_submit_date) }}
<v-list-item-title>{{ idx + 1 }}. {{ item.title }} </v-list-item-title>
<v-subheader class="my-0 py-0 ml-3">
<strong>Submitted:</strong> {{ getFormattedDate(item.online_submit_date) }}
</v-subheader>
</v-list-item-content>
</v-list-item>
Expand All @@ -131,19 +156,19 @@
<v-col cols="12" md="4" sm="6">
<v-card class="default mb-5">
<v-toolbar flat color="#e0d5bb" dense>
<v-toolbar flat color="#ffc850" dense>
Recent Updates or Messages
</v-toolbar>
<v-card-text class="py-0">
<v-card-text class="py-0 px-3">
<p v-if="recentUpdated.length == 0" class="mb-0">None yet</p>
<v-list dense color="#ffffff00" v-if="recentUpdated">
<div v-for="(item, idx) of recentUpdated">
<v-list-item :to="`/application/${item.id}/personal`" class="pl-1">
<v-list-item-content class="">
<v-list-item-title>{{ item.title }} </v-list-item-title>
<v-subheader class="my-0 py-0" style="height: 14px">
<strong>Updated:</strong>&nbsp; {{ getFormattedDate(item.updated_at) }}
<v-list-item-title>{{ idx + 1 }}. {{ item.title }} </v-list-item-title>
<v-subheader class="my-0 ml-3">
<strong>Updated:</strong> {{ getFormattedDate(item.updated_at) }}
</v-subheader>
</v-list-item-content>
</v-list-item>
Expand Down Expand Up @@ -206,6 +231,7 @@
<script>
import axios from "axios";
import moment from "moment";
import { mapActions, mapState } from "vuex";
import { get, includes } from "lodash";
import { APPLICATION_URL, STUDENT_SEARCH_URL } from "../urls";
Expand All @@ -232,6 +258,7 @@ export default {
filter: [],
recentApplications: [],
recentStudents: [],
search: "",
drawer: null,
selectedStudent: null,
Expand Down Expand Up @@ -358,11 +385,12 @@ export default {
this.filter = localStorage.DASHBOARD_LASTNAME_FILTER.split(",");
}
if (localStorage.RECENT_APPLICATIONS) {
if (localStorage.RECENT_APPLICATIONS)
this.recentApplications = JSON.parse(localStorage.RECENT_APPLICATIONS);
} else {
localStorage.setItem("RECENT_APPLICATIONS", JSON.stringify([]));
}
if(localStorage.RECENT_STUDENTS)
this.recentStudents = JSON.parse(localStorage.RECENT_STUDENTS);
this.getData();
this.loadFlagOptions();
Expand All @@ -376,7 +404,7 @@ export default {
...mapActions(["loadFlagOptions", "searchApplicationsByFlag"]),
getFormattedDate(date) {
return new Date(date).toLocaleDateString();
return `${moment(date).format("YYYY-MM-DD")} (${moment(date).fromNow()})`;
},
getData() {
axios
Expand Down Expand Up @@ -456,3 +484,19 @@ export default {
},
};
</script>
<style scoped>
.v-list-item__title {
font-size: 15px !important;
}
.v-subheader {
height: 16px !important;
font-size: 14px;
line-height: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-left: 19px
}
</style>

0 comments on commit ca9f82e

Please sign in to comment.