refactor: update alert view to use data generation

rotki · Oct 30, 2024 · ac3b5f7 · ac3b5f7
1 parent ffd8141
commit ac3b5f7
Showing 1 changed file with 32 additions and 79 deletions.
diff --git a/example/src/views/AlertView.vue b/example/src/views/AlertView.vue
@@ -2,90 +2,43 @@
 import { type AlertProps, RuiAlert } from '@rotki/ui-library';
 import ComponentView from '@/components/ComponentView.vue';
 
-type AlertData = Omit<
-  AlertProps & { clicks?: number; closed?: boolean },
-  'title' | 'description'
->;
+interface AlertData extends Omit<AlertProps, 'title' | 'description'> {
+  clicks?: number;
+  closed?: boolean;
+}
 
-const alerts = ref<AlertData[]>([
-  { type: 'primary', icon: 'information-line' },
-  { type: 'secondary', icon: 'information-line' },
-  { type: 'error' },
-  { type: 'warning' },
-  { type: 'info' },
-  { type: 'success' },
+const colors = ['primary', 'secondary', 'error', 'warning', 'info', 'success'] as const;
+const attributes: Partial<AlertData>[] = [
+  {},
+  { variant: 'filled' },
+  { variant: 'outlined' },
+  { clicks: 0 },
+  { clicks: 0, closeable: true },
+];
 
-  { variant: 'filled', type: 'primary', icon: 'information-line' },
-  { variant: 'filled', type: 'secondary', icon: 'information-line' },
-  { variant: 'filled', type: 'error' },
-  { variant: 'filled', type: 'warning' },
-  { variant: 'filled', type: 'info' },
-  { variant: 'filled', type: 'success' },
+const alerts = ref<AlertData[]>([]);
 
-  { variant: 'outlined', type: 'primary', icon: 'information-line' },
-  {
-    variant: 'outlined',
-    type: 'secondary',
-    icon: 'information-line',
-  },
-  { variant: 'outlined', type: 'error' },
-  { variant: 'outlined', type: 'warning' },
-  { variant: 'outlined', type: 'info' },
-  { variant: 'outlined', type: 'success' },
+function createAlert(type: typeof colors[number], options: Partial<AlertData>): AlertData {
+  return {
+    type,
+    ...options,
+    ...(['primary', 'secondary'].includes(type) ? { icon: 'information-line' } : {}),
+  };
+}
 
-  {
-    clicks: 0,
-    type: 'primary',
-    icon: 'information-line',
-  },
-  {
-    clicks: 0,
-    type: 'secondary',
-    icon: 'information-line',
-  },
-  { clicks: 0, type: 'error' },
-  { clicks: 0, type: 'warning' },
-  { clicks: 0, type: 'info' },
-  { clicks: 0, type: 'success' },
+function generateAlerts(): AlertData[] {
+  const alerts: AlertData[] = [];
+  for (const attrs of attributes) {
+    for (const color of colors) {
+      alerts.push(createAlert(color, attrs));
+    }
+  }
+  return alerts;
+}
 
-  {
-    clicks: 0,
-    closeable: true,
-    type: 'primary',
-    icon: 'information-line',
-  },
-  {
-    clicks: 0,
-    closeable: true,
-    closed: false,
-    type: 'secondary',
-    icon: 'information-line',
-  },
-  {
-    clicks: 0,
-    closeable: true,
-    closed: false,
-    type: 'error',
-  },
-  {
-    clicks: 0,
-    closeable: true,
-    closed: false,
-    type: 'warning',
-  },
-  {
-    clicks: 0,
-    closeable: true,
-    closed: false,
-    type: 'info',
-  },
-  {
-    clicks: 0,
-    closeable: true,
-    closed: false,
-    type: 'success',
-  },
-]);
+onBeforeMount(() => {
+  set(alerts, generateAlerts());
+});
 </script>
 
 <template>