From d6507d0e416657211c7b739f94712faa92e06036 Mon Sep 17 00:00:00 2001
From: Jashandeep Sohi <95394050+jashan-lco@users.noreply.github.com>
Date: Thu, 11 Jul 2024 11:39:35 -0700
Subject: [PATCH] add UI for proposal review workflow (#104)

---
 src/App.vue                              |   5 +-
 src/components/SciApplicationReviews.vue | 160 +++++++++++++++++++
 src/main.js                              |   3 +-
 src/router/index.js                      |  32 ++++
 src/views/ProposalReviewDashboard.vue    |  23 +++
 src/views/ProposalReviewPanelDetail.vue  | 188 +++++++++++++++++++++++
 src/views/ProposalReviewUserDetail.vue   | 163 ++++++++++++++++++++
 7 files changed, 572 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SciApplicationReviews.vue
 create mode 100644 src/views/ProposalReviewDashboard.vue
 create mode 100644 src/views/ProposalReviewPanelDetail.vue
 create mode 100644 src/views/ProposalReviewUserDetail.vue

diff --git a/src/App.vue b/src/App.vue
index ee6f881..b986cea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,7 +26,10 @@
           <b-navbar-nav>
             <b-nav-item :to="{ name: 'home' }">Home</b-nav-item>
             <b-nav-item :to="{ name: 'create' }">Submit Observation</b-nav-item>
-            <b-nav-item :to="{ name: 'proposals' }">Manage Proposals</b-nav-item>
+            <b-nav-item-dropdown text="Manage Proposals" right>
+              <b-dropdown-item :to="{ name: 'proposals' }">Your Proposals</b-dropdown-item>
+              <b-dropdown-item :to="{ name: 'proposalReviewDashboard' }">Reviews</b-dropdown-item>
+            </b-nav-item-dropdown>
             <b-nav-item href="https://lco.global/observatory/tools/">Planning Tools</b-nav-item>
             <b-nav-item :to="{ name: 'help' }">Help</b-nav-item>
             <template v-if="userIsAuthenticated">
diff --git a/src/components/SciApplicationReviews.vue b/src/components/SciApplicationReviews.vue
new file mode 100644
index 0000000..bc54309
--- /dev/null
+++ b/src/components/SciApplicationReviews.vue
@@ -0,0 +1,160 @@
+<template>
+    <b-container>
+      <b-table class="text-center" id="sciapplication-reviews-table" :items="data.results" :fields="fields" :busy="isBusy" show-empty striped responsive>
+        <template v-slot:table-busy>
+          <div class="text-center my-2"><i class="fa fa-spin fa-spinner" /> Loading...</div>
+        </template>
+        <template v-slot:empty>
+          <div>
+            No applications to review.
+          </div>
+        </template>
+        <template v-slot:head(mean_grade)="data">
+            <span v-b-tooltip.hover title="Mean of all grades from panelists for this proposal.">{{ data.label }}<sup><b-icon icon="question-octagon" ></b-icon></sup></span>
+        </template>
+
+        <template v-slot:head(is_primary_reviewer)="data">
+            <span v-b-tooltip.hover title="As the primary reviewer of a proposal, you can summarize all other panel reviews.">{{ data.label }}<sup><b-icon icon="question-octagon" ></b-icon></sup></span>
+        </template>
+
+        <template v-slot:head(is_secondary_reviewer)="data">
+            <span v-b-tooltip.hover title="As the secondary reviewer of a proposal, you can also summarize all other panel reviews.">{{ data.label }}<sup><b-icon icon="question-octagon" ></b-icon></sup></span>
+        </template>
+
+        <template v-slot:cell(title)="row">
+            <b-button variant="link" @click="row.toggleDetails" v-b-tooltip.hover title="Toggle Abstract" >{{ row.item.title }}</b-button>
+        </template>
+
+        <template #row-details="row">
+          <b-card border-variant="primary" header="Abstract" header-bg-variant="primary" header-text-variant="white">
+            <b-card-text class="text-left">{{ row.item.abstract || 'N/A' }}</b-card-text>
+          </b-card>
+        </template>
+
+        <template v-slot:cell(pdf)="data">
+            <div v-if="data.item.pdf_url !== null">
+              <b-avatar
+                icon="file-text-fill"
+                variant="primary"
+                size="2em"
+                v-b-tooltip.hover
+                title="PDF"
+                :href="data.item.pdf_url"
+              >
+              </b-avatar>
+            </div>
+            <div v-else> - </div>
+        </template>
+
+        <template v-slot:cell(mean_grade)="data">
+            <b-icon
+              v-if="data.item.status === 'AWAITING_REVIEWS'"
+              icon="eye-slash-fill"
+              variant="dark"
+              size="2em"
+              title="Hidden until panel discussions have started"
+            ></b-icon>
+            <span v-else>{{ data.item.mean_grade || '-'  }}</span>
+        </template>
+
+        <template v-slot:cell(panel_review)="data">
+            <b-icon
+              v-if="data.item.status === 'AWAITING_REVIEWS'"
+              icon="eye-slash-fill"
+              variant="dark"
+              size="2em"
+              title="Hidden until panel discussions have started"
+            ></b-icon>
+            <b-avatar
+              v-else
+              badge
+              badge-bottom badge-offset="-2px"
+              :badge-variant="data.item.completed ? 'success' : 'warning'"
+              icon="people-fill"
+              variant="primary"
+              size="2em"
+              title="View all panel reviews."
+              :to="{ name: 'proposalReviewPanelDetail', params: { id: data.item.id } }"
+            ></b-avatar>
+        </template>
+
+        <template v-slot:cell(review)="data">
+            <b-avatar
+              icon="person-lines-fill"
+              variant="primary"
+              size="2em"
+              title="Make changes to your review."
+              :to="{ name: 'proposalReviewUserDetail', params: { id: data.item.id } }"
+            >
+            </b-avatar>
+        </template>
+
+        <template v-slot:cell(my_review.finished)="data">
+            <b-icon v-if="data.item.my_review && data.item.my_review.finished" icon="check-circle-fill" variant="success"></b-icon>
+        </template>
+
+        <template v-slot:cell(is_primary_reviewer)="data">
+            <b-icon v-if="data.item.is_primary_reviewer" icon="check-circle-fill" variant="success"></b-icon>
+        </template>
+
+        <template v-slot:cell(is_secondary_reviewer)="data">
+            <b-icon v-if="data.item.is_secondary_reviewer" icon="check-circle-fill" variant="success"></b-icon>
+        </template>
+
+      </b-table>
+
+      <ocs-pagination
+        v-if="!isBusy"
+        table-id="sciapplication-reviews-table"
+        :per-page="queryParams.limit"
+        :total-rows="data.count"
+        :current-page="currentPage"
+        @pageChange="onPageChange"
+        @limitChange="onLimitChange"
+      >
+      </ocs-pagination>
+    </b-container>
+</template>
+<script>
+import { OCSMixin } from 'ocs-component-lib';
+
+import { clearAndSetErrorsMixin } from '@/components/util/utilMixins.js';
+
+export default {
+  name: 'SciApplicationReviews',
+  mixins: [OCSMixin.paginationAndFilteringMixin, clearAndSetErrorsMixin],
+  data: function() {
+    return {
+      fields: [
+        { key: 'title', label: 'Proposal', tdClass: 'align-middle' },
+        { key: 'semester', label: 'Semester', tdClass: 'align-middle' },
+        { key: 'science_category', label: 'Category', tdClass: 'align-middle' },
+        { key: 'pdf', label: 'PDF', tdClass: 'align-middle' },
+        { key: 'mean_grade', label: 'Mean Grade', tdClass: 'align-middle' },
+        { key: 'panel_review', label: 'Panel Reviews', tdClass: 'align-middle' },
+        { key: 'review', label: 'Review', tdClass: 'align-middle' },
+        { key: 'my_review.grade', label: 'Grade', tdClass: 'align-middle' },
+        { key: 'my_review.finished', label: 'Finished', tdClass: 'align-middle' },
+        { key: 'is_primary_reviewer', label: 'Primary', tdClass: 'align-middle' },
+        { key: 'is_secondary_reviewer', label: 'Secondary', tdClass: 'align-middle' }
+      ]
+    };
+  },
+  computed: {
+    observationPortalApiUrl: function() {
+      return this.$store.state.urls.observationPortalApi;
+    }
+  },
+  methods: {
+    initializeDataEndpoint: function() {
+      return this.$store.state.urls.observationPortalApi + '/api/scienceapplication-reviews/';
+    },
+    onSuccessfulDataRetrieval: function() {
+      this.clearErrors();
+    },
+    onErrorRetrievingData: function(response) {
+      this.setErrorsOnFailedAJAXCall(response);
+    }
+  }
+};
+</script>
diff --git a/src/main.js b/src/main.js
index ca86926..27e4776 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@ import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
-import { BootstrapVue, BIcon, BIconStickies } from 'bootstrap-vue';
+import { BootstrapVue, BIcon, BIconStickies, BootstrapVueIcons } from 'bootstrap-vue';
 import 'bootstrap';
 import '@/assets/scss/app.scss';
 import $ from 'jquery';
@@ -19,6 +19,7 @@ import 'katex/dist/katex.min.css';
 
 Vue.use(VueCompositionAPI);
 Vue.use(BootstrapVue);
+Vue.use(BootstrapVueIcons);
 Vue.component('BIcon', BIcon);
 Vue.component('BIconStickies', BIconStickies);
 Vue.use(OCSComponentLib);
diff --git a/src/router/index.js b/src/router/index.js
index 9ef796e..0dd03f7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,6 +14,9 @@ import Observations from '../views/Observations.vue';
 import ObservationDetail from '../views/ObservationDetail.vue';
 import Compose from '../views/Compose.vue';
 import ProposalList from '../views/ProposalList.vue';
+import ProposalReviewDashboard from '../views/ProposalReviewDashboard.vue';
+import ProposalReviewUserDetail from '../views/ProposalReviewUserDetail.vue';
+import ProposalReviewPanelDetail from '../views/ProposalReviewPanelDetail.vue';
 import ProposalDetail from '../views/ProposalDetail.vue';
 import SemesterDetail from '../views/SemesterDetail.vue';
 import SemesterDetailCurrent from '../views/SemesterDetailCurrent.vue';
@@ -49,6 +52,35 @@ const routes = [
       title: 'Help'
     }
   },
