editmode button added

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

prisma/seed.ts

@@ -7,7 +7,8 @@ const wishlistData: Prisma.WishlistCreateInput[] = [
     title: 'Junior',
     imageSrc:
       'https://unsplash.com/photos/JZ51o_-UOY8/download?force=true&w=200',
-    description: '',
+    description:
+      'Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot',
     slugUrlText: 'junior',
     items: {
       create: [

src/components/BaseButton.vue

@@ -20,7 +20,15 @@ defineProps({
         mode === 'secondary',
     }"
   >
-    <component v-if="icon" :is="icon" class="mr-1 h-4 w-4" />
+    <component
+      v-if="icon"
+      :is="icon"
+      class="mr-1 h-4 w-4"
+      :class="{
+        'fill-white': mode === 'primary',
+        'fill-stone-500 dark:fill-white/70 ': mode === 'secondary',
+      }"
+    />
     <span>
       <slot />
     </span>

src/components/Header.vue

@@ -1,7 +1,16 @@
 <template>
   <header
-    class="mb-2 flex flex-row items-center justify-end space-x-2 opacity-60"
+    class="mb-4 flex flex-row items-center justify-end space-x-2 opacity-60"
   >
+    <div
+      v-if="isAuthenticated"
+      class="mr-4 inline-flex cursor-pointer items-center space-x-1"
+      @click="() => toggle()"
+    >
+      <IconToggleOn v-if="editMode" class="h-6 w-6 fill-emerald-700" />
+      <IconToggleOff v-else class="h-6 w-6 cursor-pointer" />
+      <span>{{ t('components.header.edit-mode.text') }}</span>
+    </div>
     <div @click="() => toggleDark()">
       <IconLightDark class="h-6 w-6 cursor-pointer" />
     </div>
@@ -15,11 +24,20 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { useDark, useToggle } from '@vueuse/core'
-import { IconLightDark, IconLogout, IconLogin } from '@/components/icons'
-import { useAuth } from '@/composables/'
+import {
+  IconLightDark,
+  IconLogout,
+  IconLogin,
+  IconToggleOn,
+  IconToggleOff,
+} from '@/components/icons'
+import { useAuth, useEditMode } from '@/composables/'
 
+const { t } = useI18n()
 const { isAuthenticated, setToken } = useAuth()
+const { editMode, toggle } = useEditMode()
 
 const toggleDark = useToggle(useDark())
 </script>

src/components/WishlistItem.vue

@@ -44,7 +44,7 @@ const { t } = useI18n()
           rel="noopener"
           class="mt-1 flex w-fit flex-row items-center text-sm text-stone-500 dark:text-white/60"
         >
-          <IconLink class="mr-1 h-4 w-4" />
+          <IconLink class="mr-1 h-4 w-4 fill-stone-500 dark:fill-white/60" />
           <span>{{
             t('components.wishlist-item.external-product-page-link.text')
           }}</span>

src/components/icons/IconCart.vue

@@ -1,7 +1,6 @@
 <template>
   <svg viewBox="0 0 24 24">
     <path
-      fill="currentColor"
       d="M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z"
     />
   </svg>

src/components/icons/IconCloudQuestion.vue

@@ -2,7 +2,6 @@
   <svg viewBox="0 0 24 24">
     <path
       d="M19.35 10.03A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.03A6.004 6.004 0 0 0 0 14a6 6 0 0 0 6 6h13a5 5 0 0 0 5-5c0-2.64-2.05-4.78-4.65-4.97M13 17h-2v-2h2v2m1.8-5.18c-.3.39-.67.68-1.13.93c-.26.16-.43.32-.52.51A1.7 1.7 0 0 0 13 14h-2c0-.55.11-.92.3-1.18c.2-.26.55-.57 1.07-.91c.26-.16.47-.35.63-.59c.15-.23.23-.51.23-.82c0-.32-.09-.56-.27-.74c-.18-.2-.46-.29-.76-.29c-.27 0-.49.08-.7.23c-.15.15-.25.38-.25.69H9.28c-.05-.75.22-1.39.78-1.8C10.6 8.2 11.31 8 12.2 8c.94 0 1.69.23 2.23.68c.54.45.81 1.07.81 1.82c0 .5-.15.91-.44 1.32z"
-      fill="currentColor"
     ></path>
   </svg>
 </template>

src/components/icons/IconError.vue

@@ -1,7 +1,6 @@
 <template>
   <svg viewBox="0 0 24 24">
     <path
-      fill="currentColor"
       d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"
     />
   </svg>

src/components/icons/IconLightDark.vue

@@ -2,7 +2,6 @@
   <svg viewBox="0 0 24 24">
     <path
       d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34z"
-      fill="currentColor"
     ></path>
   </svg>
 </template>

src/components/icons/IconLink.vue

@@ -1,7 +1,6 @@
 <template>
   <svg viewBox="0 0 24 24">
     <path
-      fill="currentColor"
       d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"
     />
   </svg>

src/components/icons/IconLogin.vue

@@ -2,7 +2,6 @@
   <svg viewBox="0 0 24 24">
     <path
       d="M10 17v-3H3v-4h7V7l5 5l-5 5m0-15h9a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-2h2v2h9V4h-9v2H8V4a2 2 0 0 1 2-2z"
-      fill="currentColor"
     ></path>
   </svg>
 </template>

src/components/icons/IconLogout.vue

@@ -2,7 +2,6 @@
   <svg viewBox="0 0 24 24">
     <path
       d="M16 17v-3H9v-4h7V7l5 5l-5 5M14 2a2 2 0 0 1 2 2v2h-2V4H5v16h9v-2h2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9z"
-      fill="currentColor"
     ></path>
   </svg>
 </template>

src/components/icons/IconNoGift.vue

@@ -2,7 +2,6 @@
   <svg viewBox="0 0 24 24">
     <path
       d="M21 6h-3.17A3 3 0 0 0 18 5c0-1.66-1.34-3-3-3c-1 0-1.88.5-2.43 1.24v-.01L12 4l-.57-.77v.01A3.034 3.034 0 0 0 9 2c-1.03 0-1.94.5-2.5 1.32l1.53 1.51C8.12 4.36 8.5 4 9 4c.55 0 1 .45 1 1c0 .5-.36.88-.83.97L13 9.8V8h8v2h-7.8l2 2H20v4.8l2 2V12c.55 0 1-.45 1-1V8a2 2 0 0 0-2-2m-6 0c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1M1.11 3l3 3H3c-1.1 0-2 .9-2 2v3c0 .55.45 1 1 1v8a2 2 0 0 0 2 2h16.1l1.46 1.45l1.27-1.27L2.39 1.73L1.11 3M13 14.89L18.11 20H13v-5.11m-2-2V20H4v-8h6.11l.89.89M8.11 10H3V8h3.11l2 2z"
-      fill="currentColor"
     ></path>
   </svg>
 </template>

src/components/icons/IconToggleOff.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M17 7H7a5 5 0 0 0-5 5a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5a5 5 0 0 0-5-5M7 15a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3a3 3 0 0 1-3 3z"
+    ></path>
+  </svg>
+</template>

src/components/icons/IconToggleOn.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M17 7H7a5 5 0 0 0-5 5a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5a5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3a3 3 0 0 1-3 3z"
+    ></path>
+  </svg>
+</template>

src/components/icons/index.ts

@@ -8,3 +8,5 @@ export { default as IconLightDark } from './IconLightDark.vue'
 export { default as IconLogout } from './IconLogout.vue'
 export { default as IconLogin } from './IconLogin.vue'
 export { default as IconCloudQuestion } from './IconCloudQuestion.vue'
+export { default as IconToggleOn } from './IconToggleOn.vue'
+export { default as IconToggleOff } from './IconToggleOff.vue'

src/composables/index.ts

@@ -3,3 +3,4 @@ export * from './useWishlistStore'
 export * from './useModal'
 export * from './useAxios'
 export * from './useAuth'
+export * from './useEditMode'

src/composables/useEditMode.ts

@@ -0,0 +1,24 @@
+import { ref, readonly } from 'vue'
+
+const state = ref(false)
+
+const activate = (): void => {
+  state.value = true
+}
+
+const deactivate = (): void => {
+  state.value = false
+}
+
+const toggle = (): void => {
+  state.value = !state.value
+}
+
+export const useEditMode = () => {
+  return {
+    editMode: readonly(state),
+    activate,
+    deactivate,
+    toggle,
+  }
+}

src/config/locales/de-DE.json

@@ -69,6 +69,11 @@
       "bought-button": {
         "text": "Gekauft"
       }
+    },
+    "header": {
+      "edit-mode": {
+        "text": "Bearbeitungsmodus"
+      }
     }
   }
 }

src/config/locales/en-US.json

@@ -69,6 +69,11 @@
       "bought-button": {
         "text": "Bought"
       }
+    },
+    "header": {
+      "edit-mode": {
+        "text": "Edit-Mode"
+      }
     }
   }
 }

src/views/DetailView.vue

@@ -38,14 +38,14 @@ const bought = async (item: WishlistItemType): Promise<void> => {
 <template>
   <div v-if="state !== null" class="h-full">
     <div
-      class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
+      class="relative flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
     >
       <ImageTile :image-src="state.imageSrc" class="shrink-0"></ImageTile>
       <div>
         <h1 class="mb-2 text-center text-2xl font-bold md:text-left">
           {{ state.title }}
         </h1>
-        <p v-if="state.description" class="text-lg">
+        <p class="text-lg">
           {{ state.description }}
         </p>
       </div>
@@ -68,7 +68,7 @@ const bought = async (item: WishlistItemType): Promise<void> => {
       <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"
       >
-        <IconNoGift class="h-10 w-10" />
+        <IconNoGift class="h-10 w-10 fill-gray-600/75 dark:fill-white/70" />
 
         <span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
       </div>