quasar-factory-lib 0.0.53 → 0.0.55

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "author": ""
 }

package/src/assets/icons/Checked.svg

@@ -0,0 +1,9 @@
+<svg id="Componente_29_9" data-name="Componente 29 – 9" xmlns="http://www.w3.org/2000/svg" width="73" height="73" viewBox="0 0 73 73">
+  <g id="Grupo_14291" data-name="Grupo 14291" transform="translate(-661.596 -408.577)">
+    <path id="Caminho_15" data-name="Caminho 15" d="M5209,452.784l12.253,14.074,27.947-32.514" transform="translate(-4531.001 -4.523)" fill="none" stroke="#597765" stroke-width="1.5"/>
+  </g>
+  <g id="Elipse_21" data-name="Elipse 21" fill="none" stroke="#597765" stroke-width="1.5">
+    <circle cx="36.5" cy="36.5" r="36.5" stroke="none"/>
+    <circle cx="36.5" cy="36.5" r="35.75" fill="none"/>
+  </g>
+</svg>

package/src/components/ConfirmedTask/ConfirmedTask.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="">
+    <q-dialog
+      data-cy="task-confirmed-successfully"
+      v-model="alert"
+      persistent
+      :maximized="true"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card :class="values.class">
+        <q-card-section class="q-pa-none full-width flex justify-center items-center" style="height: calc(100vh - 100px);">
+          <div style="text-align: center;">
+            <div  class="q-mb-md">
+              <img src="src/assets/icons/Checked.svg">
+            </div>
+          <div class="counter">
+            <span class="text-color-positive">{{ values.selected }}</span>
+            <span class="text-color-almostBlack">/{{ values.total }}</span>
+          </div>
+          <div class="msg-text">
+            <div class="q-mb-md">{{values.message}}</div>
+            <div>{{$t('taskConfirmed.repeatTask')}}</div>
+          </div>
+
+        </div>
+        </q-card-section>
+        <q-card-actions class="fixed-bottom">
+          <q-btn
+            data-cy="repeat-task"
+            no-caps
+            square
+            unelevated
+            @click="repeatTask"
+            class="full-width  bg-almostBlack text-color-offWhite q-mb-sm"
+          >{{ $t('taskConfirmed.repeat')  }}</q-btn>
+          <q-btn
+          data-cy="end-task"
+          no-caps
+          square
+          unelevated
+          @click="endTask"
+          class="full-width text-color-almostBlack">{{$t('taskConfirmed.finish')}}</q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<style scoped>
+.counter{
+  font-size: 60px;
+  text-align: center;
+}
+
+.msg-text{
+  font-size: 20px;
+  text-align: center;
+  margin: auto;
+}
+.q-btn {
+  font-size: 20px;
+}
+.q-btn:nth-child(2) {
+  border: 1px solid #212427;
+}
+img {
+    width: 70px;
+  }
+
+@media only screen and (max-width: 700px) {
+  .counter{
+    font-size: 40px;
+  }
+
+  .msg-text{
+    font-size: 15px;
+    text-align: center;
+    margin: auto;
+  }
+
+  img {
+    width: 50px;
+  }
+  .q-btn {
+  font-size: 15px;
+}
+}
+</style>
+
+<script>
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  data () {
+    return {
+      alert: false
+    }
+  },
+  props: {
+    values: {
+      type: Object,
+      required: true,
+      default: {
+        selected: 0,
+        total: 0,
+        message: '',
+        class:''
+      }
+    }
+  },
+  emits: ['repeatTask', 'endTask'],
+  methods: {
+    repeatTask () {
+      this.$emit('repeatTask')
+    },
+    endTask () {
+      this.$emit('endTask')
+    }
+  },
+  mounted () {}
+})
+</script>

package/src/components/ConfirmedTask/index.ts

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

package/src/components/Table/components/TableFilter.vue

@@ -1,6 +1,7 @@
 <template>
   <q-input
     ref="filterRef"
