From 42a57a31a2b19d6a2c1c81c21deb9b8941fb601a Mon Sep 17 00:00:00 2001
From: Ruben <ruben.de.facq@redpencil.io>
Date: Tue, 5 Nov 2024 21:21:42 +0100
Subject: [PATCH 1/6] add route product price list for inline editing of
 product prices

- same filters as original product list
- allows editing purchasePrice, margin and sellingPrice
- auto saves whenever a change occurs

The initial search returns ES search objects, so the template is made to handle both ES and ED (which also means adjusting some components to handle both).
ember-data records are fetched to be able to save the records with their changes, but also react on changes in the template.
Data is shown the moment ES returns a response. ED records are loaded while the user can already see the table.
Some helpers specified inside a model are moved out of it so these can be used by ES results too.
---
 app/components/fmt/unit-code.js               |  16 +-
 app/components/fmt/unit-price.hbs             |  10 +-
 app/components/fmt/unit-price.js              |  39 ++---
 app/components/main-menu.hbs                  |   7 +-
 app/components/product/category-tree.hbs      |   7 +
 app/components/product/edit.js                |  33 +---
 .../main/products/{index.js => list.js}       |  14 +-
 app/controllers/main/products/list/index.js   |  14 ++
 app/controllers/main/products/list/prices.js  |  79 ++++++++++
 app/helpers/constant.js                       |   6 +
 app/models/unit-price-specification.js        |   8 +-
 app/router.js                                 |   3 +
 .../main/products/{index.js => list.js}       |   0
 app/templates/main/products/list.hbs          |  92 +++++++++++
 .../main/products/{ => list}/index.hbs        | 101 +-----------
 app/templates/main/products/list/prices.hbs   | 144 ++++++++++++++++++
 app/utils/product-price.js                    |  47 ++++++
 package.json                                  |   1 +
 18 files changed, 446 insertions(+), 175 deletions(-)
 create mode 100644 app/components/product/category-tree.hbs
 rename app/controllers/main/products/{index.js => list.js} (92%)
 create mode 100644 app/controllers/main/products/list/index.js
 create mode 100644 app/controllers/main/products/list/prices.js
 create mode 100644 app/helpers/constant.js
 rename app/routes/main/products/{index.js => list.js} (100%)
 create mode 100644 app/templates/main/products/list.hbs
 rename app/templates/main/products/{ => list}/index.hbs (56%)
 create mode 100644 app/templates/main/products/list/prices.hbs
 create mode 100644 app/utils/product-price.js

