Officer List: Integrated tier-based ordering

.github/ISSUE_TEMPLATE/officer_update_request.yaml

@@ -41,6 +41,38 @@ body:
     validations:
       required: false
 
+  - type: dropdown
+    id: officer_tier
+    attributes:
+      label: '>>Overwrite Officer Position Tier<<'
+      description: Please enter the tier of the officer's position.
+      options:
+        - 'President'
+        - 'Vice President'
+        - 'Webmaster'
+        - 'Treasurer'
+        - 'Secretary'
+        - 'Event Coordinator'
+        - 'Marketing Coordinator'
+        - 'Historian'
+        - 'Data Analyst'
+        - 'AI President'
+        - 'AI Officer'
+        - 'Algo President'
+        - 'Algo Officer'
+        - 'Algo Event Coordinator'
+        - 'Create President'
+        - 'Create Officer'
+        - 'Create Project Developer'
+        - 'Create Event Coordinator'
+        - 'Dev President'
+        - 'Dev Officer'
+        - 'Dev Project Manager'
+        - 'NodeBuds Officer'
+        - 'Deprecated Position'
+    validations:
+      required: false
+
   - type: textarea
     id: officer_image
     attributes:
@@ -50,3 +82,11 @@ body:
       placeholder: You can attach images by clicking this area to highlight it and then dragging files in.
     validations:
       required: false
+
+  - type: input
+    id: officer_displayname
+    attributes:
+      label: '>>Overwrite Officer GitHub Username<<'
+      description: Please enter the GitHub username of the officer's position.
+    validations:
+      required: false

package.json

@@ -50,7 +50,7 @@
     "query-string": "^7.1.1",
     "sass": "^1.42.1",
     "size-limit": "^7.0.4",
-    "svelte": "^3.42.6",
+    "svelte": "^3.46.4",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.9.4",
     "tslib": "^2.3.1",

scripts/update-officer.js

@@ -6,15 +6,15 @@ import { readFileSync, writeFileSync, createWriteStream } from 'fs';
  * Example officer data:
  * ```json
  * {
- *	"name": "Ethan Davidson",
+ *	"fullName": "Ethan Davidson",
+ *  "picture": "ethan-davidson.png",
  *	"positions": {
- *		"F20": "Competition Manager",
- *		"S21": "Webmaster",
- *		"F21": "Webmaster"
- *	},
- *	"picture": "ethan-davidson.png"
+ *		"F20": { title: "Competition Manager", tier: Tier.GeneralBoard },
+ *		"S21": { title: "Webmaster", tier: Tier.GeneralBoard },
+ *		"F21": { title: "Webmaster", tier: Tier.GeneralBoard }
+ *	}
  * }
- *```
+ * ```
  */
 const OFFICERS_FILENAME = './src/lib/constants/officers.json';
 
@@ -35,6 +35,7 @@ function parseImgSrcFromMd(markdown) {
   const mdPattern = /!\[[^\]]*\]\((?<filename>.*?)(?="|\))(?<optionalpart>".*")?\)/m;
   let match = mdPattern.exec(markdown);
   if (match !== null) return match.groups.filename;
+
   // https://stackoverflow.com/a/450117
   const htmlPattern = /src\s*=\s*"(.+?)"/m;
   match = htmlPattern.exec(markdown);
@@ -56,25 +57,28 @@ async function downloadOfficerImage(url, officerName) {
 }
 
 async function updateOfficer() {
+  const TIERS_JSON = JSON.parse(readFileSync('./src/lib/constants/tiers.json'));
   const result = JSON.parse(readFileSync(OFFICERS_FILENAME));
 
   const {
-    ['Officer Name']: name,
+    ['Officer Name']: fullName,
     ['Term to Overwrite']: term,
     ['Overwrite Officer Position Title']: title,
+    ['Overwrite Officer Position Tier']: rawTier,
+    ['Overwrite Officer GitHub Username']: displayName,
     ['Overwrite Officer Picture']: picture,
   } = JSON.parse(process.env.FORM_DATA);
 
-  const isValidName = name?.trim().length > 0 ?? false;
-  if (!isValidName) {
-    console.error(`received invalid officer name, ${name}`);
+  const isValidFullName = fullName?.trim().length > 0 ?? false;
+  if (!isValidFullName) {
+    console.error(`received invalid officer name, ${fullName}`);
     return false;
   }
 
-  let officerIndex = result.findIndex((officer) => officer.name === name);
+  let officerIndex = result.findIndex((officer) => officer.fullName === fullName);
   if (officerIndex === -1) {
-    // officer name not found, so let's create a new officer
-    result.push({ name, positions: {} });
+    // officer fullName not found, so let's create a new officer
+    result.push({ fullName, positions: {} });
     officerIndex = result.length - 1;
   }
 
@@ -86,8 +90,21 @@ async function updateOfficer() {
       return false;
     }
 
-    if (title === 'DELETE') delete result[officerIndex].positions[abbreviatedTerm];
-    else result[officerIndex].positions[abbreviatedTerm] = title.trim();
+    if (title === 'DELETE') {
+      delete result[officerIndex].positions[abbreviatedTerm];
+    } else {
+      result[officerIndex].positions[abbreviatedTerm].title = title.trim();
+    }
+  }
+
+  const tierValue = TIERS_JSON.indexOf(rawTier);
+  if (tierValue !== -1 && term.trim().length > 0 && title !== 'DELETE') {
+    result[officerIndex].positions[abbreviatedTerm].tier = tierValue;
+  }
+
+  const displayNameNeedsUpdate = displayName !== undefined && displayName.trim().length > 0;
+  if (displayNameNeedsUpdate) {
+    result[officerIndex].displayName = displayName.trim();
   }
 
   const pictureNeedsUpdate = picture !== undefined && picture.trim().length > 0;
@@ -97,11 +114,11 @@ async function updateOfficer() {
       console.error(`received invalid officer picture '${picture}'`);
       return false;
     }
-    const relativeImgSrc = await downloadOfficerImage(imgSrc, name);
+    const relativeImgSrc = await downloadOfficerImage(imgSrc, fullName);
     if (typeof relativeImgSrc === 'string') result[officerIndex].picture = relativeImgSrc;
   }
 
-  console.log(`${name.trim()}'s updated officer data: `, result[officerIndex]);
+  console.log(`${fullName.trim()}'s updated officer data: `, result[officerIndex]);
 
   // Do not forget to make our linter happy by adding a new line at the end of the generated file
   writeFileSync(OFFICERS_FILENAME, JSON.stringify(result, null, 2) + '\n');

