# Product Sticker Fields Documentation

This document describes all fields used in product sticker layouts and provides guidelines for creating new sticker layouts.

## Data Sources

### Product Table (`product`)

- `pr.product_id` - Product model number
- `pr.name` - Product name
- `pr.json_data.supplier_product_code` - Supplier product code (customer product code)

### Production Order Table (`production_order`)

- `pro.production_order_id` - Production order ID
- `pro.info` - Production order info text

### Company Table (`company`)

- `co.name` - Company name
- `co.company_number` - Company customer number
- `co.company_reference_number` - Company reference number

### Record Fields

- `rec.logo_path_print` - Logo path for print
- `rec.logo_path_local` - Logo path for preview
- `rec.production_order_id` - Batch/production order number (editable)
- `rec.production_date` - Production date (editable)
- `rec.order_id` - Sale order number (editable)
- `rec.dispatch_note_id` - Dispatch/packing list number (editable)
- `rec.text_address` - Multi-line address block
- `rec.website` - Website URL
- `rec.printing` - Boolean flag for print mode
- `rec.pdf_update_trigger` - Trigger for PDF refresh

## Sticker Types

### Axopar Sticker (30x40mm)

| Field | Component | Source | Editable |
|-------|-----------|--------|----------|
| Company Name | `nc-label` | `rec.co.name` | No |
| Date | `nc-label-input` | `rec.production_date` | Yes |
| Barcode | `nc-barcode` (code128) | `rec.pr.json_data.supplier_product_code` | No |
| Customer Product Code | `nc-label` | `rec.pr.json_data.supplier_product_code` | No |
| Product Name | `nc-label` | `rec.pr.name` | No |

### Big Inha Sticker (45x75mm)

| Field | Component | Source | Editable |
|-------|-----------|--------|----------|
| Date | `nc-label-input` | `rec.production_date` | Yes |
| Barcode | `nc-barcode` (code128) | `rec.pr.json_data.supplier_product_code` | No |
| Customer Product Code | `nc-label` | `rec.json_data.supplier_product_code` | No |
| Product Name | `nc-label` | `rec.pr.name` | No |

### Big Sticker (50x80mm)

| Field | Component | Source | Editable |
|-------|-----------|--------|----------|
| Packing List | `nc-label-input` | `rec.dispatch_note_id` | Yes |
| Date | `nc-label-input` | `rec.production_date` | Yes |
| Logo | `nc-image` | `rec.logo_path_print/local` | No |
| Name | `nc-label-input` | `rec.pr.name` | Yes |
| Product Code | `nc-label-input` | `rec.pr.product_id` | Yes |
| Customer Code | `nc-label-input` | `rec.co.company_number` | Yes |
| Order Number | `nc-label-input` | `rec.order_id` | Yes |
| Info | `nc-label-input` | `rec.pro.info` | Yes |
| Delivery Address Label | `nc-label` | - | No |
| Delivery Address | `nc-textarea` | `rec.text_address` | Yes |
| Batch | `nc-label-input` | `rec.production_order_id` | Yes |

### Nimbus Small Sticker (25x40mm)

| Field | Component | Source | Editable |
|-------|-----------|--------|----------|
| Logo | `nc-image` | `rec.logo_path_print/local` | No |
| Product Name | `nc-label` | `rec.pr.name` | No |

### Frame Sticker (35x50mm)

| Field | Component | Source | Editable |
|-------|-----------|--------|----------|
| Logo | `nc-image` | `rec.logo_path_print/local` | No |
| Product Name | `nc-label` | `rec.pr.name` | No |
| Model | `nc-label-input` | `rec.pr.product_id` | Yes |
| Batch | `nc-label-input` | `rec.production_order_id` | Yes |

### Saxdor Sticker (40x60mm)

| Field | Component | Source | Editable |
|-------|-----------|--------|----------|
| Date (Pvm.) | `nc-label-input` | `rec.production_date` | Yes |
| Product Name | `nc-label` | `rec.pr.name` | No |
| Product Code | `nc-label-input` | `rec.pr.product_id` | Yes |
| Sale Order | `nc-label-input` | `rec.order_id` | Yes |
| Batch | `nc-label-input` | `rec.production_order_id` | Yes |
| Cust: Product Code | `nc-label-input` | `rec.pr.json_data.supplier_product_code` | Yes |
| Cust. Order Number | `nc-label-input` | `rec.co.company_reference_number` | Yes |
| Info | `nc-label-input` | `rec.pro.info` | Yes |