+    data-cy="input-filter"
     v-model="localStore.filterValue"
     borderless
     dense

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    :id="'card-container-' + tablePropsData.row.id"
     :class="'q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition'"
     :style="tablePropsData.selected ? 'transform: scale(0.95);' : ''"
   >
@@ -17,6 +18,7 @@
     >
       <q-card-section>
         <q-checkbox
+          :data-cy="'checkbox-' + tablePropsData.row.id"
           v-if="selectionType != 'none'"
           v-model="tablePropsData.selected"
           dense
@@ -41,6 +43,7 @@
               class="itemsFontSize text-color-almostBlack"
               :class="getCellClass(tablePropsData.row, col)"
             >
+              <span v-html="tablePropsData.row[col.name]" />
               <q-icon
                 v-if="col.editable"
                 name="edit"
@@ -48,7 +51,6 @@
                 size="sm"
                 class="cursor-pointer"
               />
-              <span v-html="tablePropsData.row[col.name]" />
               <PopupEditNumber
                 v-if="col.editable && col.popupEditInputtype === 'number'"
                 :model="tablePropsData.row[col.name] || ''"
@@ -190,7 +192,4 @@ export default {
 }
 </script>
 <style>
-/* .q-btn {
-  padding: unset;
-} */
 </style>

package/src/components/TaskNavBar/SideBar.vue

@@ -0,0 +1,3 @@
+<template>
+  sideBar
+</template>

package/src/components/TaskNavBar/TaskNavBar.vue

@@ -6,7 +6,7 @@
           <img :src="logo" class="logo">
           <span id="mobile-title">{{ title }}</span>
         </div>
-        <div class="col-5 text-right">
+        <div class="col-5 text-right" data-cy="back">
             <q-icon v-if="showBtnBack" size="md" class="cursor-pointer" @click="onClickBtnBack">
               <svg class="text-h4" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                 viewBox="0 0 23.648 22.836">
@@ -23,9 +23,10 @@
               :name="showIconSearch ?'search' : 'search_off'" 
               size="md" 
               class="q-ml-md cursor-pointer"
+              data-cy="search"
               @click="onClickBtnSearch">
             </q-icon>
-            <q-icon id="iconMenu" size="md" @click="onClickBtnMenu" class="q-ml-md cursor-pointer">
+            <q-icon id="iconMenu" size="md" @click="onClickBtnMenu" class="q-ml-md cursor-pointer" data-cy="menu">
               <svg xmlns="http://www.w3.org/2000/svg" width="30.448" height="28.247" viewBox="0 0 30.448 28.247">
                 <g id="Componente_11_3" data-name="Componente 11 – 3" transform="translate(0 1)">
                   <path id="Caminho_702" data-name="Caminho 702" d="M38.053,40.174H24"

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './Table'
 export * from './Alert'
 export * from './Confirm'
-export * from './TaskNavBar'
+export * from './TaskNavBar'
+export * from './ConfirmedTask'

package/src/components/plugins.ts

@@ -2,5 +2,6 @@ import MyTable from './Table'
 import AlertDialog from './Alert'
 import ConfirmDialog from './Confirm'
 import TaskNavBar from './TaskNavBar'
-export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar }
+import ConfirmedTask from './ConfirmedTask'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask }
 

package/src/css/app.css

@@ -37,10 +37,16 @@
 .text-color-almostBlack {
   color: var(--almost-black);
 }
+.bg-almostBlack {
+  background-color: var(--almost-black);
+}
 .q-toolbar-unset-height .q-toolbar {
   min-height: unset;
   padding: 0;
 }