src/lib/components/about/officer-profile-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import OfficerProfile from '$lib/components/about/officer-profile.svelte';
   import AcmSelect from '$lib/components/utils/acm-select.svelte';
-  import { OFFICERS, TERMS } from '$lib/constants/officers';
+  import { OFFICERS, VISIBLE_TERMS } from '$lib/constants/officers';
   import type { Officer } from '$lib/constants/officers';
   import { termIndex } from '$lib/stores/term-index';
 
@@ -18,15 +18,29 @@
     return `${termText} 20${yearDigit1}${yearDigit2}`;
   }
 
+  /**
+   * @param termCode ex: `F21`, `S22`, etc.
+   * @returns sort function for `Officer`s
+   */
+  function sortByTier(termCode: string) {
+    return (a: Officer, b: Officer) => {
+      const aTier = a.positions[termCode].tier;
+      const bTier = b.positions[termCode].tier;
+      return aTier - bTier;
+    };
+  }
+
   // The process below is admittedly _hacky_. Due to a constraint with
   // the AcmSelect component, the index of the selected item must be
   // handled outside of the component. Below, we are updating the
   // termIndex when the AcmSelect component's value changes.
-  const formattedTerms = TERMS.map(formatTerm);
+  const formattedTerms = VISIBLE_TERMS.map(formatTerm);
   let filteredOfficers = [];
   let currentFormattedTerm = formattedTerms[$termIndex];
   $: $termIndex = formattedTerms.indexOf(currentFormattedTerm);
-  termIndex.subscribe(() => (filteredOfficers = OFFICERS.filter(filter)));
+  termIndex.subscribe(
+    () => (filteredOfficers = OFFICERS.filter(filter).sort(sortByTier(VISIBLE_TERMS[$termIndex])))
+  );
 </script>
 
 <section>
@@ -36,12 +50,8 @@
 
   <div class="container">
     <div class="officer-profile-list">
-      {#each filteredOfficers as { name, positions, picture } (`${name}-${$termIndex}`)}
-        <OfficerProfile
-          {name}
-          title={positions[TERMS[$termIndex]]}
-          {picture}
-          {placeholderPicture} />
+      {#each filteredOfficers as officer ($termIndex + officer.fullName)}
+        <OfficerProfile info={officer} {placeholderPicture} />
       {/each}
     </div>
   </div>

src/lib/components/about/officer-profile.svelte

@@ -1,19 +1,24 @@
 <script lang="ts">
+  import { Officer, TIERS, VISIBLE_TERMS } from '$lib/constants';
+  import { termIndex } from '$lib/stores/term-index';
+
+  export let info: Officer;
   export let placeholderPicture = 'placeholder.png';
-  export let name = '';
-  export let title = '';
-  export let picture: string = placeholderPicture;
+  export let dev = false;
+
+  const officerName = info.fullName ?? '';
+  const officerPicture = info.picture ?? placeholderPicture;
 
-  let officerName = name;
-  let officerPicture = picture;
-  let titleHTML = title
+  $: titleHTML = info.positions[VISIBLE_TERMS[$termIndex]].title
     .replace(/Create/, `<span class="brand-em brand-pink">Create</span>`)
     .replace(/Algo/, `<span class="brand-em brand-purple">Algo</span>`)
     .replace(/Dev/, `<span class="brand-em brand-bluer">Dev</span>`)
     .replace(
       /NodeBuds/,
       `<span class="headers">node<span class="brand-em brand-red">Buds</span></span>`
     );
+
+  $: officerTier = dev ? TIERS[info.positions[VISIBLE_TERMS[$termIndex]].tier] : '';
 </script>
 
 <div class="officer-container">
@@ -23,6 +28,7 @@
     alt={`Image of ${officerName}.`} />
   <h3 class="headers">
     {officerName}
+    {#if officerTier.length}<br />{officerTier}<br />{/if}
   </h3>
   <p>
     {@html titleHTML}