quasar-factory-lib 0.0.58 → 0.0.60

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "author": ""
 }

package/src/components/AlertWithLabelsError/AlertWithLabelsError.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <q-dialog
+      v-model="alert"
+      persistent
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card style="width: 100%; max-width: 560px; min-width: 250px;" data-cy="errors-details">
+        <q-bar>
+          <q-space />
+          <q-btn dense flat icon="close" @click="onCloseDialogLabelsError" data-cy="close-error-details">
+          </q-btn>
+        </q-bar>
+        <q-card-section class="q-pt-md">
+          <q-list bordered style="width: 100%">
+            <q-item
+              class="border-bottom-darkGrey"
+              v-for="(item, i) in labelsErrors"
+              :key="i"
+              v-bind="item"
+            >
+              <q-item-section top>
+                <q-item-label>
+                  <span class="text-grey-8">
+                    <span
+                      class="text-weight-medium q-pr-xs text-color-almostBlack"
+                      >{{ item.label }}</span
+                    >
+                    <q-icon
+                      v-show="!item.spinner"
+                      :color="
+                        item.icon === 'check_circle'
+                          ? 'green'
+                          : 'red'
+                      "
+                      size="xs"
+                      :name="item.icon" />
+                    <q-spinner-oval data-cy="spinner"
+                      v-show="item.spinner"
+                      color="blue"
+                      size="sm"
+                  /></span>
+                </q-item-label>
+                <q-item-label
+                  class="q-pt-sm "
+                  v-show="item.icon === 'cancel'"
+                  caption
+                >
+                  {{ item.error }}
+                </q-item-label>
+                <q-item-label
+                  class="q-pt-sm q-mt-x"
+                  v-show="item.icon === 'cancel'"
+                >
+                  <span class="float-left">
+                    <q-btn
+                      flat
+                      size="sm"
+                      class="text-blue"
+                      data-cy="retry"
+                      @click="retryReadLabelAxios(item.label)"
+                    >
+                    {{ $t("global.retry") }}
+                    </q-btn>
+                  </span>
+
+                  <span class="float-right">
+                    <q-btn
+                      flat
+                      round
+                      size="sm"
+                      color="secondary"
+                      icon="delete"
+                      data-cy="deleteLabelFromErrorsList"
+                      @click="deleteLabelFromErrorMessage(i)"
+                    />
+                  </span>
+                </q-item-label>
+              </q-item-section>
+
+              <q-separator />
+            </q-item>
+          </q-list>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<style>
+</style>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'AlertWithLabelsError',
+  data () {
+    return {
+      alert: false,
+      labelsErrors: []
+    }
+  },
+  emit: ['retryReadLabelAxios', 'onCloseDialogLabelsError'],
+  methods: {
+    deleteLabelFromErrorMessage (index: number): void {
+      this.labelsErrors.splice(index, 1)
+      if (this.labelsErrors.length === 0) {
+        this.onCloseDialogLabelsError()
+      }
+    },
+    retryReadLabelAxios (label: string): void {
+      this.$emit('retryReadLabelAxios', label)
+    },
+    onCloseDialogLabelsError (): void {
+      this.alert = false
+      this.labelsErrors = []
+      this.$emit('onCloseDialogLabelsError')
+    },
+    setLabelsSpinner (labelCode: string, value: boolean): void {
+      for (let i = 0; i < this.labelsErrors.length; i++) {
+        if (this.labelsErrors[i].label === labelCode) {
+          this.labelsErrors[i].spinner = value
+        }
+      }
+    },
+    setIconCircleCheck (labelCode: string): void {
+      for (let i = 0; i < this.labelsErrors.length; i++) {
+        if (this.labelsErrors[i].label === labelCode) {
+          this.labelsErrors[i].icon = 'check_circle'
+        }
+      }
+    }
+  }
+})
+</script>

package/src/components/AlertWithLabelsError/index.ts

