Ajoute des onglets dans la vue du matériel en détail (#82)

* Ajoute des onglets dans la vue du matériel en détail

* Renomme le Dotfile de développement

* Supprime l'affichage des unités dans la vue d'un matériel

Co-authored-by: Donovan Lambert <donovan@pulsanova.com>

CHANGELOG.md

@@ -14,6 +14,7 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 - Corrige l'hôte de développement et permet sa customisation via une variable d'environnement. 
 - Améliorations internes de la validation des données.
 - Ajoute une page de vue du matériel en détail.
+- Utilise des onglets dans la page de vue du matériel.
 
 ## 0.10.2 (2020-11-16)
 

client/src/locale/en/common.js

@@ -155,6 +155,7 @@ export default {
     "{count} items",
   ],
   'stock-items-count': "{count} in stock",
+  'out-of-order-items-count': "{count} out of order",
   'sub-total': "Sub-total",
   'total-amount': "Total amount",
   'total-amount-with-discount': "Total with discount",

client/src/locale/fr/common.js

@@ -155,6 +155,7 @@ export default {
     "{count} articles",
   ],
   'stock-items-count': "{count} en stock",
+  'out-of-order-items-count': "{count} en panne",
   'sub-total': "Sous-total",
   'total-amount': "Montant total",
   'total-amount-with-discount': "Total après remise",

client/src/pages/MaterialView/Infos/Attributes/Attributes.scss

@@ -0,0 +1,11 @@
+.MaterialViewInfosAttributes {
+  &__list {
+    &__item {
+      margin-bottom: .3rem;
+
+      &__value {
+        font-weight: 700;
+      }
+    }
+  }
+}

client/src/pages/MaterialView/Infos/Attributes/Attributes.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="MaterialViewInfosAttributes">
+    <h3>{{ $t('special-attributes') }}</h3>
+    <ul
+      class="MaterialViewInfosAttributes__list"
+      v-if="attributes.length > 0"
+    >
+      <li
+        class="MaterialViewInfosAttributes__list__item"
+        v-for="attribute in attributes"
+        :key="attribute.id"
+      >
+        {{ attribute.name }}:
+        <span
+          v-if="attribute.type !== 'boolean'"
+          class="MaterialViewInfosAttributes__list__item__value"
+        >
+          {{ attribute.value }}
+          {{ attribute.unit }}
+        </span>
+        <span
+          v-if="attribute.type === 'boolean'"
+          class="MaterialViewInfosAttributes__list__item__value"
+        >
+          {{ attribute.value ? $t('yes') : $t('no') }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss">
+  @import '../../../../themes/default/index';
+  @import './Attributes';
+</style>
+
+<script>
+export default {
+  name: 'MaterialViewInfosAttributes',
+  props: {
+    attributes: { required: true, type: Array },
+  },
+};
+</script>

client/src/pages/MaterialView/Infos/Infos.scss

@@ -0,0 +1,35 @@
+.MaterialViewInfos {
+  display: flex;
+  flex-wrap: wrap;
+
+  &__main {
+    flex: 2;
+    min-width: 250px;
+    margin-right: 3rem;
+  }
+
+  &__extras {
+    flex: 1;
+    min-width: 250px;
+    padding: 1rem 0 0;
+  }
+
+  &__rental-price,
+  &__stock-quantity {
+    font-weight: 700;
+    margin-bottom: .3rem;
+  }
+
+  &__out-of-order {
+    color: $text-danger-color;
+  }
+
+  &__categories {
+    margin: 1.5rem 0;
+  }
+
+  &__dates {
+    color: $text-light-color;
+    margin-top: 1.5rem;
+  }
+}

client/src/pages/MaterialView/Infos/Infos.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="MaterialViewInfos">
+    <section class="MaterialViewInfos__main">
+      <h2>
+        {{ material.reference }}
+      </h2>
+      <h3>
+        <router-link :to="`/materials?${queryStringCategory}`">
+          {{ categoryName }}
+        </router-link>
+        <span v-if="subCategoryName">/</span>
+        <router-link
+          :to="`/materials?${queryStringSubCategory}`"
+          v-if="subCategoryName"
+        >
+          {{ subCategoryName }}
+        </router-link>
+        /
+        {{ material.name }}
+      </h3>
+      <p>{{ material.description }}</p>
+      <h3>{{ $t('quantities') }}</h3>
+      <ul>
+        <li class="MaterialViewInfos__stock-quantity">
+          {{ $t('stock-items-count', { count: material.stock_quantity || 0 }) }}
+        </li>
+        <li
+          v-if="material.out_of_order_quantity > 0"
+          class="MaterialViewInfos__out-of-order"
+        >
+          {{ $t('out-of-order-items-count', { count: material.out_of_order_quantity || 0 }) }}
+        </li>
+      </ul>
+      <div class="MaterialViewInfos__billing" v-if="showBilling">
+        <h3>{{ $t('prices') }}</h3>
+        <ul>
+          <li class="MaterialViewInfos__rental-price">
+            {{ $t('value-per-day', { value: rentalPrice }) }}
+          </li>
+          <li v-if="replacementPrice">
+            {{ $t('replacement-price') }} {{ replacementPrice }}
+          </li>
+        </ul>
+        <h3>{{ $t('billing') }}</h3>
+        <p v-if="material.is_hidden_on_bill">
+          {{ $t('material-not-displayed-on-bill') }}
+        </p>
+        <p v-if="material.is_discountable">
+          {{ $t('material-is-discountable') }}
+        </p>
+      </div>
+      <Attributes
+        v-if="material.attributes.length > 0"
+        :attributes="material.attributes"
+      />
+      <div class="MaterialViewInfos__notes" v-if="material.note">
+        <h3>{{ $t('notes') }}</h3>
+        <p>{{ material.note }}</p>
+      </div>
+    </section>
+    <section class="MaterialViewInfos__extras">
+      <div class="MaterialViewInfos__actions">
+        <router-link
+          v-tooltip="$t('action-edit')"
+          :to="`/materials/${material.id}`"
+          tag="button"
+          class="info"
+        >
+          <i class="fas fa-edit" />
+          {{ $t('action-edit') }}
+        </router-link>
+      </div>
+      <div class="MaterialViewInfos__categories">
+        <p>{{ $t('category') }}: <strong>{{ categoryName }}</strong></p>
+        <p v-if="subCategoryName">
+          {{ $t('sub-category') }}: <strong>{{ subCategoryName }}</strong>
+        </p>
+      </div>
+      <MaterialTags :tags="material.tags" />
+      <div class="MaterialViewInfos__dates">
+        <p>{{ $t('created-at') }} {{ createDate }}</p>
+        <p>{{ $t('updated-at') }} {{ updateDate }}</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss">
+  @import '../../../themes/default/index';
+  @import './Infos';
+</style>
+
+<script src="./index.js"></script>

client/src/pages/MaterialView/Infos/index.js

@@ -0,0 +1,56 @@
+import moment from 'moment';
+import Config from '@/config/globalConfig';
+import formatAmount from '@/utils/formatAmount';
+import store from '@/store';
+import MaterialTags from '@/components/MaterialTags/MaterialTags.vue';
+import Attributes from './Attributes/Attributes.vue';
+
+export default {
+  name: 'MaterialViewInfos',
+  components: {
+    Attributes,
+    MaterialTags,
+  },
+  props: {
+    material: { required: true, type: Object },
+  },
+  data() {
+    return {
+      showBilling: Config.billingMode !== 'none',
+    };
+  },
+  computed: {
+    createDate() {
+      const { created_at: createdAt } = this.material;
+      return createdAt ? moment(createdAt).format('L') : null;
+    },
+    updateDate() {
+      const { updated_at: updatedAt } = this.material;
+      return updatedAt ? moment(updatedAt).format('L') : null;
+    },
+    categoryName() {
+      const { category_id: categoryId } = this.material;
+      const categoryNameGetter = store.getters['categories/categoryName'];
+      return categoryNameGetter(categoryId);
+    },
+    subCategoryName() {
+      const { sub_category_id: subCategoryId } = this.material;
+      const subCategoryNameGetter = store.getters['categories/subCategoryName'];
+      return subCategoryNameGetter(subCategoryId);
+    },
+    rentalPrice() {
+      const { rental_price: rentalPrice } = this.material;
+      return rentalPrice ? formatAmount(rentalPrice) : null;
+    },
+    replacementPrice() {
+      const { replacement_price: replacementPrice } = this.material;
+      return replacementPrice ? formatAmount(replacementPrice) : null;
+    },
+    queryStringCategory() {
+      return `category=${this.material.category_id}`;
+    },
+    queryStringSubCategory() {
+      return `category=${this.material.category_id}&subCategory=${this.material.sub_category_id}`;
+    },
+  },
+};

client/src/pages/MaterialView/MaterialView.scss

@@ -1,32 +1,8 @@
 .MaterialView {
-  display: flex;
-  flex-wrap: wrap;
   color: $text-base-color;
   padding-bottom: 6rem;
 
-  &__infos {
-    flex: 2;
-    min-width: 250px;
-    margin-right: 3rem;
-  }
-
-  &__no-attribute-help {
-    color: $text-light-color;
-    font-style: italic;
-  }
-
-  &__extras {
-    flex: 1;
-    min-width: 250px;
-    padding: 1rem 0 0;
-  }
-
-  &__categories {
-    margin: 1.5rem 0;
-  }
-
-  &__dates {
-    color: $text-light-color;
-    margin-top: 1.5rem;
+  .vue-tablist {
+    margin-bottom: 1rem;
   }
 }