create wishlist button added to startpage

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

components.d.ts

@@ -5,6 +5,7 @@
 declare module 'vue' {
   export interface GlobalComponents {
     ButtonBase: typeof import('./src/components/ButtonBase.vue')['default']
+    CreateWishlistTile: typeof import('./src/components/CreateWishlistTile.vue')['default']
     FormWishlist: typeof import('./src/components/FormWishlist.vue')['default']
     FormWishlistItem: typeof import('./src/components/FormWishlistItem.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
@@ -26,6 +27,8 @@ declare module 'vue' {
     IconToggleOn: typeof import('./src/components/icons/IconToggleOn.vue')['default']
     ImagePreview: typeof import('./src/components/ImagePreview.vue')['default']
     ImageTile: typeof import('./src/components/ImageTile.vue')['default']
+    'ImageTile copy': typeof import('./src/components/ImageTile copy.vue')['default']
+    ImageTilePlaceholder: typeof import('./src/components/ImageTilePlaceholder.vue')['default']
     InputFile: typeof import('./src/components/InputFile.vue')['default']
     InputText: typeof import('./src/components/InputText.vue')['default']
     InputTextArea: typeof import('./src/components/InputTextArea.vue')['default']

src/components/CreateWishlistTile.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="relative h-40 w-40 overflow-hidden rounded-full bg-stone-400">
+    <div
+      class="text-md font-semi-bold absolute inset-x-0 top-0 flex h-40 items-center justify-center space-x-2 p-6 text-center text-white dark:text-white/75"
+    >
+      <IconCreation class="h-6 w-6 shrink-0 fill-white dark:fill-white/75" />
+      <span class="text-left"
+        >{{ t('components.create-wishlist-title.text') }}
+      </span>
+    </div>
+  </div>
+</template>
+<style scoped></style>

src/config/locales/de-DE.json

@@ -90,6 +90,9 @@
     }
   },
   "components": {
+    "create-wishlist-title": {
+      "text": "Erstelle Wunschliste"
+    },
     "file": {
       "text-dropzone-link": "hier",
       "text-dropzone": "Ziehen Sie ein beliebiges Bild hierher oder klicken Sie {0}, um den Dialog zu öffnen."

src/config/locales/en-US.json

@@ -90,6 +90,9 @@
     }
   },
   "components": {
+    "create-wishlist-title": {
+      "text": "Create wishlist"
+    },
     "file": {
       "text-dropzone-link": "click here",
       "text-dropzone": "drag and drop any image here or {0} to open dialog."

src/views/HomeView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { useWishlistsStore } from '@/composables'
+import { useWishlistsStore, useEditMode } from '@/composables'
 
 const { t } = useI18n()
+const { isActive: editModeIsActive } = useEditMode()
 const { state, isFinished, fetch } = useWishlistsStore()
 fetch()
 </script>
@@ -19,9 +20,16 @@ fetch()
     <span> {{ t('common.loading.text') }} </span>
   </div>
   <div
-    v-else-if="state.length > 0"
+    v-if="state.length === 0 && !editModeIsActive"
-    class="flex flex-row flex-wrap justify-around p-10"
+    class="flex h-1/2 w-full justify-center"
   >
+    <div
+      class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
+    >
+      <span>{{ t('pages.home-view.main.empty-list.text') }}</span>
+    </div>
+  </div>
+  <div v-else class="flex flex-row flex-wrap justify-around p-10">
     <router-link
       v-for="item in state"
       :key="item.id"
@@ -29,12 +37,8 @@ fetch()
     >
       <ImageTile :title="item.title" :image-src="item.imageSrc" class="m-4" />
     </router-link>
-  </div>
+    <router-link v-if="editModeIsActive" to="/create-wishlist">
-  <div v-else class="flex h-1/2 w-full justify-center">
+      <CreateWishlistTile />
-    <div
+    </router-link>
-      class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
-    >
-      <span>{{ t('pages.home-view.main.empty-list.text') }}</span>
-    </div>
   </div>
 </template>