Browse Source

feat: adiciona metodo truncate em product stock dialog

alvesantos 2 weeks ago
parent
commit
4e1e8595dd
1 changed files with 13 additions and 1 deletions
  1. 13 1
      src/pages/dashboard/components/ProductStockDialog.vue

+ 13 - 1
src/pages/dashboard/components/ProductStockDialog.vue

@@ -28,7 +28,12 @@
             </div>
             <template v-for="(item, index) in props.products" :key="item.id">
               <div class="list-row q-px-md q-py-sm">
-                <span class="text-body2 text-dark">{{ item.name }}</span>
+                <span class="text-body2 text-dark">
+                  {{ truncate(item.name, TRUNCATE_LENGTH) }}
+                  <q-tooltip v-if="isTruncated(item.name)">
+                    {{ item.name }}
+                  </q-tooltip>
+                </span>
                 <div class="row items-center" style="gap: 12px">
                   <span class="text-body2 text-dark">{{ item.quantity }}</span>
                   <q-badge
@@ -51,10 +56,17 @@
 <script setup>
 import { useDialogPluginComponent } from "quasar";
 
+import { truncate } from "src/helpers/utils";
+
 defineEmits([...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
 
+const TRUNCATE_LENGTH = 30;
+
+const isTruncated = (value) =>
+  String(value ?? "").length > TRUNCATE_LENGTH;
+
 const props = defineProps({
   products: {
     type: Array,