## Component Reference

### nc-image (Logo)

```json
{
  "component": "nc-image",
  "attribute": {
    ":src": "rec.printing ? rec.logo_path_print : rec.logo_path_local",
    "image-style": "object-fit: contain;"
  }
}
```

### nc-barcode (Code128)

```json
{
  "component": "nc-barcode",
  "attribute": {
    "format": "code128",
    "code-width": 2,
    "scale-x": 2,
    "scale-y": 50,
    "model": "rec.pr.json_data.supplier_product_code"
  }
}
```

### nc-barcode (QR Code)

```json
{
  "component": "nc-barcode",
  "attribute": {
    "format": "qrcode",
    "scale-x": 2,
    "scale-y": 2,
    "model": "rec.website"
  }
}
```

### nc-textarea (Address Block)

```json
{
  "component": "nc-textarea",
  "attribute": {
    "model": "rec.text_address",
    "v-on:change": "rec.pdf_update_trigger++"
  }
}
```

### nc-label-input (Label + Editable Input)

```json
{
  "component": "nc-label-input",
  "text": "Model",
  "attribute": {
    "model": "rec.pr.product_id",
    "v-on:change": "rec.pdf_update_trigger++"
  }
}
```

### nc-label (Static Display with Model)

```json
{
  "component": "nc-label",
  "attribute": {
    "model": "rec.pr.name"
  }
}
```

### nc-label (Bold with Class)

```json
{
  "component": "nc-label",
  "attribute": {
    "class": ["bold"],
    "model": "rec.co.name"
  }
}
```

### nc-label (Static Text)

```json
{
  "component": "nc-label",
  "text": "Delivery address"
}
```

## Barcode Types

### Code128 Barcode

Used for: Product codes, customer codes, serial numbers

```json
{
  "component": "nc-barcode",
  "attribute": {
    "format": "code128",
    "code-width": 2,
    "scale-x": 2,
    "scale-y": 50,
    "model": "rec.pr.json_data.supplier_product_code"
  }
}
```

**Attributes:**

- `format`: "code128" - Code128 barcode standard
- `code-width`: Bar width multiplier (typically 2)
- `scale-x`: Horizontal scale
- `scale-y`: Vertical scale (barcode height)
- `model`: Data to encode (must be string)

### QR Code

Used for: Website URLs, contact information

```json
{
  "component": "nc-barcode",
  "attribute": {
    "format": "qrcode",
    "scale-x": 2,
    "scale-y": 2,
    "model": "rec.website"
  }
}
```

**Attributes:**

- `format`: "qrcode" - QR code format
- `scale-x`: QR module size
- `scale-y`: QR module size
- `model`: URL or text to encode

**Note:** QR codes require square modules, so scale-x and scale-y should be equal.

## Layout Guidelines

### Structure Rules

1. **Proper Nesting**: All content must be nested `nc-row` → `nc-col` → component
2. **No Orphan Elements**: Never place components directly in rows without columns
3. **Full Width**: Use `"width": "auto"` for full-width containers, NOT `"width": "1"`
4. **No Heights**: Don't specify height - let content determine height naturally
5. **No Inline Styles**: Use CSS classes like `"class": ["bold"]` instead of `style` or `input-style`

### Size Reference

| Sticker | Width (mm) | Height (mm) | Points (W×H) |
|---------|-----------|-------------|--------------|
| Nimbus Small | 25 | 40 | 71 × 113 |
| Axopar | 30 | 40 | 85 × 113 |
| Frame | 35 | 50 | 99 × 142 |
| Saxdor | 40 | 60 | 113 × 170 |
| Big Inha | 45 | 75 | 128 × 213 |
| Big | 50 | 80 | 142 × 227 |

Note: Points calculated at 72 PPI (1mm = 2.83465 points)

### Fraction Guidelines

**USE minimal fractions:**

- `1/2` (not `5/10`)
- `1/3`, `2/3`
- `1/4` (not `2.5/10`)
- `2/5` (not `4/10`)
- `3/5`

**AVOID:**

