Allow to select class from item menu

osm-fr · Dec 28, 2023 · 9a37ae2 · 9a37ae2
1 parent bf9cf9d
commit 9a37ae2
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/web/src/pages/map/items-list.vue b/web/src/pages/map/items-list.vue
@@ -61,6 +61,34 @@
           <router-link target="_blank" :to="`../issues/open?item=${item.item}`">
             {{ item.title.auto }}
           </router-link>
+          <span v-if="item.class.length > 1">
+            <span
+              v-if="class_detail_open == item.item"
+              @click="class_detail_open = undefined"
+              class="class_detail"
+            >
+              -
+            </span>
+            <span
+              v-else
+              @click="class_detail_open = item.item"
+              class="class_detail"
+            >
+              +
+            </span>
+          </span>
+          <div v-if="class_detail_open == item.item">
+            <ul>
+              <li v-for="classs in item.class" :key="classs.class">
+                <a
+                  href=""
+                  @click.prevent="set_item_class(item.item, classs.class)"
+                >
+                  ⌖ {{ classs.class }} {{ classs.title.auto }}
+                </a>
+              </li>
+            </ul>
+          </div>
         </li>
       </ul>
     </div>
@@ -94,12 +122,14 @@ export default Vue.extend({
     total_items: { [category: number]: number }
     count_items: { [category: number]: number }
     state: ItemState
+    class_detail_open: number | undefined
   } {
     return {
       active_levels: ['1', '2', '3'],
       total_items: {},
       count_items: {},
       state: Object.assign({}, this.itemState),
+      class_detail_open: undefined,
     }
   },
 
@@ -208,6 +238,13 @@ export default Vue.extend({
       this.itemsChanged()
     },
 
+    set_item_class(item_id: number, class_id: number): void {
+      this._select_items_loop((item: Item) => item.item === item_id)
+      this.state.class = class_id
+      this.$forceUpdate()
+      this.itemsChanged()
+    },
+
     toggle_categorie_block(categ_id: number): void {
       const block = document.getElementById(`categorie_block_${categ_id}`)
       block.style.height = block.style.height == '0px' ? '' : '0px'
@@ -362,4 +399,8 @@ div.level-3.disabled {
   background: url('~../../../static/images/levels.png') no-repeat;
   background-position: -32px -16px;
 }
+
+.class_detail {
+  cursor: pointer;
+}
 </style>