@questwork/q-inventory 0.1.0

package/src/styles/index.scss

@@ -0,0 +1,148 @@
+.q-inventory,
+.inventory-scanner,
+.inventory-overview,
+.inventory-asset-detail,
+.inventory-location-detail,
+.inventory-location-admin {
+  box-sizing: border-box;
+  color: #202124;
+  font-family: Arial, sans-serif;
+}
+
+.q-inventory {
+  min-height: 100%;
+  background: #f6f7f9;
+}
+
+.q-inventory__toolbar,
+.inventory-scanner__mode,
+.inventory-scanner__manual,
+.inventory-overview__header,
+.inventory-location-detail__header,
+.inventory-location-admin__form {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+}
+
+.q-inventory__tab,
+.inventory-scanner__mode-button,
+button {
+  min-height: 36px;
+  border: 1px solid #ccd1d8;
+  border-radius: 4px;
+  background: #fff;
+  color: #202124;
+  cursor: pointer;
+  padding: 0 12px;
+}
+
+.q-inventory__tab--active,
+.inventory-scanner__mode-button--active {
+  border-color: #1769aa;
+  background: #1769aa;
+  color: #fff;
+}
+
+.inventory-scanner__state,
+.inventory-scanner__basket-header,
+.inventory-scanner__basket,
+.inventory-scanner__log,
+.inventory-scanner__log-empty,
+.inventory-overview__rows,
+.inventory-asset-detail__body,
+.inventory-asset-detail__empty,
+.inventory-location-detail__asset,
+.inventory-location-admin__row {
+  padding: 12px;
+}
+
+.inventory-scanner__basket-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  border-top: 1px solid #e0e3e7;
+  border-bottom: 1px solid #e0e3e7;
+  background: #fff;
+  font-size: 13px;
+}
+
+.inventory-scanner__basket-header div {
+  display: grid;
+  gap: 2px;
+}
+
+.inventory-scanner__basket-header span,
+.inventory-scanner__empty,
+.inventory-scanner__log-empty {
+  color: #5f6368;
+}
+
+.inventory-scanner__basket,
+.inventory-scanner__log {
+  display: grid;
+  gap: 8px;
+}
+
+.inventory-scanner__basket-item,
+.inventory-scanner__log-item {
+  display: grid;
+  gap: 4px;
+  border: 1px solid #d7dde5;
+  border-radius: 4px;
+  background: #fff;
+  padding: 10px;
+}
+
+.inventory-scanner__basket-item {
+  border-left: 4px solid #1769aa;
+}
+
+.inventory-scanner__log-item {
+  border-left: 4px solid #188038;
+}
+
+.inventory-scanner__log-item--failed {
+  border-left-color: #d93025;
+}
+
+.inventory-scanner__log-item--warning {
+  border-left-color: #f9ab00;
+}
+
+.inventory-scanner__log-item div {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.inventory-scanner__basket-item small,
+.inventory-scanner__log-item span,
+.inventory-scanner__log-item small {
+  color: #5f6368;
+}
+
+.inventory-scanner__input,
+.inventory-location-admin__form input {
+  min-height: 36px;
+  min-width: 0;
+  border: 1px solid #ccd1d8;
+  border-radius: 4px;
+  flex: 1;
+  padding: 0 8px;
+}
+
+.inventory-overview__row {
+  align-items: center;
+  display: grid;
+  grid-template-columns: minmax(90px, 1fr) minmax(120px, 2fr) minmax(120px, 2fr);
+  width: 100%;
+  margin-bottom: 6px;
+  text-align: left;
+}
+
+.inventory-overview__location {
+  color: #1769aa;
+}

package/stories/stories.scss

@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+}
+
+.q-inventory-story {
+  max-width: 430px;
+  min-height: 720px;
+  background: #f6f7f9;
+}

package/stories/stories.ts

