Show a single menu for all user logins

Pass the list of user access tokens to the past decisions endpoint
bperel · Jul 20, 2020 · 063a096 · 063a096
1 parent b263887
commit 063a096
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 72 deletions.
diff --git a/src/components/TileList.vue b/src/components/TileList.vue
@@ -37,32 +37,23 @@
             <b-col md="12" class="control">
               <b-btn-group size="lg">
                 <b-btn
-                  v-if="
-                    !isAppliedSuggestion(tile.suggestion) ||
-                    isAcceptedSuggestion(tile.suggestion)
-                  "
-                  :disabled="
-                    isAppliedSuggestion(tile.suggestion) ||
-                    !(tile.suggestion.id === tile.suggestion.id && ready)
-                  "
+                  v-if="!readOnly || tile.suggestion.applied === true"
+                  :disabled="readOnly"
                   size="lg"
                   variant="success"
-                  @click="acceptSuggestionEdit"
+                  @click="$emit('applySuggestionDecision', 'accept')"
                   >Fix</b-btn
                 >
                 <b-btn
-                  v-if="!isAppliedSuggestion(tile.suggestion)"
-                  :disabled="
-                    isAppliedSuggestion(tile.suggestion) ||
-                    !(tile.suggestion.id === tile.suggestion.id && ready)
-                  "
+                  v-if="!readOnly || tile.suggestion.applied === null"
+                  :disabled="readOnly"
                   size="lg"
                   variant="light"
-                  @click="$emit('nextTile')"
+                  @click="$emit('applySuggestionDecision', 'skip')"
                   >Skip</b-btn
                 >
-                <b-button
-                  v-if="isRefusedSuggestion(tile.suggestion)"
+                <b-btn
+                  v-if="tile.suggestion.applied === false"
                   size="lg"
                   variant="primary"
                   disabled
@@ -71,25 +62,27 @@
                     ><small>{{
                       refusalReasons[tile.suggestion.appliedReason]
                     }}</small></small
-                  ></b-button
+                  ></b-btn
                 >
                 <b-dropdown
-                  v-else-if="!isAppliedSuggestion(tile.suggestion)"
+                  v-else-if="!readOnly"
                   :disabled="
                     !(tile.suggestion.id === tile.suggestion.id && ready)
                   "
                   size="lg"
                   text="Do not fix"
                   variant="primary"
                 >
-                  <template v-if="!isAppliedSuggestion(tile.suggestion)">
-                    <b-dropdown-item
-                      v-for="(value, key) in refusalReasons"
-                      :key="key"
-                      @click="refuseSuggestionEdit(key)"
-                      >{{ value }}
-                    </b-dropdown-item></template
-                  >
+                  <b-dropdown-item
+                    v-for="(value, key) in refusalReasons"
+                    :key="key"
+                    @click="
+                      $emit('applySuggestionDecision', 'refuse', {
+                        reason: key,
+                      })
+                    "
+                    >{{ value }}
+                  </b-dropdown-item>
                 </b-dropdown>
               </b-btn-group>
             </b-col>
@@ -124,27 +117,7 @@ export default {
         "This text shouldn't be checked (foreign language, markup, etc.)",
       other: "Other",
     },
-  }),
-
-  methods: {
-    acceptSuggestionEdit: function () {
-      this.$emit("acceptSuggestionEdit");
-      this.ready = false;
-    },
-    refuseSuggestionEdit: function (reason) {
-      this.$emit("refuseSuggestionEdit", { reason });
-      this.ready = false;
-    },
-    isAppliedSuggestion: function (suggestion) {
-      return suggestion.applied != null;
-    },
-    isAcceptedSuggestion: function (suggestion) {
-      return suggestion.applied === true;
-    },
-    isRefusedSuggestion: function (suggestion) {
-      return suggestion.applied === false;
-    },
-  },
+  })
 };
 </script>
 

diff --git a/src/views/Game.vue b/src/views/Game.vue
@@ -15,17 +15,15 @@
       v-else
       :tiles="tiles"
       :activeTile="activeTile"
-      @acceptSuggestionEdit="applySuggestionEditDecision(true)"
-      @nextTile="nextTile()"
-      @refuseSuggestionEdit="applySuggestionEditDecision(false, $event.reason)"
+      @applySuggestionDecision="applySuggestionDecision"
     />
   </div>
 </template>
 
 <script>
 import TileList from "@/components/TileList.vue";
 import axios from "axios";
