feat: text color for 10-codes

apps/api/prisma/migrations/20230920140633_status_value_text_color/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "StatusValue" ADD COLUMN     "textColor" TEXT;

apps/api/prisma/schema.prisma

@@ -1091,6 +1091,7 @@ model StatusValue {
   shouldDo    ShouldDoType      @default(SET_STATUS)
   whatPages   WhatPages[]
   color       String?
+  textColor   String?
   type        StatusValueType   @default(STATUS_CODE)
   departments DepartmentValue[]
 

apps/api/src/controllers/admin/values/import-values-controller.ts

@@ -294,6 +294,7 @@ export const typeHandlers = {
         ...makePrismaData(ValueType.CODES_10, {
           type: item.type as StatusValueType,
           color: item.color,
+          textColor: item.textColor,
           shouldDo: item.shouldDo as ShouldDoType,
           whatPages: whatPages as WhatPages[],
           value: item.value,

apps/client/locales/en/values.json

@@ -4,6 +4,7 @@
     "values": "Values",
     "shouldDo": "Should Do",
     "color": "Color",
+    "textColor": "Text Color",
     "callsign": "Callsign",
     "department": "Department",
     "gameHash": "Game Hash",

apps/client/src/components/admin/values/ManageValueModal.tsx

@@ -106,6 +106,7 @@ function createInitialValues(options: CreateInitialValuesOptions) {
 
     shouldDo: value && isStatusValue(value) ? value.shouldDo : "",
     color: value && isStatusValue(value) ? value.color ?? "" : "",
+    textColor: value && isStatusValue(value) ? value.textColor ?? "" : "",
     type: getTypeForValue(options.type, value),
     departments:
       value &&
@@ -281,6 +282,13 @@ export function ManageValueModal({ onCreate, onUpdate, type, value }: Props) {
       };
     }
 
+    if (values.textColor && !hexColor().test(values.textColor)) {
+      return {
+        ...errors,
+        textColor: tValues("mustBeValidHexColor"),
+      };
+    }
+
     return errors;
   }
 

apps/client/src/components/admin/values/manage-modal/status-value-fields.tsx

@@ -9,6 +9,7 @@ import { useValues } from "context/ValuesContext";
 import { useTranslations } from "use-intl";
 import { isOfficerRankValue } from "@snailycad/utils";
 import { ManageValueFormValues } from "../ManageValueModal";
+import { generateContrastColor } from "lib/table/get-contrasting-text-color";
 
 const HexColorPicker = dynamic(async () => (await import("react-colorful")).HexColorPicker);
 
@@ -140,6 +141,31 @@ export function StatusValueFields() {
         </div>
       </FormField>
 
+      <FormField errorMessage={errors.textColor as string} label={t("textColor")}>
+        <div className={`flex ${values.showPicker ? "items-start" : ""}`}>
+          {values.showPicker ? (
+            <HexColorPicker
+              color={values.textColor}
+              onChange={(textColor) => setFieldValue("textColor", textColor)}
+              style={{ width: "100%", height: "150px" }}
+            />
+          ) : (
+            <Input name="textColor" onChange={handleChange} value={values.textColor} />
+          )}
+
+          <Button
+            variant="cancel"
+            className="p-0 px-1 ml-2"
+            type="button"
+            onPress={() => setFieldValue("showPicker", !values.showPicker)}
+            aria-label="Color Picker"
+            title="Color Picker"
+          >
+            <Eyedropper />
+          </Button>
+        </div>
+      </FormField>
+
       <RadioGroupField
         value={values.type!}
         onChange={(value) => setFieldValue("type", value)}
@@ -148,6 +174,22 @@ export function StatusValueFields() {
         <Radio value={StatusValueType.STATUS_CODE}>Status Code</Radio>
         <Radio value={StatusValueType.SITUATION_CODE}>Situation Code</Radio>
       </RadioGroupField>
+
+      <section className="mt-3">
+        <h3 className="text-lg font-medium mb-1">Color Preview</h3>
+
+        <div
+          style={{
+            backgroundColor: values.color,
+            color: values.color
+              ? values.textColor || generateContrastColor(values.color)
+              : values.textColor,
+          }}
+          className="w-full p-3 text-center rounded font-medium"
+        >
+          Lorem ipsum dolor sit.
+        </div>
+      </section>
     </>
   );
 }

apps/client/src/components/dispatch/active-units/deputies/active-deputies.tsx

@@ -107,17 +107,21 @@ function ActiveDeputies({ initialDeputies }: Props) {
           features={{ isWithinCardOrModal: true }}
           containerProps={{ className: "mb-3 px-4" }}
           data={activeDeputies.map((deputy) => {
-            const color = deputy.status?.color;
-            const useDot = user?.statusViewMode === StatusViewMode.DOT_COLOR;
+            const backgroundColor = deputy.status?.color;
+            const textColor = deputy.status?.textColor;
+            const color = backgroundColor
+              ? textColor || generateContrastColor(backgroundColor)
+              : textColor;
 
+            const useDot = user?.statusViewMode === StatusViewMode.DOT_COLOR;
             const nameAndCallsign = `${generateCallsign(deputy)} ${makeUnitName(deputy)}`;
 
             return {
               id: deputy.id,
               rowProps: {
                 style: {
-                  background: !useDot && color ? color : undefined,
-                  color: !useDot && color ? generateContrastColor(color) : undefined,
+                  backgroundColor: !useDot && backgroundColor ? backgroundColor : undefined,
+                  color,
                 },
               },
               name: nameAndCallsign,

apps/client/src/components/dispatch/active-units/officers/active-officers.tsx

@@ -129,7 +129,11 @@ function ActiveOfficers({ initialOfficers }: Props) {
           containerProps={{ className: "mb-3 px-4" }}
           tableState={tableState}
           data={activeOfficers.map((officer) => {
-            const color = officer.status?.color;
+            const backgroundColor = officer.status?.color;
+            const textColor = officer.status?.textColor;
+            const color = backgroundColor
+              ? textColor || generateContrastColor(backgroundColor)
+              : textColor;
 
             const useDot = user?.statusViewMode === StatusViewMode.DOT_COLOR;
             const nameAndCallsign = `${generateCallsign(officer)} ${makeUnitName(officer)}`;
@@ -138,8 +142,8 @@ function ActiveOfficers({ initialOfficers }: Props) {
               id: officer.id,
               rowProps: {
                 style: {
-                  background: !useDot && color ? color : undefined,
-                  color: !useDot && color ? generateContrastColor(color) : undefined,
+                  backgroundColor: !useDot && backgroundColor ? backgroundColor : undefined,
+                  color,
                 },
               },
               name: nameAndCallsign,
@@ -171,9 +175,9 @@ function ActiveOfficers({ initialOfficers }: Props) {
               rank: (isUnitOfficer(officer) && officer.rank?.value) ?? common("none"),
               status: (
                 <span className="flex items-center">
-                  {useDot && color ? (
+                  {useDot && backgroundColor ? (
                     <span
-                      style={{ background: color }}
+                      style={{ background: backgroundColor }}
                       className="block w-3 h-3 mr-2 rounded-full"
                     />
                   ) : null}

packages/schemas/src/admin/values/import.ts

@@ -36,6 +36,7 @@ const TYPE_REGEX = /STATUS_CODE|SITUATION_CODE/;
 export const CODES_10_SCHEMA = BASE_VALUE_SCHEMA.extend({
   shouldDo: z.string().regex(SHOULD_DO_REGEX),
   color: z.string().max(255).nullish(),
+  textColor: z.string().max(255).nullish(),
   type: z.string().regex(TYPE_REGEX).max(255),
   whatPages: z.array(z.any()).max(3).nullish(),
   departments: z.array(z.any()).nullish(),