@@ -0,0 +1,18 @@
+import type { App, Plugin } from 'vue'
+
+import AlertWithLabelsError from './AlertWithLabelsError.vue'
+
+import { registerComponent } from '@/utils/plugins'
+
+/** export button specific types */
+// export type * from './types'
+
+/** export button plugin */
+export default {
+  install (app: App) {
+    registerComponent(app, 'AlertWithLabelsError', AlertWithLabelsError)
+  }
+} as Plugin
+
+/** export button components */
+export { AlertWithLabelsError as AlertWithLabelsError }

package/src/components/NavBarSkeleton/NavBarSkeleton.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <q-card style="width: 100%" class="q-mb-sm">
+      <q-item>
+        <q-item-section>
+          <q-item-label>
+            <q-skeleton  size="20px" class="float-right"/>
+            <q-skeleton type="text" width="100px" height="50px" />
+            <q-skeleton type="text" width="250px" />
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-if="!smallDevice">
+        <q-item-section>
+          <q-item-label>
+            <q-skeleton
+            type="QInput"
+            width="200px"
+            height="40px"
+            class="float-left q-mr-md"
+          />
+          <q-skeleton
+            type="QInput"
+            width="200px"
+            height="40px"
+            class="float-left"
+          />
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item  v-if="!smallDevice">
+        <q-item-section>
+          <q-item-label>
+            <q-skeleton
+            type="text"
+            width="30px"
+          />
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-card>
+  </div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'ToolbarSkeleton',
+  props: {
+    smallDevice: {
+      type: Boolean,
+      required: true
+    }
+  }
+}
+</script>

package/src/components/NavBarSkeleton/index.ts

@@ -0,0 +1,19 @@
+import type { App, Plugin } from 'vue'
+
+import NavBarSkeleton from './NavBarSkeleton.vue'
+
+import { registerComponent } from '@/utils/plugins'
+
+/** export button specific types */
+// export type * from './types'
+
+/** export button plugin */
+export default {
+  install (app: App) {
+    registerComponent(app, 'NavBarSkeleton', NavBarSkeleton)
+  }
+} as Plugin
+
+/** export button components */
+export { NavBarSkeleton as NavBarSkeleton }
+

package/src/components/TableRowsCounter/TableRowsCounter.vue

@@ -0,0 +1,33 @@
+<template>
+<div>
+  <q-toolbar class="q-px-none q-py-none">
+  <div v-for="(item, index) in counterJson" :key="index" class="inline q-mr-md">
+    <span :data-cy="item.dataCy"  
+      style="font-size: 20px; padding-right: 5px;"
+      :class="item.extraClasses">{{ item.qty }}</span>
+    <span style="font-size: 12px;">{{ $t(item.title) }}</span>
+  </div>
+</q-toolbar>
+</div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'TableRowsCounter',
+  data() {
+    return {
+
+    }
+  },
+  props: {
+  counterJson: {
+    type: Array,
+    required: true
+  }
+  },
+  methods: {
+  }
+})
+</script>  
+<style>
+</style>

package/src/components/TableRowsCounter/index.ts

@@ -0,0 +1,19 @@
+import type { App, Plugin } from 'vue'
+
+import TableRowsCounter from './TableRowsCounter.vue'
+
+import { registerComponent } from '@/utils/plugins'
+
+/** export button specific types */
+// export type * from './types'
+
+/** export button plugin */
+export default {
+  install (app: App) {
+    registerComponent(app, 'TableRowsCounter', TableRowsCounter)
+  }
+} as Plugin
+
+/** export button components */
+export { TableRowsCounter as TableRowsCounter }
+

package/src/components/TaskNavBar/TaskNavBar.vue