@@ -0,0 +1,362 @@
+import { setup } from '@storybook/vue3'
+import { onMounted, ref } from 'vue'
+import { name, version } from '../package.json'
+import type { InventoryMovePayload } from '../src'
+import {
+  INVENTORY_LOCATION_KIND,
+  INVENTORY_LOCATION_TYPE,
+  InventoryAssetDetail,
+  InventoryAssetRepoAxios,
+  InventoryLocationAdmin,
+  InventoryLocationDetail,
+  InventoryLocationRepoAxios,
+  InventoryMovementRepoAxios,
+  InventoryOverview,
+  InventoryScanner,
+  QInventory,
+} from '../src'
+import '../src/styles/index.scss'
+import './stories.scss'
+
+const BACKEND_HOST = getBackendHost()
+const TENANT_CODE = 'tenantCode'
+const MOCKUP_REPO = 'mockup'
+
+const baseAssets = [
+  {
+    assetTag: 'QR-0001',
+    currentLocationCode: 'RACK-A12',
+    currentLocationKind: INVENTORY_LOCATION_KIND.REGISTERED,
+    name: 'Barcode scanner',
+  },
+  {
+    assetTag: 'QR-0002',
+    currentLocationCode: 'USER:peter',
+    currentLocationKind: INVENTORY_LOCATION_KIND.VIRTUAL,
+    name: 'Receipt printer',
+  },
+  {
+    assetTag: 'QR-0003',
+    currentLocationCode: 'HKCEC-HALL3',
+    currentLocationKind: INVENTORY_LOCATION_KIND.REGISTERED,
+    name: 'iPad kiosk',
+  },
+]
+
+const locations = [
+  {
+    locationCode: 'RACK-A12',
+    locationType: INVENTORY_LOCATION_TYPE.RACK,
+    name: 'Rack A12',
+  },
+  {
+    locationCode: 'HKCEC-HALL3',
+    locationType: INVENTORY_LOCATION_TYPE.VENUE,
+    name: 'HKCEC Hall 3',
+  },
+]
+
+const history = [
+  {
+    assetTag: 'QR-0002',
+    fromLocationCode: 'RACK-A12',
+    movedAt: Date.now() - 60000,
+    toLocationCode: 'USER:peter',
+  },
+]
+
+function cloneAssets() {
+  return baseAssets.map((asset) => ({ ...asset }))
+}
+
+function makeMockAssetApiClient(assetsRef: { value: Record<string, unknown>[] }) {
+  return {
+    async findAll() {
+      return assetsRef.value
+    },
+    async findOne(assetTag: string) {
+      return [assetsRef.value.find((a) => a.assetTag === assetTag)].filter(Boolean)
+    },
+    async saveOne(doc: Record<string, unknown>) {
+      assetsRef.value.push(doc)
+      return doc
+    },
+    async move(payload: Record<string, unknown>) {
+      console.log('move', payload)
+      const asset = assetsRef.value.find((item) => item.assetTag === payload.assetTag)
+      if (asset) {
+        asset.currentLocationCode = payload.toLocationCode
+        asset.currentLocationKind = payload.toLocationKind
+        asset.lastMovedAt = Date.now()
+        asset.lastMovedBy = 'peter'
+      }
+      return payload
+    },
+  }
+}
+
+function makeMockMovementApiClient() {
+  return {
+    async findAll(query: Record<string, unknown> = {}) {
+      if (query.assetTag === 'QR-0002') {
+        return history
+      }
+      return []
+    },
+  }
+}
+
+function makeBackendMockupApiClient(options: { assetsRef?: { value: Record<string, unknown>[] }, locationsRef?: { value: Record<string, unknown>[] } } = {}) {
+  const { assetsRef, locationsRef } = options
+  const assetRepo = new InventoryAssetRepoAxios({
+    baseURL: BACKEND_HOST,
+    movedBy: 'peter',
+    qRepo: MOCKUP_REPO,
+    tenantCode: TENANT_CODE,
+  })
+  const locationRepo = new InventoryLocationRepoAxios({
+    baseURL: BACKEND_HOST,
+    movedBy: 'peter',
+    qRepo: MOCKUP_REPO,
+    tenantCode: TENANT_CODE,
+  })
+  const movementRepo = new InventoryMovementRepoAxios({
+    baseURL: BACKEND_HOST,
+    movedBy: 'peter',
+    qRepo: MOCKUP_REPO,
+    tenantCode: TENANT_CODE,
+  })
+
+  const assetClient = {
+    async findAll(query: Record<string, unknown> = {}) {
+      const data = await assetRepo.findAll(query)
+      if (assetsRef) assetsRef.value = data
+      return data
+    },
+    async move(payload: InventoryMovePayload) {
+      const result = await assetRepo.move(payload)
+      await assetClient.findAll()
+      return result
+    },
+  }
+
+  const locationClient = {
+    async findAll(query: Record<string, unknown> = {}) {
+      const data = await locationRepo.findAll(query)
+      if (locationsRef) locationsRef.value = data
+      return data
+    },
+  }
+
+  const movementClient = {
+    async findAll(query: Record<string, unknown> = {}) {
+      return movementRepo.findAll(query)
+    },
+  }
+
+  return {
+    assetClient,
+    locationClient,
+    movementClient,
+  }
+}
+
+function getBackendHost() {
+  if (typeof window !== 'undefined') {
+    return window.localStorage.getItem('qInventoryBackendHost') || 'http://127.0.0.1:8033'
+  }
+  return 'http://127.0.0.1:8033'
+}
+
+setup((app) => {
+  app.use(QInventory)
+})
+
+export default {
+  title: 'QInventory',
+}
+
+export const story01 = () => ({
+  template: `
+    <div class="q-inventory-story">
+      <q-inventory
+        :asset-api-client="assetApiClient"
+        :location-api-client="locationApiClient"
+        :movement-api-client="movementApiClient"
+        :assets="assets"
+        current-user-code="peter"
+        :locations="locations"
+      />
+    </div>
+  `,
+  setup() {
+    const assets = ref(cloneAssets())
+    const assetApiClient = makeMockAssetApiClient(assets)
+    const locationApiClient = {
+      async findAll() {
+        return locations
+      },
+    }
+    const movementApiClient = makeMockMovementApiClient()
+    return {
+      assetApiClient,
+      locationApiClient,
+      movementApiClient,
+      assets,
+      locations,
+    }
+  },
+})
+story01.storyName = `${name} ${version}`
+
+export const backendMockup = () => ({
+  template: `
+    <div class="q-inventory-story">
+      <div class="q-inventory-story__backend">
+        Backend: {{ backendHost }}
+        <button type="button" @click="reload">Reload</button>
+      </div>
+      <q-inventory
+        :asset-api-client="assetApiClient"
+        :location-api-client="locationApiClient"
+        :movement-api-client="movementApiClient"
+        :assets="assets"
+        current-user-code="peter"
+        :locations="locations"
+        @moved="reload"
+        @save-location="reload"
+      />
+    </div>
+  `,
+  setup() {
+    const assets = ref<Record<string, unknown>[]>([])
+    const locations = ref<Record<string, unknown>[]>([])
+    const { assetClient, locationClient, movementClient } = makeBackendMockupApiClient({ assetsRef: assets, locationsRef: locations })
+
+    async function reload() {
+      await Promise.all([
+        assetClient.findAll(),
+        locationClient.findAll(),
+      ])
+    }
+
+    onMounted(reload)
+
+    return {
+      assetApiClient: assetClient,
+      locationApiClient: locationClient,
+      movementApiClient: movementClient,
+      assets,
+      backendHost: BACKEND_HOST,
+      locations,
+      reload,
+    }
+  },
+})
+backendMockup.storyName = 'backend mockup endpoint'
+
+export const scanner = () => ({
+  components: { InventoryScanner },
+  template: `
+    <div class="q-inventory-story">
+      <inventory-scanner
+        :asset-api-client="assetApiClient"
+        current-user-code="peter"
+        @moved="onMoved"
+      />
+    </div>
+  `,
+  setup() {
+    const assets = ref(cloneAssets())
+    const assetApiClient = makeMockAssetApiClient(assets)
+    return {
+      assetApiClient,
+      onMoved(payload: unknown) {
+        console.log('moved', payload)
+      },
+    }
+  },
+})
+scanner.storyName = 'scanner workflow'
+
+export const overview = () => ({
+  components: { InventoryOverview },
+  template: `
+    <div class="q-inventory-story">
+      <inventory-overview
+        :assets="assets"
+        :locations="locations"
+      />
+    </div>
+  `,
+  setup() {
+    const assets = ref(cloneAssets())
+    return {
+      assets,
+      locations,
+    }
+  },
+})
+overview.storyName = 'overview with in-transit item'
+
+export const assetDetail = () => ({
+  components: { InventoryAssetDetail },
+  template: `
+    <div class="q-inventory-story">
+      <inventory-asset-detail
+        :movement-api-client="movementApiClient"
+        :asset="asset"
+      />
+    </div>
+  `,
+  setup() {
+    const assets = cloneAssets()
+    return {
+      movementApiClient: makeMockMovementApiClient(),
+      asset: assets[1],
+    }
+  },
+})
+assetDetail.storyName = 'asset detail'
+
+export const locationDetail = () => ({
+  components: { InventoryLocationDetail },
+  template: `
+    <div class="q-inventory-story">
+      <inventory-location-detail
+        :asset-api-client="assetApiClient"
+        :location="location"
+      />
+    </div>
+  `,
+  setup() {
+    const assets = ref(cloneAssets())
+    const assetApiClient = makeMockAssetApiClient(assets)
+    return {
+      assetApiClient,
+      location: locations[0],
+    }
+  },
+})
+locationDetail.storyName = 'location detail'
+
+export const locationAdmin = () => ({
+  components: { InventoryLocationAdmin },
+  template: `
+    <div class="q-inventory-story">
+      <inventory-location-admin
+        :locations="locations"
+        @save-location="onSaveLocation"
+      />
+    </div>
+  `,
+  setup() {
+    return {
+      locations,
+      onSaveLocation(payload: unknown) {
+        console.log('saveLocation', payload)
+      },
+    }
+  },
+})
+locationAdmin.storyName = 'location admin'

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowJs": true,
+    "checkJs": false,
+    "jsx": "preserve",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": false,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/vite.app.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import commonjs from 'vite-plugin-commonjs'
+
+export default defineConfig({
+  base: '/qInventory/',
+  root: 'app/qInventory',
+  build: {
+    assetsDir: 'assets',
+    cssCodeSplit: false,
+    emptyOutDir: true,
+    outDir: '../../dist-app/qInventory',
+    rollupOptions: {
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
+            return 'assets/q-inventory-app.css'
+          }
+          return 'assets/[name][extname]'
+        },
+        chunkFileNames: 'assets/q-inventory-app.js',
+        entryFileNames: 'assets/q-inventory-app.js',
+        inlineDynamicImports: true,
+        manualChunks: undefined,
+      },
+    },
+    sourcemap: false,
+    target: ['chrome100', 'safari15', 'firefox91'],
+  },
+  esbuild: {
+    legalComments: 'none',
+  },
+  plugins: [
+    vue(),
+    commonjs(),
+  ],
+})

