adding toast and replacing alerts;

translate new board name;
jnettome · Apr 16, 2023 · 733e639 · 733e639 · vercel · Apr 16, 2023
1 parent 8b88e26
commit 733e639
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 25 deletions.
diff --git a/app.vue b/app.vue
@@ -41,6 +41,7 @@ const { locale, locales, setLocale } = useI18n()
 const switchLocale = (code: string) => {
  // locale.value = code
  // alert(code)
+ // useNuxtApp().$toast(code)
  setLocale(code)
 }
 const availableLocales = computed(() => {

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+:root {
+ --toastify-color-light: rgba(226, 232, 240, .8);
+ --toastify-color-dark: rgba(30, 41, 59, .8);
+}
diff --git a/components/BoardColumnComponent.vue b/components/BoardColumnComponent.vue
@@ -199,7 +199,7 @@ async function addTask () {
  }).select('*').single()
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  newTask.value = ''
@@ -212,7 +212,7 @@ async function updateTask (task: Todo) {
  const { error } = await client.from<Todo>('todos').update({ is_complete: task.is_complete }).match({ id: task.id })
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  emit('refreshBoard')
@@ -225,7 +225,7 @@ async function updateColumn (column: any) {
 
  if (error) {
  isEditingLoading.value = false
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  isEditing.value = false
@@ -240,7 +240,7 @@ async function updateTaskPosition (taskId: number, position: number) {
 
  if (error) {
  loading.value = false
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  emit('refreshBoard')
@@ -253,7 +253,7 @@ async function updateTaskBoardColumn (taskId: number, boardColumnId: number) {
 
  if (error) {
  loading.value = false
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  emit('refreshBoard')
@@ -269,7 +269,7 @@ async function updateTaskPositionInSupabase (value: Array) {
  
  if (error) {
  loading.value = false
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  loading.value = false
@@ -292,7 +292,7 @@ async function removeTask (task: Todo) {
  const { error } = await client.from<Todo>('todos').delete().match({ id: task.id })
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  // tasks.splice(tasks.indexOf(task), 1)
@@ -305,7 +305,7 @@ async function removeColumn (boardColumnId: number) {
  const { error } = await client.from<Board>('board_columns').delete().match({ id: boardColumnId })
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  emit('refreshBoard')

diff --git a/components/TagsField.vue b/components/TagsField.vue
@@ -149,7 +149,7 @@ async function addTag () {
 
  if (error) {
  isEditingLoading.value = false
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  newTag.value = ''

diff --git a/i18n.config.ts b/i18n.config.ts
@@ -24,7 +24,8 @@ export default defineI18nConfig(nuxt => ({
  please_wait: 'Please wait...',
  email_sent: "We've sent you an email with a link to sign in.",
  your_email_address: 'Your email address'
- }
+ },
+ new_board_name: 'My new board 🎉',
  },
  'pt': {
  logout: 'sair',
@@ -48,7 +49,8 @@ export default defineI18nConfig(nuxt => ({
  please_wait: 'aguarde...',
  email_sent: "Enviamos um email com um link para você acessar.",
  your_email_address: 'Seu endereço de email'
- }
+ },
+ new_board_name: 'Meu novo projeto 🎉',
  }
  }
 }))
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
  "dependencies": {
  "@vueuse/components": "^9.13.0",
  "dayjs": "^1.11.7",
+ "vue3-toastify": "^0.1.6",
  "vuedraggable": "^4.1.0"
  }
 }
diff --git a/pages/boards/[id].vue b/pages/boards/[id].vue
@@ -227,7 +227,7 @@ async function updateBoard (params: any) {
 
  if (error) {
  isEditingLoading.value = false
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  isEditing.value = false
@@ -284,7 +284,7 @@ async function addColumn () {
  }).select('id, name').single()
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  // boards.push(data)
@@ -303,7 +303,7 @@ async function addNewColumn () {
  }).select('id, name').single()
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  // boards.push(data)
@@ -317,7 +317,7 @@ async function addNewColumn () {
 // const { error } = await client.from<BoardColumn>('board_columns').delete().match({ id: task.id })
 
 // if (error) {
-// return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+// return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
 // }
 
 // boards.splice(boards.indexOf(task), 1)
@@ -331,7 +331,7 @@ async function updateTask (task: Todo) {
  }).match({ id: task.id })
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  isLoading.value = false
@@ -349,7 +349,7 @@ async function updateTaskTaggings(task: Todo, tagIds: number[], todoId: number)
 
  if (error) {
  isLoading.value = false
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  const { data: taggings, error: errorTaggings } = await client.from('taggings').select('id, tag_id, todo_id, tags(*)').match({ todo_id: todoId, user_id: user.value?.id })
@@ -368,7 +368,7 @@ async function deleteTask (params: any) {
  const { error } = await client.from<Todo>('todos').delete().match({ id: params.id })
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  isLoading.value = false
@@ -385,7 +385,7 @@ async function removeBoard (board: Board) {
  const { error } = await client.from<Board>('boards').delete().match({ id: board.id })
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast.error(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  router.push('/boards')

diff --git a/pages/boards/index.vue b/pages/boards/index.vue
@@ -64,7 +64,7 @@ async function addBoard () {
  }).select('id, name').single()
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  boards.push(data)
@@ -74,15 +74,17 @@ async function addBoard () {
  loading.value = false
 }
 
+const $t = useI18n().t
+
 async function createNewBoard () {
  loading.value = true
  const { data, error } = await client.from<Board>('boards').insert({
  user_id: user.value.id,
- name: 'My new board 🎉',
+ name: $t('new_board_name'),
  }).select('id, name').single()
 
  if (error) {
- return alert(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
+ return useNuxtApp().$toast(`Oups ! Something went wrong ! Error: ${JSON.stringify(error)}`)
  }
 
  boards.push(data)

diff --git a/pages/index.vue b/pages/index.vue
@@ -55,7 +55,7 @@ const login = async (provider: string) => {
  const { error, data } = await client.auth.signInWithOtp({ email: email.value })
 
  if (error) {
- alert(error)
+ useNuxtApp().$toast.error(JSON.stringify(error))
  }
 
  loading.value = false

diff --git a/plugins/vue3-toastify.ts b/plugins/vue3-toastify.ts
@@ -0,0 +1,10 @@
+import Vue3Toastify, { toast } from 'vue3-toastify';
+// import 'vue3-toastify/dist/index.css';
+
+export default defineNuxtPlugin((nuxtApp) => {
+ nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 1000, theme: 'auto' });
+
+ return {
+ provide: { toast },
+ };
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,4 +1,9 @@
 {
  // https://nuxt.com/docs/guide/concepts/typescript
- "extends": "./.nuxt/tsconfig.json"
+ "extends": "./.nuxt/tsconfig.json",
+ "compilerOptions": {
+ "types": [
+ "vue3-toastify/global"
+ ]
+ }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -5590,6 +5590,11 @@ vue-router@^4.1.6:
  dependencies:
  "@vue/devtools-api" "^6.4.5"
 
+vue3-toastify@^0.1.6:
+ version "0.1.6"
+ resolved "https://registry.yarnpkg.com/vue3-toastify/-/vue3-toastify-0.1.6.tgz#b3bc273deded1ee7b301330862de56e0c9e998c4"
+ integrity sha512-Ijk/tmpYrQLzyK/a0hFd5E/Gfoj+UkUGRLMU71JZpZ5cMUbkwWjXjdJ2xIXeGh/MJtl3xQWClG3z0PWcKz3ksQ==
+
 vue@^3.2.47:
  version "3.2.47"
  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"