Some fixes, added username copy button

Author: isKONSTANTIN

components/analytics/totalByPeriod.vue

@@ -59,11 +59,11 @@ const formatAmount = (delta) => {
 const buildChart = async () => {
   const newSeries = [
     {
-      name: "Income",
+      name: t("analyticsPage.income"),
       data: []
     },
     {
-      name: "Expanse",
+      name: t("analyticsPage.expanse"),
       data: []
     }
   ];

components/modal/transaction/csvImport.vue

@@ -187,6 +187,11 @@
 
             </div>
           </div>
+
+          <label class="label cursor-pointer">
+            <span class="label-text">{{ $t('modals.csvImport.immediatelyApply') }}</span>
+            <input type="checkbox" class="toggle toggle-success" v-model="immediatelyApply"/>
+          </label>
         </div>
 
       </template>
@@ -226,13 +231,15 @@ const tags = $transactionsTagsApi.getTags();
 const tagsTree = $transactionsTagsApi.getTagsTree();
 const tagsMap = $transactionsTagsApi.getTagsTreeMap();
 
-const emit = defineEmits(['close', 'addTransactions'])
+const emit = defineEmits(['close', 'addTransactions', 'applyTransactions'])
 const step = ref(0);
 
 const parsedData = ref([])
 const maxColumns = ref(0);
 const ignoreFirst = ref(1);
 
+const immediatelyApply = ref(false);
+
 const columTypes = [
     "ignore",
     "account",
@@ -339,8 +346,18 @@ const transformToTransactions = () => {
 const unknownValuesFilled = () => {
   let result = true;
 
+  if (needAccount.value && !account.value)
+    return false;
+
+  if (needTag.value && !tag.value)
+    return false;
+
+  if (needDate.value && !date.value)
+    return false;
+
   unknownValues.value.forEach((v, k) => {
     v.forEach((name) => {
+
       if (!unknownMap.value.get(k)[name]) {
         result = false;
 
@@ -490,13 +507,20 @@ const nextStep = () => {
 
       break;
     case 2:
-      if (findUnknownValues()) {
+      if (findUnknownValues() || !unknownValuesFilled()) {
         highlightError.value = true;
 
         break;
       }
+
       const transactions = transformToTransactions();
 
+      if (immediatelyApply.value) {
+        emit('applyTransactions', transactions)
+
+        return;
+      }
+
       $toastsManager.pushToast(t("modals.csvImport.importMessage", transactions.length), 2500, "success")
       emit('addTransactions', transactions)
   }

components/nav/user/avatar.vue

@@ -4,7 +4,7 @@
       <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
     </svg>
 
-    <p class="font-bold">
+    <p class="overflow-ellipsis overflow-hidden whitespace-nowrap font-bold hidden sm:block" v-if="username">
       {{ username }}
     </p>
   </div>
@@ -14,7 +14,6 @@
 
 const props = defineProps({
   username: {
-    required: true,
     type: String
   },
 

components/nav/user/user.vue

@@ -5,6 +5,15 @@
         <avatar class="overflow-hidden" :avatar-letter="avatarLetter" :username="username"/>
       </div>
       <ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-base-100 rounded-box w-52">
+        <li>
+          <div @click="copyToClipboard(username)">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25" />
+            </svg>
+
+            <p class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ username }}</p>
+          </div>
+        </li>
         <li v-if="adminAllowed" @click="handleClick">
           <nuxt-link to="admin">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
@@ -73,7 +82,8 @@
 import Avatar from "~/components/nav/user/avatar.vue";
 import ModalLanguageEdit from "~/components/modal/language/edit.vue";
 
-const { $userApi, $adminApi } = useNuxtApp();
+const { $userApi, $adminApi, $toastsManager } = useNuxtApp();
+const { t, locale } = useI18n();
 
 const adminAllowed = $adminApi.getAllowed();
 
@@ -96,6 +106,14 @@ const handleClick = () => {
   }
 };
 
+const copyToClipboard = (text) => {
+  navigator.clipboard.writeText(text).then(function() {
+    $toastsManager.pushToast(t("navigation.messages.usernameCopied"), 2500, "success");
+  }, function(err) {
+    $toastsManager.pushToast(t("navigation.messages.usernameCopyFail"), 3000,"error");
+  });
+}
+
 </script>
 
 <style scoped>

components/toastsBoard.vue

@@ -2,14 +2,14 @@
   <div class="toast toast-top toast-end z-50">
     <TransitionGroup name="alerts">
       <div class="alert shadow-lg" v-for="toast in toasts" :key="toast" :class="'alert-' + toast.type">
-        <div class="flex justify-between w-full">
+        <div class="flex justify-between">
           <div class="flex gap-2">
             <svg v-if="toast.type === 'error'" xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
             <svg v-if="toast.type === 'warning'" xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
             <svg v-if="toast.type === 'info'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
             <svg v-if="toast.type === 'success'" xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
 
-            <span>{{ toast.text }}</span>
+            <p class="text-wrap">{{ toast.text }}</p>
           </div>
 
           <button v-if="toast.canHide" class="btn btn-xs btn-circle btn-ghost" @click="closeToast(toast)">

lang/en-US.json

@@ -17,6 +17,11 @@
       "logout": "Logout"
     },
 
+    "messages": {
+      "usernameCopied": "Login copied",
+      "usernameCopyFail": "Oops, failed to copy login"
+    },
+
     "themes": {
       "system": "System",
       "dark": "Dark",
@@ -132,6 +137,9 @@
       "radar": "Radar"
     },
 
+    "income": "Income",
+    "expanse": "Expanse",
+
     "pie": {
       "noData": "No data",
       "selects": {
@@ -359,6 +367,8 @@
       "warning": "Columns that have not been mapped will not be saved. You can also select multiple description columns for merging",
       "readLines": "{n} lines have been read",
 
+      "immediatelyApply": "Apply all transactions immediately",
+
       "steps": {
         "fileSelect": "Select a file",
         "columnsDefining": "Defining columns",

lang/ru-RU.json

@@ -17,6 +17,11 @@
       "logout": "Выйти"
     },
 
+    "messages": {
+      "usernameCopied": "Логин скопирован",
+      "usernameCopyFail": "Не удалось скопировать логин"
+    },
+
     "themes": {
       "system": "Системная",
       "dark": "Темная",
@@ -134,6 +139,9 @@
       "radar": "Паутинная"
     },
 
+    "income": "Доход",
+    "expanse": "Расход",
+
     "pie": {
       "noData": "Нет данных",
       "selects": {
@@ -360,6 +368,9 @@
       "importMessage": "Импортировано {n} транзакций | Импортирована {n} транзакция | Импортировано {n} транзакций | Импортировано {n} транзакций",
       "warning": "Колонки, которые не были размечены, не будут сохранены. Вы также можете выбрать несколько колонок описания для их объединения",
       "readLines": "Прочитано {n} строк | Прочитана {n} строка | Прочитано {n} строки | Прочитано {n} строк",
+
+      "immediatelyApply": "Сразу применить все транзакции",
+
       "steps": {
         "fileSelect": "Выбор файла",
         "columnsDefining": "Определение колон",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "finwave",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",

pages/bulk.vue

@@ -101,7 +101,7 @@
       </div>
     </div>
 
-    <csv-import :opened="csvImportOpened" @close="csvImportOpened = false" @addTransactions="addFromImport" />
+    <csv-import :opened="csvImportOpened" @close="csvImportOpened = false" @addTransactions="addFromImport" @applyTransactions="applyFromImport" />
 
     <confirmation :opened="confirmDeleteOpened"
                   name="bulk-delete-confirm"
@@ -213,6 +213,12 @@ const addNew = (type) => {
   transactions.value.push(newTransaction)
 }
 
+const applyFromImport = (t) => {
+  csvImportOpened.value = false;
+
+  sendToServer(t);
+}
+
 const addFromImport = (t) => {
   csvImportOpened.value = false;
 
@@ -239,6 +245,17 @@ const accountIdToCurrencyId = (accountId) => {
   return accountObject.currencyId;
 }
 
+const sendToServer = (transactions) => {
+  return $transactionsApi.newBulkTransaction(transactions).then((s) => {
+    if (s)
+      $toastsManager.pushToast(t("bulkPage.messages.success"), 2500, "success")
+    else
+      $toastsManager.pushToast(t("bulkPage.messages.error"), 3000,"error")
+
+    return s;
+  });
+}
+
 const apply = () => {
   const lastCheck = checkAll();
 
@@ -248,15 +265,10 @@ const apply = () => {
     return;
   }
 
-  $transactionsApi.newBulkTransaction(transactions.value).then((s) => {
-    if (s) {
-      $toastsManager.pushToast(t("bulkPage.messages.success"), 2500, "success")
-
+  sendToServer(transactions.value).then((s) => {
+    if (s)
       transactions.value = [];
-    }
-    else
-      $toastsManager.pushToast(t("bulkPage.messages.error"), 3000,"error")
-  });
+  })
 }
 
 const deleteAll = () => {