barcode-frontend-backend-docker/docker-front/front/src/pages/SaveProduct.vue

<template>
  <div style="margin: 30px">
    <q-field :error="Boolean(error.product_type)"
            :error-label="error.product_type"
            :label="texts.save_product_type">
      <div v-if="product_type_selected" class="row">
        <span v-if="product_type==''"> {{ texts.save_no_product_selected }}</span>
        <span v-else>{{ product_type }}</span>
        <q-btn @click="product_type_selected=false" class="bg-primary">
          {{ texts.save_change }}
        </q-btn>
      </div>
      <div v-else>
      <q-field  :label="texts.save_filter_by">
       <q-input label="Name" v-model="product_type_filter"/>
      </q-field>
      <q-tree
        :nodes="product_types"
        node-key="name"
        color="red"
        accordion
        default-expand-all
        :filter="product_type_filter"
        :selected.sync="selected_product_type"
      >
        <div slot="default-header" slot-scope="prop" class="row item-center">
          <div class="text-weight-bold text-primary"@click="product_type_clicked(prop.node)">
            {{ prop.node.label }}
          </div>
        </div>
      </q-tree>
    </div>
    </q-field>
    <q-field 
        :error="Boolean(error.name)"
        :error-label="error.name"
        :label="texts.save_name">
      <q-input label="Name" v-model="product_data.name"/>
    </q-field>
    <q-field :label="texts.save_is_generic">
      <q-toggle type="boolean" v-model="product_data.is_generic"/>
    </q-field>
    <q-field :label="texts.save_weight">
      <q-slider :min="0" :max="1000"
        v-model="product_data.weight" label square
        label-always/>
      <q-select :options="weight_units" v-model="product_data.weight_unit"/>
    </q-field>
    <q-field
      :error="Boolean(error.description)"
      :error-label="error.description"
      :label="texts.save_description">
      <q-input v-model="product_data.description"/>
    </q-field>
    <q-field :label="texts.save_packaging_materials">
      <div>
        <span v-if="packaging_materials.length==0"> {{ texts.save_no_packaging_selected }} </span>
        <span v-else>
          <q-list striped>
            <q-item v-for="packaging_material,index in packaging_materials">
              <q-item-main>
              <q-item-tile>
              {{packaging_material.label}}
              </q-item-tile>
              <q-item-tile>
      <q-field :label="texts.save_weight">
      <q-slider :min="0" :max="1000"
        v-model="packaging_material.weight" label square
        label-always/>
      <q-select :options="weight_units" v-model="packaging_material.weight_unit"/>
    </q-field>
    </q-item-tile>
      </q-item-main>
      <q-item-side>
        <q-btn
        @click="remove_packaging_material(packaging_material)">{{texts.save_remove}}</q-btn>
      </q-item-side>
    </q-item>
          </q-list>
        </span>
        <q-btn @click="packaging_selected=false" class="bg-primary">
          {{ texts.save_add }}
        </q-btn>
      </div>
      <div v-if="!packaging_selected">
      <q-field :label="texts.save_filter_by">
       <q-input label="Name" v-model="packaging_material_filter"/>
      </q-field>
      <q-tree
        :nodes="packagings"
        :filter="packaging_material_filter"
        default-expand-all
        node-key="id"
        color="red"
        accordion
        :selected.sync="selected_packaging"
      >
        <div slot="default-header" slot-scope="prop" class="row item-center">
          <div class="text-weight-bold text-primary"@click="packaging_clicked(prop.node)">
            {{ prop.node.label }}
          </div>
        </div>
      </q-tree>
      </div>
    </q-field>
    <div class="flexrow">
       <q-btn :loading="save_loading" @click="save()">{{texts.save_save}}</q-btn>
    </div>
  </div>
</template>

<script>
var api = require('../api.js')
var utils = require('../utils.js')
import {
  QCard,
  QLayout,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QListHeader,
  QItem,
  QItemSide,
  QItemMain,
  QItemTile,
  QSlider,
  QInput,
  QField,
  QToggle,
  QTree,
  QSelect,
  Notify
} from 'quasar'