package/vite.config.js

@@ -0,0 +1,68 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import commonjs from 'vite-plugin-commonjs'
+import dts from 'vite-plugin-dts'
+
+const libName = 'QInventory'
+const fileName = 'q-inventory'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: './src/index.ts',
+      name: libName,
+      fileName: (format) => {
+        if (format === 'es') return `${fileName}.esm.js`
+        if (format === 'cjs') return `${fileName}.min.cjs`
+        return `${fileName}.min.js`
+      },
+      formats: ['es', 'cjs', 'umd'],
+    },
+    rollupOptions: {
+      external: [
+        'vue',
+        '@questwork/q-inventory-model',
+        '@questwork/q-utilities',
+      ],
+      output: {
+        assetFileNames: `${fileName}.min.[ext]`,
+        globals: {
+          vue: 'Vue',
+          '@questwork/q-inventory-model': 'qInventoryModel',
+          '@questwork/q-utilities': 'qUtilities',
+        },
+        exports: 'named',
+      },
+    },
+    sourcemap: true,
+    target: ['chrome100', 'safari15', 'firefox91'],
+    terserOptions: {
+      compress: false,
+      mangle: false,
+    },
+  },
+  esbuild: {
+    legalComments: 'none',
+  },
+  plugins: [
+    vue(),
+    commonjs(),
+    dts({
+      include: ['src/**/*.ts', 'src/**/*.vue'],
+      exclude: ['**/*.spec.ts'],
+      outDir: 'dist',
+    }),
+  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    include: ['src/**/*.spec.ts'],
+  },
+})

package/vitest.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    include: ['src/**/*.spec.ts'],
+  },
+})