[IMP] pos_restaurant: floor background picture

Before this PR:
It was not possible to use a custom image for the background of a floor
plan.

Now:
It is now possible to add an image to the floor plan in order to use it
as the background.
If a colour is selected when a custom image is used, the image will be
removed from the record.

The custom background image cannot be used in kanban view of the floor plan.

Task-3616978

closes odoo#156460

Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>

Author: loukwets

addons/point_of_sale/static/src/app/main.js

@@ -42,5 +42,7 @@ whenReady(() => {
     }
     if (hasTouch()) {
         classList.add("o_touch_device");
+        classList.add("o_mobile_overscroll");
+        document.documentElement.classList.add("o_mobile_overscroll");
     }
 })();

addons/point_of_sale/static/src/app/models/data_service.js

@@ -197,7 +197,7 @@ export class PosData extends Reactive {
 
             const dataToUpdate = {};
             const keysToUpdate = Object.keys(vals);
-            const serializedRecords = record.serialize();
+            const serializedRecords = record.serialize(true);
 
             for (const key of keysToUpdate) {
                 dataToUpdate[key] = serializedRecords[key];

addons/point_of_sale/static/src/app/models/related_models.js

@@ -583,11 +583,11 @@ export function createRelatedModels(modelDefs, modelClasses = {}, indexes = {})
                 for (const name in fields) {
                     const field = fields[name];
                     if (field.type === "many2one") {
-                        result[name] = record[name] ? record[name].id : undefined;
+                        result[name] = record[name] ? record[name].id : null;
                     } else if (X2MANY_TYPES.has(field.type)) {
                         result[name] = [...record[name]].map((record) => record.id);
                     } else {
-                        result[name] = record[name];
+                        result[name] = record[name] || null;
                     }
                 }
                 return result;

addons/point_of_sale/static/src/app/screens/partner_list/partner_editor/partner_editor.js

@@ -130,17 +130,15 @@ export class PartnerEditor extends Component {
             });
         } else {
             const imageUrl = await getDataURLFromFile(file);
-            const loadedImage = await loadImage(imageUrl, {
-                onError: () => {
-                    this.dialog.add(AlertDialog, {
-                        title: _t("Loading Image Error"),
-                        body: _t("Encountered error when loading image. Please try again."),
-                    });
-                },
-            });
+            const loadedImage = await loadImage(imageUrl);
             if (loadedImage) {
                 const resizedImage = await this._resizeImage(loadedImage, 800, 600);
                 this.changes.image_1920 = resizedImage.toDataURL();
+            } else {
+                this.dialog.add(AlertDialog, {
+                    title: _t("Loading Image Error"),
+                    body: _t("Encountered error when loading image. Please try again."),
+                });
             }
         }
     }

addons/point_of_sale/static/src/app/screens/product_screen/product_screen.js

@@ -95,26 +95,20 @@ export class ProductScreen extends Component {
             ? [...selectedCategory.child_id]
             : this.pos.models["pos.category"].filter((category) => !category.parent_id);
     }
-    getChildCategoriesInfo(selectedCategory) {
-        return this.getCategoriesInfo(this.getChildCategories(selectedCategory), selectedCategory);
-    }
     getCategoriesAndSub() {
         return this.getAncestorsAndCurrent().flatMap((category) =>
             this.getChildCategoriesInfo(category)
         );
     }
 
