fix: fix all mutated props (#335)

* fix: fix all mutated props * fix * fix * other mutating data changes * still fixes * continue fixing * remove useless method * consistency * fix * fix bugs * fix cypress bugs
officelifehq · Oct 30, 2020 · 152b0df · 152b0df
1 parent 5034cad
commit 152b0df
Show file tree

Hide file tree

Showing 65 changed files with 349 additions and 441 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -75,9 +75,6 @@ module.exports = {
             }
         ],
 
-        // To be fixed
-        "vue/no-mutating-props": 0,
-
         "vue/no-v-html" : 0,
         "vue/max-attributes-per-line": [
             // https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended

diff --git a/resources/js/Pages/Adminland/CompanyNews/Index.vue b/resources/js/Pages/Adminland/CompanyNews/Index.vue
@@ -37,17 +37,19 @@
             {{ $t('account.company_news_title', { company: $page.props.auth.company.name}) }}
           </h2>
 
+          <errors :errors="errors" />
+
           <p class="relative adminland-headline">
-            <span class="dib mb3 di-l" :class="news.length == 0 ? 'white' : ''">
-              {{ $tc('account.company_news_number_news', news.length, { company: $page.props.auth.company.name, count: news.length}) }}
+            <span class="dib mb3 di-l" :class="localNews.length == 0 ? 'white' : ''">
+              {{ $tc('account.company_news_number_news', localNews.length, { company: $page.props.auth.company.name, count: localNews.length}) }}
             </span>
             <inertia-link :href="'/' + $page.props.auth.company.id + '/account/news/create'" class="btn absolute-l relative dib-l db right-0" data-cy="add-news-button">
               {{ $t('account.company_news_cta') }}
             </inertia-link>
           </p>
 
           <!-- LIST OF EXISTING NEWS -->
-          <ul v-show="news.length != 0" class="list pl0 mv0 center" data-cy="news-list" :data-cy-items="news.map(n => n.id)">
+          <ul v-show="localNews.length != 0" class="list pl0 mv0 center" data-cy="news-list" :data-cy-items="localNews.map(n => n.id)">
             <li v-for="singleNews in news" :key="singleNews.id" class="news-item pa3 br bl bb bb-gray bb-gray-hover">
               <h3 class="mt0">{{ singleNews.title }}</h3>
 
@@ -83,7 +85,7 @@
           </ul>
 
           <!-- BLANK STATE -->
-          <div v-show="news.length == 0" class="pa3 mt5">
+          <div v-show="localNews.length == 0" class="pa3 mt5">
             <p class="tc measure center mb4 lh-copy">
               {{ $t('account.company_news_blank') }}
             </p>
@@ -96,10 +98,12 @@
 
 <script>
 import Layout from '@/Shared/Layout';
+import Errors from '@/Shared/Errors';
 
 export default {
   components: {
     Layout,
+    Errors,
   },
 
   props: {
@@ -115,22 +119,29 @@ export default {
 
   data() {
     return {
+      localNews: [],
       idToDelete: 0,
+      errors: [],
     };
   },
 
+  mounted() {
+    this.localNews = this.news;
+  },
+
   methods: {
     destroy(id) {
-      axios.delete('/' + this.$page.props.auth.company.id + '/account/news/' + id)
+      this.errors = [];
+      axios.delete(this.$route('account_news.news.destroy', [this.$page.props.auth.company.id, id]))
         .then(response => {
           flash(this.$t('account.company_news_success_destroy'), 'success');
 
           this.idToDelete = 0;
-          id = this.news.findIndex(x => x.id === id);
-          this.news.splice(id, 1);
+          id = this.localNews.findIndex(x => x.id === id);
+          this.localNews.splice(id, 1);
         })
         .catch(error => {
-          this.form.errors = _.flatten(_.toArray(error.response.data));
+          this.errors = _.flatten(_.toArray(error.response.data));
         });
     },
   }

diff --git a/resources/js/Pages/Adminland/EmployeeStatus/Index.vue b/resources/js/Pages/Adminland/EmployeeStatus/Index.vue
@@ -30,8 +30,8 @@
           </h2>
 
           <p class="relative adminland-headline">
-            <span class="dib mb3 di-l" :class="statuses.length == 0 ? 'white' : ''">
-              {{ $tc('account.employee_statuses_number_positions', statuses.length, { company: $page.props.auth.company.name, count: statuses.length}) }}
+            <span class="dib mb3 di-l" :class="localStatuses.length == 0 ? 'white' : ''">
+              {{ $tc('account.employee_statuses_number_positions', localStatuses.length, { company: $page.props.auth.company.name, count: localStatuses.length}) }}
             </span>
             <a class="btn absolute-l relative dib-l db right-0" data-cy="add-status-button" @click.prevent="displayAddModal">
               {{ $t('account.employee_statuses_cta') }}
@@ -64,8 +64,8 @@
           </form>
 
           <!-- LIST OF EXISTING EMPLOYEE STATUSES -->
-          <ul v-show="statuses.length != 0" class="list pl0 mv0 center ba br2 bb-gray" data-cy="statuses-list" :data-cy-items="statuses.map(n => n.id)">
-            <li v-for="status in statuses" :key="status.id" class="pv3 ph2 bb bb-gray bb-gray-hover">
+          <ul v-show="localStatuses.length != 0" class="list pl0 mv0 center ba br2 bb-gray" data-cy="statuses-list" :data-cy-items="localStatuses.map(n => n.id)">
+            <li v-for="status in localStatuses" :key="status.id" class="pv3 ph2 bb bb-gray bb-gray-hover">
               {{ status.name }}
 
               <!-- RENAME POSITION FORM -->
@@ -115,7 +115,7 @@
           </ul>
 
           <!-- BLANK STATE -->
-          <div v-show="statuses.length == 0" class="pa3 mt5">
+          <div v-show="localStatuses.length == 0" class="pa3 mt5">
             <p class="tc measure center mb4 lh-copy">
               {{ $t('account.employee_statuses_blank') }}
             </p>
@@ -156,6 +156,7 @@ export default {
 
   data() {
     return {
+      localStatuses: [],
       modal: false,
       deleteModal: false,
       updateModal: false,
@@ -170,6 +171,10 @@ export default {
     };
   },
 
+  mounted() {
+    this.localStatuses = this.statuses;
+  },
+
   methods: {
     displayAddModal() {
       this.modal = true;
@@ -195,14 +200,14 @@ export default {
     submit() {
       this.loadingState = 'loading';
 
-      axios.post('/' + this.$page.props.auth.company.id + '/account/employeestatuses', this.form)
+      axios.post(this.$route('account_employeestatuses.employeestatuses.store', this.$page.props.auth.company.id), this.form)
         .then(response => {
           flash(this.$t('account.employee_statuses_success_new'), 'success');
 
           this.loadingState = null;
           this.form.name = null;
           this.modal = false;
-          this.statuses.push(response.data.data);
+          this.localStatuses.push(response.data.data);
         })
         .catch(error => {
           this.loadingState = null;
@@ -211,29 +216,29 @@ export default {
     },
 
     update(id) {
-      axios.put('/' + this.$page.props.auth.company.id + '/account/employeestatuses/' + id, this.form)
+      axios.put(this.$route('account_employeestatuses.employeestatuses.update', [this.$page.props.auth.company.id, id]), this.form)
         .then(response => {
           flash(this.$t('account.employee_statuses_success_update'), 'success');
 
           this.idToUpdate = 0;
           this.form.name = null;
 
-          var changedId = this.statuses.findIndex(x => x.id === id);
-          this.$set(this.statuses, changedId, response.data.data);
+          var changedId = this.localStatuses.findIndex(x => x.id === id);
+          this.$set(this.localStatuses, changedId, response.data.data);
         })
         .catch(error => {
           this.form.errors = _.flatten(_.toArray(error.response.data));
         });
     },
 
     destroy(id) {
-      axios.delete('/' + this.$page.props.auth.company.id + '/account/employeestatuses/' + id)
+      axios.delete(this.$route('account_employeestatuses.employeestatuses.destroy', [this.$page.props.auth.company.id, id]))
         .then(response => {
           flash(this.$t('account.employee_statuses_success_destroy'), 'success');
 
           this.idToDelete = 0;
-          var changedId = this.statuses.findIndex(x => x.id === id);
-          this.statuses.splice(changedId, 1);
+          var changedId = this.localStatuses.findIndex(x => x.id === id);
+          this.localStatuses.splice(changedId, 1);
         })
         .catch(error => {
           this.form.errors = _.flatten(_.toArray(error.response.data));

diff --git a/resources/js/Pages/Adminland/Expense/Index.vue b/resources/js/Pages/Adminland/Expense/Index.vue
@@ -76,7 +76,6 @@ export default {
       loadingState: '',
       modal: false,
       addEmployeesMode: false,
-      localEmployees: [],
       potentialEmployees: [],
       processingSearch: false,
       form: {
@@ -91,10 +90,6 @@ export default {
     };
   },
 
-  created() {
-    this.localEmployees = this.employees;
-  },
-
   methods: {
     displayAddModal() {
       this.modal = true;
@@ -104,24 +99,6 @@ export default {
         this.$refs['newCategory'].$refs['input'].focus();
       });
     },
-
-    submit() {
-      this.loadingState = 'loading';
-
-      axios.post('/' + this.$page.props.auth.company.id + '/account/expenses', this.form)
-        .then(response => {
-          flash(this.$t('account.employee_statuses_success_new'), 'success');
-
-          this.loadingState = null;
-          this.form.name = null;
-          this.modal = false;
-          this.categories.push(response.data.data);
-        })
-        .catch(error => {
-          this.loadingState = null;
-          this.form.errors = _.flatten(_.toArray(error.response.data));
-        });
-    },
   }
 };
 

diff --git a/resources/js/Pages/Adminland/Expense/Partials/Categories.vue b/resources/js/Pages/Adminland/Expense/Partials/Categories.vue
@@ -8,7 +8,7 @@
   <!-- EXPENSES CATEGORIES -->
   <div class="mb5">
     <h3 class="relative adminland-headline fw4">
-      <span class="dib mb3 di-l" :class="categories.length == 0 ? 'white' : ''">
+      <span class="dib mb3 di-l" :class="localCategories.length == 0 ? 'white' : ''">
         <span class="mr1">
           📦
         </span> {{ $tc('account.expense_category_headline') }}
@@ -47,8 +47,8 @@
     </form>
 
     <!-- LIST OF EXISTING EXPENSE CATEGORIES -->
-    <ul v-show="categories.length != 0" class="list pl0 mv0 center ba br2 bb-gray" data-cy="categories-list">
-      <li v-for="category in categories" :key="category.id" :data-cy="'category-' + category.id" class="pv3 ph2 bb bb-gray bb-gray-hover">
+    <ul v-show="localCategories.length != 0" class="list pl0 mv0 center ba br2 bb-gray" data-cy="categories-list">
+      <li v-for="category in localCategories" :key="category.id" :data-cy="'category-' + category.id" class="pv3 ph2 bb bb-gray bb-gray-hover">
         {{ category.name }}
 
         <!-- RENAME POSITION FORM -->
@@ -103,7 +103,7 @@
     </ul>
 
     <!-- BLANK STATE -->
-    <div v-show="categories.length == 0" class="pa3 mt5">
+    <div v-show="localCategories.length == 0" class="pa3 mt5">
       <p class="tc measure center mb4 lh-copy">
         {{ $t('account.expense_category_blank') }}
       </p>
@@ -134,6 +134,7 @@ export default {
 
   data() {
     return {
+      localCategories: [],
       loadingState: '',
       modal: false,
       form: {
@@ -145,6 +146,16 @@ export default {
     };
   },
 
+  watch: {
+    categories(value) {
+      this.localCategories = value;
+    }
+  },
+
+  mounted() {
+    this.localCategories = this.categories;
+  },
+
   methods: {
     displayAddModal() {
       this.modal = true;
@@ -170,14 +181,14 @@ export default {
     submit() {
       this.loadingState = 'loading';
 
-      axios.post('/' + this.$page.props.auth.company.id + '/account/expenses', this.form)
+      axios.post(this.$route('account.expenses.store', this.$page.props.auth.company.id), this.form)
         .then(response => {
           flash(this.$t('account.expense_category_success'), 'success');
 
           this.loadingState = null;
           this.form.name = null;
           this.modal = false;
-          this.categories.push(response.data.data);
+          this.localCategories.push(response.data.data);
         })
         .catch(error => {
           this.loadingState = null;
@@ -186,29 +197,29 @@ export default {
     },
 
     update(id) {
-      axios.put('/' + this.$page.props.auth.company.id + '/account/expenses/' + id, this.form)
+      axios.put(this.$route('account.expenses.update', [this.$page.props.auth.company.id, id]), this.form)
         .then(response => {
           flash(this.$t('account.expense_category_update_success'), 'success');
 
           this.idToUpdate = 0;
           this.form.name = null;
 
-          id = this.categories.findIndex(x => x.id === id);
-          this.$set(this.categories, id, response.data.data);
+          id = this.localCategories.findIndex(x => x.id === id);
+          this.$set(this.localCategories, id, response.data.data);
         })
         .catch(error => {
           this.form.errors = _.flatten(_.toArray(error.response.data));
         });
     },
 
     destroy(id) {
-      axios.delete('/' + this.$page.props.auth.company.id + '/account/expenses/' + id)
+      axios.delete(this.$route('account.expenses.destroy', [this.$page.props.auth.company.id, id]))
         .then(response => {
           flash(this.$t('account.expense_category_delete_success'), 'success');
 
           this.idToDelete = 0;
-          id = this.categories.findIndex(x => x.id === id);
-          this.categories.splice(id, 1);
+          id = this.localCategories.findIndex(x => x.id === id);
+          this.localCategories.splice(id, 1);
         })
         .catch(error => {
           this.form.errors = _.flatten(_.toArray(error.response.data));