Position counter for OfficerProfile

[ghost]

What's your idea?

Currently, the order of which officers appear on the officer sections depends on where they're placed in the list inside officers.ts

Since some people have promoted from their first role(s), they might need to be moved higher in the grid compared to last year. We should make a position counter in the officers.ts that lets us place people in any order.

For example...

Spring 21

{
    name: "GENERIC NAME",
    positions: {
      [TERM_SPRING_21]: "Officer",
      [POS_SPRING_21]: "3",
    },
    picture: "generic-name.png",
},

Fall 21

{
    name: "GENERIC NAME",
    positions: {
      [TERM_SPRING_21]: "Officer",
      [POS_SPRING_21]: "3",
      [TERM_FALL_21]: "President",
      [POS_FALL_21]: "1", // moves them higher in the list for fall 21
    },
    picture: "generic-name.png",
},

[EthanThatOneKid]

We could have enums for specific tiers and in which people will be sorted alphabetically.

enum Tier {
  First, // Would be used for the president
  Second, // Maybe Vice President
  General, // Other acm general peeps
  CreateLeader, // Saved for the Create director/lead/president
  Create, // Then create officers,
  DevLeader, // Saved for the dev leader
  Dev, // then dev officers
  // etc...
}

The TypeScript enum by default will conveniently generate the enum values like First=0, Second=1, General=2, etc. We can use this to our advantage in our sorting/filtering implementation. After sorting by tier, the officers will be sorted alphanumerically by name.

Then, we can just change the position object to map to something like this instead of just their position title. While we are at it, let's change the type of the positions property to make more sense. See the snippet below.

export enum Term {
  Spring21,
  Fall21,
  Spring22,
}

export interface OfficerPosition {
  title: string;
  term: Term;
  tier: Tier;
}

export interface Officer {
  name: string;
  positions: OfficerPosition[];
  displayname?: string; // GitHub username
  picture?: string;
  url?: string;
}

Then the officer would be expressed in an array, as demonstrated below.

[
  {
    name: "Mike Ploythai",
    picture: "mike-ploythai.png",
    displayname: "mikeploythai",
    positions: [{
      title: "Create Officer",
      term: Term.Spring21,
      tier: Tier.Create,
    }, {
      title: "Create Director, Marketing Chair",
      term: Term.Fall21,
      tier: Tier.CreateLeader,
    }],
  },
  // ...
]

See https://github.com/EthanThatOneKid/acmcsuf.com/blob/5e64fe8e328c33f0f0c71127378068435420ee90/src/lib/constants/officers.ts for the current implementation.