Excel-like Selecting of Availabilities

[mate-joy]

In Itinerary Reservation Enquiry, the user can select so-called “availabilities”.

On the left side, you can see the available rooms in the camp. In the top header, you can see the dates.

The following box represents one availability. On top, the number 4, is the number of available rooms. The bottom, 3255.00, is the price of the room.

The client wishes that the boxes are easier to select. It should be more intuitive. It should work similar to the way you select boxes in excel.

Goals

• It should be easy and intuitive to select the boxes.

• It should be easy and intuitive to de-select the boxes.

• Selected boxes should be highlighted.

• It should be possible to press the mouse-button down and to immediately select multiple boxes, like in excel.

• After every time the user does something, the availabilities should be emitted with: “availabilities-selected”.

Branch: feature/tpms-185-Excel-likeSelectingofAvailabilities

Where:

vue-app/src/components/itinerary-reservations/AvailabilitiesSelecter.vue

In AvailabilitiesSelecter.vue, the props.availabilities contains the availabilites that should be selected by the user.

Some inspirations:

https://github.com/mate-n/tpms/assets/106409605/6ba2b85f-5d4e-4778-9874-1b20d04f683c

https://github.com/mate-n/tpms/assets/106409605/351af0bc-aadb-44b4-a981-0e1fc2d533e6

[phong-hpm]

Additional future:

• User can select/unselect by holding "ctrl" and click on the box. After apply selecting boxes like Excel, I see user have to way to unselect a box, so I added this feature.

Please consider

After every time the user does something, the availabilities should be emitted with: “availabilities-selected”.

I did the same. but I see when we select boxes in multiple rows, the highlight header and the number of "Nights" are not corresponding with selected boxes So please consider.