[14.0] shopfloor: improve qty picker

[JuMiSanAr]

• Write the qty and Package type text in bold for the type to pick
• Instead of color-coding the boxes (since this is usually used to indicate what type of information it is), introduce a small icon next to the package type to show what it is.

ref: cos-4220

[OCA-git-bot]

Hi @simahawk, @guewen, @sebalix, some modules you are maintaining are being modified, check this out!

[jbaudoux]

We should align with what @lmignon did on v16

[TDu]

We should align with what @lmignon did on v16

Do you have a link to a pr ?

[github-actions[bot]]

There hasn't been any activity on this pull request in the past 4 months, so it has been marked as stale and it will be closed automatically if no further activity occurs in the next 30 days. If you want this PR to never become stale, please ask a PSC member to apply the "no stale" label.

[lmignon]

In V60 we've a more conservative approach (IMO better) We highlight the expected unit into the picker when it's not a ''unit"

Here is the code of our extension addon

import {PackagingQtyPicker} from "/shopfloor_mobile/static/wms/src/components/packaging-qty-picker.js";

const computed = PackagingQtyPicker.extendOptions.computed;
const qty_color_computed = computed.qty_color;

computed.qty_color = function () {
  const result = qty_color_computed.bind(this)();
  const font_style = "font-weight:950; font-size: 200%; color:rgb(102, 0, 0)";
  const new_result = result + ";" + font_style;
  return new_result;
};

computed.unit_color = function () {
  const font_style = "font-weight:950; font-size: 200%; color:rgb(102, 0, 0)";
  const is_not_unit = this.uom.id != 1; // Id of unit of measure "unit" is 1.
  const background_style = is_not_unit
    ? "background-color: orangered!important"
    : "background-color:transparent; ";

  const result = ";" + font_style + ";" + background_style;
  return result;
};

const template = PackagingQtyPicker.extendOptions.template;

/* Replace the multiline
    <v-col>
        {{ unit_uom.name }}
    </v-col>
  with
   <v-col :style="unit_color">
      {{ unit_uom.name }}
  </v-col>
  */
const new_template = template.replace(
  /<v-col>\s*{{\s*unit_uom.name\s*}}\s*<\/v-col>/,
  '<v-col :style="unit_color">{{ unit_uom.name }}</v-col>'
);

PackagingQtyPicker.extendOptions.template = new_template;

IMO it takes less place on the screen and avoid the display of too mush information.