quasar-factory-lib 0.0.62 → 0.0.64

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "author": ""
 }

package/src/components/ConfirmedTask/ConfirmedTask.vue

@@ -77,7 +77,12 @@ export default defineComponent({
     },
     endTask () {
       this.$emit('endTask')
-    }
+    },
+    showConfirmedTaskAnSetValues (total: number, selected: number): void {
+      this.alert = true
+      this.values.total = total
+      this.values.selected = selected
+    },
   },
   mounted () {}
 })

package/src/components/Table/Table.vue

@@ -66,6 +66,7 @@
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-save-value-popup-edit="onSaveValuePopupEdit"
           @on-click-button="onClickButton"
+          @on-click-button-with-tool-tip="onClickButtonWithToolTip"
           @click="onRowClick(props.row)"
         />
       </template>
@@ -80,6 +81,7 @@
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-save-value-popup-edit="onSaveValuePopupEdit"
           @on-click-button="onClickButton"
+          @on-click-button-with-tool-tip="onClickButtonWithToolTip"
           @click="onRowClick(props.row)"
         />
       </template>
@@ -194,7 +196,13 @@ export default defineComponent({
     'deleteItem',
     'openModalWithTable',
     'setItemNotFound',
-    'onRowClick'],
+    'onClickSeeTaskDetails',
+    'startMaintenanceTicket',
+    'pauseMaintenanceTicket',
+    'finishMaintenanceTicket',
+    'onRowClick',
+    'onClickButtonWithToolTip'
+  ],
   data () {
     return {
       selected: [],
@@ -266,6 +274,9 @@ export default defineComponent({
     onClickButton (emit: 'onClickButton', row: object) {
       this.$emit(emit, row)
     },
+    onClickButtonWithToolTip (row: object) {
+      this.$emit('onClickButtonWithToolTip', row)
+    },
     onRowClick (row: object) {
       this.$emit('onRowClick', row)
     },
@@ -331,19 +342,27 @@ export default defineComponent({
             return (hours * 3600) + (minutes * 60) + seconds;
           };
 
+          const parsePercentage = (percentageString: string): number => {
+            return parseFloat(percentageString.replace('%', '')) / 100;
+          };
+
           if (typeof xValue === 'string' && typeof yValue === 'string') {
             const xDate = parseDate(xValue);
             const yDate = parseDate(yValue);
-            
+
             if (!isNaN(xDate.getTime()) && !isNaN(yDate.getTime())) {
               return xDate.getTime() - yDate.getTime();
             }
 
             const xTime = parseTime(xValue);
             const yTime = parseTime(yValue);
-            
+
             if (!isNaN(xTime) && !isNaN(yTime)) {
               return xTime - yTime;
+            } else if (xValue.includes('%') && yValue.includes('%')) {
+              const xPercent = parsePercentage(xValue);
+              const yPercent = parsePercentage(yValue);
+              return xPercent - yPercent;
             } else {
               return xValue.localeCompare(yValue);
             }
@@ -352,6 +371,7 @@ export default defineComponent({
             return xValue - yValue;
           } 
           else if (typeof xValue === 'boolean' && typeof yValue === 'boolean') {
+            console.log(xValue, yValue)
             return xValue === yValue ? 0 : xValue ? 1 : -1;
           } 
           else {

package/src/components/Table/components/BasicCheckBox.vue

@@ -30,6 +30,11 @@ export default {
       tablePropsData: this.tableProps,
       modelData: this.model
     }
+  },
+  watch: {
+    model (val) {
+      this.modelData = val
+    }
   }
 }
 </script>

package/src/components/Table/components/CustomizedBadge.vue

@@ -0,0 +1,48 @@
+<template>
+  <q-badge
+    class="cursor-pointer"
+      :data-cy="'badge' + dataCy"
+      :color="badgeColor"
+      :text-color="badgeTextColor"
+      :outline="badgeOutline"
+      :rounded="badgeRounded"
+      :transparent="badgeTransparent"
+    >
+      {{ $t(badgeText) }}
+    </q-badge>
+</template>
+<script lang="ts">
+export default {
+  name: 'CustomizedBadge',
+  props: {
+    dataCy: {
+      type: String,
+      required: true
+    },
+    badgeText: {
+      type: String,
+      required: true
+    },
+    badgeColor: {
+      type: String,
+      required: true
+    },
+    badgeTextColor: {
+      type: String,
+      required: true 
+    },
+    badgeOutline: {
+      type: Boolean,
+      required: true 
+    },
+    badgeRounded: {
+      type: Boolean,
+      required: true 
+    },
+    badgeTransparent: {
+      type: Boolean,
+      required: true
+    }
+  }
+}
+</script>

package/src/components/Table/components/CustomizedButtonWithToolTip.vue

@@ -0,0 +1,43 @@
+<template>
+  <q-btn
+    :data-cy="dataCy"
+    flat
+    round
+    :color="btnColor"
+    size="md"
+    @click="$emit('onClickButtonWithToolTip')"
+  >
+    <q-icon :name="btnIcon" />
+    <q-tooltip
+      anchor="top middle"
+      self="bottom middle"
+      :offset="[10, 10]"
+    >
+      {{ $t(toolTipText) }}
+    </q-tooltip>
+  </q-btn>
+</template>
+<script lang="ts">
+export default {
+  name: 'CustomizedButtonWithToolTip',
+  props: {
+    dataCy: {
+      type: String,
+      required: true
+    },
+    btnColor: {
+      type: String,
+      required: true
+    },
+    btnIcon: {
+      type: String,
+      required: true
+    },
+    toolTipText: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['onClickButtonWithToolTip']
+}
+</script>

package/src/components/Table/components/CustomizedCheckBox.vue

@@ -51,6 +51,11 @@ export default {
       tablePropsData: this.tableProps,
       modelData: this.model
     }
+  },
+  watch: {
+    model (val) {
+      this.modelData = val
+    }
   }
 }
 </script>

package/src/components/Table/components/TableSlotBody.vue

@@ -97,6 +97,26 @@
           $emit('onClickButton', col.btnEmit, tablePropsData.row)
         }"
       />
+      <CustomizedButtonWithToolTip
+        v-if="col.showCustomizedButtonWithToolTip"
+        :data-cy="col.ButtonWithToolTip + '-' + tablePropsData.row.id"
+        :btn-color="tablePropsData.row.btnColor || 'primary'"
+        :btn-icon="col.btnIcon|| ''"
+        :toolTipText="tablePropsData.row.toolTipText || ''"
+        @on-click-button-with-tool-tip="() => {
+          $emit('onClickButtonWithToolTip', col.btnEmit, tablePropsData.row)
+        }"
+      />
+      <CustomizedBadge
+        v-if="col.showBadge"
+        :data-cy="col.badgeDataCy + tablePropsData.row.id"
+        :badgeText="tablePropsData.row.badgeText"
+        :badgeColor="tablePropsData.row.badgeColor"
+        :badgeTextColor="col.badgeTextColor || 'primary'"
+        :badgeOutline="col.badgeOutline || false"
+        :badgeRounded="col.badgeRounded || false"
+        :badgeTransparent="col.badgeTransparent || false"
+      />
     </q-td>
   </tr>
 </template>
@@ -107,6 +127,8 @@ import BasicCheckBox from './BasicCheckBox.vue'
 import CustomizedCheckBox from './CustomizedCheckBox.vue'
 import CustomizedIcon from './CustomizedIcon.vue'
 import CustomizedButton from './CustomizedButton.vue'
+import CustomizedBadge from './CustomizedBadge.vue'
+import CustomizedButtonWithToolTip from './CustomizedButtonWithToolTip.vue'
 export default {
   name: 'TableSlotBody',
   components: {
@@ -115,7 +137,9 @@ export default {
     BasicCheckBox,
     CustomizedCheckBox,
     CustomizedIcon,
-    CustomizedButton
+    CustomizedButton,
+    CustomizedBadge,
+    CustomizedButtonWithToolTip
   },
   props: {
     tableProps: {
@@ -136,15 +160,21 @@ export default {
       this.tablePropsData = val
     }
   },
-  emits: ['onSaveValuePopupEdit', 'onUpdateBasicCheckboxValue', 'onClickButton', 'onUpdateCustomizedCheckboxValue'],
+  emits: [
+    'onSaveValuePopupEdit',
+    'onUpdateBasicCheckboxValue',
+    'onClickButton',
+    'onUpdateCustomizedCheckboxValue',
+    'onClickButtonWithToolTip'
+  ],
   data () {
     return {
       tablePropsData: this.tableProps
     }
   },
   methods: {
-    getColumnValue (col: { showBasicCheckbox: boolean; showCustomizedCheckBox: boolean; showCustomizedIcon: boolean; showColumButton: boolean }): boolean {
-      return !(col.showBasicCheckbox || col.showCustomizedCheckBox || col.showCustomizedIcon || col.showColumButton)
+    getColumnValue (col: { showBasicCheckbox: boolean; showCustomizedCheckBox: boolean; showCustomizedIcon: boolean; showColumButton: boolean, showBadge: boolean, showCustomizedButtonWithToolTip: boolean }): boolean {
+      return !(col.showBasicCheckbox || col.showCustomizedCheckBox || col.showCustomizedIcon || col.showColumButton || col.showBadge || col.showCustomizedButtonWithToolTip)
     }
   }
 }

package/src/components/Table/components/TableSlotGrid.vue

@@ -16,7 +16,7 @@
           : tablePropsData.row.rowBgColor || 'bg-main-color'
       "
     >
-      <q-card-section>
+      <q-card-section class="q-py-sm">
         <q-checkbox
           :data-cy="'checkbox-' + tablePropsData.row.id"
           size="sm"
@@ -127,7 +127,31 @@
                 }"
               />
             </q-item-section>
+              <q-item-section>
+                <CustomizedButtonWithToolTip
+                v-if="col.showCustomizedButtonWithToolTip"
+                :data-cy="col.ButtonWithToolTip + '-' + tablePropsData.row.id"
+                :btn-color="tablePropsData.row.btnColor || 'primary'"
+                :btn-icon="col.btnIcon|| ''"
+                :toolTipText="tablePropsData.row.toolTipText || ''"
+                @on-click-button-with-tool-tip="() => {
+                  $emit('onClickButtonWithToolTip', col.btnEmit, tablePropsData.row)
+                }"
+              />
+            </q-item-section>
+            <q-item-section>
+              <CustomizedBadge
+              v-if="col.showBadge"
+              :data-cy="col.badgeDataCy + tablePropsData.row.id"
+              :badgeText="tablePropsData.row.badgeText"
+              :badgeColor="tablePropsData.row.badgeColor"
+              :badgeTextColor="col.badgeTextColor || 'primary'"
+              :badgeOutline="col.badgeOutline || false"
+              :badgeRounded="col.badgeRounded || false"
+              :badgeTransparent="col.badgeTransparent || false"
+            />
           </q-item-section>
+        </q-item-section>
         </q-item>
       </q-list>
     </q-card>
@@ -140,6 +164,8 @@ import BasicCheckBox from './BasicCheckBox.vue'
 import CustomizedCheckBox from './CustomizedCheckBox.vue'
 import CustomizedIcon from './CustomizedIcon.vue'
 import CustomizedButton from './CustomizedButton.vue'
+import CustomizedBadge from './CustomizedBadge.vue'
+import CustomizedButtonWithToolTip from './CustomizedButtonWithToolTip.vue'
 
 export default {
   name: 'TableSlotGrid',
@@ -149,7 +175,9 @@ export default {
     BasicCheckBox,
     CustomizedCheckBox,
     CustomizedIcon,
-    CustomizedButton
+    CustomizedButton,
+    CustomizedBadge,
+    CustomizedButtonWithToolTip
   },
   props: {
     tableProps: {
@@ -172,7 +200,8 @@ export default {
     'onSaveValuePopupEdit',
     'onUpdateBasicCheckboxValue',
     'onClickButton',
-    'onUpdateCustomizedCheckboxValue'
+    'onUpdateCustomizedCheckboxValue',
+    'onClickButtonWithToolTip'
   ],
   data () {
     return {
@@ -187,8 +216,8 @@ export default {
   },
   mounted () {},
   methods: {
-    getColumnValue (col: { showBasicCheckbox: boolean; showCustomizedCheckBox: boolean; showCustomizedIcon: boolean; showColumButton: boolean }): boolean {
-      return !(col.showBasicCheckbox || col.showCustomizedCheckBox || col.showCustomizedIcon || col.showColumButton)
+    getColumnValue (col: { showBasicCheckbox: boolean; showCustomizedCheckBox: boolean; showCustomizedIcon: boolean; showColumButton: boolean, showBadge: boolean, showCustomizedButtonWithToolTip: boolean }): boolean {
+      return !(col.showBasicCheckbox || col.showCustomizedCheckBox || col.showCustomizedIcon || col.showColumButton || col.showBadge || col.showCustomizedButtonWithToolTip)
     }
   }
 }

package/src/css/app.css

@@ -56,12 +56,9 @@
 .text-color-negative-bold {
   color: var(--negative);
   font-weight: bold;
-  font-size: 30px;
+  font-size: 18px;
 }
 
 .border-bottom-darkGrey{
   border-bottom: 0.7px solid var(--dark-gray);
 }
-
-/* const labelTextColor = 'color: #597765 !important;'
-const labelTextColorBold = 'color: #597765 !important; font-weight: bold;' */

package/src/pages/TablePage.vue

@@ -28,6 +28,8 @@
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
+          @onClickButtonWithToolTip="onClickBadge"
+
         />
       </div>
     </q-page>
@@ -88,7 +90,11 @@ export default {
         label: 'Boolean Icon',
         align: 'left',
         sortable: true,
-        showCustomizedIcon: true
+        showCustomizedIcon: true,
+        customizedIconNameCaseTrue: 'done',
+        customizedIconNameCaseFalse: 'done_all',
+        customizedIconColorCaseTrue: 'yellow',
+        customizedIconColorCaseFalse: 'blue'
       },
       {
         name: 'calories',
@@ -121,7 +127,14 @@ export default {
         field: 'carbs',
         align: 'left',
         sortable: true,
-        format: (val: number) => `${val}`
+        format: (val: number) => `${val}`,
+        showBadge: true,
+        badgeDataCy: 'badgeDataCy',
+        badgeEmit: 'onClickBadge',
+        badgeText: (row: { badgeText: string }) => row.badgeText,
+        badgeColor: (row: { badgeColor: string }) => row.badgeColor,
+        badgeTextColor: 'black',
+        badgeOutline: true
       },
       {
         name: 'checked',
@@ -156,7 +169,14 @@ export default {
         label: 'Sodium (mg)',
         align: 'left',
         field: 'sodium',
-        sortable: true
+        required: true,
+        sortable: true,
+        showCustomizedButtonWithToolTip: true,
+        btnIcon: 'warning',
+        btnEmit: 'onClickButtonWithToolTip',
+        dataCy: 'onClickButtonWithToolTip',
+        btnColor:  (row: { btnColor: string }) => row.btnColor,
+        toolTipText: (row: { toolTipText: string }) => row.toolTipText,
       },
       {
         name: 'calcium',
@@ -354,12 +374,26 @@ export default {
           protein: lista[i].protein,
           sodium: lista[i].sodium,
           calcium: lista[i].calcium,
-          iron: lista[i].iron
+          iron: lista[i].iron,
+          badgeColor: this.getBadgeColor(lista[i].carbs),
+          badgeText: this.getBadgeText(lista[i].carbs),
+          toolTipText: this.getBadgeText(lista[i].carbs),
+          btnColor: this.getBadgeColor(lista[i].carbs)
         })
       }
       setTimeout(() => {
         this.showSkeleton = false
       }, 1000);
+      console.log('rows', this.rows)
+    },
+    getBadgeColor(carbs: number) {
+      return carbs > 50 ? 'negative': 'secondary' 
+    },
+    getBadgeText (carbs: number) {
+      return carbs > 50 ? 'header.hello': 'global.total' 
+    },
+    onClickBadge (rows: object []) {
+      console.log(rows, 'onClickBadge')
     },
     onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')