-    getCategoriesInfo(categories, selectedCategory) {
-        return categories.map((category) => ({
+    getChildCategoriesInfo(selectedCategory) {
+        return this.getChildCategories(selectedCategory).map((category) => ({
             ...pick(category, "id", "name", "color"),
             imgSrc:
                 this.pos.config.show_category_images && category.has_image
                     ? `/web/image?model=pos.category&field=image_128&id=${category.id}`
                     : undefined,
-            isSelected:
-                selectedCategory &&
-                this.getAncestorsAndCurrent().includes(category) &&
-                !this.ui.isSmall,
+            isSelected: this.getAncestorsAndCurrent().includes(category) && !this.ui.isSmall,
             isChildren: this.getChildCategories(this.pos.selectedCategory).includes(category),
         }));
     }

addons/point_of_sale/static/src/scss/pos.scss

@@ -70,6 +70,9 @@ button {
     /*rtl:ignore*/
     direction: ltr;
 }
+.o_mobile_overscroll {
+    overscroll-behavior: none;
+}
 
 .pos .button.validation.load-order-button {
     height: calc(var(--btn-height-size) * 2);

addons/pos_restaurant/models/pos_restaurant.py

@@ -18,6 +18,7 @@ class RestaurantFloor(models.Model):
     table_ids = fields.One2many('restaurant.table', 'floor_id', string='Tables')
     sequence = fields.Integer('Sequence', default=1)
     active = fields.Boolean(default=True)
+    floor_background_image = fields.Image(string='Floor Background Image')
 
     @api.ondelete(at_uninstall=False)
     def _unlink_except_active_pos_session(self):

addons/pos_restaurant/models/pos_session.py

@@ -16,7 +16,7 @@ def _load_data_params(self, config_id):
             params.update({
                 'restaurant.floor': {
                     'domain': [('pos_config_ids', '=', self.config_id.id)],
-                    'fields': ['name', 'background_color', 'table_ids', 'sequence'],
+                    'fields': ['name', 'background_color', 'table_ids', 'sequence', 'floor_background_image'],
                 },
                 'restaurant.table': {
                     'domain': lambda data: [('active', '=', True), ('floor_id', 'in', [floor['id'] for floor in data['restaurant.floor']])],

addons/pos_restaurant/static/src/app/floor_screen/floor_screen.js

@@ -12,9 +12,12 @@ import { AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
 import { Table } from "@pos_restaurant/app/floor_screen/table";
 import { usePos } from "@point_of_sale/app/store/pos_hook";
 import { useService } from "@web/core/utils/hooks";
-import { Component, onMounted, useRef, useState, onWillStart } from "@odoo/owl";
+import { Component, onMounted, useRef, useState, onWillStart, useEffect } from "@odoo/owl";
 import { ask } from "@point_of_sale/app/store/make_awaitable_dialog";
 import { unique } from "@web/core/utils/arrays";
+import { loadImage } from "@point_of_sale/utils";
+import { getDataURLFromFile } from "@web/core/utils/urls";
+import { hasTouch } from "@web/core/browser/feature_detection";
 
 export class FloorScreen extends Component {
     static components = { Table };
@@ -28,16 +31,73 @@ export class FloorScreen extends Component {
         const floor = this.pos.currentFloor;
         this.state = useState({
             selectedFloorId: floor ? floor.id : null,
+            floorHeight: "100%",
+            floorWidth: "100%",
             selectedTableIds: this.getTablesSelectedByDefault(),
             isColorPicker: false,
         });
         this.floorMapRef = useRef("floor-map-ref");
+        this.floorScrollBox = useRef("floor-map-scroll");
         const ui = useState(useService("ui"));
         const mode = localStorage.getItem("floorPlanStyle");
         this.pos.floorPlanStyle = ui.isSmall || mode == "kanban" ? "kanban" : "default";
         this.map = useRef("map");
-        onMounted(() => this.pos.openCashControl());
+        onMounted(() => {
+            this.pos.openCashControl();
+        });
         onWillStart(this.onWillStart);
+        useEffect(
+            () => {
+                this.computeFloorSize();
+            },
+            () => [this.activeFloor, this.pos.floorPlanStyle]
+        );
+        useEffect(
+            (tableL) => {
+                if (hasTouch()) {
+                    if (tableL) {
+                        this.floorScrollBox.el.classList.remove("overflow-scroll");
+                        this.floorScrollBox.el.classList.add("overflow-hidden");
+                    } else {
+                        this.floorScrollBox.el.classList.remove("overflow-hidden");
+                        this.floorScrollBox.el.classList.add("overflow-scroll");
+                    }
+                }
+            },
+            () => [this.state.selectedTableIds.length]
+        );
+    }
+    computeFloorSize() {
+        if (this.pos.floorPlanStyle === "kanban") {
+            this.state.floorHeight = "100%";
+            this.state.floorWidth = window.innerWidth + "px";
+            return;
+        }
+        const tables = this.activeFloor.table_ids;
+        const floorV = this.floorMapRef.el.clientHeight;
+        const floorH = this.floorMapRef.el.offsetWidth;
+        const positionH = Math.max(
+            ...tables.map((table) => table.position_h + table.width),
+            floorH
+        );
+        const positionV = Math.max(
+            ...tables.map((table) => table.position_v + table.height),
+            floorV
+        );
+
+        if (this.activeFloor.floor_background_image) {
+            const img = new Image();
+            img.onload = () => {
+                const height = Math.max(img.height, positionV);
+                const width = Math.max(img.width, positionH);
+                this.state.floorHeight = `${height}px`;
+                this.state.floorWidth = `${width}px`;
+            };
+            img.src = "data:image/png;base64," + this.activeFloor.floor_background_image;
+        } else {
+            this.state.floorHeight = `${positionV}px`;
+            this.state.floorWidth = `${positionH}px`;
+        }
     }
     getTablesSelectedByDefault() {
         return this.pos.orderToTransfer ? [this.pos.orderToTransfer.tableId] : [];
@@ -67,6 +127,11 @@ export class FloorScreen extends Component {
         }
         await this.pos.unsetTable();
     }
+    get floorBackround() {
+        return this.activeFloor.floor_background_image
+            ? "data:image/png;base64," + this.activeFloor.floor_background_image
+            : "none";
+    }
     onClickFloorMap() {
         this.state.selectedTableIds = this.getTablesSelectedByDefault();
         this.state.isColorPicker = false;
@@ -303,7 +368,9 @@ export class FloorScreen extends Component {
     }
     unselectTables() {
         if (this.selectedTables.length) {
-            this.pos.updateTables(...this.selectedTables);
+            for (const table of this.selectedTables) {
+                this.pos.data.write("restaurant.table", [table.id], table.serialize(true));
+            }
         }
         this.state.selectedTableIds = [];
     }
@@ -386,8 +453,9 @@ export class FloorScreen extends Component {
                       title: _t("Table Name ?"),
                       getPayload: (newName) => {
                           if (newName !== this.selectedTables[0].name) {
-                              this.selectedTables[0].name = newName;
-                              this.pos.updateTables(this.selectedTables[0]);
+                              this.pos.data.write("restaurant.table", [this.selectedTables[0].id], {
+                                  name: newName,
+                              });
                           }
                       },
                   }
@@ -419,8 +487,9 @@ export class FloorScreen extends Component {
                 const newSeatsNum = parseInt(num, 10);
                 selectedTables.forEach((selectedTable) => {
                     if (newSeatsNum !== selectedTable.seats) {
-                        selectedTable.seats = newSeatsNum;
-                        this.pos.updateTables(selectedTable);
+                        this.pos.data.write("restaurant.table", [selectedTable.id], {
+                            seats: newSeatsNum,
+                        });
                     }
                 });
             },
@@ -434,15 +503,13 @@ export class FloorScreen extends Component {
     }
     changeShape(form) {
         for (const table of this.selectedTables) {
-            table.shape = form;
+            this.pos.data.write("restaurant.table", [table.id], { shape: form });
         }
-        this.pos.updateTables(...this.selectedTables);
     }
     unlinkTables() {
         for (const table of this.selectedTables) {
-            table.update({ parent_id: null });
+            this.pos.data.write("restaurant.table", [table.id], { parent_id: false });
         }
-        this.pos.updateTables(...this.selectedTables);
     }
     linkTables() {
         const parentTable =
@@ -465,14 +532,14 @@ export class FloorScreen extends Component {
     }
     setColor(color) {
         if (this.selectedTables.length > 0) {
-            this.selectedTables.forEach((selectedTable) => {
-                selectedTable.color = color;
-            });
-            this.pos.updateTables(...this.selectedTables);
+            for (const table of this.selectedTables) {
+                this.pos.data.write("restaurant.table", [table.id], { color: color });
+            }
         } else {
             this.activeFloor.background_color = color;
             this.pos.data.write("restaurant.floor", [this.activeFloor.id], {
                 background_color: color,
+                floor_background_image: false,
             });
         }
         this.state.isColorPicker = false;
@@ -622,6 +689,33 @@ export class FloorScreen extends Component {
     getChildren(table) {
         return this.pos.models["restaurant.table"].filter((t) => t.parent_id?.id === table.id);
     }
+    async uploadImage(event) {
+        const file = event.target.files[0];
+        if (!file.type.match(/image.*/)) {
+            this.dialog.add(AlertDialog, {
+                title: _t("Unsupported File Format"),
+                body: _t("Only web-compatible Image formats such as .png or .jpeg are supported."),
+            });
+        } else {
+            const imageUrl = await getDataURLFromFile(file);
+            const loadedImage = await loadImage(imageUrl);
+            if (loadedImage) {
+                this.env.services.ui.block();
+                await this.pos.data.ormWrite("restaurant.floor", [this.activeFloor.id], {
+                    floor_background_image: imageUrl.split(",")[1],
+                });
+                // A read is added to be sure that we have the same image as the one in backend
+                await this.pos.data.read("restaurant.floor", [this.activeFloor.id]);
+                this.env.services.ui.unblock();
+            } else {
+                this.dialog.add(AlertDialog, {
+                    title: _t("Loading Image Error"),
+                    body: _t("Encountered error when loading image. Please try again."),
+                });
+            }
+            this.state.isColorPicker = false;
+        }
+    }
 }
 
 registry.category("pos_screens").add("FloorScreen", FloorScreen);

addons/pos_restaurant/static/src/app/floor_screen/floor_screen.scss

@@ -19,3 +19,26 @@
         }
     }
 }
+.floor-picture {
+    height: 48px;
+    width: 48px;
+    & > img {
+        position: absolute;
+        top: -9999px;
+        bottom: -9999px;
+        right: -9999px;
+        left: -9999px;
+        max-height: 64px;
+        margin: auto;
+    }
+    .image-uploader {
+        position: absolute;
+        z-index: 1000;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0;
+        cursor: pointer;
+    }
+}