-import { mapGetters, mapState } from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "game",
@@ -55,11 +53,13 @@ export default {
       this.activeTile = this.tiles[0];
     },
 
-    applySuggestionEditDecision: function (accept, reason) {
+    applySuggestionDecision: function (
+      decision,
+      { reason } = { reason: null }
+    ) {
       let vm = this;
       const params = new URLSearchParams();
       params.append("suggestion_id", vm.activeTile.suggestion.id);
-      params.append("reason", reason || null);
       params.append("languageCode", vm.activeTile.article.languageCode);
       params.append(
         "accessToken",
@@ -68,11 +68,12 @@ export default {
             languageCode === vm.activeTile.article.languageCode
         )[0].accessToken
       );
+      if (reason) {
+        params.append("reason", reason);
+      }
       axios
         .post(
-          `${this.LANGUAGETOOL_ENDPOINT_ROOT}/suggestion/${
-            accept ? "accept" : "refuse"
-          }`,
+          `${this.LANGUAGETOOL_ENDPOINT_ROOT}/suggestion/${decision}`,
           params,
           {
             headers: {
@@ -104,9 +105,12 @@ export default {
       let vm = this;
       axios
         .get(
-          `${this.LANGUAGETOOL_ENDPOINT_ROOT}/suggestions?languageCodes=` +
+          `${this.LANGUAGETOOL_ENDPOINT_ROOT}/suggestions?` +
             this.accessTokens
-              .map((accessToken) => accessToken.languageCode)
+              .map(
+                (accessToken) =>
+                  `${accessToken.languageCode}=${accessToken.accessToken}`
+              )
               .join(",")
         )
         .then(({ data }) => {

diff --git a/src/views/Navbar.vue b/src/views/Navbar.vue
@@ -2,22 +2,19 @@
   <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
     <div>
       <b-dropdown
-        :key="accessTokenData.languageCode"
-        v-for="accessTokenData in accessTokens"
+        v-if="accessTokens && Object.values(accessTokens).length"
         variant="outline-secondary"
       >
         <span slot="button-content">
-          {{ accessTokenData.username }}
-          &nbsp;
-          <b-badge>{{ accessTokenData.languageCode }}</b-badge>
+          Menu
         </span>
         <b-dropdown-item v-b-modal.modal-suggestion-history>
-          View choices
+          View choice history
           <b-modal
             hide-footer
             id="modal-suggestion-history"
-            title="Suggestion history (last 10 suggestions)"
-            @show="loadPastSuggestions(accessTokenData.languageCode)"
+            title="Decision history (last 10 suggestions)"
+            @show="loadPastSuggestions()"
           >
             <b-alert v-if="error" show variant="danger">{{ error }}</b-alert>
             <tile-list
@@ -29,9 +26,15 @@
             <template v-slot:modal-footer />
           </b-modal>
         </b-dropdown-item>
-        <b-dropdown-item @click="$emit('logout', accessTokenData)">
-          Logout
-        </b-dropdown-item>
+        <b-dropdown-group header="Logout">
+          <b-dropdown-item-button
+            :key="accessTokenData.languageCode"
+            v-for="accessTokenData in accessTokens"
+            @click="$emit('logout', accessTokenData)"
+            ><b-badge>{{ accessTokenData.languageCode }}</b-badge
+            >&nbsp;{{ supportedLanguages[accessTokenData.languageCode] }}
+          </b-dropdown-item-button>
+        </b-dropdown-group>
       </b-dropdown>
     </div>
     <a id="brand" class="navbar-brand" href="javascript:void(0)"
@@ -87,13 +90,20 @@ export default {
           .indexOf(supportedLanguage) !== -1
       );
     },
-    loadPastSuggestions(languageCode) {
+    loadPastSuggestions() {
       let vm = this;
       axios
         .get(
-          `${this.LANGUAGETOOL_ENDPOINT_ROOT}/suggestions/past?languageCode=${languageCode}`
+          `${this.LANGUAGETOOL_ENDPOINT_ROOT}/suggestions/past?` +
+            this.accessTokens
+              .map(
+                (accessToken) =>
+                  `${accessToken.languageCode}=${accessToken.accessToken}`
+              )
+              .join(",")
         )
         .then(({ data }) => {
+          vm.error = null;
           vm.pastSuggestions = data.suggestions;
         })
         .catch(() => {