Merge branch 'master' into fix/combo-box-answer-list-data-list

packages/scripts/package.json

@@ -34,7 +34,7 @@
     "node-rsa": "^1.1.1",
     "open": "^9.1.0",
     "p-queue": "^6.6.2",
-    "semver": "^7.3.7",
+    "semver": "^7.5.2",
     "shared": "workspace:*",
     "simple-git": "^3.7.1",
     "subtitles-parser-vtt": "^0.1.0",

src/app/shared/components/template/components/task-card/task-card.component.html

@@ -1,4 +1,8 @@
-<div [class]="'card-wrapper landscape ' + style" (click)="triggerActions('click')">
+<div
+  [class]="'card-wrapper landscape ' + style"
+  [attr.data-variant]="variant"
+  (click)="triggerActions('click')"
+>
   <ng-container *ngIf="highlighted; else showProgress">
     <span class="badge highlighted-badge">
       {{ highlightedText }}

src/app/shared/components/template/components/task-card/task-card.component.scss

@@ -9,6 +9,9 @@
   max-width: 400px;
   filter: drop-shadow(var(--ion-default-box-shadow));
 
+  // Variants should be set using "variant" param, but support legacy
+  // "style" param for "portrait" and "button", which adds a class
+  &[data-variant~="portrait"],
   &.portrait {
     width: 165px;
     padding: var(--small-padding);
@@ -35,6 +38,7 @@
     }
   }
 
+  &[data-variant~="button"],
   &.button {
     display: flex;
     align-items: center;
@@ -140,3 +144,12 @@
     }
   }
 }
+
+// TODO: These could be moved to the global scope, and possibly reworked to be "styles" rather than "variants"
+// as part of https://github.com/IDEMSInternational/parenting-app-ui/issues/1971
+*[data-variant~="background-secondary"] {
+  background-color: var(--ion-color-secondary-200);
+}
+*[data-variant~="background-primary"] {
+  background-color: var(--ion-color-primary-200);
+}

src/app/shared/components/template/components/task-card/task-card.component.ts

@@ -5,12 +5,79 @@ import { TemplateBaseComponent } from "../base";
 import { IProgressStatus } from "src/app/shared/services/task/task.service";
 import { TemplateFieldService } from "../../services/template-field.service";
 
+interface ITaskCardParams {
+  /**
+   * The ID of an individual task. A task card can display *either* an individual task,
+   * *or* a task group: either a task_id or a task_group_id should be provided.
+   */
+  task_id: string;
+  /**
+   * The ID of a task group, used to track whether it is the highlighted task group.
+   * If provided, the task card will display a progress bar for the task group
+   * **/
+  task_group_id: string;
+  /**
+   * The name of the data_list containing the elements of the task group,
+   * used to track completion progress of the task group
+   * **/
+  task_group_data: string;
+  /**
+   * The name of the field that tracks the completion of the task. Can be omitted when displaying a task group,
+   * as their completion is calculated by the completion of their constituent tasks
+   */
+  completed_field: string;
+  /** The title to display on the task card */
+  title: string;
+  /**
+   * The subtitle to display on the task card, typically a short description.
+   * Optional
+   */
+  subtitle: string;
+  /**
+   * The image to display on the task card.
+   * Optional
+   */
+  image: string;
+  /** Legacy, use variant instead */
+  style: string;
+  /**
+   * A list of named style variants of the component, separated by spaces or commas.
+   * Default "landscape"
+   * */
+  variant: "background-secondary" | "background-primary" | "button" | "landscape" | "portrait" | "";
+  /**
+   * The icon to display in the "badge" added to the task card
+   * when its associated task/task group has been completed
+   */
+  completed_icon: string;
+  /**
+   * The icon to display in the "badge" added to the task card
+   * when its associated task/task group is in progress
+   */
+  in_progress_icon: string;
+  /**
+   * Text to display in the "badge" added to the task card
+   * when its associated task group is the highlighted task group.
+   * Default "Active"
+   */
+  highlighted_text: string;
+  /**
+   * The displayed name of the units of progress associated with
+   * the constituent tasks of the task group.
+   * Default "sections"
+   */
+  progress_units_name: string;
+}
+
 @Component({
   selector: "plh-task-card",
   templateUrl: "./task-card.component.html",
   styleUrls: ["./task-card.component.scss"],
 })
 export class TmplTaskCardComponent extends TemplateBaseComponent implements OnInit {
+  /** Authoring parameters */
+  public parameter_list: ITaskCardParams;
+
   style: string;
   highlighted: boolean;
   highlightedText: string;
@@ -26,6 +93,7 @@ export class TmplTaskCardComponent extends TemplateBaseComponent implements OnIn
   completedIcon: string;
   inProgressIcon: string;
   isButton: boolean;
+  variant: ITaskCardParams["variant"];
 
   constructor(
     private taskService: TaskService,
@@ -51,8 +119,14 @@ export class TmplTaskCardComponent extends TemplateBaseComponent implements OnIn
     this.title = getStringParamFromTemplateRow(this._row, "title", null);
     this.subtitle = getStringParamFromTemplateRow(this._row, "subtitle", null);
     this.image = getStringParamFromTemplateRow(this._row, "image", null);
+
+    // Use "variant" param to determine styles, including support for legacy "style" param
     this.style = getStringParamFromTemplateRow(this._row, "style", "landscape");
-    this.isButton = this.style.includes("button");
+    this.variant = getStringParamFromTemplateRow(this._row, "variant", "")
+      .split(",")
+      .join(" ") as ITaskCardParams["variant"];
+    this.isButton = this.style.includes("button") || this.variant.includes("button");
+
     this.completedIcon = getStringParamFromTemplateRow(this._row, "completed_icon", null);
     this.inProgressIcon = getStringParamFromTemplateRow(this._row, "in_progress_icon", null);
     this.highlightedText = getStringParamFromTemplateRow(this._row, "highlighted_text", "Active");

yarn.lock

@@ -24417,7 +24417,7 @@ __metadata:
     open: ^9.1.0
     p-queue: ^6.6.2
     pkg: ^5.5.1
-    semver: ^7.3.7
+    semver: ^7.5.2
     shared: "workspace:*"
     simple-git: ^3.7.1
     subtitles-parser-vtt: ^0.1.0
@@ -24515,6 +24515,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.5.2":
+  version: 7.5.3
+  resolution: "semver@npm:7.5.3"
+  dependencies:
+    lru-cache: ^6.0.0
+  bin:
+    semver: bin/semver.js
+  checksum: 9d58db16525e9f749ad0a696a1f27deabaa51f66e91d2fa2b0db3de3e9644e8677de3b7d7a03f4c15bc81521e0c3916d7369e0572dbde250d9bedf5194e2a8a7
+  languageName: node
+  linkType: hard
+
 "semver@npm:~7.0.0":
   version: 7.0.0
   resolution: "semver@npm:7.0.0"