mealie/frontend/components/Domain/Recipe/RecipeList.vue

<template>
  <v-list :class="tile ? 'd-flex flex-wrap background' : 'background'" style="background-color: transparent;">
    <v-sheet
      v-for="recipe, index in recipes"
      :key="recipe.id"
      :elevation="2"
      :class="attrs.class.sheet"
      :style="tile ? 'max-width: 100%; width: fit-content;' : 'width: 100%;'"
    >
      <v-list-item
        :to="disabled ? '' : '/g/' + groupSlug + '/r/' + recipe.slug"
        :class="attrs.class.listItem"
      >
        <template #prepend>
          <v-avatar color="primary" :class="attrs.class.avatar">
            <v-icon
              :class="attrs.class.icon"
              dark
              :size="small ? 'small' : 'default'"
            >
              {{ $globals.icons.primary }}
            </v-icon>
          </v-avatar>
        </template>
        <div :class="attrs.class.text">
          <v-list-item-title
            :class="listItem && listItemDescriptions[index] ? '' : 'pr-4'"
            :style="attrs.style.text.title"
          >
            {{ recipe.name }}
          </v-list-item-title>
          <v-list-item-subtitle v-if="showDescription">
            {{ recipe.description }}
          </v-list-item-subtitle>
          <v-list-item-subtitle
            v-if="listItem && listItemDescriptions[index]"
            :style="attrs.style.text.subTitle"
          >
            <!-- eslint-disable-next-line vue/no-v-html -->
            <div v-html="listItemDescriptions[index]" />
          </v-list-item-subtitle>
        </div>
        <template #append>
          <slot
            :name="'actions-' + recipe.id"
            :v-bind="{ item: recipe }"
          />
        </template>
      </v-list-item>
    </v-sheet>
  </v-list>
</template>

<script setup lang="ts">
import DOMPurify from "dompurify";
import { useFraction } from "~/composables/recipes/use-fraction";
import type { ShoppingListItemOut } from "~/lib/api/types/household";
import type { RecipeSummary } from "~/lib/api/types/recipe";

interface Props {
  recipes: RecipeSummary[];
  listItem?: ShoppingListItemOut;
  small?: boolean;
  tile?: boolean;
  showDescription?: boolean;
  disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  listItem: undefined,
  small: false,
  tile: false,
  showDescription: false,
  disabled: false,
});

const $auth = useMealieAuth();
const { frac } = useFraction();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");

const attrs = computed(() => {
  return props.small
    ? {
        class: {
          sheet: props.tile ? "mb-1 me-1 justify-center align-center" : "mb-1 justify-center align-center",
          listItem: "px-0",
          avatar: "ma-0",
          icon: "ma-0 pa-0 primary",
          text: "pa-0",
        },
        style: {
          text: {
            title: "font-size: small;",
            subTitle: "font-size: x-small;",
          },
        },
      }
    : {
        class: {
          sheet: props.tile ? "mx-1 justify-center align-center" : "mb-1 justify-center align-center",
          listItem: "px-4",
          avatar: "",
          icon: "pa-1 primary",
          text: "",
        },
        style: {
          text: {
            title: "",
            subTitle: "",
          },
        },
      };
});

function sanitizeHTML(rawHtml: string) {
  return DOMPurify.sanitize(rawHtml, {
    USE_PROFILES: { html: true },
    ALLOWED_TAGS: ["strong", "sup"],
  });
}

const listItemDescriptions = computed<string[]>(() => {
  if (
    props.recipes.length === 1 // we don't need to specify details if there's only one recipe ref
    || !props.listItem?.recipeReferences
    || props.listItem.recipeReferences.length !== props.recipes.length
  ) {
    return props.recipes.map(_ => "");
  }

  const listItemDescriptions: string[] = [];
  for (let i = 0; i < props.recipes.length; i++) {
    const itemRef = props.listItem?.recipeReferences[i];
    const quantity = (itemRef.recipeQuantity || 1) * (itemRef.recipeScale || 1);

    let listItemDescription = "";
    if (props.listItem.unit?.fraction) {
      const fraction = frac(quantity, 10, true);
      if (fraction[0] !== undefined && fraction[0] > 0) {
        listItemDescription += fraction[0];
      }

      if (fraction[1] > 0) {
        listItemDescription += ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>`;
      }
      else {
        listItemDescription = (quantity).toString();
      }
    }
    else {
      listItemDescription = (Math.round(quantity * 100) / 100).toString();
    }

    if (props.listItem.unit) {
      const unitDisplay = props.listItem.unit.useAbbreviation && props.listItem.unit.abbreviation
        ? props.listItem.unit.abbreviation
        : props.listItem.unit.name;

      listItemDescription += ` ${unitDisplay}`;
    }

    if (itemRef.recipeNote) {
      listItemDescription += `, ${itemRef.recipeNote}`;
    }

    listItemDescriptions.push(sanitizeHTML(listItemDescription));
  }

  return listItemDescriptions;
});
</script>