feat(xpense): service skeleton, UI stub

.eslintrc.js

@@ -73,6 +73,7 @@ module.exports = {
     'cypress/no-unnecessary-waiting': 'error',
     'cypress/assertion-before-screenshot': 'warn',
     'default-case': 'error',
+    indent: 'off',
   },
   overrides: [
     {

.vscode/launch.json

@@ -20,7 +20,7 @@
       "id": "service",
       "type": "pickString",
       "description": "Select one service from above",
-      "options": ["wrap-r", "logg-r"]
+      "options": ["wrap-r", "logg-r", "xpense"]
     }
   ]
 }

common/components/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "private": true,
   "scripts": {
-    "build": "tsc",
+    "build": "tsc --b",
     "clean": "rimraf dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

common/components/src/autocomplete.tsx

@@ -0,0 +1,45 @@
+import { Shade, createComponent } from '@furystack/shades'
+import { v4 } from 'uuid'
+import { Input, InputProps } from './input'
+
+export const Autocomplete = Shade<
+  { inputProps?: InputProps; suggestions: string[]; strict?: boolean; onchange: (value: string) => void },
+  { dataListId: string }
+>({
+  getInitialState: () => ({
+    dataListId: v4(),
+  }),
+  constructed: ({ getState, element }) => {
+    const { dataListId } = getState()
+    const input = element.querySelector('input')
+    if (input) {
+      input.setAttribute('list', dataListId)
+    }
+  },
+  shadowDomName: 'shade-autocomplete',
+  render: ({ props, getState }) => {
+    const { dataListId } = getState()
+    return (
+      <div>
+        <Input
+          {...props.inputProps}
+          onchange={(ev) => {
+            const { value } = ev.target as any
+            if (props.strict) {
+              if (!props.suggestions.includes(value)) {
+                ;(ev.target as HTMLInputElement).setCustomValidity('Please select a valid entry!')
+                return
+              }
+            }
+            props.onchange(value)
+          }}
+        />
+        <datalist id={dataListId}>
+          {props.suggestions.map((s) => (
+            <option value={s} />
+          ))}
+        </datalist>
+      </div>
+    )
+  },
+})

common/components/src/fab.tsx

@@ -0,0 +1,28 @@
+import { Shade, PartialElement, createComponent } from '@furystack/shades'
+
+export const Fab = Shade<PartialElement<HTMLDivElement>>({
+  shadowDomName: 'shade-fab',
+  render: ({ props, children }) => {
+    return (
+      <div
+        {...props}
+        style={{
+          position: 'fixed',
+          bottom: '32px',
+          right: '32px',
+          background: 'gray',
+          width: '64px',
+          height: '64px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: '50%',
+          boxShadow: '2px 2px 4px rgba(0,0,0,0.3)',
+          cursor: 'pointer',
+          ...props.style,
+        }}>
+        {children}
+      </div>
+    )
+  },
+})

common/components/src/index.ts

@@ -1,8 +1,10 @@
 export * from './animations'
 export * from './app-bar'
+export * from './autocomplete'
 export * from './avatar'
 export * from './button'
 export * from './data-grid'
+export * from './fab'
 export * from './grid'
 export * from './input'
 export * from './modal'

common/components/src/input.tsx

@@ -3,6 +3,7 @@ import { promisifyAnimation } from 'common-frontend-utils'
 import { colors } from './styles'
 
 export interface InputProps extends PartialElement<HTMLInputElement> {
+  onTextChange?: (text: string) => void
   labelTitle?: string
   multiLine?: false
 }
@@ -47,6 +48,10 @@ export const Input = Shade<TextInputProps>({
           </div>
         ) : (
           <input
+            onchange={(ev) => {
+              props.onTextChange && props.onTextChange((ev.target as any).value)
+              props.onchange && (props.onchange as any)(ev)
+            }}
             onfocus={() => {
               if (!props.disabled) {
                 promisifyAnimation(

common/components/src/modal.tsx

@@ -10,12 +10,13 @@ export const Modal = Shade<{ isVisible: boolean; onClose?: () => void }>({
         style={{
           width: '100%',
           height: '100%',
-          backgroundColor: 'rgba(128,128,128,0.03)',
-          position: 'absolute',
+          display: 'block',
+          // backgroundColor: 'rgba(128,128,128,0.03)',
+          position: 'fixed',
           top: '0',
           left: '0',
-          animation: 'show 100ms linear',
-          backdropFilter: 'contrast(0.3)brightness(0.2)blur(5px)',
+          // animation: 'show 100ms linear',
+          // backdropFilter: 'contrast(0.3)brightness(0.2)blur(5px)',
         }}>
         {children}
       </div>

common/components/src/tabs.tsx

@@ -1,4 +1,4 @@
-import { Shade, createComponent, PartialElement } from '@furystack/shades'
+import { Shade, createComponent, PartialElement, LocationService } from '@furystack/shades'
 import { promisifyAnimation } from 'common-frontend-utils/src'
 
 export interface Tab {
@@ -18,6 +18,15 @@ export const Tabs = Shade<
 >({
   shadowDomName: 'shade-tabs',
   getInitialState: ({ props }) => ({ activeIndex: props.activeTab || 0 }),
+  constructed: ({ injector, updateState }) => {
+    const locationSubscription = injector.getInstance(LocationService).onLocationChanged.subscribe((loc) => {
+      if (loc.hash && loc.hash.startsWith('#tab-')) {
+        const page = parseInt(loc.hash.replace('#tab-', ''), 10)
+        page && updateState({ activeIndex: page })
+      }
+    }, true)
+    return () => locationSubscription.dispose()
+  },
   render: ({ props, getState, updateState }) => {
     return (
       <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', ...props.containerStyle }}>

common/config/src/databases.ts

@@ -5,12 +5,24 @@ export const databases = {
     usersCollection: 'users',
     sessionStore: {
       host: process.env.SESSION_STORE_HOST || process.env.REDIS_HOST || 'localhost',
-      port: process.env.SESSION_STORE_PORT || process.env.REDIS_PORT || '63790',
+      port: process.env.SESSION_STORE_PORT || process.env.REDIS_PORT || '6379',
     },
   },
   logging: {
     mongoUrl: process.env.MONGO_LOGGING_URL || process.env.MONGO_URL || 'mongodb://localhost:27017',
     dbName: 'multiverse-logs',
     logCollection: 'entries',
   },
+  xpense: {
+    mongoUrl: process.env.MONGO_XPENSE_URL || process.env.MONGO_URL || 'mongodb://localhost:27017',
+    dbName: 'multiverse-xpense',
+    accounts: 'accounts',
+    items: 'items',
+    replenishments: 'replenishments',
+    shops: 'shops',
+    shoppings: 'private-xpenses',
+  },
+  standardOptions: {
+    useUnifiedTopology: true,
+  },
 }

common/config/src/sites.ts

@@ -2,11 +2,15 @@ export const sites = {
   services: {
     'wrap-r': {
       internalPort: process.env.WRAPPR_SERVICE_INTERNAL_PORT || 9090,
-      externalPath: process.env.WRAPPR_SERVICE_EXTENRAL_URL || 'http://localhost:9090/api',
+      externalPath: process.env.WRAPPR_SERVICE_EXTERNAL_URL || 'http://localhost:9090/api',
     },
     'logg-r': {
       internalPort: process.env.LOGGR_SERVICE_INTERNAL_PORT || 9091,
-      externalPath: process.env.LOGGR_SERVICE_EXTENAL_URL || 'http://localhost:9091/api',
+      externalPath: process.env.LOGGR_SERVICE_EXTERNAL_URL || 'http://localhost:9091/api',
+    },
+    xpense: {
+      internalPort: process.env.XPENSE_SERVICE_INTERNAL_PORT || 9092,
+      externalPath: process.env.XPENSE_SERVICE_EXTERNAL_URL || 'http://localhost:9092/api',
     },
   },
   frontends: {

common/frontend-utils/src/apis/logg-r-api.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@furystack/inject'
 import { PathHelper } from '@furystack/utils'
-import { LoggRApi } from 'common-models'
+import { apis } from 'common-models'
 import { createClient } from '@furystack/rest-client-fetch'
 import { sites } from 'common-config'
 
 @Injectable({ lifetime: 'singleton' })
 export class LoggRApiService {
-  public call = createClient<LoggRApi>({
+  public call = createClient<apis.LoggRApi>({
     endpointUrl: PathHelper.joinPaths(sites.services['logg-r'].externalPath, '/logg-r'),
     requestInit: {
       credentials: 'include',

common/frontend-utils/src/apis/wrap-r-api.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@furystack/inject'
 import { PathHelper } from '@furystack/utils'
-import { WrapRApi } from 'common-models'
+import { apis } from 'common-models'
 import { createClient } from '@furystack/rest-client-fetch'
 import { sites } from 'common-config'
 
 @Injectable({ lifetime: 'singleton' })
 export class WrapRApiService {
-  public call = createClient<WrapRApi>({
+  public call = createClient<apis.WrapRApi>({
     endpointUrl: PathHelper.joinPaths(sites.services['wrap-r'].externalPath, '/wrap-r'),
     requestInit: {
       credentials: 'include',

common/frontend-utils/src/apis/xpense-api.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@furystack/inject'
+import { PathHelper } from '@furystack/utils'
+import { apis } from 'common-models'
+import { createClient } from '@furystack/rest-client-fetch'
+import { sites } from 'common-config'
+
+@Injectable({ lifetime: 'singleton' })
+export class XpenseApiService {
+  public call = createClient<apis.XpenseApi>({
+    endpointUrl: PathHelper.joinPaths(sites.services.xpense.externalPath, '/xpense'),
+    requestInit: {
+      credentials: 'include',
+    },
+  })
+}

common/frontend-utils/src/index.ts

@@ -1,5 +1,6 @@
 export * from './apis/logg-r-api'
 export * from './apis/wrap-r-api'
+export * from './apis/xpense-api'
 export * from './collection-service'
 export * from './get-error-message'
 export * from './service-list'

common/frontend-utils/src/service-list.ts

@@ -1,4 +1,4 @@
-import { roles } from 'common-models/src'
+import { roles } from 'common-models'
 
 export interface ServiceDescription {
   name: string
@@ -20,6 +20,15 @@ export const serviceList: ServiceDescription[] = [
     showInDashboard: true,
     requiredRoles: ['terms-accepted'],
   },
+  {
+    name: 'Xpense',
+    icon: '💰',
+    description: 'Manage accounts, incomes and expences',
+    showInMenu: true,
+    showInDashboard: true,
+    requiredRoles: ['terms-accepted'],
+    url: '/xpense',
+  },
   {
     name: 'Organizations',
     icon: '🏢',

common/models/src/apis/index.ts

@@ -1,3 +1,4 @@
 export * from './session-api'
 export * from './logg-r-api'
 export * from './wrap-r-api'
+export * from './xpense-api'

common/models/src/apis/xpense-api.ts

@@ -0,0 +1,39 @@
+import { RestApi, RequestAction } from '@furystack/rest'
+import { Account, Shop, Item, Replenishment, Shopping } from '../xpense'
+
+export interface XpenseApi extends RestApi {
+  GET: {
+    '/shops': RequestAction<{ result: Shop[] }>
+    '/items': RequestAction<{ result: Item[] }>
+    '/availableAccounts': RequestAction<{
+      result: Array<{
+        name: string
+        ownerType: Account['ownerType']
+        ownerName: Account['ownerName']
+        current: Account['current']
+      }>
+    }>
+    '/replenishments/:replenishmentId': RequestAction<{ urlParams: { replenishmentId: string }; result: Replenishment }>
+    '/shops/:shopId': RequestAction<{ urlParams: { shopId: string }; result: Shop }>
+    '/shopping/:shoppingId': RequestAction<{ urlParams: { shoppingId: string }; result: Shopping }>
+    '/:type/:owner/:accountName': RequestAction<{
+      result: Account
+      urlParams: { type: 'user' | 'organization'; owner: string; accountName: string }
+    }>
+  }
+  POST: {
+    '/accounts': RequestAction<{ result: Account; body: { name: string; description: string; icon: string } }>
+    '/shops': RequestAction<{ result: Shop; body: { name: string } }>
+    '/items': RequestAction<{ result: Item; body: { name: string; description: string; category?: string } }>
+    '/:type/:owner/:accountName/replenish': RequestAction<{
+      body: { amount: number; comment?: string }
+      urlParams: { type: 'user' | 'organization'; owner: string; accountName: string }
+      result: Replenishment
+    }>
+    '/:type/:owner/:accountName/shop': RequestAction<{
+      body: { shopName: string; entries: Array<{ itemName: string; amount: number; unitPrice: number }> }
+      urlParams: { type: 'user' | 'organization'; owner: string; accountName: string }
+      result: Shopping
+    }>
+  }
+}

common/models/src/index.ts

@@ -1,4 +1,4 @@
-export * from './apis'
+export * as apis from './apis'
 export * from './github-account'
 export * from './github-api-payload'
 export * from './google-account'
@@ -7,3 +7,4 @@ export * from './log-entry'
 export * from './profile'
 export * from './session'
 export * from './user'
+export * as xpense from './xpense'

common/models/src/organization.ts

@@ -1,6 +1,7 @@
 export class Organization {
   _id!: string
   name!: string
+  icon!: string
   description!: string
   /**
    * The owner user name

common/models/src/xpense/account.ts

@@ -0,0 +1,18 @@
+export class Account {
+  _id!: string
+  ownerType!: 'user' | 'organization'
+  ownerName!: string
+  name!: string
+  description!: string
+  icon!: string
+  history!: Array<{
+    balance: number
+    date: string
+    change: number
+    changePerCategory: Array<{ categoryName: string; amount: number }>
+    relatedEntry: { type: 'replenishment'; replenishmentId: string } | { type: 'shopping'; shoppingId: string }
+  }>
+  current!: number
+  createdBy!: string
+  creationDate!: string
+}

common/models/src/xpense/index.ts

@@ -0,0 +1,5 @@
+export * from './account'
+export * from './item'
+export * from './replenishment'
+export * from './shop'
+export * from './shopping'

common/models/src/xpense/item.ts

@@ -0,0 +1,8 @@
+export class Item {
+  _id!: string
+  name!: string
+  description?: string
+  category?: string
+  creationDate!: string
+  createdBy!: string
+}

common/models/src/xpense/replenishment.ts

@@ -0,0 +1,7 @@
+export class Replenishment {
+  _id!: string
+  createdBy!: string
+  accountId!: string
+  amount!: number
+  comment?: string
+}