export default {
  name: 'index',
  components: {
    QCard,
    QLayout,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QListHeader,
    QItem,
    QItemSide,
    QItemTile,
    QItemMain,
    QSlider,
    QInput,
    QField,
    QToggle,
    QTree,
    QSelect
  },
  data () {
    return {
      products: [
        {name: 'hello'}
      ],
      weight_units: [],
      length_units: [],
      data: [],
      selected_product_type: null,
      api: api,
      current_hier_index: 1,
      disable_save: true,
      product_type: '',
      product_type_selected: true,
      packaging_material_filter: '',
      packaging: '',
      packagings: [],
      packaging_materials: [],
      selected_packaging: null,
      packaging_selected: true,
      packaging: [],
      product_type_filter: '',
      product_types: [{
        name: 'hi',
        children: []
      }],
      save_loading: false,
      product_data: {
        weight_unit: 2,
        weight: 110,
        description: '',
        product_type: 0,
        name: '',
        length: 0,
        width: 0,
        height: 0,
        EAN_code: 0,
        is_generic: false
      },
      texts: {},
      error: {}
    }
  },
  methods: {
    packaging_clicked: function (node) {
      if(node.id === 1 || node.id === 2){
        return false
      }
      this.product_data.packaging_material = node.id
      this.packaging = node.label
      this.packaging_selected = true
      if (this.packaging_materials.indexOf(node)==-1) {
        node.weight = 0
        node.weight_unit = this.product_data.weight_unit
        this.packaging_materials.push(node)
      }
      else {
      }
    },
    remove_packaging_material: function (node) {
      this.packaging_materials.pop(node)
    },
    product_type_clicked: function (node) {
      if(node.id !== 1){
        this.product_data.product_type = node.id
        this.product_type = node.label
        this.product_type_selected = true
      }
    },
    save_product: function () {
      var self = this
      self.save_loading = true
      return new Promise((resolve, reject) => {
        [{name: 'name', default:'none'}, {name: 'description', default:
        'none'}, {name: 'product_type', default: 1}].forEach(data => {
          console.log(data)
          if (!window.Boolean(self.product_data[data.name])) {
            self.product_data[data.name] = data.default
            console.log(data.name)
          }
        })
        api.create('scanapp/{LANG}/products/', this.product_data)
          .then((data) => {
            self.packaging_materials.forEach(packaging_materialsq => {
              var bom_data = {product: data.data.id}
              bom_data.product_type = packaging_materialsq.id
              bom_data.weight = packaging_materialsq.weight
              api.create('scanapp/{LANG}/bom/', bom_data)
            })
           var n = 0
            window.images.forEach((image) => {
              api.uploadImage(data.data.id, data.data.name + n, image)
                .then(data => {
                  n += 1
                  if (window.images.length === n) {
                    Notify.create(self.texts.save_notify_saved)
                    resolve(data)
                  }
                })
            })
          })
          .catch(err => {
            self.save_loading = false
            if (err.response.status == 400) {
              var error = err.response.data
              for(var field in error) {
                if(error[field]){
                  self.error[field] = error[field][0]
                }
              }
            }
          })
      })
    },
    save: function () {
      this.save_product().then(() => { this.$router.push('/') })
    },
    save_and_continue: function () {
      this.save_product().then(() => { this.$router.push('new') })
    }
  },
  mounted () {
    window.me = this
    var self = this
    var index = 1
    utils.setTexts(this)
    self.product_data.EAN_code = window.sessionStorage.getItem('barcode_id')
    db.getData('scanapp/{LANG}/product_hier/2/.detail').then(function (data) {
        self.packagings = []
        self.packagings.push(data)
    })
    db.getData('scanapp/{LANG}/product_hier/1/.detail')
      .then(data => {
        self.product_types = []
        self.product_types.push(data)
      })
     db.getData('language/{LANG}/weight/.list').then(data => {
        self.weight_units = []
        data.forEach(unit => {
          unit.label = unit.name
          unit.value = unit.id
          self.weight_units.push(unit)
        })
        self.product_data.weight_unit = data[0].id
      })
      db.getData('language/{LANG}/length/.list').then(data => {
        self.length_units = []
        data.forEach(unit => {
          unit.label = unit.name
          unit.value = unit.name
          self.length_units.push(unit)
        })
        self.product_data.length_unit = data[0].name
      })
 
  },
  beforeDestroy () {
  },
}
</script>

<style lang="stylus" scoped>
@import '~variables'
.div
  display: flex
  flex-direction: column
  align-items: left
.flexrow
  flex-direction: row
.primary
  background-color: $blue
</style>