feat: use zod, transition to composition api

api/src/repository/organization.ts

@@ -2,11 +2,6 @@ import { Drizzle, schema } from "../db";
 import { eq, and, inArray } from "drizzle-orm";
 import Users from "./users";
 
-interface OrganizationMember {
-	id: number;
-	email: string;
-}
-
 async function create(
 	con: Drizzle,
 	name: string,
@@ -32,7 +27,7 @@ async function create(
 async function listMembers(
 	con: Drizzle,
 	organizationId: number,
-): Promise<OrganizationMember[]> {
+) {
 	const result = await con
 		.select({
 			id: schema.user.id,
@@ -47,7 +42,7 @@ async function listMembers(
 		.where(eq(schema.userToOrganization.organizationId, organizationId))
 		.all();
 
-	return result as OrganizationMember[];
+	return result;
 }
 
 async function addMember(

api/src/trpc/account/index.ts

@@ -70,27 +70,7 @@ export const accountRouter = router({
 
             const avatar = `https://seccdn.libravatar.org/avatar/${emailMd5}?d=identicon`;
 
-            const organizations = await ctx.drizzle
-                .select({
-                    id: schema.organization.id,
-                    name: schema.organization.name,
-                    createdAt: schema.organization.createdAt,
-                    ownerId: schema.organization.ownerId,
-                    shopCount: sql<number>`(SELECT COUNT(1) FROM ${schema.shop} WHERE ${schema.shop.organizationId} = ${schema.organization.id})`,
-                    memberCount: sql<number>`(SELECT COUNT(1) FROM ${schema.userToOrganization} WHERE ${schema.userToOrganization.organizationId} = ${schema.organization.id})`,
-                })
-                .from(schema.organization)
-                .innerJoin(
-                    schema.userToOrganization,
-                    eq(
-                        schema.userToOrganization.organizationId,
-                        schema.organization.id,
-                    ),
-                )
-                .where(eq(schema.userToOrganization.userId, ctx.user))
-                .all();
-
-            return { ...user, avatar, organizations };
+            return { ...user, avatar };
         }),
     updateCurrentUser: publicProcedure
         .use(loggedInUserMiddleware)
@@ -164,6 +144,29 @@ export const accountRouter = router({
 
             return true;
         }),
+    currentUserOrganizations: publicProcedure
+        .use(loggedInUserMiddleware)
+        .query(async ({ ctx }) => {
+            return await ctx.drizzle
+            .select({
+                id: schema.organization.id,
+                name: schema.organization.name,
+                createdAt: schema.organization.createdAt,
+                ownerId: schema.organization.ownerId,
+                shopCount: sql<number>`(SELECT COUNT(1) FROM ${schema.shop} WHERE ${schema.shop.organizationId} = ${schema.organization.id})`,
+                memberCount: sql<number>`(SELECT COUNT(1) FROM ${schema.userToOrganization} WHERE ${schema.userToOrganization.organizationId} = ${schema.organization.id})`,
+            })
+            .from(schema.organization)
+            .innerJoin(
+                schema.userToOrganization,
+                eq(
+                    schema.userToOrganization.organizationId,
+                    schema.organization.id,
+                ),
+            )
+            .where(eq(schema.userToOrganization.userId, ctx.user))
+            .all();
+        }),
     currentUserShops: publicProcedure
         .use(loggedInUserMiddleware)
         .query(async ({ ctx }) => {

api/src/trpc/auth/index.ts

@@ -1,6 +1,6 @@
 import { router, publicProcedure } from "..";
 import { schema } from "../../db";
-import { eq, and, isNull } from "drizzle-orm";
+import { eq, and } from "drizzle-orm";
 import { z } from "zod";
 import bcryptjs from "bcryptjs";
 import { randomString } from "../../util";

api/src/trpc/organization/index.ts

@@ -1,4 +1,6 @@
 import { router, publicProcedure } from '..';
+import { schema } from '../../db';
+import { eq, sql, and } from 'drizzle-orm';
 import { z } from 'zod';
 import {
     loggedInUserMiddleware,
@@ -10,6 +12,34 @@ import { shopRouter } from './shop';
 
 export const organizationRouter = router({
     shop: shopRouter,
+    get: publicProcedure
+        .input(z.number())
+        .use(loggedInUserMiddleware)
+        .query(async ({ input, ctx }) => {
+            return await ctx.drizzle
+            .select({
+                id: schema.organization.id,
+                name: schema.organization.name,
+                createdAt: schema.organization.createdAt,
+                ownerId: schema.organization.ownerId,
+                shopCount: sql<number>`(SELECT COUNT(1) FROM ${schema.shop} WHERE ${schema.shop.organizationId} = ${schema.organization.id})`,
+                memberCount: sql<number>`(SELECT COUNT(1) FROM ${schema.userToOrganization} WHERE ${schema.userToOrganization.organizationId} = ${schema.organization.id})`,
+            })
+            .from(schema.organization)
+            .innerJoin(
+                schema.userToOrganization,
+                eq(
+                    schema.userToOrganization.organizationId,
+                    schema.organization.id,
+                ),
+            )
+            .where(
+                and(
+                    eq(schema.userToOrganization.userId, ctx.user),
+                    eq(schema.organization.id, input),
+                ),
+            ).get();
+        }),
     create: publicProcedure
         .input(z.string())
         .use(loggedInUserMiddleware)

api/src/trpc/organization/shop.ts

@@ -42,7 +42,7 @@ export const shopRouter = router({
                 where: eq(schema.shop.organizationId, ctx.user),
             });
 
-            return result === undefined ? [] : result;
+            return result ? [] : result;
         }),
     get: publicProcedure
         .input(

frontend/.env

@@ -0,0 +1 @@
+SHOPMON_API_URL=http://localhost:5789

frontend/.eslintrc.js

@@ -0,0 +1,46 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+        node: true,
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:vue/vue3-recommended',
+        'plugin:@typescript-eslint/recommended',
+    ],
+    parser: 'vue-eslint-parser',
+    parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+    },
+    settings: {
+        'import/no-useless-path-segments': 0,
+        'import/resolver': {
+            typescript: {},
+        },
+    },
+    plugins: [
+        '@stylistic',
+    ],
+    rules: {
+        '@stylistic/quotes': ['error', 'single', { 'avoidEscape': true }],
+        '@stylistic/comma-dangle': ['error', 'always-multiline'],
+        '@stylistic/semi': ['error', 'always'],
+        '@stylistic/max-len': ['error', 125],
+        '@stylistic/no-extra-semi': 'error',
+        '@stylistic/indent': ['error', 4],
+        '@stylistic/no-trailing-spaces': ['error'],
+        'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+        'vue/no-boolean-default': ['error', 'default-false'],
+        'vue/prefer-true-attribute-shorthand': ['error'],
+        'vue/no-multiple-objects-in-class': ['error'],
+        'vue/padding-line-between-blocks': ['error'],
+        'vue/next-tick-style': ['error', 'promise' ],
+        'vue/v-for-delimiter-style': ['error', 'in'],
+        'vue/html-button-has-type': ['error'],
+        'vue/multi-word-component-names': 0,
+        'vue/html-indent': ['error', 4],
+        'no-undef': 0,
+    },
+};

frontend/components.d.ts

@@ -8,9 +8,11 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Alert: typeof import('./src/components/Alert.vue')['default']
+    copy: typeof import('./src/components/fields/TextField copy.vue')['default']
     DataTable: typeof import('./src/components/layout/DataTable.vue')['default']
     FormGroup: typeof import('./src/components/layout/FormGroup.vue')['default']
     Header: typeof import('./src/components/layout/Header.vue')['default']
+    HeaderContainer: typeof import('./src/components/layout/HeaderContainer.vue')['default']
     'IconFa6Regular:circle': typeof import('~icons/fa6-regular/circle')['default']
     'IconFa6Regular:moon': typeof import('~icons/fa6-regular/moon')['default']
     'IconFa6Regular:star': typeof import('~icons/fa6-regular/star')['default']
@@ -55,14 +57,16 @@ declare module 'vue' {
     'IconLineMd:loadingTwotoneLoop': typeof import('~icons/line-md/loading-twotone-loop')['default']
     'IconMaterialSymbols:passkey': typeof import('~icons/material-symbols/passkey')['default']
     LoginContainer: typeof import('./src/components/layout/LoginContainer.vue')['default']
-    Logo: typeof import('./src/components/layout/Logo.vue')['default']
+    Logo: typeof import('./src/components/Logo.vue')['default']
     MainContainer: typeof import('./src/components/layout/MainContainer.vue')['default']
     Modal: typeof import('./src/components/layout/Modal.vue')['default']
-    Nav: typeof import('./src/components/layout/Nav.vue')['default']
-    PasswordField: typeof import('./src/components/layout/PasswordField.vue')['default']
-    RatingStars: typeof import('./src/components/layout/RatingStars.vue')['default']
+    Navigation: typeof import('./src/components/layout/Navigation.vue')['default']
+    PasswordField: typeof import('./src/components/fields/PasswordField.vue')['default']
+    RatingStars: typeof import('./src/components/RatingStars.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SelectField: typeof import('./src/components/fields/SelectField.vue')['default']
     Tabs: typeof import('./src/components/layout/Tabs.vue')['default']
+    TextField: typeof import('./src/components/fields/TextField.vue')['default']
   }
 }