feat: Offline Shopping List (#3760)

Co-authored-by: boc-the-git <3479092+boc-the-git@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeList.vue

@@ -7,7 +7,7 @@
       :class="attrs.class.sheet"
       :style="tile ? 'max-width: 100%; width: fit-content;' : 'width: 100%;'"
     >
-      <v-list-item :to="'/g/' + groupSlug + '/r/' + recipe.slug" :class="attrs.class.listItem">
+      <v-list-item :to="disabled ? '' : '/g/' + groupSlug + '/r/' + recipe.slug" :class="attrs.class.listItem">
         <v-list-item-avatar :class="attrs.class.avatar">
           <v-icon :class="attrs.class.icon" dark :small="small"> {{ $globals.icons.primary }} </v-icon>
         </v-list-item-avatar>
@@ -56,6 +56,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
   },
   setup(props) {
     const { $auth } = useContext();

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -69,7 +69,7 @@
     </v-row>
     <v-row v-if="!listItem.checked && recipeList && recipeList.length && displayRecipeRefs" no-gutters class="mb-2">
       <v-col cols="auto" style="width: 100%;">
-        <RecipeList :recipes="recipeList" :list-item="listItem" small tile />
+        <RecipeList :recipes="recipeList" :list-item="listItem" :disabled="isOffline" small tile />
       </v-col>
     </v-row>
     <v-row v-if="listItem.checked" no-gutters class="mb-2">
@@ -135,7 +135,11 @@ export default defineComponent({
     recipes: {
       type: Map<string, RecipeSummary>,
       default: undefined,
-    }
+    },
+    isOffline: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, context) {
     const { i18n } = useContext();

frontend/components/global/BannerExperimental.vue

@@ -1,11 +1,12 @@
 <template>
-  <v-alert border="left" colored-border type="warning" elevation="2" :icon="$globals.icons.alert">
-    <b>{{ $t("banner-experimental.title") }}</b>
-    <div>{{ $t("banner-experimental.description") }}</div>
-    <div v-if="issue != ''" class="py-2">
+  <BannerWarning
+    :title="$tc('banner-experimental.title')"
+    :description="$tc('banner-experimental.description')"
+  >
+    <template v-if="issue" #default>
       <a :href="issue" target="_blank">{{ $t("banner-experimental.issue-link-text") }}</a>
-    </div>
-  </v-alert>
+    </template>
+  </BannerWarning>
 </template>
 
 <script lang="ts">

frontend/components/global/BannerWarning.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-alert border="left" colored-border type="warning" elevation="2" :icon="$globals.icons.alert">
+    <b v-if="title">{{ title }}</b>
+    <div v-if="description">{{ description }}</div>
+    <div v-if="$slots.default" class="py-2">
+      <slot></slot>
+    </div>
+  </v-alert>
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    description: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+};
+</script>