+.text-color-offWhite {
+  color: var(--light-beige)
+}
 
 .text-color-positive {
   color: var(--positive);

package/src/i18n/en/index.ts

@@ -24,6 +24,36 @@ const en = {
   },
   global: {
     total: 'Total'
-  }
+  },
+  taskConfirmed: {
+    repeatTask: 'Do you want to continue the task?',
+    repeat: 'Yes, continue!',
+    finish: 'Finish'
+  },
+  menu: {
+    logout: 'Logout',
+    home: 'Home',
+    areas: 'Areas',
+    filters: 'Filters',
+    seeOnlyChecked: 'See only checked',
+    seeManufacturing: 'See manufacturing',
+    seeSubcontractor: 'See subcontractor',
+    confirmRelocation: 'Confirm Relocation',
+    deleteAll: 'Delete All',
+    activateLoading: 'Activate Loading',
+    showExpeditionLines: 'Show Expedition Lines',
+    showOrderLines: 'Show Order Lines',
+    endTransaction: 'End Transaction',
+    translate: 'Translate',
+    labelSelectLanguage: 'Language',
+    selectLanguageLabelOptions: ['Spanish', 'English'],
+    deleteSelectedLine: 'Delete Erroneous Label(s)',
+    seeMap: 'See Map',
+    recordReceiptPurchase: 'Record Receipt',
+    addContainerNumber: 'Add Container Number',
+    showColumnsSelector: 'Show columns selector',
+    hideColumnsSelector: 'Hide columns selector',
+    sorting: 'Sorting'
+  },
 }
 export default en

package/src/i18n/es/index.ts

@@ -24,6 +24,36 @@ const es = {
   },
   global: {
     total: 'Total'
-  }
+  },
+  taskConfirmed: {
+    repeatTask: '¿Quieres continuar la tarea?',
+    repeat: 'Sí, continuar!',
+    finish: 'Finalizar'
+  },
+  menu: {
+    logout: 'Desconectar',
+    home: 'Inicio',
+    areas: 'Areas',
+    filters: 'Filtros',
+    seeOnlyChecked: 'Ver solo comprobadas',
+    seeManufacturing: 'Ver fabricación',
+    seeSubcontractor: 'Ver subcontrata',
+    confirmRelocation: 'Confirmar Reubicación',
+    deleteAll: 'Anular todos',
+    activateLoading: 'Activar Carga',
+    showExpeditionLines: 'Mostrar Líneas Expedición',
+    showOrderLines: 'Mostrar Líneas Pedidos',
+    endTransaction: 'Finalizar Operación',
+    translate: 'Traducir',
+    labelSelectLanguage: 'Idioma',
+    selectLanguageLabelOptions: ['Castellano', 'Inglés'],
+    deleteSelectedLine: 'Eliminar Etiquetas(s) Errónea(s)',
+    seeMap: 'Ver Plano',
+    recordReceiptPurchase: 'Registrar Recepción',
+    addContainerNumber: 'Añadir Nº Contenedor',
+    showColumnsSelector: 'Mostrar selector de columnas',
+    hideColumnsSelector: 'Hide selector de columnas',
+    sorting: 'Ordenar'
+  },
 }
 export default es

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 } from './components/plugins.ts'
+import { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask } 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 } from './components/index.ts'
+export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask } from './components/index.ts'
 
 export type { TranslateKeys }
 // import plugins from "./components/plugins";
@@ -25,6 +25,7 @@ const plugin: Plugin = {
     registerPlugin(app, AlertDialog)
     registerPlugin(app, ConfirmDialog)
     registerPlugin(app, TaskNavBar)
+    registerPlugin(app, ConfirmedTask)
     app.use(i18n)
     app.use(pinia)
     i18n.global.locale = 'en'

package/src/layouts/MenuLayout.vue

@@ -18,6 +18,12 @@
         router.push('confirmPage')
       }"
     />
+    <q-btn
+      label="confirmedTask"
+      @click="() => {
+        router.push('confirmedTask')
+      }"
+    />
     <q-btn
       label="navbar"
       @click="() => {
@@ -30,6 +36,12 @@
         router.push('pdaLayout')
       }"
     />
+    <q-btn
+      label="sideBarPage"
+      @click="() => {
+        router.push('sideBarPage')
+      }"
+    />
   </div>
 </template>
 <script setup lang="ts">

package/src/layouts/PdaLayout.vue