@@ -56,6 +56,8 @@ import { defineComponent } from 'vue'
 import { date } from 'quasar'
 export default defineComponent({
   name: 'TaskNavBar',
+  components: {
+  },
   data() {
     return {
       date,
@@ -79,6 +81,10 @@ export default defineComponent({
     showBtnSearch: {
       type: Boolean,
       default: true
+    },
+    showSkeleton: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['onClickBtnMenu', 'onClickBtnSearch', 'onClickBtnBack'],

package/src/components/index.ts

@@ -2,4 +2,7 @@ export * from './Table'
 export * from './Alert'
 export * from './Confirm'
 export * from './TaskNavBar'
-export * from './ConfirmedTask'
+export * from './ConfirmedTask'
+export * from './TableRowsCounter'
+export * from './NavBarSkeleton'
+export * from './AlertWithLabelsError'

package/src/components/plugins.ts

@@ -3,5 +3,8 @@ import AlertDialog from './Alert'
 import ConfirmDialog from './Confirm'
 import TaskNavBar from './TaskNavBar'
 import ConfirmedTask from './ConfirmedTask'
-export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask }
+import TableRowsCounter from './TableRowsCounter'
+import NavBarSkeleton from './NavBarSkeleton'
+import AlertWithLabelsError from './AlertWithLabelsError'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertWithLabelsError }
 

package/src/css/app.css

@@ -59,5 +59,9 @@
   font-size: 30px;
 }
 
+.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/i18n/en/index.ts

@@ -23,7 +23,8 @@ const en = {
     hello: 'Hello'
   },
   global: {
-    total: 'Total'
+    total: 'Total',
+    retry: 'Retray'
   },
   taskConfirmed: {
     repeatTask: 'Do you want to continue the task?',

package/src/i18n/es/index.ts

@@ -23,7 +23,8 @@ const es = {
     hello: 'Hola'
   },
   global: {
-    total: 'Total'
+    total: 'Total',
+    retry: 'Reintentar'
   },
   taskConfirmed: {
     repeatTask: '¿Quieres continuar la tarea?',

package/src/index.ts

@@ -1,11 +1,11 @@
 import '@quasar/extras/material-icons/material-icons.css'
 import { Quasar } from 'quasar'
 import { App, Plugin } from 'vue'
-import { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask } from './components/plugins.ts'
+import { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertWithLabelsError} from './components/plugins.ts'
 import { registerPlugin, setVueInstance } from './utils/plugins.ts'
 import TranslateKeys from './i18n/translateKeys.ts'
 import { createPinia } from 'pinia'
-export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask } from './components/index.ts'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertWithLabelsError } from './components/index.ts'
 
 export type { TranslateKeys }
 // import plugins from "./components/plugins";
@@ -26,6 +26,9 @@ const plugin: Plugin = {
     registerPlugin(app, ConfirmDialog)
     registerPlugin(app, TaskNavBar)
     registerPlugin(app, ConfirmedTask)
+    registerPlugin(app, TableRowsCounter)
+    registerPlugin(app, NavBarSkeleton)
+    registerPlugin(app, AlertWithLabelsError)
     app.use(i18n)
     app.use(pinia)
     i18n.global.locale = 'en'

package/src/layouts/PdaLayout.vue

@@ -4,6 +4,7 @@
       view="hHh lpR fFf"
     >
       <q-header
+        v-if="!showSkeleton"
         class="bg-light-peach text-black"
       >
         <div class="header-container text-black">
@@ -16,8 +17,22 @@
             @on-click-btn-search="toggleSearchVisibility"
             @on-click-btn-menu="toogleColumnsSelectorVisibility">
           </TaskNavBar>
+          <TableRowsCounter :counterJson="[
+            { qty: 1, title: 'Total',  dataCy: 'datacy', extraClasses: 'class'},
+            { qty: 10, title: 'Total2',  dataCy: 'datacy', extraClasses: 'text-color-positive'},
+            { qty: 30, title: 'Total3',  dataCy: 'datacy', extraClasses: 'text-color-negative-bold'}
+          ]"/>
         </div>
       </q-header>
+      <NavBarSkeleton
+        v-if="showSkeleton"
+        :small-device="smallDevice"
+      />
+      <AlertLabelsWithError
+        ref="AlertLabelsWithError"
+        @retry-read-label-axios="retryReadLabel"
+        @on-close-dialog-labels-error="onCloseDialogLabelsError"
+      />
       <q-page-container>
         <q-page>
         <Table
@@ -45,11 +60,11 @@
             <q-btn class="full-width" color="accent" icon="arrow_forward" />
           </q-page-sticky>
         </q-page>
-        <SideBar
+        <!-- <SideBar
           ref="sideBar"
           @toggle-right-drawer="toggleRightDrawer"
           @onclick-show-select-visible-columns="toogleColumnsSelectorVisibility"
-          :buttonsList="buttonsList" />
+          :buttonsList="buttonsList" /> -->
       </q-page-container>
   </q-layout>
   </div>
@@ -59,15 +74,21 @@
 <script lang="ts">
 import TaskNavBar from '../components/TaskNavBar/TaskNavBar.vue'
 import Table from '../components/Table/Table.vue'
-import SideBar from '../components/TaskNavBar/SideBar.vue'
+// import SideBar from '../components/TaskNavBar/SideBar.vue'
+import NavBarSkeleton from '../components/NavBarSkeleton/NavBarSkeleton.vue'
+import TableRowsCounter from'../components/TableRowsCounter/TableRowsCounter.vue'
+import AlertLabelsWithError from '../components/AlertWithLabelsError/AlertWithLabelsError.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
 import infiniteScroll from '../components/Table/utils/infiniteScroll'
 import { tableStore } from '../store/table.js'
 export default {
   components: {
     TaskNavBar,
-    SideBar,
-    Table
+    // SideBar,
+    Table,
+    TableRowsCounter,
+    AlertLabelsWithError,
+    NavBarSkeleton
   },
   data () {
     return {
@@ -356,6 +377,19 @@ export default {
     this.showSkeleton = true
     this.store.cleanTableFilter()
     this.getRows()
+    this.$refs.AlertLabelsWithError.alert = true
+    this.$refs.AlertLabelsWithError.labelsErrors.push({
+            label: '558877',
+            error: 'The Bin does not exist. Identification fields and values',
+            icon: 'cancel',
+            spinner: false
+          },
+          {
+            label: '558871',
+            error: 'The Bin does not exist. Identification fields and values',
+            icon: 'cancel',
+            spinner: false
+          })
   },
   methods: {
     getRows () {
@@ -386,6 +420,17 @@ export default {
     },
     onClickBtnMenu () {
       this.toggleRightDrawer()
+    },
+    retryReadLabel () {
+      console.log('retryReadLabel')
+    },
+    onCloseDialogLabelsError () {
+      console.log('onCloseDialogLabelsError')
+    },
+    getX () {
+      // this.$refs.AlertLabelsWithError.setLabelsSpinner(labelCode, true)
+
+      // this.$refs.AlertLabelsWithError.setIconCircleCheck(labelCode)
     }
   }
 }

package/src/pages/NavBarPage.vue

@@ -10,7 +10,8 @@
       <q-header class="bg-main-color text-black">
         <TaskNavBar
         :logo="'src/assets/vue.svg'"
-        :title="'Testing new navbar'">
+        :title="'Testing new navbar'"
+        :showSkeleton="showSkeleton">
       </TaskNavBar>
       </q-header>
       </div>
@@ -27,13 +28,16 @@ export default {
   },
   data () {
     return {
-      rightDrawerOpen: false
+      rightDrawerOpen: false,
+      showSkeleton: true
     }
   },
   computed: {
   },
   mounted () {
-   
+  //  setTimeout(() => {
+  //   this.showSkeleton = false
+  //  }, 1000)
   },
   methods: {
   }