quasar-factory-lib 0.0.59 → 0.0.60

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.59",
+  "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/index.ts

@@ -4,4 +4,5 @@ export * from './Confirm'
 export * from './TaskNavBar'
 export * from './ConfirmedTask'
 export * from './TableRowsCounter'
-export * from './NavBarSkeleton'
+export * from './NavBarSkeleton'
+export * from './AlertWithLabelsError'

package/src/components/plugins.ts

@@ -5,5 +5,6 @@ import TaskNavBar from './TaskNavBar'
 import ConfirmedTask from './ConfirmedTask'
 import TableRowsCounter from './TableRowsCounter'
 import NavBarSkeleton from './NavBarSkeleton'
-export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, 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, TableRowsCounter, NavBarSkeleton} 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, TableRowsCounter, NavBarSkeleton } 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";
@@ -28,6 +28,7 @@ const plugin: Plugin = {
     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">
@@ -23,6 +24,15 @@
           ]"/>
         </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
@@ -50,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>
@@ -64,17 +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,
+    // SideBar,
     Table,
-    TableRowsCounter
+    TableRowsCounter,
+    AlertLabelsWithError,
+    NavBarSkeleton
   },
   data () {
     return {
@@ -363,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 () {
@@ -393,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)
     }
   }
 }