@@ -12,6 +12,7 @@
             :title="'Pda'"
             :show-btn-back="false"
             :show-btn-search="true"
+            @onClickBtnMenu="onClickBtnMenu"
             @on-click-btn-search="toggleSearchVisibility"
             @on-click-btn-menu="toogleColumnsSelectorVisibility">
           </TaskNavBar>
@@ -23,22 +24,32 @@
           ref="table"
           :rows="rows"
           :columns="columns"
-          :visible-columns="visibleColumns"
+          :visible-columns="store.visiblecolumns"
           :small-device="smallDevice"
           :store="store"
           :table-style="tableStyle"
           :show-skeleton="showSkeleton"
           :selection-type="'multiple'"
-          :filter-method="filterMethod"
-          @on-select-visible-columns="saveSelectedColumns"
+          @on-select-visible-columns="(columns) => {
+            store.visiblecolumns = columns
+          }"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
         />
-          <q-page-sticky position="bottom" v-if="smallDevice">
-            <q-btn color="accent" icon="arrow_forward" stretch />
+          <q-page-sticky
+            v-if="smallDevice"
+            position="bottom"
+            expand
+          >
+            <q-btn class="full-width" color="accent" icon="arrow_forward" />
           </q-page-sticky>
         </q-page>
+        <SideBar
+          ref="sideBar"
+          @toggle-right-drawer="toggleRightDrawer"
+          @onclick-show-select-visible-columns="toogleColumnsSelectorVisibility"
+          :buttonsList="buttonsList" />
       </q-page-container>
   </q-layout>
   </div>
@@ -46,21 +57,22 @@
 <style>
 </style>
 <script lang="ts">
- import TaskNavBar from '../components/TaskNavBar/TaskNavBar.vue'
- import Table from '../components/Table/Table.vue'
+import TaskNavBar from '../components/TaskNavBar/TaskNavBar.vue'
+import Table from '../components/Table/Table.vue'
+import SideBar from '../components/TaskNavBar/SideBar.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
 import infiniteScroll from '../components/Table/utils/infiniteScroll'
