chore: added resetting order button, changed buttons layout

src/components/OrderList.vue

@@ -76,7 +76,6 @@ function removeOrder(orderId: string) {
   StorageManager.removeValue(orderId);
 
   if (store.chosenLocalOrderId == orderId) store.chosenLocalOrderId = '';
-  console.log(storageOrderList);
 
   const orderIndex = storageOrderList.findIndex((o) => o.id == orderId);
   if (orderIndex != -1) storageOrderList.splice(orderIndex, 1);

src/components/OrderMessage.vue

@@ -8,22 +8,32 @@
     </p>
 
     <div class="message_actions">
-      <button class="g-button action" @click="saveOrder">
+      <button class="g-button action icon" @click="saveOrder">
+        <LucideSave />
         {{ $t('order-message.button-save') }}
       </button>
-      <button class="g-button action" @click="copyMessage">
+
+      <button class="g-button action icon" @click="copyMessage">
+        <LucideCopy />
         {{ $t('order-message.button-copy') }}
       </button>
+
       <button
-        class="g-button action"
+        class="g-button action icon"
         :data-disabled="!store.chosenLocalOrderId"
         @click="updateOrder"
       >
+        <LucidePencil />
         {{ $t('order-message.button-update') }}
-        <span class="text--accent"
-          >{{ store.chosenLocalOrderId && `#${store.chosenLocalOrderId.split('-')[1]}` }}
+        <span class="text--accent">
+          {{ store.chosenLocalOrderId && `#${store.chosenLocalOrderId.split('-')[1]}` }}
         </span>
       </button>
+
+      <button class="g-button action icon" @click="resetOrder">
+        <LucideRotateCcw />
+        {{ $t('order-message.button-reset') }}
+      </button>
     </div>
 
     <div class="message_checkboxes">
@@ -80,8 +90,8 @@ import { useStore } from '../store/store';
 import { useI18n } from 'vue-i18n';
 
 import StorageManager from '../managers/storageManager';
-import { currentFormattedHours, currentFormattedMinutes } from '../utils/dateUtils';
-import { IStorageOrderData } from '../types/orderTypes';
+import { IOrderFooter, IOrderHeader, IStorageOrderData } from '../types/orderTypes';
+import { LucideCopy, LucidePencil, LucideRotateCcw, LucideSave } from 'lucide-vue-next';
 
 type TActionMonitType = 'warning' | 'info' | 'success';
 
@@ -275,6 +285,33 @@ function updateOrder() {
   window.localStorage.setItem(store.chosenLocalOrderId, JSON.stringify(orderDataToUpdate));
   showActionMonit(t('order-message.success-update-html'), 'success');
 }
+
+function resetOrder() {
+  Object.keys(store.orderData.header).forEach((k) => {
+    store.orderData['header'][k as keyof IOrderHeader] = '';
+  });
+
+  Object.keys(store.orderData.footer).forEach((k) => {
+    store.orderData['footer'][k as keyof IOrderFooter] = '';
+  });
+
+  store.orderData.instructions.forEach((instruction) => {
+    instruction.active = false;
+
+    Object.keys(instruction.inputFields).forEach((k) => {
+      instruction.inputFields[k] = '';
+    });
+
+    if (instruction.listFields) {
+      instruction.listFields.forEach((field) => {
+        Object.keys(field.values).forEach((k) => {
+          field.active = false;
+          field.values[k] = '';
+        });
+      });
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -313,10 +350,13 @@ function updateOrder() {
 }
 
 .message_actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1em;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5em;
+
+  button.icon {
+    gap: 0.5em;
+  }
 
   button img {
     height: 2ch;

src/locales/en.json

@@ -23,6 +23,7 @@
       "button-save": "Save as new order",
       "button-copy": "Copy the order message",
       "button-update": "Update the order",
+      "button-reset": "Reset the order",
       "warning-outdated-clipboard": "Oops! Your browser may be a little bit depraceted since it's not supporting saving data to the clipboard! :/",
       "warning-fill-inputs": "Fill all the empty fields before copying the order!",
       "warning-add-rows": "Add at least one row before copying the order!",

src/locales/pl.json

@@ -23,6 +23,7 @@
       "button-save": "Zapisz nowy rozkaz",
       "button-copy": "Kopiuj treść rozkazu",
       "button-update": "Zaktualizuj rozkaz",
+      "button-reset": "Wyczyść rozkaz",
       "warning-outdated-clipboard": "Ups! Twoja przeglądarka musi być dosyć przestarzała, ponieważ nie obsługuje zapisu do schowka! :/",
       "warning-fill-inputs": "Wypełnij puste rubryki rozkazu przed jego skopiowaniem!",
       "warning-add-rows": "Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!",