add alerts

Author: posva

.prettierignore

@@ -0,0 +1,3 @@
+__build__
+dist
+coverage

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'es5',
+  singleQuote: false,
+}

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     BoardCard: typeof import('./src/components/BoardCard.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TheAlerts: typeof import('./src/components/TheAlerts.vue')['default']
     TheDrawer: typeof import('./src/components/TheDrawer.vue')['default']
     TheNavbar: typeof import('./src/components/TheNavbar.vue')['default']
   }

package-lock.json

@@ -17,6 +17,7 @@
     "@vueuse/core": "^8.9.2",
     "graphql-tag": "^2.12.6",
     "lodash-es": "^4.17.21",
+    "pinia": "^2.0.16",
     "unplugin-vue-components": "^0.20.1",
     "uuid": "^8.3.2",
     "vite-plugin-pages": "^0.24.3",
@@ -40,6 +41,7 @@
     "@types/jsdom": "^16.2.14",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.11.41",
+    "@types/uuid": "^8.3.4",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",

package.json

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import TheNavbar from "./components/TheNavbar.vue";
-import TheDrawer from "./components/TheDrawer.vue";</script>
+// import TheNavbar from "./components/TheNavbar.vue";
+// import TheAlerts from "./components/TheAlerts.vue";
+// import TheDrawer from "./components/TheDrawer.vue";
+</script>
 
 <template>
   <TheNavbar />
   <TheDrawer />
+  <TheAlerts />
 </template>

src/App.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { useAlerts } from "@/stores/alerts";
+import { Fade } from "@progress/kendo-vue-animation";
+import {
+  Notification,
+  NotificationGroup,
+} from "@progress/kendo-vue-notification";
+import { storeToRefs } from "pinia";
+import { reactive } from "vue";
+
+const store = useAlerts();
+const { notify, remove } = store;
+
+const { items } = storeToRefs(store);
+</script>
+
+<template>
+  <div class="z-10">
+    <NotificationGroup
+      :style="{
+        right: '10px',
+        bottom: '10px',
+        alignItems: 'flex-start',
+        flexWrap: 'wrap-reverse',
+      }"
+    >
+      <Fade v-for="alert in items" :key="alert.id" appear>
+        <Notification
+          :type="{
+            style: alert.style,
+            icon: true,
+          }"
+          :closable="alert.closable"
+          @close="remove(alert.id)"
+        >
+          <div v-if="alert.html" v-html="alert.message"></div>
+          <span v-else>{{ alert.message }}</span>
+        </Notification>
+      </Fade>
+    </NotificationGroup>
+  </div>
+</template>

src/components/TheAlerts.vue

@@ -1,11 +1,12 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
 import "@/assets/base.css";
 import "@progress/kendo-theme-default/dist/all.css";
 
 const app = createApp(App);
 
-app.use(router);
+app.use(router).use(createPinia());
 
 app.mount("#app");

src/main.ts

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useAlerts } from "@/stores/alerts";
 import type { Board } from "@/types";
 import { ref } from "vue";
 const boards = ref<Partial<Board>[]>([
@@ -25,13 +26,15 @@ const boards = ref<Partial<Board>[]>([
   },
 ]);
 
+const alerts = useAlerts();
+
 function createBoard() {
-  console.log("board created");
+  alerts.success("Board created!");
 }
 </script>
 
 <template>
-  <h1 class="text-3xl mb-5">Boards</h1>
+  <h1 class="mb-5 text-3xl">Boards</h1>
   <div class="flex">
     <BoardCard v-for="board in boards" :key="board.id" :board="board" />
     <button class="text-gray-500" @click="createBoard()">

src/pages/boards/index.vue

@@ -0,0 +1,75 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { v4 as uuid } from "uuid";
+
+export type AlertStyle = "error" | "success" | "warning" | "info" | "none";
+
+export interface AlertOptions {
+  html?: boolean;
+  closable?: boolean;
+  timeout?: number | false;
+  style?: AlertStyle;
+}
+
+const defaultOptions: Required<AlertOptions> = {
+  closable: true,
+  html: false,
+  timeout: 3000,
+  style: "info",
+};
+
+export interface Alert extends AlertOptions {
+  id: string;
+  message: string;
+}
+
+export const useAlerts = defineStore("alerts", {
+  state: () => ({
+    items: [] as Alert[],
+  }),
+
+  actions: {
+    notify(message: string, style: AlertStyle, options?: AlertOptions) {
+      options = { ...defaultOptions, style, ...options };
+
+      const id = uuid();
+      this.items.push({
+        message,
+        id,
+        ...options,
+      });
+
+      if (options.timeout !== false) {
+        setTimeout(() => {
+          this.remove(id);
+        }, options.timeout);
+      }
+    },
+
+    success(message: string, options?: AlertOptions) {
+      this.notify(message, "success", options);
+    },
+
+    error(message: string, options?: AlertOptions) {
+      this.notify(message, "error", options);
+    },
+
+    warning(message: string, options?: AlertOptions) {
+      this.notify(message, "warning", options);
+    },
+
+    info(message: string, options?: AlertOptions) {
+      this.notify(message, "info", options);
+    },
+
+    remove(id: string) {
+      const index = this.items.findIndex((item) => item.id === id);
+      if (index > -1) {
+        this.items.splice(index, 1);
+      }
+    },
+  },
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAlerts, import.meta.hot));
+}