|
1 | 1 | <template> |
2 | 2 | <div class="page-wrapper"> |
3 | | - <div> |
4 | | - <NcButton aria-label="Show add/edit modal" |
5 | | - @click="showAddModal"> |
6 | | - <template #icon> |
7 | | - <Plus :size="20"/> |
8 | | - </template> |
9 | | - <template>Add</template> |
10 | | - </NcButton> |
11 | | - </div> |
| 3 | + <div> |
| 4 | + <NcButton aria-label="Show add/edit modal" |
| 5 | + @click="showAddModal"> |
| 6 | + <template #icon> |
| 7 | + <Plus :size="20" /> |
| 8 | + </template> |
| 9 | + <template>Add</template> |
| 10 | + </NcButton> |
| 11 | + </div> |
12 | 12 | <h1>{{ groceryList?.title ?? t('grocerylist', 'Grocery list') }}</h1> |
13 | 13 | <div> |
14 | 14 | <NcCheckboxRadioSwitch :checked="!!groceryList?.showOnlyUnchecked" type="switch" @update:checked="toggleVisibility"> |
15 | 15 | {{ t('grocerylist', 'Show only unchecked') }} |
16 | 16 | </NcCheckboxRadioSwitch> |
17 | | - <NcModal |
18 | | - v-if="modal" |
19 | | - ref="modalRef" |
20 | | - :name="t('grocerylist', 'Add item')" |
| 17 | + <NcModal v-if="modal" |
| 18 | + ref="modalRef" |
| 19 | + :name="t('grocerylist', 'Add item')" |
21 | 20 | @close="closeModal"> |
22 | 21 | <form class="modal__content" |
23 | 22 | @submit.prevent="onSaveItem()"> |
24 | 23 | <p class="quantityRow"> |
25 | 24 | <NcTextField :value.sync="newItemQuantity" |
26 | 25 | label="Quantity…" |
27 | | - @keyup.up="increaseQuantity()" |
28 | | - @keyup.down="decreaseQuantity()" |
29 | | - /> |
30 | | - <NcButton aria-label="Increase quantity" |
31 | | - style="display:inline-block;" |
32 | | - type="tertiary" |
33 | | - @click="increaseQuantity()"> |
34 | | - <template #icon> |
35 | | - <Plus :size="20"/> |
36 | | - </template> |
37 | | - </NcButton> |
38 | | - <NcButton aria-label="Decrease quantity" |
39 | | - style="display:inline-block;" |
40 | | - type="tertiary" |
41 | | - @click="decreaseQuantity()"> |
42 | | - <template #icon> |
43 | | - <Minus :size="20"/> |
44 | | - </template> |
45 | | - </NcButton> |
46 | | - </p> |
| 26 | + @keyup.up="increaseQuantity()" |
| 27 | + @keyup.down="decreaseQuantity()" /> |
| 28 | + <NcButton aria-label="Increase quantity" |
| 29 | + style="display:inline-block;" |
| 30 | + type="tertiary" |
| 31 | + @click="increaseQuantity()"> |
| 32 | + <template #icon> |
| 33 | + <Plus :size="20" /> |
| 34 | + </template> |
| 35 | + </NcButton> |
| 36 | + <NcButton aria-label="Decrease quantity" |
| 37 | + style="display:inline-block;" |
| 38 | + type="tertiary" |
| 39 | + @click="decreaseQuantity()"> |
| 40 | + <template #icon> |
| 41 | + <Minus :size="20" /> |
| 42 | + </template> |
| 43 | + </NcButton> |
| 44 | + </p> |
47 | 45 | <p> |
48 | 46 | <NcTextField :value.sync="newItemName" |
49 | 47 | label="Item…" |
@@ -141,17 +139,17 @@ import { ref } from 'vue' |
141 | 139 | export default { |
142 | 140 | name: 'GroceryList', |
143 | 141 |
|
144 | | - components: { |
145 | | - NcCheckboxRadioSwitch, |
146 | | - NcSelect, |
147 | | - NcButton, |
148 | | - AlarmSnooze, |
149 | | - NcTextField, |
150 | | - Plus, |
151 | | - Minus, |
152 | | - Delete, |
153 | | - NcModal, |
154 | | - }, |
| 142 | + components: { |
| 143 | + NcCheckboxRadioSwitch, |
| 144 | + NcSelect, |
| 145 | + NcButton, |
| 146 | + AlarmSnooze, |
| 147 | + NcTextField, |
| 148 | + Plus, |
| 149 | + Minus, |
| 150 | + Delete, |
| 151 | + NcModal, |
| 152 | + }, |
155 | 153 |
|
156 | 154 | props: { |
157 | 155 | listId: { |
@@ -381,37 +379,37 @@ export default { |
381 | 379 | this.newItemCategory = this.allCategories.find(i => i.id === item.category) |
382 | 380 | this.modal = true |
383 | 381 | }, |
384 | | - increaseQuantity() { |
385 | | - if (this.newItemQuantity === '') { |
386 | | - this.newItemQuantity = 0 |
387 | | - } |
| 382 | + increaseQuantity() { |
| 383 | + if (this.newItemQuantity === '') { |
| 384 | + this.newItemQuantity = 0 |
| 385 | + } |
388 | 386 |
|
389 | | - if (this.newItemQuantity >= 1000) { |
390 | | - this.newItemQuantity = this.newItemQuantity + 1000 |
391 | | - } else if (this.newItemQuantity >= 100) { |
392 | | - this.newItemQuantity = this.newItemQuantity + 100 |
393 | | - } else if (this.newItemQuantity >= 10) { |
394 | | - this.newItemQuantity = this.newItemQuantity + 10 |
395 | | - } else { |
396 | | - this.newItemQuantity = this.newItemQuantity + 1 |
397 | | - } |
398 | | - }, |
399 | | - decreaseQuantity() { |
400 | | - if (this.newItemQuantity > 1000) { |
401 | | - this.newItemQuantity = this.newItemQuantity - 1000 |
402 | | - } else if (this.newItemQuantity > 100) { |
403 | | - this.newItemQuantity = this.newItemQuantity - 100 |
404 | | - } else if (this.newItemQuantity > 10) { |
405 | | - this.newItemQuantity = this.newItemQuantity - 10 |
406 | | - } else if (this.newItemQuantity > 1) { |
407 | | - this.newItemQuantity = this.newItemQuantity - 1 |
408 | | - } else { |
409 | | - this.newItemQuantity = '' |
410 | | - } |
411 | | - }, |
| 387 | + if (this.newItemQuantity >= 1000) { |
| 388 | + this.newItemQuantity = this.newItemQuantity + 1000 |
| 389 | + } else if (this.newItemQuantity >= 100) { |
| 390 | + this.newItemQuantity = this.newItemQuantity + 100 |
| 391 | + } else if (this.newItemQuantity >= 10) { |
| 392 | + this.newItemQuantity = this.newItemQuantity + 10 |
| 393 | + } else { |
| 394 | + this.newItemQuantity = this.newItemQuantity + 1 |
| 395 | + } |
| 396 | + }, |
| 397 | + decreaseQuantity() { |
| 398 | + if (this.newItemQuantity > 1000) { |
| 399 | + this.newItemQuantity = this.newItemQuantity - 1000 |
| 400 | + } else if (this.newItemQuantity > 100) { |
| 401 | + this.newItemQuantity = this.newItemQuantity - 100 |
| 402 | + } else if (this.newItemQuantity > 10) { |
| 403 | + this.newItemQuantity = this.newItemQuantity - 10 |
| 404 | + } else if (this.newItemQuantity > 1) { |
| 405 | + this.newItemQuantity = this.newItemQuantity - 1 |
| 406 | + } else { |
| 407 | + this.newItemQuantity = '' |
| 408 | + } |
| 409 | + }, |
412 | 410 | async onSaveItem() { |
413 | | - if (this.newItemName === "") { |
414 | | - showInfo("Cannot add empty item!") |
| 411 | + if (this.newItemName === '') { |
| 412 | + showInfo('Cannot add empty item!') |
415 | 413 | return |
416 | 414 | } |
417 | 415 |
|
|
0 commit comments