- `"width": "1"` or `"height": "1"` - This is 1 pixel, NOT 100%
- `5/10`, `2/10`, etc. - Simplify to `1/2`, `1/5`
- Decimal fractions like `2.5/10` - Use `1/4` instead

### Width Guidelines

| Attribute | Usage | Examples |
|-----------|-------|----------|
| `width: "auto"` | Full width containers | Main column, full-width content |
| `width: "1/2"` | Half width | Two-column layouts |
| `width: "1/3"` | One-third | Three-column layouts |

## Building New Stickers

### Step 1: Define Paper Size

1. Add to `page-size.json` in format:

   ```json
   "80x120mm": [227, 340, 0, 0, 0, 0]
   ```

   - Formula: `mm × 2.83465 = points`
   - Width first, then height

### Step 2: Register in arr.json

```json
{
  "paper_type": [
    { "show": "80x120 mm", "value": "80x120mm" }
  ],
  "tab": [
    {
      "show": "My Sticker",
      "value": "my-sticker",
      "paper_type": "80x120mm",
      "landscape": true
    }
  ]
}
```

### Step 3: Add Translations to hdr.json

```json
{
  "hdr": {
    "my_sticker": "My Sticker",
    "my_sticker_fi": "Minu Tarra"
  }
}
```

### Step 4: Create Layout JSON

```json
{
  "name": "form/nc/report/form/my-sticker/my-sticker.json",
  "layout": {
    "component": "nc-col",
    "attribute": {
      "id": "my-sticker",
      "class": ["nc-align-top"],
      "width": "auto"
    },
    "element": [
      {
        "component": "nc-header",
        "text": "My Sticker",
        "attribute": {
          "v-if": "!rec.printing",
          "size": "medium",
          "hdr": "hdr.my_sticker"
        }
      },
      {
        "component": "nc-row",
        "attribute": {
          "info": "80x120mm",
          "print-height": "100%",
          "print-width": "100%"
        },
        "element": [
          {
            "component": "nc-col",
            "attribute": { "width": "auto" },
            "element": [
              // Your content here
            ]
          }
        ]
      }
    ]
  }
}
```

### Step 5: Add Grid Entry to grid.json

```json
{
  "my-sticker": {
    "query": "form/nc/report/form/query/production_order.json",
    "column": "form/nc/report/form/column/production_order.json"
  }
}
```

### Step 6: Create init.json

```json
{
  "name": "form/nc/report/form/my-sticker/init.json",
  "rec": "form/nc/report/form/my-sticker/rec.json",
  "layout": "form/nc/report/form/my-sticker/my-sticker.json"
}
```

## Common Patterns

### Conditional Print/Preview Logo

```javascript
":src": "rec.printing ? rec.logo_path_print : rec.logo_path_local"
```

### PDF Refresh Trigger

All editable fields include:

```javascript
"v-on:change": "rec.pdf_update_trigger++"
```

### Header Hidden During Print

```javascript
"v-if": "!rec.printing"
```

### Proper Nesting Example

```json
{
  "component": "nc-row",
  "element": [
    {
      "component": "nc-col",
      "attribute": { "width": "auto" },
      "element": [
        { "component": "nc-label", "attribute": { "model": "rec.pr.name" } }
      ]
    }
  ]
}
```

## Field Source Mapping

| Field | Table/Column | Notes |
|-------|--------------|-------|
| `rec.pr.product_id` | `product.product_id` | Model/product ID |
| `rec.pr.name` | `product.name` | Product name |
| `rec.pr.json_data.supplier_product_code` | `product.json_data` | Customer product code |
| `rec.pro.production_order_id` | `production_order.production_order_id` | Production order ID |
| `rec.pro.info` | `production_order.info` | Production order info |
| `rec.co.name` | `company.name` | Company/customer name |
| `rec.co.company_number` | `company.company_number` | Customer number |
| `rec.co.company_reference_number` | `company.company_reference_number` | Customer reference |
| `rec.production_order_id` | `rec.json` | User input (batch) |
| `rec.production_date` | `rec.json` | User input (date) |
| `rec.order_id` | `rec.json` | User input (sale order) |
| `rec.dispatch_note_id` | `rec.json` | User input (packing list) |
| `rec.text_address` | `rec.json` | User input (address) |