-import FilterMethod from '../components/Table/utils/filterMethod'
 import { tableStore } from '../store/table.js'
 export default {
   components: {
     TaskNavBar,
+    SideBar,
     Table
   },
   data () {
     return {
-      smallDevice: false,
       showDialog: false,
+      tabletMaxWidth: 1100,
       store: tableStore(),
       tableStyle: '',
       columns: [{
@@ -147,12 +159,12 @@ export default {
         field: 'protein',
         sortable: true,
         required: true,
-        // editable: true,
-        // showEditIcon: true,
-        // popupEditEmit: 'onSaveValuePopupEdit',
-        // popupEditInputtype: 'text',
-        // popupEditDataCy: '',
-        // showInputPopupEdit: true
+        editable: true,
+        showEditIcon: true,
+        popupEditEmit: 'onSaveValuePopupEdit',
+        popupEditInputtype: 'text',
+        popupEditDataCy: '',
+        showInputPopupEdit: true
       },
       {
         name: 'sodium',
@@ -315,33 +327,42 @@ export default {
           iron: '6%'
         }
       ],
-      visibleColumns: [],
-      showSkeleton: false
+      showSkeleton: false,
+      buttonsList: []
+    }
+  },
+  computed: {
+    smallDevice (): boolean {
+      return this.$q.screen.width <= this.tabletMaxWidth
+    }
+  },
+  watch: {
+    '$q.screen.width' (): void {
+      setTimeout(() => {
+        this.tableStyle = setTableHeight.setTableHeight()
+        infiniteScroll.handleInfiniteScrollNewTable(this)
+      }, 500)
+    },
+    showSkeleton (val: boolean) {
+      if (!val) {
+        setTimeout(() => {
+          this.tableStyle = setTableHeight.setTableHeight()
+          infiniteScroll.handleInfiniteScrollNewTable(this)
+        }, 500)
+      }
     }
   },
   mounted () {
     this.showSkeleton = true
     this.store.cleanTableFilter()
-    this.tableStyle = setTableHeight.setTableHeight()
-    infiniteScroll.handleInfiniteScrollNewTable(this)
     this.getRows()
   },
   methods: {
     getRows () {
       setTimeout(()=> {
       this.showSkeleton = false
-
-      // this.visibleColumns = this.store.visiblecolumns
+      this.rows = this.rowsData
     }, 1000)
-    this.rows = this.rowsData
-    this.visibleColumns = this.store.visiblecolumns
-    },
-    saveSelectedColumns (columns: string []): void {
-      this.store.visiblecolumns = columns
-      this.visibleColumns = columns
-    },
-    filterMethod (rows: string | [], terms: { search: string }): object[] | [] {
-      return FilterMethod.filter(this, rows, terms)
     },
     onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')
@@ -357,10 +378,14 @@ export default {
       this.$refs.table.filterInputFocus()
     },
     toggleRightDrawer (): void {
+      this.$refs.sideBar.toggleRightDrawer()
     },
     toogleColumnsSelectorVisibility () {
-      // this.$refs.sideBar.setRightDrawerOpenToFalse()
+      this.$refs.sideBar.setRightDrawerOpenToFalse()
       this.$refs.table.toogleColumnsSelectorVisibility()
+    },
+    onClickBtnMenu () {
+      this.toggleRightDrawer()
     }
   }
 }

package/src/pages/ConfirmPage.vue

@@ -9,6 +9,7 @@
       >
       <ConfirmDialog
           ref="ConfirmRef"
+          dataCy="confirm-dialog"
           @onClickBtnConfirm="onClickBtnConfirm"
           @onClickBtnCancel="onClickBtnCancel"
         />

package/src/pages/ConfirmedTaskPage.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-page-container class=" full-width column justify-center">
+    <q-page
+      class="full-width column justify-center align-center items-center"
+      style="height: 70vh;"
+    >
+      <div
+        class="full-width"
+      >
+      <ConfirmedTask 
+        ref="ConfirmedTask"
+        :values="{
+        selected: 5,
+        total: 10,
+        message: 'Message',
+        class:'bg-light-peach'
+        }"
+        @repeat-task="repeatTask"
+        @end-task="endTask"  
+      />
+      </div>
+    </q-page>
+  </q-page-container>
+</template>
+<script lang="ts">
+import ConfirmedTask from '../components/ConfirmedTask/ConfirmedTask.vue'
+export default {
+  components: {
+    ConfirmedTask
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+  },
+  mounted () {
+    this.$refs.ConfirmedTask.alert = true
+  },
+  methods: {
+    repeatTask () {
+      console.log('repeatTask')
+    },
+    endTask () {
+      console.log('endTask')
+    }
+  }
+}
+</script>

package/src/pages/SideBarPage.vue

@@ -0,0 +1,33 @@
+<template>
+  <q-page-container class=" full-width column justify-center">
+    <q-page
+      class="full-width column justify-center align-center items-center"
+      style="height: 70vh;"
+    >
+      <div
+        class="full-width"
+      >
+      <SideBar/>
+      </div>
+    </q-page>
+  </q-page-container>
+</template>
+<script lang="ts">
+ import SideBar from '../components/TaskNavBar/SideBar.vue'
+export default {
+  components: {
+    SideBar
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>

package/src/pages/TablePage.vue

@@ -22,7 +22,9 @@
           :filterComputedOptions="{ preparedQuantity: store.prepared}"
           :additional-sort-conditions="additionalSortConditions"
           :additional-filter-conditions="additionalFilterConditions"
-          @on-select-visible-columns="saveSelectedColumns"
+          @on-select-visible-columns="(columns) => {
+            store.visiblecolumns = columns
+          }"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
@@ -359,9 +361,6 @@ export default {
         this.showSkeleton = false
       }, 1000);
     },
-    saveSelectedColumns (columns: string []): void {
-      this.store.visiblecolumns = columns
-    },
     onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')
     },