init crater

resources/assets/js/views/components/ImageBox.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="imgbox">
+    <vue-dropzone
+      id="dropzone"
+      ref="myVueDropzone"
+      :include-styling="true"
+      :options="dropzoneOptions"
+      @vdropzone-sending="sendingEvent"
+      @vdropzone-success="successEvent"
+      @vdropzone-max-files-exceeded="maximum"
+      @vdropzone-file-added="getCustomeFile"
+      @vdropzone-removed-file="removeFile"
+    />
+  </div>
+</template>
+<script>
+import vue2Dropzone from 'vue2-dropzone'
+import 'vue2-dropzone/dist/vue2Dropzone.min.css'
+export default {
+  components: {
+    vueDropzone: vue2Dropzone
+  },
+  props: {
+    additionaldata: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    url: {
+      type: String,
+      default () {
+        return ''
+      }
+    },
+    router: {
+      type: Object,
+      default: null
+    },
+    paramname: {
+      type: String,
+      default () {
+        return ''
+      }
+    },
+    acceptedfiles: {
+      type: String,
+      default () {
+        return ''
+      }
+    },
+    dictdefaultmessage: {
+      type: String,
+      default () {
+        return ''
+      }
+    },
+    autoprocessqueue: {
+      type: Boolean,
+      default: true
+    },
+    method: {
+      type: String,
+      default: 'POST'
+    }
+  },
+  data () {
+    return {
+      dropzoneOptions: {
+        autoProcessQueue: this.autoprocessqueue,
+        url: this.url,
+        thumbnailWidth: 110,
+        maxFiles: 1,
+        paramName: this.paramname,
+        acceptedFiles: this.acceptedfiles,
+        uploadMultiple: false,
+        dictDefaultMessage: '<font-awesome-icon icon="trash"/> ' + this.dictdefaultmessage,
+        dictInvalidFileType: 'This file type is not supported.',
+        dictFileTooBig: 'File size too Big',
+        addRemoveLinks: true,
+        method: this.method,
+        headers: { 'Authorization': `Bearer ${window.Ls.get('auth.token')}`, 'Company': `${window.Ls.get('selectedCompany')}` }
+      }
+    }
+  },
+  watch: {
+    url (newURL) {
+      this.$refs.myVueDropzone.options.url = newURL
+    }
+  },
+  created () {
+    window.hub.$on('sendFile', this.customeSend)
+  },
+  methods: {
+    sendingEvent (file, xhr, formData) {
+      var i
+      for (i = 0; i < this.additionaldata.length; i++) {
+        for (var key in this.additionaldata[i]) {
+          formData.append(key, this.additionaldata[i][key])
+        }
+      }
+    },
+    successEvent (file, response) {
+      // window.toastr['success'](response.success)
+    },
+    maximum (file) {
+      this.$refs.myVueDropzone.removeFile(file)
+    },
+    getCustomeFile (file) {
+      this.$emit('takefile', true)
+    },
+    removeFile (file, error, xhr) {
+      this.$emit('takefile', false)
+    },
+    customeSend () {
+      this.$refs.myVueDropzone.processQueue()
+    }
+  }
+}
+</script>

