refact vue

Author: doctor2

app/Http/Controllers/Admin/TransactionController.php

@@ -9,6 +9,12 @@
 
 class TransactionController extends Controller
 {
+ private $typeService;
+
+ public function __construct(?TransactionTypeService $typeService)
+ {
+ $this->typeService = $typeService;
+ }
 
  public function index()
  {
@@ -49,13 +55,12 @@ public function update($key, TransactionService $service)
 
  public function getTransactionListQuery()
  {
- $typeService = new TransactionTypeService();
  $query =
  \DB::table('transactions as tr')
  ->select('tr.amount', 'tr.created_at', 'u.name as debit_user_name', 'user.name as crebit_user_name', 'tr.transaction_key')
- ->where('tr.transaction_type_id', $typeService->getDebitId())
+ ->where('tr.transaction_type_id', $this->typeService->getDebitId())
  ->join('transactions as trans', 'tr.transaction_key', '=', 'trans.transaction_key')
- ->where('trans.transaction_type_id', $typeService->getCreditId())
+ ->where('trans.transaction_type_id', $this->typeService->getCreditId())
  ->join('users as user', 'trans.user_id', '=', 'user.id')
  ->join('users as u', 'tr.user_id', '=', 'u.id')
  ;

app/UseCases/TransactionService.php

@@ -9,9 +9,9 @@ class TransactionService
 {
  private $typeService;
 
- public function __construct()
+ public function __construct(TransactionTypeService $typeService)
  {
- $this->typeService = new TransactionTypeService();
+ $this->typeService = $typeService;
  }
 
  public function create($debit_user, $credit_user, $amount)

database/seeds/DatabaseSeeder.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\UseCases\TransactionService;
 use Illuminate\Database\Seeder;
 
 class DatabaseSeeder extends Seeder
@@ -9,7 +10,7 @@ class DatabaseSeeder extends Seeder
  *
  * @return void
  */
- public function run()
+ public function run(TransactionService $service)
  {
  $this->createTransactionTypes();
 
@@ -22,16 +23,16 @@ public function run()
  'email' => 'brath1@example.org',
  'password' => '$2y$10$SHOpPjq2SAlrZ.Uv1ljZjuYY1eSt2Df57E8tBTYh8fby65tCflnX.',
  ]);
- $service = new \App\UseCases\TransactionService();
 
  foreach ($users as $user) {
  $amount = rand(100, 400);
- 
+
  $service->create($user, $myUser, $amount);
  }
+
  foreach ($users as $user) {
  $amount = rand(100, 300);
- 
+
  $service->create($myUser, $user, $amount);
  }
 
@@ -40,10 +41,10 @@ public function run()
  public function createTransactionTypes()
  {
  factory(\App\TransactionType::class)->create([
- 'name'=> \App\TransactionType::DEBIT
-  ]);
+ 'name' => \App\TransactionType::DEBIT,
+ ]);
  factory(\App\TransactionType::class)->create([
- 'name'=> \App\TransactionType::CREDIT
-  ]);
+ 'name' => \App\TransactionType::CREDIT,
+ ]);
  }
 }

public/js/app.js

