quasar-factory-lib 0.0.63 → 0.0.64

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.63",
+  "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)
     },

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/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

@@ -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/layouts/MenuLayout.vue

@@ -2,7 +2,6 @@
   <div class="column full-height justify-center">
     <q-btn
       label="Table"
-      data-cy="table"
       @click="() => {
         router.push('tablePage')
       }"

package/src/layouts/PdaLayout.vue

@@ -55,7 +55,7 @@
             position="bottom"
             expand
           >
-            <q-btn class="full-width" color="black" icon="arrow_forward" />
+            <q-btn class="full-width" color="accent" icon="arrow_forward" />
           </q-page-sticky>
         </q-page>
       </q-page-container>

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')