diff --git a/app/components/fmt/unit-code.js b/app/components/fmt/unit-code.js
index 7b54778..34d6b65 100644
--- a/app/components/fmt/unit-code.js
+++ b/app/components/fmt/unit-code.js
@@ -1,15 +1,23 @@
 import Component from '@glimmer/component';
 
 export default class FmtUnitCodeComponent extends Component {
+  get label() {
+    if (typeof this.args.value === 'string') {
+      return this.args.value;
+    } else {
+      // ED unitPrice object
+      return this.args.value?.get('label');
+    }
+  }
   get htmlLabel() {
-    if (this.args.value == 'm1') {
+    if (this.label == 'm1') {
       return 'm';
-    } else if (this.args.value == 'm2') {
+    } else if (this.label == 'm2') {
       return 'm<sup>2</sup>';
-    } else if (this.args.value == 'st') {
+    } else if (this.alabel == 'st') {
       return 'stuk';
     } else {
-      return this.args.value;
+      return this.label;
     }
   }
 }
diff --git a/app/components/fmt/unit-price.hbs b/app/components/fmt/unit-price.hbs
index 12fc2af..4f9b49b 100644
--- a/app/components/fmt/unit-price.hbs
+++ b/app/components/fmt/unit-price.hbs
@@ -1,6 +1,4 @@
-{{#if this.currencyValueLoader.isResolved}}
-  <Fmt::Currency
-    @value={{this.currencyValueLoader.value}}
-    @currency={{@model.currency}} />
-  {{#if @showUnit}}/ <Fmt::UnitCode @value={{@model.unitCode}} />{{/if}}
-{{/if}}
\ No newline at end of file
+<Fmt::Currency
+  @value={{this.calculatedCurrencyValue}}
+  @currency={{@model.currency}} />
+{{#if @showUnit}}/ <Fmt::UnitCode @value={{@model.unitCode}} />{{/if}}
\ No newline at end of file
diff --git a/app/components/fmt/unit-price.js b/app/components/fmt/unit-price.js
index d7ec592..eeef3e9 100644
--- a/app/components/fmt/unit-price.js
+++ b/app/components/fmt/unit-price.js
@@ -1,36 +1,27 @@
 import Component from '@glimmer/component';
-import { cached } from '@glimmer/tracking';
-import { TrackedAsyncData } from 'ember-async-data';
 import { VAT_RATE } from '../../config';
 import { calculatePriceTaxIncluded, calculatePriceTaxExcluded } from '../../utils/calculate-price';
-
+import { get } from '@ember/object';
 export default class FmtUnitPriceComponent extends Component {
   // Note:
-  // this.args.model maybe a Proxy object coming from ember-data
+  // this.args.model may be a unit-price-specification Proxy object coming from ember-data
   // or a plain javascript object coming as nested object from mu-search.
 
-  @cached
-  get currencyValueLoader() {
+  get currencyValue() {
+    // eslint-disable-next-line ember/no-get
+    return get(this.args.model, 'currencyValue');
+  }
+
+  get isTaxIncluded() {
+    // eslint-disable-next-line ember/no-get
+    return `${get(this.args.model, 'valueAddedTaxIncluded')}` === 'true'; // cover for mu-search where 'true' is a string
+  }
+
+  get calculatedCurrencyValue() {
     if (this.args.showTaxIncluded) {
-      const loadData = async () => {
-        const model = await this.args.model;
-        return calculatePriceTaxIncluded(
-          model.currencyValue,
-          VAT_RATE,
-          `${model.valueAddedTaxIncluded}` === 'true', // cover for mu-search where 'true' is a string
-        );
-      };
-      return new TrackedAsyncData(loadData());
+      return calculatePriceTaxIncluded(this.currencyValue, VAT_RATE, this.isTaxIncluded);
     } else {
-      const loadData = async () => {
-        const model = await this.args.model;
-        return calculatePriceTaxExcluded(
-          model.currencyValue,
-          VAT_RATE,
-          `${model.valueAddedTaxIncluded}` === 'true', // cover for mu-search where 'true' is a string
-        );
-      };
-      return new TrackedAsyncData(loadData());
+      return calculatePriceTaxExcluded(this.currencyValue, VAT_RATE, this.isTaxIncluded);
     }
   }
 }
diff --git a/app/components/main-menu.hbs b/app/components/main-menu.hbs
index 40d5887..7fae1fb 100644
--- a/app/components/main-menu.hbs
+++ b/app/components/main-menu.hbs
@@ -12,11 +12,16 @@
         </div>
         <div class="hidden md:block">
           <div class="ml-10 flex items-baseline">
-            <LinkTo @route="main.products.index"
+            <LinkTo @route="main.products.list.index"
               @activeClass="text-white !bg-red-700"
               class="ml-4 px-3 py-2 rounded-md font-medium text-red-100 hover:bg-red-600 focus:outline-none focus:text-white focus:bg-red-600">
               Producten
             </LinkTo>
+            <LinkTo @route="main.products.list.prices"
+              @activeClass="text-white !bg-red-700"
+              class="ml-4 px-3 py-2 rounded-md font-medium text-red-100 hover:bg-red-600 focus:outline-none focus:text-white focus:bg-red-600">
+              Prijzenlijst
+            </LinkTo>
             <LinkTo @route="main.suppliers.index"
               @activeClass="text-white !bg-red-700"
               class="ml-4 px-3 py-2 rounded-md font-medium text-red-100 hover:bg-red-600 focus:outline-none focus:text-white focus:bg-red-600">
diff --git a/app/components/product/category-tree.hbs b/app/components/product/category-tree.hbs
new file mode 100644
index 0000000..4372f1a
--- /dev/null
+++ b/app/components/product/category-tree.hbs
@@ -0,0 +1,7 @@
+{{#let (or @product.broaderCategory.label @product.category.broader.label) as |broaderCategoryLabel| }}
+  {{#if broaderCategoryLabel}}
+    {{broaderCategoryLabel}}
+    <br> <div class="w-3 h-3 ml-2 mr-1 inline-block border-b-2 border-l-2 border-gray-300"></div>
+  {{/if}}
+{{/let}}
+{{@product.category.label}}
\ No newline at end of file
diff --git a/app/components/product/edit.js b/app/components/product/edit.js
index 19579d8..9101163 100644
--- a/app/components/product/edit.js
+++ b/app/components/product/edit.js
@@ -3,10 +3,9 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { enqueueTask, keepLatestTask, task, timeout } from 'ember-concurrency';
-import roundDecimal from '../../utils/round-decimal';
 import constants from '../../config/constants';
-import { VAT_RATE } from '../../config';
 import { without } from 'frontend-price-management/utils/array';
+import { recalculateSalesPrice } from '../../utils/product-price';
 
 const { CALCULATION_BASIS } = constants;
 
@@ -127,28 +126,8 @@ export default class ProductEditComponent extends Component {
     }
   });
 
-  recalculateSalesPrice = keepLatestTask(async () => {
-    const purchaseOffering = await this.args.model.purchaseOffering;
-    const purchasePrice = await purchaseOffering.unitPriceSpecification;
-    purchasePrice.currencyValue = roundDecimal(purchasePrice.currencyValue);
-
-    const salesOffering = await this.args.model.salesOffering;
-    const salesPrice = await salesOffering.unitPriceSpecification;
-
-    if (salesPrice.calculationBasis == CALCULATION_BASIS.MARGIN) {
-      salesPrice.margin = roundDecimal(salesPrice.margin);
-      if (salesPrice.valueAddedTaxIncluded) {
-        const value = purchasePrice.currencyValue * salesPrice.margin * (1 + VAT_RATE);
-        salesPrice.currencyValue = roundDecimal(value);
-      } else {
-        const value = purchasePrice.currencyValue * salesPrice.margin;
-        salesPrice.currencyValue = roundDecimal(value);
-      }
-    } else {
-      salesPrice.currencyValue = roundDecimal(salesPrice.currencyValue);
-      const margin = salesPrice.currencyValueTaxExcluded / purchasePrice.currencyValue;
-      salesPrice.margin = roundDecimal(margin);
-    }
+  recalculateProductSalesPrice = keepLatestTask(async () => {
+    await recalculateSalesPrice(this.args.model);
   });
 
   uploadFile = enqueueTask(async (file) => {
@@ -220,7 +199,7 @@ export default class ProductEditComponent extends Component {
     const offering = await this.args.model.purchaseOffering;
     const price = await offering.unitPriceSpecification;
     price.currencyValue = value;
-    this.recalculateSalesPrice.perform();
+    this.recalculateProductSalesPrice.perform();
   }
 
   @action
@@ -235,7 +214,7 @@ export default class ProductEditComponent extends Component {
     const offering = await this.args.model.salesOffering;
     const price = await offering.unitPriceSpecification;
     price.currencyValue = value;
-    this.recalculateSalesPrice.perform();
+    this.recalculateProductSalesPrice.perform();
   }
 
   @action
@@ -250,6 +229,6 @@ export default class ProductEditComponent extends Component {
     const offering = await this.args.model.salesOffering;
     const price = await offering.unitPriceSpecification;
     price.margin = value;
-    this.recalculateSalesPrice.perform();
+    this.recalculateProductSalesPrice.perform();
   }
 }
diff --git a/app/controllers/main/products/index.js b/app/controllers/main/products/list.js
similarity index 92%
rename from app/controllers/main/products/index.js
rename to app/controllers/main/products/list.js
index 8a5f6bb..e4e0a34 100644
--- a/app/controllers/main/products/index.js
+++ b/app/controllers/main/products/list.js
@@ -3,8 +3,12 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
 import { restartableTask, timeout } from 'ember-concurrency';
+import { service } from '@ember/service';
 
 export default class MainProductsIndexController extends Controller {
+  @service store;
+  @service userInfo;
+
   @tracked page = 0;
   @tracked size = 20;
   @tracked sort = 'identifier';
@@ -53,16 +57,6 @@ export default class MainProductsIndexController extends Controller {
     }
   }
 
-  @action
-  showPreview(product) {
-    this.previewProduct = product;
-  }
-
-  @action
-  closePreview() {
-    this.previewProduct = undefined;
-  }
-
   @action
   toggleAvailableOnly() {
     this.availableOnly = !this.availableOnly;
diff --git a/app/controllers/main/products/list/index.js b/app/controllers/main/products/list/index.js
new file mode 100644
index 0000000..86ec746
--- /dev/null
+++ b/app/controllers/main/products/list/index.js
@@ -0,0 +1,14 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class MainProductsListIndexController extends Controller {
+  @action
+  showPreview(product) {
+    this.previewProduct = product;
+  }
+
+  @action
+  closePreview() {
+    this.previewProduct = undefined;
+  }
+}
diff --git a/app/controllers/main/products/list/prices.js b/app/controllers/main/products/list/prices.js
new file mode 100644
index 0000000..ec46e15
--- /dev/null
+++ b/app/controllers/main/products/list/prices.js
@@ -0,0 +1,79 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import {
+  hasMarginCalculationBasis,
+  hasPriceOutCalculationBasis,
+  recalculateSalesPriceAndSave,
+} from '../../../../utils/product-price';
+import { trackedFunction } from 'reactiveweb/function';
+import { timeout } from 'ember-concurrency';
+
+export default class MainProductsListPricesController extends Controller {
+  @service store;
+
+  isMarginPriceBasis = (priceSpecification) => hasMarginCalculationBasis(priceSpecification);
+  isPriceOutBasis = (priceSpecification) => hasPriceOutCalculationBasis(priceSpecification);
+
+  products = trackedFunction(this, async () => {
+    const productObjects = await this.model;
+    await Promise.resolve();
+    const productsED = await this.store.query('product', {
+      filter: { ':id:': productObjects.map((p) => p.id).join(',') },
+      include: [
+        'category',
+        'category.broader',
+        'purchase-offering.unit-price-specification',
+        'purchase-offering.business-entity',
+        'sales-offering.unit-price-specification',
+        'sales-offering.unit-price-specification.unit-code',
+      ].join(','),
+    });
+    return productObjects.map((p) => productsED.find((pED) => p.id == pED.id));
+  });
+
+  // the edit actions receive the product id, as it might be ES or ED in the template
+  // But editing/saving is only possible via ED
+  async getProductById(productId) {
+    await this.products.promise;
+    return this.products.value.find((p) => p.id == productId);
+  }
+
+  @action
+  async setCalculationBasis(productId, event) {
+    const product = await this.getProductById(productId);
+    const calculationBasis = event.target.value;
+    const offering = await product.salesOffering;
+    const price = await offering.unitPriceSpecification;
+    price.calculationBasis = calculationBasis;
+    await price.save();
+  }
+
+  @action
+  async setPriceIn(productId, value) {
+    const product = await this.getProductById(productId);
+    const offering = await product.purchaseOffering;
+    const price = await offering.unitPriceSpecification;
+    price.currencyValue = value;
+    await price.save();
+    await recalculateSalesPriceAndSave(product);
+  }
+
+  @action
+  async setPriceOut(productId, value) {
+    const product = await this.getProductById(productId);
+    const offering = await product.salesOffering;
+    const price = await offering.unitPriceSpecification;
+    price.currencyValue = value;
+    await recalculateSalesPriceAndSave(product);
+  }
+
+  @action
+  async setMargin(productId, value) {
+    const product = await this.getProductById(productId);
+    const offering = await product.salesOffering;
+    const price = await offering.unitPriceSpecification;
+    price.margin = value;
+    await recalculateSalesPriceAndSave(product);
+  }
+}
diff --git a/app/helpers/constant.js b/app/helpers/constant.js
new file mode 100644
index 0000000..ea42971
--- /dev/null
+++ b/app/helpers/constant.js
@@ -0,0 +1,6 @@
+import constants from '../config/constants';
+
+export default function constant(constantName) {
+  const path = constantName.split('.');
+  return path.reduce((acc, pathKey) => acc[pathKey], constants);
+}
diff --git a/app/models/unit-price-specification.js b/app/models/unit-price-specification.js
index cd06329..e1b4c12 100644
--- a/app/models/unit-price-specification.js
+++ b/app/models/unit-price-specification.js
@@ -1,10 +1,8 @@
 import { attr, belongsTo } from '@ember-data/model';
 import ProvenanceModel from './provenance-model';
 import { calculatePriceTaxIncluded, calculatePriceTaxExcluded } from '../utils/calculate-price';
-import constants from '../config/constants';
 import { VAT_RATE } from '../config';
-
-const { CALCULATION_BASIS } = constants;
+import { hasMarginCalculationBasis, hasPriceOutCalculationBasis } from '../utils/product-price';
 
 export default class UnitPriceSpecificationModel extends ProvenanceModel {
   @attr('string') currency;
@@ -25,11 +23,11 @@ export default class UnitPriceSpecificationModel extends ProvenanceModel {
   }
 
   get hasPriceOutCalculationBasis() {
-    return this.calculationBasis == CALCULATION_BASIS.PRICE_OUT;
+    return hasPriceOutCalculationBasis(this);
   }
 
   get hasMarginCalculationBasis() {
-    return this.calculationBasis == CALCULATION_BASIS.MARGIN;
+    return hasMarginCalculationBasis(this);
   }
 
   get marginPct() {
diff --git a/app/router.js b/app/router.js
index 83903dd..3a6e7b1 100644
--- a/app/router.js
+++ b/app/router.js
@@ -12,6 +12,9 @@ Router.map(function () {
   this.route('oops');
   this.route('main', { path: '/' }, function () {
     this.route('products', function () {
+      this.route('list', function () {
+        this.route('prices');
+      });
       this.route('new');
       this.route('detail', { path: '/:product_id' }, function () {
         this.route('edit');
diff --git a/app/routes/main/products/index.js b/app/routes/main/products/list.js
similarity index 100%
rename from app/routes/main/products/index.js
rename to app/routes/main/products/list.js
diff --git a/app/templates/main/products/list.hbs b/app/templates/main/products/list.hbs
new file mode 100644
index 0000000..eec0686
--- /dev/null
+++ b/app/templates/main/products/list.hbs
@@ -0,0 +1,92 @@
+<div class="p-4 lg:px-6 space-y-4 w-full bg-gray-50 rounded-md">
+  <div class="flex items-center justify-between">
+    <div class="flex items-center space-x-2">
+      <div class="flex items-center">
+        {{svg-jar "search-line" class="shrink-0 mr-2 h-4 w-4 text-gray-500 fill-current"}}
+        <h4 class="text-gray-700 text-sm uppercase tracking-wide">
+          Zoeken
+        </h4>
+      </div>
+      {{#if this.isLoadingModel}}
+        <div class="flex-0">
+          <Util::LoadingSpinner @label="" />
+        </div>
+      {{else}}
+        <div class="text-gray-500 text-xs">
+          (<span class="font-medium">{{this.model.meta.count}}</span> resultaten gevonden)
+        </div>
+      {{/if}}
+    </div>
+    <div class="shrink-0">
+      <Rlv::Button
+        @label="Wis alle filters"
+        @icon="filter-line"
+        @skin="secondary-link"
+        {{on "click" this.resetFilters}} />
+    </div>
+  </div>
+  <div class="mt-4 grid sm:grid-cols-12 gap-4">
+    <div class="sm:col-span-2 lg:col-span-1">
+      <Filter::TextInput
+        @label="Nr."
+        @value={{this.filter.identifier}}
+        @onInput={{perform this.debounceFilter "identifier"}} />
+    </div>
+    <div class="sm:col-span-4 lg:col-span-3 xl:col-span-2">
+      <InputField::ProductCategorySelect
+        @label="Categorie"
+        @scope="top"
+        @value={{this.filter.broaderCategory}}
+        @onSelectionChange={{fn this.selectFilter "broaderCategory"}} />
+    </div>
+    <div class="sm:col-span-6 lg:col-span-4 xl:col-span-2">
+      <InputField::ProductCategorySelect
+        @label="Subcategorie"
+        @scope={{this.filter.broaderCategory}}
+        @disabled={{not this.filter.broaderCategory}}
+        @value={{this.filter.category}}
+        @onSelectionChange={{fn this.selectFilter "category"}} />
+    </div>
+    <div class="sm:col-span-10 lg:col-span-4 xl:col-span-3">
+      <Filter::TextInput
+        @label="Naam"
+        @value={{this.filter.name}}
+        @onInput={{perform this.debounceFilter "name"}} />
+    </div>
+    <div class="sm:col-span-6 lg:col-span-4 xl:col-span-2">
+      <InputField::BusinessEntitySelect
+        @label="Leverancier"
+        @value={{this.filter.supplier}}
+        @onSelectionChange={{fn this.selectFilter "supplier"}} />
+    </div>
+    <div class="sm:col-span-2 lg:col-span-2 xl:col-span-1">
+      <Filter::TextInput
+        @label="Lev. nr."
+        @value={{this.filter.supplierIdentifier}}
+        @onInput={{perform this.debounceFilter "supplierIdentifier"}} />
+    </div>
+    <div class="sm:col-span-2 lg:col-span-2 xl:col-span-1">
+      <Filter::TextInput
+        @label="Rek"
+        @value={{this.filter.rack}}
+        @onInput={{perform this.debounceFilter "rack"}} />
+    </div>
+    <div class="sm:col-span-6 lg:col-span-4">
+      <Rlv::InputField::Checkbox
+        @id="filter-status-field"
+        @label="Toon ook niet beschikbare producten"
+        @value={{not this.filter.availableOnly}}
+        @onChange={{this.toggleAvailableOnly}}
+        class="mt-1" />
+    </div>
+  </div>
+</div>
+{{outlet}}
+<DataTable::Pagination
+  @page={{this.page}}
+  @size={{this.size}}
+  @total={{this.model.meta.count}}
+  @onPrevious={{this.previousPage}}
+  @onNext={{this.nextPage}}
+  @onSelectPage={{this.selectPage}}
+/>
\ No newline at end of file
diff --git a/app/templates/main/products/index.hbs b/app/templates/main/products/list/index.hbs
similarity index 56%
rename from app/templates/main/products/index.hbs
rename to app/templates/main/products/list/index.hbs
index 5569a55..888b644 100644
--- a/app/templates/main/products/index.hbs
+++ b/app/templates/main/products/list/index.hbs
@@ -1,87 +1,3 @@
-<div class="p-4 lg:px-6 space-y-4 w-full bg-gray-50 rounded-md">
-  <div class="flex items-center justify-between">
-    <div class="flex items-center space-x-2">
-      <div class="flex items-center">
-        {{svg-jar "search-line" class="shrink-0 mr-2 h-4 w-4 text-gray-500 fill-current"}}
-        <h4 class="text-gray-700 text-sm uppercase tracking-wide">
-          Zoeken
-        </h4>
-      </div>
-      {{#if this.isLoadingModel}}
-        <div class="flex-0">
-          <Util::LoadingSpinner @label="" />
-        </div>
-      {{else}}
-        <div class="text-gray-500 text-xs">
-          (<span class="font-medium">{{this.model.meta.count}}</span> resultaten gevonden)
-        </div>
-      {{/if}}
-    </div>
-    <div class="shrink-0">
-      <Rlv::Button
-        @label="Wis alle filters"
-        @icon="filter-line"
-        @skin="secondary-link"
-        {{on "click" this.resetFilters}} />
-    </div>
-  </div>
-  <div class="mt-4 grid sm:grid-cols-12 gap-4">
-    <div class="sm:col-span-2 lg:col-span-1">
-      <Filter::TextInput
-        @label="Nr."
-        @value={{this.filter.identifier}}
-        @onInput={{perform this.debounceFilter "identifier"}} />
-    </div>
-    <div class="sm:col-span-4 lg:col-span-3 xl:col-span-2">
-      <InputField::ProductCategorySelect
-        @label="Categorie"
-        @scope="top"
-        @value={{this.filter.broaderCategory}}
-        @onSelectionChange={{fn this.selectFilter "broaderCategory"}} />
-    </div>
-    <div class="sm:col-span-6 lg:col-span-4 xl:col-span-2">
-      <InputField::ProductCategorySelect
-        @label="Subcategorie"
-        @scope={{this.filter.broaderCategory}}
-        @disabled={{not this.filter.broaderCategory}}
-        @value={{this.filter.category}}
-        @onSelectionChange={{fn this.selectFilter "category"}} />
-    </div>
-    <div class="sm:col-span-10 lg:col-span-4 xl:col-span-3">
-      <Filter::TextInput
-        @label="Naam"
-        @value={{this.filter.name}}
-        @onInput={{perform this.debounceFilter "name"}} />
-    </div>
-    <div class="sm:col-span-6 lg:col-span-4 xl:col-span-2">
-      <InputField::BusinessEntitySelect
-        @label="Leverancier"
-        @value={{this.filter.supplier}}
-        @onSelectionChange={{fn this.selectFilter "supplier"}} />
-    </div>
-    <div class="sm:col-span-2 lg:col-span-2 xl:col-span-1">
-      <Filter::TextInput
-        @label="Lev. nr."
-        @value={{this.filter.supplierIdentifier}}
-        @onInput={{perform this.debounceFilter "supplierIdentifier"}} />
-    </div>
-    <div class="sm:col-span-2 lg:col-span-2 xl:col-span-1">
-      <Filter::TextInput
-        @label="Rek"
-        @value={{this.filter.rack}}
-        @onInput={{perform this.debounceFilter "rack"}} />
-    </div>
-    <div class="sm:col-span-6 lg:col-span-4">
-      <Rlv::InputField::Checkbox
-        @id="filter-status-field"
-        @label="Toon ook niet beschikbare producten"
-        @value={{not this.filter.availableOnly}}
-        @onChange={{this.toggleAvailableOnly}}
-        class="mt-1" />
-    </div>
-  </div>
-</div>
-
 <div class="mt-4 flex flex-col">
   <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
     <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
@@ -107,7 +23,7 @@
               <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                 VKP <br>btw in
               </th>
-              <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              <th class="py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                 Eenheid
               </th>
               <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
@@ -131,11 +47,7 @@
                   {{product.identifier}}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {{#if product.broaderCategory}}
-                    {{product.broaderCategory.label}}
-                    <br> <div class="w-3 h-3 ml-2 mr-1 inline-block border-b-2 border-l-2 border-gray-300"></div>
-                  {{/if}}
-                  {{product.category.label}}
+                  <Product::CategoryTree @product={{product}} />
                 </td>
                 <td class="px-6 py-4 text-sm font-medium text-gray-900">
                   {{get-by-lang product.name}}
@@ -184,14 +96,7 @@
     </div>
   </div>
 </div>
-<DataTable::Pagination
-  @page={{this.page}}
-  @size={{this.size}}
-  @total={{this.model.meta.count}}
-  @onPrevious={{this.previousPage}}
-  @onNext={{this.nextPage}}
-  @onSelectPage={{this.selectPage}}
-/>
+
 {{#if this.previewProduct}}
   <Product::QuickviewModal
     @product={{this.previewProduct}}
diff --git a/app/templates/main/products/list/prices.hbs b/app/templates/main/products/list/prices.hbs
new file mode 100644
index 0000000..288bc61
--- /dev/null
+++ b/app/templates/main/products/list/prices.hbs
@@ -0,0 +1,144 @@
+<div class="mt-4 flex flex-col">
+  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+      <div class="overflow-hidden border-b border-gray-200 sm:rounded-lg">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead>
+            <tr>
+              <th class="py-3 bg-gray-100 text-center text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
+                title="Beschikbaarheid">
+              </th>
+              <th class="px-1 py-3 bg-gray-100 text-center text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                Nr.
+              </th>
+              <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                Categorie
+              </th>
+              <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                Naam
+              </th>
+              <th class="py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                inkoopprijs
+              </th>
+              <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                marge
+              </th>
+              <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                Verkoopprijs
+              </th>
+              <th class="py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                Eenheid
+              </th>
+              <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                Leverancier
+              </th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+            {{#each (if this.products.isLoading this.model this.products.value) as |product|}}
+              {{!-- product might be a mu-search pojo! --}}
+              <tr>
+                <td class="pl-2 py-2 whitespace-nowrap text-center text-xs text-gray-500">
+                  {{#if product.salesOffering.isValid}}
+                    {{svg-jar "circle-fill" title="Beschikbaar" class="h-3 w-3 text-green-400 fill-current"}}
+                  {{else}}
+                    {{svg-jar "circle-fill" title="Niet beschikbaar" class="h-3 w-3 text-red-400 fill-current"}}
+                  {{/if}}
+                </td>
+                <td class="px-1 py-4 whitespace-nowrap text-center text-sm text-gray-500">
+                  {{product.identifier}}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <Product::CategoryTree @product={{product}} />
+                </td>
+                <td class="px-6 py-4 text-sm font-medium text-gray-900">
+                  {{get-by-lang product.name}}
+                </td>
+                {{#let product.salesOffering.unitPriceSpecification (unique-id) as |salesPrice uuid|}}
+                  <td class="py-4">
+                    <Rlv::InputField::DecimalInput
+                      @label=""
+                      @leading="&euro;"
+                      @value={{product.purchaseOffering.unitPriceSpecification.currencyValue}}
+                      @onChange={{fn this.setPriceIn product.id}}
+                      class="focus:ring-red-200 focus:border-red-200 block w-24 pl-7 border-gray-300 rounded-md sm:text-sm" 
+                    />
+                  </td>
+                  <td class="pl-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <div class="p-4 grid grid-cols-8 gap-y-6 gap-x-4 rounded-md bg-gray-50 border
+                      {{if (this.isMarginPriceBasis salesPrice) "border-green-300" "border-gray-200"}}">
+                      <div class="col-span-1">
+                        <input
+                          id="calc-base-margin{{uuid}}"
+                          type="radio"
+                          name="price-calc-basis{{uuid}}"
+                          value={{constant "CALCULATION_BASIS.MARGIN"}}
+                          checked={{this.isMarginPriceBasis salesPrice}}
+                          {{on "input" (fn this.setCalculationBasis product.id)}}
+                          class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" />
+                      </div>
+                      <div class="col-span-7 pl-2">
+                        <Rlv::InputField::DecimalInput
+                          @label="Factor"
+                          @value={{salesPrice.margin}}
+                          @onChange={{fn this.setMargin product.id}}
+                          class="focus:ring-red-200 focus:border-red-200 block w-full border-gray-300 rounded-md sm:text-sm
+                          {{if (this.isPriceOutBasis salesPrice) "disabled:bg-gray-200"}}"
+                          disabled={{this.isPriceOutBasis salesPrice}} />
+                      </div>
+                    </div>                    
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    <div class="relative p-4 grid grid-cols-8 gap-x-4 rounded-md bg-gray-50 border
+                        {{if (this.isPriceOutBasis salesPrice) "border-green-300" "border-gray-200"}}">
+                      <div class="absolute top-0 right-0 mt-2 mr-2">
+                        <input
+                          id="calc-base-price-out{{uuid}}"
+                          type="radio"
+                          name="price-calc-basis{{uuid}}"
+                          value={{constant "CALCULATION_BASIS.PRICE_OUT"}}
+                          checked={{this.isPriceOutBasis salesPrice}}
+                          {{on "input" (fn this.setCalculationBasis product.id)}}
+                          class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" />
+                      </div>  
+                      <div class="pb-4 col-span-8">
+                        <Util::Property @label="Prijs excl. btw">
+                          <Fmt::UnitPrice @model={{salesPrice}} @showTaxIncluded={{false}} />
+                        </Util::Property>
+                      </div>
+                      <div class="col-span-8">
+                        <Rlv::InputField::DecimalInput
+                          @label="Prijs incl. btw"
+                          @leading="&euro;"
+                          @value={{salesPrice.currencyValue}}
+                          @onChange={{fn this.setPriceOut product.id}}
+                          class="focus:ring-red-200 focus:border-red-200 block w-24 pl-7 border-gray-300 rounded-md sm:text-sm
+                          {{if (this.isMarginPriceBasis salesPrice) "disabled:bg-gray-200"}}"
+                          disabled={{this.isMarginPriceBasis salesPrice}} />
+                      </div>  
+                    </div>  
+                  </td>
+                {{/let}}
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <Fmt::UnitCode @value={{product.salesOffering.unitPriceSpecification.unitCode}} />
+                </td>
+                <td class="px-6 py-4 text-sm text-gray-500">
+                  {{product.purchaseOffering.businessEntity.name}}
+                  {{#if product.purchaseOffering.identifier}}
+                    <br>Nr. {{product.purchaseOffering.identifier}}
+                  {{/if}}
+                </td>
+              </tr>
+            {{else}}
+              <tr>
+                <td colspan="8" class="px-6 py-4 text-center text-sm text-gray-500">
+                  Geen producten gevonden.
+                </td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/utils/product-price.js b/app/utils/product-price.js
new file mode 100644
index 0000000..150055d
--- /dev/null
+++ b/app/utils/product-price.js
@@ -0,0 +1,47 @@
+import { get } from '@ember/object';
+import { VAT_RATE } from '../config';
+import constants from '../config/constants';
+import roundDecimal from './round-decimal';
+const { CALCULATION_BASIS } = constants;
+
+// recalculate the sales price of a product and returns this adjusted salesPrice (a unitPriceSpecification)
+export async function recalculateSalesPrice(product) {
+  const purchaseOffering = await product.purchaseOffering;
+
+  const purchasePrice = await purchaseOffering.unitPriceSpecification;
+  purchasePrice.currencyValue = roundDecimal(purchasePrice.currencyValue);
+
+  const salesOffering = await product.salesOffering;
+  const salesPrice = await salesOffering.unitPriceSpecification;
+
+  if (hasMarginCalculationBasis(salesPrice)) {
+    salesPrice.margin = roundDecimal(salesPrice.margin);
+    if (salesPrice.valueAddedTaxIncluded) {
+      const value = purchasePrice.currencyValue * salesPrice.margin * (1 + VAT_RATE);
+      salesPrice.currencyValue = roundDecimal(value);
+    } else {
+      const value = purchasePrice.currencyValue * salesPrice.margin;
+      salesPrice.currencyValue = roundDecimal(value);
+    }
+  } else {
+    salesPrice.currencyValue = roundDecimal(salesPrice.currencyValue);
+    const margin = salesPrice.currencyValueTaxExcluded / purchasePrice.currencyValue;
+    salesPrice.margin = roundDecimal(margin);
+  }
+  return salesPrice;
+}
+
+export async function recalculateSalesPriceAndSave(product) {
+  const salesPrice = await recalculateSalesPrice(product);
+  await salesPrice.save();
+}
+
+export function hasPriceOutCalculationBasis(unitPriceSpecification) {
+  // eslint-disable-next-line ember/no-get
+  return get(unitPriceSpecification, 'calculationBasis') == CALCULATION_BASIS.PRICE_OUT;
+}
+
+export function hasMarginCalculationBasis(unitPriceSpecification) {
+  // eslint-disable-next-line ember/no-get
+  return get(unitPriceSpecification, 'calculationBasis') == CALCULATION_BASIS.MARGIN;
+}
diff --git a/package.json b/package.json
index b26a5f4..855a5f5 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "prettier": "^3.3.3",
     "qunit": "^2.22.0",
     "qunit-dom": "^3.2.1",
+    "reactiveweb": "^1.3.0",
     "release-it": "^17.0.1",
     "remixicon": "^4.1.0",
     "stylelint": "^15.11.0",

From 6fda57a867615a5d9469a596c35646d71aff0777 Mon Sep 17 00:00:00 2001
From: Ruben <ruben.de.facq@redpencil.io>
Date: Wed, 6 Nov 2024 12:35:13 +0100
Subject: [PATCH 2/6] price inline edit: add saving state icon

- show an icon depending on the state of saving the specific row.
- queues changes, so user can do multiple actions (e.g. change inputPrice and margin)
---
 .eslintrc.js                                 |   6 +
 .prettierrc.js                               |   3 +-
 app/components/product/inline-price-edit.gjs | 125 ++++++++++++++++++
 app/components/util/error-icon.hbs           |   4 +
 app/components/util/green-checkmark.hbs      |   5 +
 app/components/util/task-state.hbs           |  13 ++
 app/controllers/main/products/list/prices.js |  35 +++--
 app/templates/main/products/list/prices.hbs  | 128 ++++++-------------
 package.json                                 |   4 +-
 9 files changed, 216 insertions(+), 107 deletions(-)
 create mode 100644 app/components/product/inline-price-edit.gjs
 create mode 100644 app/components/util/error-icon.hbs
 create mode 100644 app/components/util/green-checkmark.hbs
 create mode 100644 app/components/util/task-state.hbs

diff --git a/.eslintrc.js b/.eslintrc.js
index 636a1ef..6f3adff 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -46,5 +46,11 @@ module.exports = {
       files: ['tests/**/*-test.{js,ts}'],
       extends: ['plugin:qunit/recommended'],
     },
+    {
+      files: ['**/*.gjs'],
+      parser: 'ember-eslint-parser',
+      plugins: ['ember'],
+      extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:ember/recommended-gjs'],
+    },
   ],
 };
diff --git a/.prettierrc.js b/.prettierrc.js
index 12f341f..c8fcf65 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,9 +1,10 @@
 'use strict';
 
 module.exports = {
+  plugins: ['prettier-plugin-ember-template-tag'],
   overrides: [
     {
-      files: '*.{js,ts}',
+      files: '*.{js,ts,gjs,gts}',
       options: {
         singleQuote: true,
         printWidth: 100,
diff --git a/app/components/product/inline-price-edit.gjs b/app/components/product/inline-price-edit.gjs
new file mode 100644
index 0000000..76e00a2
--- /dev/null
+++ b/app/components/product/inline-price-edit.gjs
@@ -0,0 +1,125 @@
+import pick from 'frontend-price-management/helpers/pick';
+import constant from 'frontend-price-management/helpers/constant';
+import Component from '@glimmer/component';
+import { not } from 'ember-truth-helpers';
+import { on } from '@ember/modifier';
+import { fn, uniqueId, hash } from '@ember/helper';
+import DecimalInput from '../rlv/input-field/decimal-input';
+import UnitPrice from '../fmt/unit-price';
+import Property from '../util/property';
+import { hasMarginCalculationBasis, hasPriceOutCalculationBasis } from '../../utils/product-price';
+import { enqueueTask } from 'ember-concurrency';
+import TaskState from '../util/task-state';
+
+const Margin = <template>
+  <div
+    class='p-4 grid grid-cols-8 gap-y-6 gap-x-4 rounded-md bg-gray-50 border
+      {{if @active "border-green-300" "border-gray-200"}}'
+  >
+    <div class='col-span-1'>
+      <input
+        id='calc-base-margin{{@uuid}}'
+        type='radio'
+        name='price-calc-basis{{@uuid}}'
+        value={{constant 'CALCULATION_BASIS.MARGIN'}}
+        checked={{@active}}
+        {{on 'input' (pick 'target.value' (fn @setCalculationBasis @product))}}
+        class='focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300'
+      />
+    </div>
+    <div class='col-span-7 pl-2'>
+      <DecimalInput
+        @label='Factor'
+        @value={{@product.salesOffering.unitPriceSpecification.margin}}
+        @onChange={{fn @setMargin @product}}
+        class='focus:ring-red-200 focus:border-red-200 block w-full border-gray-300 rounded-md sm:text-sm
+          {{unless @active "disabled:bg-gray-200"}}'
+        disabled={{not @active}}
+      />
+    </div>
+  </div>
+</template>;
+
+const PurchasePrice = <template>
+  <DecimalInput
+    @label=''
+    @leading='&euro;'
+    @value={{@product.purchaseOffering.unitPriceSpecification.currencyValue}}
+    @onChange={{fn @setPriceIn @product}}
+    class='focus:ring-red-200 focus:border-red-200 block w-24 pl-7 border-gray-300 rounded-md sm:text-sm'
+  />
+</template>;
+
+const SellingPrice = <template>
+  <div
+    class='relative p-4 grid grid-cols-8 gap-x-4 rounded-md bg-gray-50 border
+      {{if @active "border-green-300" "border-gray-200"}}'
+  >
+    <div class='absolute top-0 right-0 mt-2 mr-2'>
+      <input
+        id='calc-base-price-out{{@uuid}}'
+        type='radio'
+        name='price-calc-basis{{@uuid}}'
+        value={{constant 'CALCULATION_BASIS.PRICE_OUT'}}
+        checked={{@active}}
+        {{on 'input' (pick 'target.value' (fn @setCalculationBasis @product))}}
+        class='focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300'
+      />
+    </div>
+    <div class='pb-4 col-span-8'>
+      <Property @label='Prijs excl. btw'>
+        <UnitPrice
+          @model={{@product.salesOffering.unitPriceSpecification}}
+          @showTaxIncluded={{false}}
+        />
+      </Property>
+    </div>
+    <div class='col-span-8'>
+      <DecimalInput
+        @label='Prijs incl. btw'
+        @leading='&euro;'
+        @value={{@product.salesOffering.unitPriceSpecification.currencyValue}}
+        @onChange={{fn @setPriceOut @product}}
+        class='focus:ring-red-200 focus:border-red-200 block w-24 pl-7 border-gray-300 rounded-md sm:text-sm
+          {{unless @active "disabled:bg-gray-200"}}'
+        disabled={{not @active}}
+      />
+    </div>
+  </div>
+</template>;
+export default class ProductInlinePriceEditComponent extends Component {
+  adjustPrice = enqueueTask(async (callback, product, value) => {
+    await callback(product, value);
+  });
+
+  <template>
+    {{#let (uniqueId) as |uuid|}}
+      {{yield
+        (hash
+          PurchasePrice=(component
+            PurchasePrice product=@product setPriceIn=(fn this.adjustPrice.perform @setPriceIn)
+          )
+          Margin=(component
+            Margin
+            product=@product
+            uuid=uuid
+            setMargin=(fn this.adjustPrice.perform @setMargin)
+            setCalculationBasis=(fn this.adjustPrice.perform @setCalculationBasis)
+            active=(hasMarginCalculationBasis @product.salesOffering.unitPriceSpecification)
+          )
+          SellingPrice=(component
+            SellingPrice
+            product=@product
+            uuid=uuid
+            setPriceOut=(fn this.adjustPrice.perform @setPriceOut)
+            setCalculationBasis=(fn this.adjustPrice.perform @setCalculationBasis)
+            active=(hasPriceOutCalculationBasis @product.salesOffering.unitPriceSpecification)
+          )
+          SavingStateIcon=(component
+            TaskState state=this.adjustPrice labelSuccess='Saved' labelRunning='Saving'
+          )
+        )
+      }}
+    {{/let}}
+  </template>
+}
diff --git a/app/components/util/error-icon.hbs b/app/components/util/error-icon.hbs
new file mode 100644
index 0000000..13e7d0e
--- /dev/null
+++ b/app/components/util/error-icon.hbs
@@ -0,0 +1,4 @@
+<svg class="h-6 w-6 text-red-600"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round">  <circle cx="12" cy="12" r="10" />  <line x1="15" y1="9" x2="9" y2="15"
+  ...attributes/>
+  <line x1="9" y1="9" x2="15" y2="15" />
+</svg>
\ No newline at end of file
diff --git a/app/components/util/green-checkmark.hbs b/app/components/util/green-checkmark.hbs
new file mode 100644
index 0000000..6ad85cd
--- /dev/null
+++ b/app/components/util/green-checkmark.hbs
@@ -0,0 +1,5 @@
+<svg
+ class="h-6 w-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+ ...attributes>
+  <polyline points="20 6 9 17 4 12"/>
+</svg>
\ No newline at end of file
diff --git a/app/components/util/task-state.hbs b/app/components/util/task-state.hbs
new file mode 100644
index 0000000..57c0846
--- /dev/null
+++ b/app/components/util/task-state.hbs
@@ -0,0 +1,13 @@
+{{#if @state.isRunning}}
+  <div class="flex items-center space-x-2" title={{@labelRunning}}>
+    <Util::LoadingSpinner @label="" />
+  </div>
+{{else if @state.last.isSuccessful}}
+  <div class="flex items-center space-x-2" title={{@labelSuccess}}>
+    <Util::GreenCheckmark />
+  </div>
+{{else if @state.last.isError}}
+  <div class="flex items-center space-x-2" title={{@state.last.error}}>
+    <Util::ErrorIcon  />
+  </div>
+{{/if}}
\ No newline at end of file
diff --git a/app/controllers/main/products/list/prices.js b/app/controllers/main/products/list/prices.js
index ec46e15..120d4b7 100644
--- a/app/controllers/main/products/list/prices.js
+++ b/app/controllers/main/products/list/prices.js
@@ -32,48 +32,47 @@ export default class MainProductsListPricesController extends Controller {
     return productObjects.map((p) => productsED.find((pED) => p.id == pED.id));
   });
 
-  // the edit actions receive the product id, as it might be ES or ED in the template
-  // But editing/saving is only possible via ED
+  // the edit actions might receive ES object or ED
+  // But editing/saving is only possible via ED, so always try to fetch ED object.
   async getProductById(productId) {
     await this.products.promise;
     return this.products.value.find((p) => p.id == productId);
   }
 
   @action
-  async setCalculationBasis(productId, event) {
-    const product = await this.getProductById(productId);
-    const calculationBasis = event.target.value;
-    const offering = await product.salesOffering;
+  async setCalculationBasis(product, calculationBasis) {
+    const productED = await this.getProductById(product.id);
+    const offering = await productED.salesOffering;
     const price = await offering.unitPriceSpecification;
     price.calculationBasis = calculationBasis;
     await price.save();
   }
 
   @action
-  async setPriceIn(productId, value) {
-    const product = await this.getProductById(productId);
-    const offering = await product.purchaseOffering;
+  async setPriceIn(product, value) {
+    const productED = await this.getProductById(product.id);
+    const offering = await productED.purchaseOffering;
     const price = await offering.unitPriceSpecification;
     price.currencyValue = value;
     await price.save();
-    await recalculateSalesPriceAndSave(product);
+    await recalculateSalesPriceAndSave(productED);
   }
 
   @action
-  async setPriceOut(productId, value) {
-    const product = await this.getProductById(productId);
-    const offering = await product.salesOffering;
+  async setPriceOut(product, value) {
+    const productED = await this.getProductById(product.id);
+    const offering = await productED.salesOffering;
     const price = await offering.unitPriceSpecification;
     price.currencyValue = value;
-    await recalculateSalesPriceAndSave(product);
+    await recalculateSalesPriceAndSave(productED);
   }
 
   @action
-  async setMargin(productId, value) {
-    const product = await this.getProductById(productId);
-    const offering = await product.salesOffering;
+  async setMargin(product, value) {
+    const productED = await this.getProductById(product.id);
+    const offering = await productED.salesOffering;
     const price = await offering.unitPriceSpecification;
     price.margin = value;
-    await recalculateSalesPriceAndSave(product);
+    await recalculateSalesPriceAndSave(productED);
   }
 }
diff --git a/app/templates/main/products/list/prices.hbs b/app/templates/main/products/list/prices.hbs
index 288bc61..9e082f5 100644
--- a/app/templates/main/products/list/prices.hbs
+++ b/app/templates/main/products/list/prices.hbs
@@ -32,103 +32,57 @@
               <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                 Leverancier
               </th>
+              <th class="px-3 py-3 bg-gray-100">{{!-- savestate --}}</th>
             </tr>
           </thead>
           <tbody class="bg-white divide-y divide-gray-200">
             {{#each (if this.products.isLoading this.model this.products.value) as |product|}}
-              {{!-- product might be a mu-search pojo! --}}
-              <tr>
-                <td class="pl-2 py-2 whitespace-nowrap text-center text-xs text-gray-500">
-                  {{#if product.salesOffering.isValid}}
-                    {{svg-jar "circle-fill" title="Beschikbaar" class="h-3 w-3 text-green-400 fill-current"}}
-                  {{else}}
-                    {{svg-jar "circle-fill" title="Niet beschikbaar" class="h-3 w-3 text-red-400 fill-current"}}
-                  {{/if}}
-                </td>
-                <td class="px-1 py-4 whitespace-nowrap text-center text-sm text-gray-500">
-                  {{product.identifier}}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  <Product::CategoryTree @product={{product}} />
-                </td>
-                <td class="px-6 py-4 text-sm font-medium text-gray-900">
-                  {{get-by-lang product.name}}
-                </td>
-                {{#let product.salesOffering.unitPriceSpecification (unique-id) as |salesPrice uuid|}}
+              <Product::InlinePriceEdit
+                    @product={{product}}
+                    @setPriceIn={{this.setPriceIn}}
+                    @setMargin={{this.setMargin}}
+                    @setCalculationBasis={{this.setCalculationBasis}}
+                    @setPriceOut={{this.setPriceOut}}
+                    as |InlineEdit|>
+                {{!-- product might be a mu-search pojo! --}}
+                <tr>
+                  <td class="pl-2 py-2 whitespace-nowrap text-center text-xs text-gray-500">
+                    {{#if product.salesOffering.isValid}}
+                      {{svg-jar "circle-fill" title="Beschikbaar" class="h-3 w-3 text-green-400 fill-current"}}
+                    {{else}}
+                      {{svg-jar "circle-fill" title="Niet beschikbaar" class="h-3 w-3 text-red-400 fill-current"}}
+                    {{/if}}
+                  </td>
+                  <td class="px-1 py-4 whitespace-nowrap text-center text-sm text-gray-500">
+                    {{product.identifier}}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <Product::CategoryTree @product={{product}} />
+                  </td>
+                  <td class="px-6 py-4 text-sm font-medium text-gray-900">
+                    {{get-by-lang product.name}}
+                  </td>
                   <td class="py-4">
-                    <Rlv::InputField::DecimalInput
-                      @label=""
-                      @leading="&euro;"
-                      @value={{product.purchaseOffering.unitPriceSpecification.currencyValue}}
-                      @onChange={{fn this.setPriceIn product.id}}
-                      class="focus:ring-red-200 focus:border-red-200 block w-24 pl-7 border-gray-300 rounded-md sm:text-sm" 
-                    />
+                    <InlineEdit.PurchasePrice />
                   </td>
                   <td class="pl-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                    <div class="p-4 grid grid-cols-8 gap-y-6 gap-x-4 rounded-md bg-gray-50 border
-                      {{if (this.isMarginPriceBasis salesPrice) "border-green-300" "border-gray-200"}}">
-                      <div class="col-span-1">
-                        <input
-                          id="calc-base-margin{{uuid}}"
-                          type="radio"
-                          name="price-calc-basis{{uuid}}"
-                          value={{constant "CALCULATION_BASIS.MARGIN"}}
-                          checked={{this.isMarginPriceBasis salesPrice}}
-                          {{on "input" (fn this.setCalculationBasis product.id)}}
-                          class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" />
-                      </div>
-                      <div class="col-span-7 pl-2">
-                        <Rlv::InputField::DecimalInput
-                          @label="Factor"
-                          @value={{salesPrice.margin}}
-                          @onChange={{fn this.setMargin product.id}}
-                          class="focus:ring-red-200 focus:border-red-200 block w-full border-gray-300 rounded-md sm:text-sm
-                          {{if (this.isPriceOutBasis salesPrice) "disabled:bg-gray-200"}}"
-                          disabled={{this.isPriceOutBasis salesPrice}} />
-                      </div>
-                    </div>                    
+                    <InlineEdit.Margin />
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                    <div class="relative p-4 grid grid-cols-8 gap-x-4 rounded-md bg-gray-50 border
-                        {{if (this.isPriceOutBasis salesPrice) "border-green-300" "border-gray-200"}}">
-                      <div class="absolute top-0 right-0 mt-2 mr-2">
-                        <input
-                          id="calc-base-price-out{{uuid}}"
-                          type="radio"
-                          name="price-calc-basis{{uuid}}"
-                          value={{constant "CALCULATION_BASIS.PRICE_OUT"}}
-                          checked={{this.isPriceOutBasis salesPrice}}
-                          {{on "input" (fn this.setCalculationBasis product.id)}}
-                          class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" />
-                      </div>  
-                      <div class="pb-4 col-span-8">
-                        <Util::Property @label="Prijs excl. btw">
-                          <Fmt::UnitPrice @model={{salesPrice}} @showTaxIncluded={{false}} />
-                        </Util::Property>
-                      </div>
-                      <div class="col-span-8">
-                        <Rlv::InputField::DecimalInput
-                          @label="Prijs incl. btw"
-                          @leading="&euro;"
-                          @value={{salesPrice.currencyValue}}
-                          @onChange={{fn this.setPriceOut product.id}}
-                          class="focus:ring-red-200 focus:border-red-200 block w-24 pl-7 border-gray-300 rounded-md sm:text-sm
-                          {{if (this.isMarginPriceBasis salesPrice) "disabled:bg-gray-200"}}"
-                          disabled={{this.isMarginPriceBasis salesPrice}} />
-                      </div>  
-                    </div>  
+                    <InlineEdit.SellingPrice />
                   </td>
-                {{/let}}
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  <Fmt::UnitCode @value={{product.salesOffering.unitPriceSpecification.unitCode}} />
-                </td>
-                <td class="px-6 py-4 text-sm text-gray-500">
-                  {{product.purchaseOffering.businessEntity.name}}
-                  {{#if product.purchaseOffering.identifier}}
-                    <br>Nr. {{product.purchaseOffering.identifier}}
-                  {{/if}}
-                </td>
-              </tr>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <Fmt::UnitCode @value={{product.salesOffering.unitPriceSpecification.unitCode}} />
+                  </td>
+                  <td class="px-6 py-4 text-sm text-gray-500">
+                    {{product.purchaseOffering.businessEntity.name}}
+                    {{#if product.purchaseOffering.identifier}}
+                      <br>Nr. {{product.purchaseOffering.identifier}}
+                    {{/if}}
+                  </td>
+                  <td><InlineEdit.SavingStateIcon /></td>
+                </tr>
+              </Product::InlinePriceEdit>
             {{else}}
               <tr>
                 <td colspan="8" class="px-6 py-4 text-center text-sm text-gray-500">
diff --git a/package.json b/package.json
index 855a5f5..6fe735e 100644
--- a/package.json
+++ b/package.json
@@ -86,12 +86,13 @@
     "ember-simple-auth": "^6.0.0",
     "ember-source": "~5.12.0",
     "ember-svg-jar": "^2.3.3",
+    "ember-template-imports": "^4.1.3",
     "ember-template-lint": "^6.0.0",
     "ember-tooltips": "^3.6.0",
     "ember-truth-helpers": "^4.0.3",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-ember": "^12.2.1",
+    "eslint-plugin-ember": "^12.3.1",
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-qunit": "^8.1.2",
@@ -100,6 +101,7 @@
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "prettier": "^3.3.3",
+    "prettier-plugin-ember-template-tag": "^2.0.2",
     "qunit": "^2.22.0",
     "qunit-dom": "^3.2.1",
     "reactiveweb": "^1.3.0",

From 2617a429628411fcce4af0d5922e691ee3dd6366 Mon Sep 17 00:00:00 2001
From: Ruben <ruben.de.facq@redpencil.io>
Date: Wed, 13 Nov 2024 15:57:01 +0100
Subject: [PATCH 3/6] limit edit prices list route to users with price editing
 rights

---
 app/components/main-menu.hbs            | 12 +++++++-----
 app/components/main-menu.js             |  3 +++
 app/routes/login.js                     |  2 +-
 app/routes/main/index.js                |  2 +-
 app/routes/main/products/index.js       | 10 ++++++++++
 app/routes/main/products/list/prices.js | 15 +++++++++++++++
 config/environment.js                   |  2 +-
 7 files changed, 38 insertions(+), 8 deletions(-)
 create mode 100644 app/routes/main/products/index.js
 create mode 100644 app/routes/main/products/list/prices.js

diff --git a/app/components/main-menu.hbs b/app/components/main-menu.hbs
index 7fae1fb..88fd595 100644
--- a/app/components/main-menu.hbs
+++ b/app/components/main-menu.hbs
@@ -17,11 +17,13 @@
               class="ml-4 px-3 py-2 rounded-md font-medium text-red-100 hover:bg-red-600 focus:outline-none focus:text-white focus:bg-red-600">
               Producten
             </LinkTo>
-            <LinkTo @route="main.products.list.prices"
-              @activeClass="text-white !bg-red-700"
-              class="ml-4 px-3 py-2 rounded-md font-medium text-red-100 hover:bg-red-600 focus:outline-none focus:text-white focus:bg-red-600">
-              Prijzenlijst
-            </LinkTo>
+            {{#if this.canEditPrice}}
+              <LinkTo @route="main.products.list.prices"
+                @activeClass="text-white !bg-red-700"
+                class="ml-4 px-3 py-2 rounded-md font-medium text-red-100 hover:bg-red-600 focus:outline-none focus:text-white focus:bg-red-600">
+                Prijzenlijst
+              </LinkTo>
+            {{/if}}
             <LinkTo @route="main.suppliers.index"
               @activeClass="text-white !bg-red-700"
               class="ml-4 px-3 py-2 rounded-md font-medium text-red-100 hover:bg-red-600 focus:outline-none focus:text-white focus:bg-red-600">
diff --git a/app/components/main-menu.js b/app/components/main-menu.js
index 7ad076b..4d62ecc 100644
--- a/app/components/main-menu.js
+++ b/app/components/main-menu.js
@@ -8,6 +8,9 @@ export default class MainMenuComponent extends Component {
 
   @tracked isOpenMenu = false;
 
+  get canEditPrice() {
+    return this.userInfo.isPriceAdmin;
+  }
   @action
   toggleIsOpenMenu() {
     this.isOpenMenu = !this.isOpenMenu;
diff --git a/app/routes/login.js b/app/routes/login.js
index e9bb7a9..8e77020 100644
--- a/app/routes/login.js
+++ b/app/routes/login.js
@@ -5,6 +5,6 @@ export default class LoginRoute extends Route {
   @service session;
 
   beforeModel() {
-    this.session.prohibitAuthentication('main.products.index');
+    this.session.prohibitAuthentication('main.products.list');
   }
 }
diff --git a/app/routes/main/index.js b/app/routes/main/index.js
index c6f78a8..e76909b 100644
--- a/app/routes/main/index.js
+++ b/app/routes/main/index.js
@@ -5,6 +5,6 @@ export default class MainIndexRoute extends Route {
   @service router;
 
   beforeModel() {
-    this.router.transitionTo('main.products.index');
+    this.router.transitionTo('main.products.list');
   }
 }
diff --git a/app/routes/main/products/index.js b/app/routes/main/products/index.js
new file mode 100644
index 0000000..f16adc0
--- /dev/null
+++ b/app/routes/main/products/index.js
@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+export default class MainProductsRoute extends Route {
+  @service router;
+
+  beforeModel() {
+    // index route does not exist, the `.list` route is the main route for the user.
+    this.router.transitionTo('main.products.list');
+  }
+}
diff --git a/app/routes/main/products/list/prices.js b/app/routes/main/products/list/prices.js
new file mode 100644
index 0000000..23fc1da
--- /dev/null
+++ b/app/routes/main/products/list/prices.js
@@ -0,0 +1,15 @@
+
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class MainProductsListIndexRoute extends Route {
+  @service userInfo;
+  @service router;
+
+  beforeModel(transition) {
+    if(!this.userInfo.isPriceAdmin) {
+      // Only price admins can view this page
+      this.router.transitionTo('main.products.list');
+    }
+  }
+}
diff --git a/config/environment.js b/config/environment.js
index 554bb92..2d36703 100644
--- a/config/environment.js
+++ b/config/environment.js
@@ -31,7 +31,7 @@ module.exports = function (environment) {
       },
     },
     'ember-simple-auth': {
-      routeAfterAuthentication: 'main.products.index',
+      routeAfterAuthentication: 'main.products.list',
     },
   };
 

From 1445ba4c96a71b54832a8e5990c69d7502fae093 Mon Sep 17 00:00:00 2001
From: Ruben <ruben.de.facq@redpencil.io>
Date: Wed, 13 Nov 2024 21:52:03 +0100
Subject: [PATCH 4/6] fix product preview (some code was not copied over during
 file restructure)

---
 app/controllers/main/products/list.js       | 2 --
 app/controllers/main/products/list/index.js | 5 ++++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/controllers/main/products/list.js b/app/controllers/main/products/list.js
index e4e0a34..54152e5 100644
--- a/app/controllers/main/products/list.js
+++ b/app/controllers/main/products/list.js
@@ -24,8 +24,6 @@ export default class MainProductsIndexController extends Controller {
   @tracked rack;
   @tracked availableOnly = true;
 
-  @tracked previewProduct;
-
   debounceFilter = restartableTask(async (key, event) => {
     const value = event.target.value;
     this.filter[key] = isBlank(value) ? undefined : value;
diff --git a/app/controllers/main/products/list/index.js b/app/controllers/main/products/list/index.js
index 86ec746..f4636b7 100644
--- a/app/controllers/main/products/list/index.js
+++ b/app/controllers/main/products/list/index.js
@@ -1,7 +1,10 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
-
+import { tracked } from '@glimmer/tracking';
 export default class MainProductsListIndexController extends Controller {
+
+  @tracked previewProduct;
+  
   @action
   showPreview(product) {
     this.previewProduct = product;

From c66aa24300ebf0e7154b714788fe31bcb72e9a61 Mon Sep 17 00:00:00 2001
From: Ruben <ruben.de.facq@redpencil.io>
Date: Thu, 14 Nov 2024 16:14:33 +0100
Subject: [PATCH 5/6] cleanup pricelist code

- remove unused helpers
- use svg-jar for icons
- avoid jumping UI when clicking buttons in pricelist
- add page-title
---
 app/components/util/error-icon.hbs           |  4 ----
 app/components/util/green-checkmark.hbs      |  5 -----
 app/components/util/task-state.hbs           | 10 +++++-----
 app/controllers/main/products/list/prices.js | 10 +---------
 app/templates/main/products/list/prices.hbs  |  3 ++-
 5 files changed, 8 insertions(+), 24 deletions(-)
 delete mode 100644 app/components/util/error-icon.hbs
 delete mode 100644 app/components/util/green-checkmark.hbs

diff --git a/app/components/util/error-icon.hbs b/app/components/util/error-icon.hbs
deleted file mode 100644
index 13e7d0e..0000000
--- a/app/components/util/error-icon.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg class="h-6 w-6 text-red-600"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round">  <circle cx="12" cy="12" r="10" />  <line x1="15" y1="9" x2="9" y2="15"
-  ...attributes/>
-  <line x1="9" y1="9" x2="15" y2="15" />
-</svg>
\ No newline at end of file
diff --git a/app/components/util/green-checkmark.hbs b/app/components/util/green-checkmark.hbs
deleted file mode 100644
index 6ad85cd..0000000
--- a/app/components/util/green-checkmark.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg
- class="h-6 w-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
- ...attributes>
-  <polyline points="20 6 9 17 4 12"/>
-</svg>
\ No newline at end of file
diff --git a/app/components/util/task-state.hbs b/app/components/util/task-state.hbs
index 57c0846..d6ed112 100644
--- a/app/components/util/task-state.hbs
+++ b/app/components/util/task-state.hbs
@@ -1,13 +1,13 @@
 {{#if @state.isRunning}}
-  <div class="flex items-center space-x-2" title={{@labelRunning}}>
+  <div class="items-center space-x-2" title={{@labelRunning}}>
     <Util::LoadingSpinner @label="" />
   </div>
 {{else if @state.last.isSuccessful}}
-  <div class="flex items-center space-x-2" title={{@labelSuccess}}>
-    <Util::GreenCheckmark />
+  <div class="items-center space-x-2" title={{@labelSuccess}}>
+    {{svg-jar "check-fill" class="text-green-600"}}
   </div>
 {{else if @state.last.isError}}
-  <div class="flex items-center space-x-2" title={{@state.last.error}}>
-    <Util::ErrorIcon  />
+  <div class="items-center space-x-2" title={{@state.last.error}}>
+    {{svg-jar "error-warning-line" class="h-6 w-6 text-red-600"}}
   </div>
 {{/if}}
\ No newline at end of file
diff --git a/app/controllers/main/products/list/prices.js b/app/controllers/main/products/list/prices.js
index 120d4b7..5750094 100644
--- a/app/controllers/main/products/list/prices.js
+++ b/app/controllers/main/products/list/prices.js
@@ -1,20 +1,12 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import {
-  hasMarginCalculationBasis,
-  hasPriceOutCalculationBasis,
-  recalculateSalesPriceAndSave,
-} from '../../../../utils/product-price';
+import { recalculateSalesPriceAndSave } from '../../../../utils/product-price';
 import { trackedFunction } from 'reactiveweb/function';
-import { timeout } from 'ember-concurrency';
 
 export default class MainProductsListPricesController extends Controller {
   @service store;
 
-  isMarginPriceBasis = (priceSpecification) => hasMarginCalculationBasis(priceSpecification);
-  isPriceOutBasis = (priceSpecification) => hasPriceOutCalculationBasis(priceSpecification);
-
   products = trackedFunction(this, async () => {
     const productObjects = await this.model;
     await Promise.resolve();
diff --git a/app/templates/main/products/list/prices.hbs b/app/templates/main/products/list/prices.hbs
index 9e082f5..21c2050 100644
--- a/app/templates/main/products/list/prices.hbs
+++ b/app/templates/main/products/list/prices.hbs
@@ -1,3 +1,4 @@
+{{page-title "Prijsbeheer"}}
 <div class="mt-4 flex flex-col">
   <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
     <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
@@ -32,7 +33,7 @@
               <th class="px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                 Leverancier
               </th>
-              <th class="px-3 py-3 bg-gray-100">{{!-- savestate --}}</th>
+              <th class="w-8 px-3 py-3 bg-gray-100">{{!-- savestate --}}</th>
             </tr>
           </thead>
           <tbody class="bg-white divide-y divide-gray-200">

From 518d6cea2f83ca85d79217812f666e68b86b61dd Mon Sep 17 00:00:00 2001
From: Ruben <ruben.de.facq@redpencil.io>
Date: Thu, 14 Nov 2024 16:53:23 +0100
Subject: [PATCH 6/6] transition to "forbidden" when trying to access product
 edit without correct rights

---
 app/routes/main/products/list/prices.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/routes/main/products/list/prices.js b/app/routes/main/products/list/prices.js
index 23fc1da..f91141d 100644
--- a/app/routes/main/products/list/prices.js
+++ b/app/routes/main/products/list/prices.js
@@ -2,14 +2,14 @@
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
 
-export default class MainProductsListIndexRoute extends Route {
+export default class MainProductsListPricesRoute extends Route {
   @service userInfo;
   @service router;
 
-  beforeModel(transition) {
+  beforeModel() {
     if(!this.userInfo.isPriceAdmin) {
       // Only price admins can view this page
-      this.router.transitionTo('main.products.list');
+      this.router.transitionTo('forbidden');
     }
   }
 }