@@ -48724,26 +48724,34 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 /* harmony default export */ __webpack_exports__["default"] = ({
  props: ["fields"],
+ data: function data() {
+ return {
+ data: []
+ };
+ },
  created: function created() {
  this.change = __WEBPACK_IMPORTED_MODULE_0_debounce___default()(this.change, 500);
+
+ for (var i = 0; i < this.fields.length; i++) {
+ this.data.push({
+ name: this.fields[i].name,
+ value: this.fields[i].value
+ });
+ }
  },
 
  methods: {
- change: function change() {
- var values = [];
- for (var i = 0; i < this.fields.length; i++) {
- var el = document.getElementById(this.fields[i].name);
-
- if (el.type == "checkbox") {
- if (el.checked) {
- values.push({ name: el.name, value: 1 });
- }
- } else if (el.value) {
- values.push({ name: el.name, value: el.value });
- }
+ change: function change(index, el) {
+
+ if (el.type == "checkbox") {
+ this.data[index].value = el.checked ? 1 : '';
+ } else {
+ this.data[index].value = el.value;
  }
 
- this.$emit("changed", values);
+ this.$emit("changed", this.data.filter(function (item) {
+ return !!item.value;
+ }));
  }
  }
 });
@@ -48845,20 +48853,32 @@ var render = function() {
  field.type == "number"
  ? _c("input", {
  directives: [{ name: "int", rawName: "v-int" }],
- attrs: { id: field.name, type: "text", name: field.name },
- domProps: { value: field.value },
- on: { input: _vm.change }
+ attrs: { type: "text", name: field.name },
+ domProps: { value: _vm.data.value },
+ on: {
+ input: function($event) {
+ _vm.change(index, $event.target)
+ }
+ }
  })
  : field.type == "checkbox"
  ? _c("input", {
- attrs: { id: field.name, type: "checkbox", name: field.name },
- domProps: { checked: field.value },
- on: { click: _vm.change }
+ attrs: { type: "checkbox", name: field.name },
+ domProps: { checked: _vm.data.value },
+ on: {
+ click: function($event) {
+ _vm.change(index, $event.target)
+ }
+ }
  })
  : _c("input", {
- attrs: { id: field.name, type: "text", name: field.name },
- domProps: { value: field.value },
- on: { input: _vm.change }
+ attrs: { type: "text", name: field.name },
+ domProps: { value: _vm.data.value },
+ on: {
+ input: function($event) {
+ _vm.change(index, $event.target)
+ }
+ }
  })
  ])
  }),

resources/js/components/Filter.vue

@@ -2,13 +2,13 @@
  <div class="filter_table">
  <div v-for="(field, index) in fields" class="form-group" :key="index">
  <label v-text="field.label" :for="field.name"></label>
- 
- <input v-if="field.type == 'number'" v-int :id="field.name" type="text" :name="field.name" :value="field.value" @input="change">
+
+ <input v-if="field.type == 'number'" v-int type="text" :name="field.name" :value="data.value" @input="change(index, $event.target)">
 
- <input v-else-if="field.type == 'checkbox'" v-bind:id="field.name" type="checkbox" :name="field.name" :checked="field.value" @click="change">
+ <input v-else-if="field.type == 'checkbox'" type="checkbox" :name="field.name" :checked="data.value" @click="change(index, $event.target)">
 
- <input v-else :id="field.name" type="text" :name="field.name" :value="field.value" @input="change">
- 
+ <input v-else type="text" :name="field.name" :value="data.value" @input="change(index, $event.target)">
+
  </div>
  </div>
 </template>
@@ -17,25 +17,31 @@ import debounce from "debounce";
 
 export default {
  props: ["fields"],
+ data() {
+ return {
+ data: []
+ };
+ },
  created() {
  this.change = debounce(this.change, 500);
+
+ for (let i = 0; i < this.fields.length; i++) {
+ this.data.push({
+ name: this.fields[i].name,
+ value: this.fields[i].value
+ });
+ }
  },
  methods: {
- change() {
- let values = [];
- for (let i = 0; i < this.fields.length; i++) {
- let el = document.getElementById(this.fields[i].name);
+ change(index, el) {
 
- if (el.type == "checkbox") {
- if(el.checked){
- values.push({ name: el.name, value: 1 });
- }
- } else if (el.value) {
- values.push({ name: el.name, value: el.value });
- }
+ if (el.type == "checkbox") {
+ this.data[index].value = el.checked ? 1 : '';
+ } else {
+ this.data[index].value = el.value;
  }
- 
- this.$emit("changed", values);
+
+ this.$emit("changed", this.data.filter((item) => !!item.value));
  }
  }
 };