+  {
+    path: '/proposal-reviews',
+    name: 'proposalReviewDashboard',
+    component: ProposalReviewDashboard,
+    meta: {
+      title: 'Proposal Reviews',
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/proposal-reviews/:id/my-review',
+    name: 'proposalReviewUserDetail',
+    props: true,
+    component: ProposalReviewUserDetail,
+    meta: {
+      title: 'Edit Your Proposal Review',
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/proposal-reviews/:id/panel',
+    name: 'proposalReviewPanelDetail',
+    props: true,
+    component: ProposalReviewPanelDetail,
+    meta: {
+      title: 'Panel Proposal Reviews',
+      requiresAuth: true
+    }
+  },
   {
     path: '/proposals',
     name: 'proposals',
diff --git a/src/views/ProposalReviewDashboard.vue b/src/views/ProposalReviewDashboard.vue
new file mode 100644
index 0000000..6a54297
--- /dev/null
+++ b/src/views/ProposalReviewDashboard.vue
@@ -0,0 +1,23 @@
+<template>
+    <b-container>
+      <b-row>
+        <h2>Proposal Reviews</h2>
+      </b-row>
+      <b-row>
+        <p>Here you can grade and comment on the proposals assigned to you.</p>
+      </b-row>
+      <b-row>
+        <sci-application-reviews></sci-application-reviews>
+      </b-row>
+    </b-container>
+</template>
+<script>
+import SciApplicationReviews from '@/components/SciApplicationReviews.vue';
+
+export default {
+  name: 'ProposalReviewDashboard',
+  components: {
+    SciApplicationReviews,
+  }
+};
+</script>
diff --git a/src/views/ProposalReviewPanelDetail.vue b/src/views/ProposalReviewPanelDetail.vue
new file mode 100644
index 0000000..327ddf1
--- /dev/null
+++ b/src/views/ProposalReviewPanelDetail.vue
@@ -0,0 +1,188 @@
+<template>
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
+    <b-container>
+      <b-breadcrumb>
+        <b-breadcrumb-item :to="{ name: 'proposalReviewDashboard'}">
+          <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
+          Proposal Reviews
+          </b-breadcrumb-item>
+        <b-breadcrumb-item active>Panel Comments</b-breadcrumb-item>
+      </b-breadcrumb>
+
+      <b-alert v-for="error in apiValidationErrors.non_field_errors" :key="error" variant="danger" dismissible show> {{ error }}</b-alert>
+      <b-alert v-for="error in apiValidationErrors.id" :key="error" variant="danger" dismissible show> {{ error }}</b-alert>
+
+      <b-card :title="data.title" sub-title="Abstract">
+        <b-card-text>
+          {{ data.abstract || 'N/A' }}
+        </b-card-text>
+
+        <b-card-text>
+        <b-row>
+        <b-col>
+        <b-link :href="data.pdf_url" :disabled="data.pdf_url === null" :title="data.pdf_url === null ? 'PDF (not found)' : 'PDF'">
+        PDF
+        <b-icon
+          :icon="data.pdf_url === null ? 'file-x-fill' : 'file-pdf-fill'"
+          :variant="data.pdf_url == null ? 'danger' : 'primary'"
+        >
+        </b-icon>
+        </b-link>
+        </b-col>
+
+        <b-col>
+        <b>Mean:</b> {{ data.mean_grade || '-' }}
+        </b-col>
+
+        <b-col>
+        <b>Completed: </b>
+        <span v-if="data.completed"><b-icon title="All panelists have finished their reviews" icon="check-circle-fill" variant="success"></b-icon></span>
+        <span v-else><b-icon title="Some reviews are still pending from panelists" icon="stopwatch-fill" variant="warning"></b-icon></span>
+        </b-col>
+
+        </b-row>
+      </b-card-text>
+
+      <b-card-text>
+        <h5>Technical Review</h5>
+        <p>{{ data.technical_review || 'N/A' }}</p>
+      </b-card-text>
+
+      <b-card-text>
+      <h5>Summary</h5>
+      <b-form @submit="updateSummary" >
+        <basic-custom-field
+          v-model="form.summary"
+          :errors="apiValidationErrors.summary"
+          :placeholder="data.can_summarize ? 'Enter your summary here...' : 'You do not have permissions to edit this.'"
+          :label="null"
+          field="summary"
+          field-type="textarea"
+          :disabled="!data.can_summarize"
+        ></basic-custom-field>
+
+        <b-button v-if="data.can_summarize" type="submit" variant="primary" :disabled="updatingSummary">Save</b-button>
+
+      </b-form>
+      </b-card-text>
+
+      <b-card-text>
+      <h5>Panel Reviews</h5>
+      <b-table striped hover :items="userReviews" :fields="userReviewFields">
+        <template v-slot:cell(comments)="row">
+          <b-link href="#"><b-icon @click="row.toggleDetails" v-b-tooltip.hover title="Toggle Comments" icon="arrows-expand"></b-icon></b-link>
+        </template>
+        <template #row-details="row">
+          <b-card border-variant="primary" header="Comments" header-bg-variant="primary" header-text-variant="white">
+            <b-card-text class="text-left">{{ row.item.comments || 'N/A' }}</b-card-text>
+          </b-card>
+        </template>
+
+        <template v-slot:cell(finished)="data">
+            <b-icon v-if="data.item.finished" icon="check-circle-fill" variant="success"></b-icon>
+        </template>
+      </b-table>
+
+      </b-card-text>
+
+      </b-card>
+    </b-container>
+  </ocs-data-loader>
+</template>
+<script>
+import $ from 'jquery';
+
+import { OCSMixin } from 'ocs-component-lib';
+
+import NotFound from '@/components/NotFound.vue';
+import BasicCustomField from '@/components/util/BasicCustomField.vue';
+
+export default {
+  name: 'ProposalReviewPanelDetail',
+  components: {
+    NotFound,
+    BasicCustomField
+  },
+  mixins: [OCSMixin.getDataMixin],
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  data: function() {
+    return {
+      data: {
+        user_reviews: [],
+      },
+      userReviewFields: [
+        {key: "comments", label: ""},
+        "username",
+        {key: "grade", label: "Grade", sortable: true},
+        "finished"
+      ],
+      form: {
+        summary: "",
+      },
+      updatingSummary: false,
+      apiValidationErrors: {}
+    };
+  },
+  watch: {
+    data: function(data) {
+      this.form.summary = data.summary;
+    }
+  },
+  computed: {
+    userReviews: function() {
+      return this.data.user_reviews.map(item => ({
+        ...item,
+        _showDetails: true
+      }));
+    }
+  },
+  methods: {
+    initializeDataEndpoint: function() {
+      return this.$store.state.urls.observationPortalApi + '/api/scienceapplication-reviews/' + this.id;
+    },
+    updateSummary(event) {
+      event.preventDefault();
+      this.updatingSummary = true
+
+      const that = this;
+
+      $.ajax({
+        method: "PUT",
+        url: this.initializeDataEndpoint() + "/summary",
+        data: JSON.stringify(this.form),
+        dataType: "json",
+        processData: "false",
+        contentType: "application/json",
+        cache: false
+      }).done(function(response) {
+        that.apiValidationErrors = {};
+
+        that.data.summary = response;
+        that.$store.commit("addMessage", { text: "Saved", variant: "success" });
+
+      }).fail(function(response) {
+        if (response.status === 400) {
+          that.$store.commit("addMessage", { text: "There was an error with your submission.", variant: "danger" });
+          that.apiValidationErrors = response.responseJSON;
+        } else {
+          that.$store.commit("addMessage", {
+            text: "There was an unexpected error, please try again later.",
+            variant: "danger"
+          });
+        }
+      }).always(function() {
+        that.updatingSummary = false;
+      });
+
+    },
+  }
+};
+</script>
diff --git a/src/views/ProposalReviewUserDetail.vue b/src/views/ProposalReviewUserDetail.vue
new file mode 100644
index 0000000..ce8f404
--- /dev/null
+++ b/src/views/ProposalReviewUserDetail.vue
@@ -0,0 +1,163 @@
+<template>
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
+    <b-container>
+      <b-breadcrumb>
+        <b-breadcrumb-item :to="{ name: 'proposalReviewDashboard'}">
+          <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
+          Proposal Reviews
+          </b-breadcrumb-item>
+        <b-breadcrumb-item active>My Comments</b-breadcrumb-item>
+      </b-breadcrumb>
+
+      <b-alert v-for="error in apiValidationErrors.non_field_errors" :key="error" variant="danger" dismissible show> {{ error }}</b-alert>
+      <b-alert v-for="error in apiValidationErrors.id" :key="error" variant="danger" dismissible show> {{ error }}</b-alert>
+
+      <b-card :title="data.title" sub-title="Abstract">
+        <b-card-text>
+          {{ data.abstract || 'N/A' }}
+        </b-card-text>
+
+        <b-card-text>
+        <b-link :href="data.pdf_url" :disabled="data.pdf_url === null" :title="data.pdf_url === null ? 'PDF (not found)' : 'PDF'">
+        PDF
+        <b-icon
+          :icon="data.pdf_url === null ? 'file-x-fill' : 'file-pdf-fill'"
+          :variant="data.pdf_url == null ? 'danger' : 'primary'"
+        >
+        </b-icon>
+        </b-link>
+        </b-card-text>
+
+      <b-card-text>
+        <h5>Technical Review</h5>
+        <p>{{ data.technical_review || 'N/A' }}</p>
+      </b-card-text>
+
+        <b-card-text>
+        <h5>Review</h5>
+        <b-form @submit="onSubmit" >
+          <basic-custom-field
+            v-model="form.comments"
+            :errors="apiValidationErrors.comments"
+            placeholder="Enter your comments here..."
+            label="Comments"
+            field="comments"
+            field-type="textarea"
+          ></basic-custom-field>
+
+          <basic-custom-field
+            v-model="form.grade"
+            :errors="apiValidationErrors.grade"
+            label="Grade"
+            field="grade"
+            type="number"
+            min="0"
+            max="10"
+            step="0.01"
+            description="Between 0.00 and 10.00, where higher is better. E.g. 9.25"
+            placeholder="Enter grade"
+          ></basic-custom-field>
+
+          <basic-custom-field
+            v-model="form.finished"
+            field-type="checkbox"
+            field="finished"
+            description="Check when you have finished making changes."
+            :errors="apiValidationErrors.finished"
+            checkbox-option-label="Finished"
+            value=true
+          ></basic-custom-field>
+
+          <b-button type="submit" variant="primary" :disabled="submitDisabled">Save</b-button>
+        </b-form>
+        </b-card-text>
+      </b-card>
+    </b-container>
+  </ocs-data-loader>
+</template>
+<script>
+import $ from 'jquery';
+
+import { OCSMixin } from 'ocs-component-lib';
+
+import NotFound from '@/components/NotFound.vue';
+import BasicCustomField from '@/components/util/BasicCustomField.vue';
+
+export default {
+  name: 'ProposalReviewUserDetail',
+  components: {
+    NotFound,
+    BasicCustomField
+  },
+  mixins: [OCSMixin.getDataMixin],
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  data: function() {
+    return {
+      form: {
+        comments: "",
+        grade: null,
+        finished: false
+      },
+      submitDisabled: false,
+      apiValidationErrors: {}
+    };
+  },
+  watch: {
+    data: function(data) {
+      this.form.comments = data.my_review?.comments;
+      this.form.grade = data.my_review?.grade;
+      this.form.finished = data.my_review?.finished;
+    }
+  },
+  methods: {
+    initializeDataEndpoint: function() {
+      return this.$store.state.urls.observationPortalApi + '/api/scienceapplication-reviews/' + this.id;
+    },
+    onSubmit(event) {
+      event.preventDefault();
+      this.submitDisabled = true
+
+      const that = this;
+
+      $.ajax({
+        method: this.data.my_review === null ? "POST" : "PUT",
+        url: this.initializeDataEndpoint() + "/my-review",
+        data: JSON.stringify(this.form),
+        dataType: "json",
+        processData: "false",
+        contentType: "application/json",
+        cache: false
+      }).done(function(response) {
+        that.apiValidationErrors = {};
+
+        that.data.my_review = response;
+        that.$store.commit("addMessage", { text: "Saved", variant: "success" });
+
+        that.dataNotFound = false;
+
+      }).fail(function(response) {
+        if (response.status === 400) {
+          that.$store.commit("addMessage", { text: "There was an error with your submission.", variant: "danger" });
+          that.apiValidationErrors = response.responseJSON;
+        } else {
+          that.$store.commit("addMessage", {
+            text: "There was an unexpected error, please try again later.",
+            variant: "danger"
+          });
+        }
+      }).always(function() {
+        that.submitDisabled = false;
+      });
+
+    },
+  }
+};
+</script>