Merge pull request #362 from MuckRock/354-handlePlural

src/addons/dispatch/Premium.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-  import { handlePlural } from "../../util/string";
-  import type { AddOnListItem } from "../types";
-  import Button from "../../common/Button.svelte";
-  import Credit from "../../common/icons/Credit.svelte";
+  // import Button from "../../common/Button.svelte";
+  // import Credit from "../../common/icons/Credit.svelte";
   import Price from "../../premium-credits/Price.svelte";
   import UpgradePrompt from "../../premium-credits/UpgradePrompt.svelte";
+
   import {
     isPremiumOrg,
     getCreditBalance,
-    triggerCreditPurchaseFlow,
+    // triggerCreditPurchaseFlow,
     triggerPremiumUpgradeFlow,
     isOrgAdmin,
-  } from "../../manager/orgsAndUsers";
-  import { User } from "../../pages/app/AccountNavigation/types";
+  } from "../../manager/orgsAndUsers.js";
+
+  import type { AddOnListItem } from "../types";
+  import type { User } from "../../pages/app/accounts/types";
 
   export let addon: AddOnListItem;
 
@@ -88,6 +89,7 @@
     font-weight: 600;
     margin: 0;
   }
+  /*
   .spendingLimit {
     display: flex;
     gap: 0.5rem;
@@ -127,6 +129,7 @@
   .spendingLimit .limitInput::-webkit-outer-spin-button {
     -webkit-appearance: none;
   }
+  */
   .creditBalance {
     margin: 0;
     font-weight: 600;
@@ -153,7 +156,7 @@
           {#if amount}
             <h3 class="prettyCost">
               {$_("addonDispatchDialog.cost", {
-                values: { amount: amount, unit: unit, price: price || 1},
+                values: { amount: amount, unit: unit, price: price || 1 },
               })}
             </h3>
           {/if}

src/addons/types.ts

@@ -26,6 +26,7 @@ interface AddOnParameters {
   properties: Record<string, AddOnProperty>;
   cost: {
     amount: number;
+    price: number;
     unit: string;
   };
   eventOptions: {

src/langs/json/en.json

@@ -384,7 +384,8 @@
       "personalAcct": "Personal Account",
       "adminRole": "Admin",
       "memberListError": "An error occurred while loading the member list.",
-      "memberListEmpty": "This organization has no other members."
+      "memberListEmpty": "This organization has no other members.",
+      "userCount":"{n, plural, one {# organization member} other {# organization members}}"
     },
     "credits": {
       "monthlyOrg": "Monthly Org Allowance",
@@ -442,6 +443,10 @@
     "delete": "Delete",
     "diagnosticInfo": "Diagnostic Info"
   },
+  "manager.documents": {
+    "added": "Successfully added {n, plural, one {# document} other {# documents}} to {project}",
+    "removed": "Successfully removed {n, plural, one {# document} other {# documents}} from {project}"
+  },
   "metaFields": {
     "defaultFieldInvalidText": "The document already has this {fieldName}",
 
@@ -486,7 +491,9 @@
     "newProject": "+ New Project",
     "projMembership": "Project Membership",
     "selectDocs": "Select documents to place them in projects",
-    "createProj": "Create a project to organize and share documents"
+    "createProj": "Create a project to organize and share documents",
+    "remove": "Remove {n, plural, one {document} other {# documents}} from project",
+    "add": "Add {n, plural, one {document} other {# documents}} to project"
   },
   "addonsMenu": {
     "newAddon": "Request new Add-on from Staff",

src/manager/documents.js

@@ -19,8 +19,6 @@ import { wrapLoad, wrapSeparate } from "@/util/wrapLoad.js";
 import { showConfirm } from "./confirmDialog.js";
 import { router } from "@/router/router.js";
 import { search, handleUpload, setDocuments } from "@/search/search.js";
-import { pushToast } from "../common/Toast.svelte";
-import { handlePlural } from "@/util/string.js";
 import { removeFromArray, addToArrayIfUnique } from "@/util/array.js";
 import { modifications } from "./modifications.js";
 import { docEquals, copyDoc } from "@/structure/document.js";
@@ -586,7 +584,7 @@ export async function initDocuments() {
   updatePending();
 }
 
-export async function addDocsToProject(project, documents, showToast = true) {
+export async function addDocsToProject(project, documents) {
   documents = documents.filter((doc) => !doc.projectIds.includes(project.id));
   if (documents.length == 0) return;
   await wrapLoad(layout, async () => {
@@ -605,22 +603,9 @@ export async function addDocsToProject(project, documents, showToast = true) {
       ),
     );
   });
-  if (!layout.error && showToast) {
-    pushToast(
-      `Successfully added ${handlePlural(
-        documents.length,
-        "document",
-        true,
-      )} to ${project.title}.`,
-    );
-  }
 }
 
-export async function removeDocsFromProject(
-  project,
-  documents,
-  showToast = true,
-) {
+export async function removeDocsFromProject(project, documents) {
   documents = documents.filter((doc) => doc.projectIds.includes(project.id));
   if (documents.length == 0) return;
   await wrapLoad(layout, async () => {
@@ -639,13 +624,4 @@ export async function removeDocsFromProject(
       ),
     );
   });
-  if (!layout.error && showToast) {
-    pushToast(
-      `Successfully removed ${handlePlural(
-        documents.length,
-        "document",
-        true,
-      )} from project (${project.title}).`,
-    );
-  }
 }

src/pages/app/Documents.svelte

@@ -7,7 +7,7 @@
   import AddonStatus from "../../addons/progress/AddonStatus.svelte";
   import ActionBar from "./ActionBar.svelte";
   import Anonymous from "./Anonymous.svelte";
-  import AccountNavigation from "./AccountNavigation/AccountNavigation.svelte";
+  import AccountNavigation from "./accounts/AccountNavigation.svelte";
   import Button from "@/common/Button.svelte";
   import Draggable from "@/common/Draggable.svelte";
   import Document from "./Document.svelte";

src/pages/app/AccountNavigation/OrgMemberList.svelte → src/pages/app/accounts/OrgMemberList.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
+  import { People24, Person16 } from "svelte-octicons";
 
   import Loader from "../../../common/Loader.svelte";
   import Error from "../../../common/icons/Error.svelte";
-  import { inMyOrg } from "../../../manager/orgsAndUsers.js";
   import Link from "../../../router/Link.svelte";
-  import { userUrl } from "../../../search/search";
-  import { People24, Person16 } from "svelte-octicons";
-  import { handlePlural } from "../../../util/string";
   import Button from "../../../common/Button.svelte";
 
+  import { userUrl } from "../../../search/search.js";
+  import { inMyOrg } from "../../../manager/orgsAndUsers.js";
+
   export let orgId;
   export let myId;
 
@@ -106,7 +106,9 @@
   <Loader active center pad />
 {:then users}
   {#if users.length > 0}
-    <p class="userCount">{handlePlural(users.length, "organization member")}</p>
+    <p class="userCount">
+      {$_("authSection.org.userCount", { values: { n: users.length } })}
+    </p>
     <ul class="userList">
       {#each users as user}
         <li>

src/pages/app/menus/ProjectMenuItem.svelte

@@ -1,26 +1,25 @@
 <script>
+  import { _ } from "svelte-i18n";
+
   import MenuItem from "@/common/MenuItem.svelte";
   import Tooltip from "@/common/Tooltip.svelte";
   import { layout } from "@/manager/layout.js";
+
   import {
     selectedDocsInProject,
     addSelectedDocsToProject,
     removeSelectedDocsFromProject,
   } from "@/manager/projects.js";
-  import { handlePlural } from "@/util/string.js";
 
   export let project;
 
   $: scope =
     $layout.selected.length > 0 ? selectedDocsInProject(project) : "none";
 
   $: caption =
-    scope == "fully"
-      ? `Remove ${handlePlural(
-          $layout.selected.length,
-          "document",
-        )} from project`
-      : `Add ${handlePlural($layout.selected.length, "document")} to project`;
+    scope === "fully"
+      ? $_("projectsMenu.remove", { values: { n: $layout.selected.length } })
+      : $_("projectsMenu.add", { values: { n: $layout.selected.length } });
 
   function handleClick() {
     if (scope == "fully") {
@@ -31,9 +30,9 @@
   }
 </script>
 
-<style lang="scss">
+<style>
   .scope {
-    color: gray;
+    color: var(--gray);
     float: right;
     margin-left: 7px;
   }
@@ -43,7 +42,7 @@
   <Tooltip delay={500} {caption}>
     {project.title}
     <span class="scope">
-      {#if scope == "fully"}✓{/if}
+      {#if scope === "fully"}✓{/if}
     </span>
   </Tooltip>
 </MenuItem>

src/util/string.js

@@ -1,33 +1,3 @@
-/**
- * Appropriately pluralizes a word based on the quantity.
- * @param {number} value The number of items
- * @param {string} str The base string name of a singular item
- * @param {boolean} allowZero If false, return an empty string on zero items
- */
-export function handlePlural(value, str, allowZero = false) {
-  if (!allowZero && value == 0) return "";
-  return `${value} ${simplePlural(value, str)}`;
-}
-
-/**
- * Returns a word with an "s" after it if appropriate
- * @param {number} value The number of items
- * @param {string} string The base string name of a single item
- */
-export function simplePlural(value, string) {
-  return string + (value != 1 ? "s" : "");
-}
-
-/**
- * Pluralizes a word and puts the number before it only if non-singular,
- * e.g. for the "selected document" vs. for the "3 selected documents"
- * @param {number} value The number of items
- * @param {string} string The base string name of a single item
- */
-export function nameSingularNumberPlural(value, string) {
-  return `${value == 1 ? "" : `${value} `}${simplePlural(value, string)}`;
-}
-
 /**
  * Formats a size to a human-readable format
  * @param {number} bytes The number of bytes