quasar-factory-lib 0.0.54 → 0.0.56

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "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,88 @@
+<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="imgSrc">
+            </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>
+<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:''
+      }
+    },
+    imgSrc: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['repeatTask', 'endTask'],
+  methods: {
+    repeatTask () {
+      this.$emit('repeatTask')
+    },
+    endTask () {
+      this.$emit('endTask')
+    }
+  },
+  mounted () {}
+})
+</script>
+
+<style scoped>
+@import url('./css/style.css');
+</style>

package/src/components/ConfirmedTask/css/style.css

@@ -0,0 +1,38 @@
+.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;
+  }
+}

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/TaskNavBar/SideBar.vue

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

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>
@@ -36,10 +37,19 @@
           @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>
@@ -47,20 +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 { tableStore } from '../store/table.js'
 export default {
   components: {
     TaskNavBar,
+    SideBar,
     Table
   },
   data () {
     return {
-      smallDevice: true,
       showDialog: false,
+      tabletMaxWidth: 1100,
       store: tableStore(),
       tableStyle: '',
       columns: [{
@@ -315,22 +327,42 @@ export default {
           iron: '6%'
         }
       ],
-      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.rows = this.rowsData
     }, 1000)
-    this.rows = this.rowsData
     },
     onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')
@@ -346,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/ConfirmedTaskPage.vue

@@ -0,0 +1,51 @@
+<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'
+        }"
+        :imgSrc="'src/assets/icons/Checked.svg'"
+        @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/router/routes.ts

@@ -20,6 +20,14 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/navBarPage',
     component: () => import('../pages/NavBarPage.vue')
+  },,
+  {
+    path: '/confirmedTask',
+    component: () => import('../pages/ConfirmedTaskPage.vue')
+  },
+  {
+    path: '/sideBarPage',
+    component: () => import('../pages/SideBarPage.vue')
   },
   {
     path: '/pdaLayout',

package/src/store/table.js

@@ -7,6 +7,7 @@ export const tableStore = defineStore('tableStore', {
     lastFilterValue: useStorage('lastFilterValue', ''),
     visiblecolumns: useStorage('visiblecolumns', []),
     prepared: useStorage('prepared', false),
+    user: useStorage('user', {})
   }),
   getters: {
   },