resources/assets/js/views/components/ImageRadio.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="form-group image-radio">
+    <div
+      v-for="(pdfStyleList, index) in pdfStyleLists"
+      :key="index"
+      class="radio"
+    >
+      <label :for="pdfStyleList.val">
+        <input
+          v-model="checkedID"
+          :value="pdfStyleList.val"
+          :id="pdfStyleList.val"
+          :checked="pdfStyleList.val == checkedID"
+          type="radio"
+          name="pdfSet"
+          class="hidden"
+        >
+        <img
+          :src="srcMaker(pdfStyleList.src)"
+          alt="No Image"
+          class="special-img"
+        >
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+export default{
+  props: {
+    currentPDF: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      pdfStyleLists: [
+        {src: 'assets/img/PDF/Invoice1.png', val: '1'},
+        {src: 'assets/img/PDF/Invoice2.png', val: '2'},
+        {src: 'assets/img/PDF/Invoice3.png', val: '3'},
+        {src: 'assets/img/PDF/Invoice4.png', val: '4'}
+      ],
+      checkedID: ''
+    }
+  },
+  watch: {
+    checkedID (newID) {
+      if (newID !== null) {
+        this.$emit('selectedPDF', newID)
+      }
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      if (this.currentPDF === '') {
+        this.checkedID = null
+      } else {
+        this.checkedID = this.currentPDF
+      }
+    }, 1000)
+  },
+  methods: {
+    srcMaker (file) {
+      var url = '/'
+      var full = url + '' + file
+      return full
+    }
+  }
+}
+</script>

resources/assets/js/views/components/SettingListBox.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="setting-list-box">
+    <div id="myApp list-box-container">
+      <!-- <v-select
+        :value.sync="selected"
+        :options="list"
+        :on-change ="setValue"
+      /> -->
+    </div>
+  </div>
+</template>
+<script>
+// import vSelect from 'vue-select'
+export default {
+  // components: {vSelect},
+  props: {
+    type: {
+      type: String,
+      default: null
+    },
+    Options: {
+      type: [Array, Object],
+      required: false,
+      default () {
+        return []
+      }
+    },
+    getData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    currentData: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  data () {
+    return {
+      selected: null,
+      list: []
+    }
+  },
+  mounted () {
+    window.setTimeout(() => {
+      this.setList()
+      if (this.currentData !== null || this.currentData !== '') {
+        this.defaultValue(this.currentData)
+      }
+    }, 1000)
+  },
+  methods: {
+    setList () {
+      if (this.type === 'currencies') {
+        for (let i = 0; i < this.Options.length; i++) {
+          this.list.push(this.Options[i].name + ' - ' + this.Options[i].code)
+        }
+      } else if (this.type === 'time_zones' || this.type === 'languages' || this.type === 'date_formats') {
+        for (let key in this.Options) {
+          this.list.push(this.Options[key])
+        }
+      }
+    },
+    setValue (val) {
+      if (this.type === 'currencies') {
+        for (let i = 0; i < this.Options.length; i++) {
+          if (val === this.Options[i].name + ' - ' + this.Options[i].code) {
+            this.getData.currency = this.Options[i].id
+            break
+          }
+        }
+      } else if (this.type === 'time_zones') {
+        for (let key in this.Options) {
+          if (val === this.Options[key]) {
+            this.getData.time_zone = key
+            break
+          }
+        }
+      } else if (this.type === 'languages') {
+        for (let key in this.Options) {
+          if (val === this.Options[key]) {
+            this.getData.language = key
+            break
+          }
+        }
+      } else if (this.type === 'date_formats') {
+        for (let key in this.Options) {
+          if (val === this.Options[key]) {
+            this.getData.date_format = key
+            break
+          }
+        }
+      }
+    },
+    defaultValue (val) {
+      if (this.type === 'currencies') {
+        for (let i = 0; i < this.Options.length; i++) {
+          if (Number(val) === this.Options[i].id) {
+            this.selected = this.Options[i].name + ' - ' + this.Options[i].code
+            break
+          }
+        }
+      } else if (this.type === 'time_zones') {
+        for (let key in this.Options) {
+          if (val === key) {
+            this.selected = this.Options[key]
+            break
+          }
+        }
+      } else if (this.type === 'languages') {
+        for (let key in this.Options) {
+          if (val === key) {
+            this.selected = this.Options[key]
+            break
+          }
+        }
+      } else if (this.type === 'date_formats') {
+        for (let key in this.Options) {
+          if (val === key) {
+            this.selected = this.Options[key]
+            break
+          }
+        }
+      }
+    }
+  }
+}
+</script>