Affiche les quantités pour une date précise dans la page du matériel (#…

…93)
Robert-2 · Mar 17, 2021 · 2ba643d · 2ba643d
1 parent 166e57a
commit 2ba643d
Show file tree

Hide file tree

Showing 18 changed files with 317 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 - Ajoute la possibilité de limiter les caractéristiques spéciales du matériel par catégorie (#91).
 - Ajoute le type "date" aux caractéristiques spéciales du matériel (#90).
 - Permet l'envoi de documents (fichiers PDF, images JPEG ou PNG) associés à du matériel (#92).
+- Ajoute la possibilité d'afficher les quantités de matériel disponibles pour une date donnée, dans le listing du matériel (#93).
 - Corrige le lien vers le repo (Github au lieu de Gitlab) dans la modale des détails d'erreur (#97).
 - Dans l'édition d'un événement, la modification de la date de début ne change plus la date de fin automatiquement (#99).
 - Affiche certains messages d'aide sur plusieurs lignes, et corrige quelques fautes dans ces messages.

diff --git a/client/src/components/Alert/index.js b/client/src/components/Alert/index.js
@@ -26,17 +26,27 @@ const ConfirmRestore = ($t, entityName) => Swal.fire({
   cancelButtonText: $t('cancel'),
 });
 
-const Prompt = ($t, title, placeholder, confirmText, inputValue = '') => Swal.fire({
-  title,
-  input: 'text',
-  inputPlaceholder: $t(placeholder),
-  inputValue,
-  showCancelButton: true,
-  customClass: {
-    confirmButton: 'swal2-confirm--success',
-  },
-  confirmButtonText: $t(confirmText),
-  cancelButtonText: $t('cancel'),
-});
+const Prompt = ($t, title, options) => {
+  const {
+    titleData = undefined,
+    placeholder = '',
+    confirmText = 'save',
+    inputType = 'text',
+    inputValue = '',
+  } = options;
+
+  return Swal.fire({
+    title: $t(title, titleData),
+    input: inputType,
+    inputPlaceholder: $t(placeholder),
+    inputValue,
+    showCancelButton: true,
+    customClass: {
+      confirmButton: 'swal2-confirm--success',
+    },
+    confirmButtonText: $t(confirmText),
+    cancelButtonText: $t('cancel'),
+  });
+};
 
 export default { ConfirmDelete, ConfirmRestore, Prompt };
diff --git a/client/src/components/EventDetails/EventDetails.scss b/client/src/components/EventDetails/EventDetails.scss
@@ -21,6 +21,8 @@
     display: flex;
     flex-direction: column;
     min-height: 200px;
+    max-height: 100vh;
+    overflow-y: auto;
 
     &__body {
       flex: 1;

diff --git a/client/src/components/EventDetails/EventDetails.vue b/client/src/components/EventDetails/EventDetails.vue
@@ -100,7 +100,7 @@
               :start="event.startDate"
               :end="event.endDate"
               :withRentalPrices="showBilling && event.is_billable"
-              :hideDetails="false"
+              :hideDetails="event.materials.length > 16"
             />
           </tab>
           <tab v-if="showBilling" title-slot="billing" :disabled="!hasMaterials">

diff --git a/client/src/components/PromptDate/PromptDate.scss b/client/src/components/PromptDate/PromptDate.scss
@@ -0,0 +1,45 @@
+.PromptDate {
+  &__header {
+    display: flex;
+    align-items: center;
+    padding: $content-padding-small-horizontal $content-padding-large-vertical;
+    background-color: $bg-color-main-header;
+
+    &__title {
+      flex: 1;
+      font-size: 1.4rem;
+    }
+
+    &__btn-close {
+      flex: 0 0 auto;
+      background: none;
+      border: none;
+    }
+  }
+
+  &__main {
+    padding: $content-padding-large-vertical $content-padding-small-vertical;
+  }
+
+  &__datepicker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &__input {
+      width: 100%;
+      max-width: 300px;
+      font-size: 1.1rem;
+    }
+  }
+
+  hr {
+    opacity: .15;
+    margin: 0;
+  }
+
+  &__footer {
+    padding: $content-padding-large-vertical;
+    text-align: center;
+  }
+}
diff --git a/client/src/components/PromptDate/PromptDate.vue b/client/src/components/PromptDate/PromptDate.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="PromptDate">
+    <div class="PromptDate__header">
+      <h2 class="PromptDate__header__title">
+        {{ title }}
+      </h2>
+      <button class="PromptDate__header__btn-close" @click="$emit('close')">
+        <i class="fas fa-times" />
+      </button>
+    </div>
+    <div class="PromptDate__main">
+      <Datepicker
+        :value="currentDate"
+        :language="datepickerLang"
+        :format="formatDate"
+        :placeholder="$t(placeholder)"
+        class="PromptDate__datepicker"
+        input-class="PromptDate__datepicker__input"
+        monday-first
+        v-on:input="handleChange"
+      />
+    </div>
+    <hr />
+    <div class="PromptDate__footer">
+      <button @click="handleSubmit" class="success">
+        <i class="fas fa-check" />
+        {{ $t('choose-date') }}
+      </button>
+      <button @click="$emit('close')">
+        <i class="fas fa-times" />
+        {{ $t('close') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+  @import '../../themes/default/index';
+  @import './PromptDate';
+</style>
+
+<script>
+import moment from 'moment';
+import Datepicker from 'vuejs-datepicker';
+import * as lang from 'vuejs-datepicker/src/locale';
+import store from '@/store';
+
+export default {
+  name: 'PromptDate',
+  components: { Datepicker },
+  props: {
+    title: String,
+    defaultDate: [String, Date],
+    format: String,
+    placeholder: String,
+  },
+  data() {
+    return {
+      currentDate: this.defaultDate,
+      datepickerLang: lang[store.state.i18n.locale],
+    };
+  },
+  methods: {
+    formatDate(date) {
+      return this.format || moment(date).format('LL');
+    },
+    handleChange(newDate) {
+      this.currentDate = newDate;
+    },
+    handleSubmit() {
+      this.$emit('close', { date: this.currentDate });
+    },
+  },
+};
+</script>
diff --git a/client/src/locale/en/common.js b/client/src/locale/en/common.js
@@ -48,6 +48,8 @@ export default {
   'add': "Add",
   'saving': "Saving...",
   'saved': "{entity} saved.",
+  'choose-date': "Choose this date",
+  'reset-date': "Reset date",
   'actions': "Actions",
   'informations': "Informations",
   'connexion-infos': "Credentials",
@@ -98,6 +100,7 @@ export default {
   'quantity': "Stock qty",
   'quantities': "Quantities",
   'quantity-out-of-order': "Out of order qty",
+  'remaining-quantity': "Remaining qty",
   'discountable': "Discountable?",
   'material-is-discountable': "The material is «\u0a00discountable\u00a0»: a discount amount can be applied to this material.",
   'hidden-on-bill': "Hidden on bill?",

diff --git a/client/src/locale/en/pages.js b/client/src/locale/en/pages.js
@@ -147,6 +147,8 @@ export default {
     'help': "You can choose a park, a category or some tags to filter materials.",
     'action-add': "New material",
     'manage-attributes': "Manage special attributes",
+    'display-quantities-at-date': "Display quantities at date...",
+    'remaining-quantities-on-date': "Remaining quantities on {date}",
     'add': "New material",
     'edit': "Modify material «\u00a0{pageSubTitle}\u00a0»",
     'help-edit': "Give a short name, and use the description field to detail the material if needed.",

diff --git a/client/src/locale/fr/common.js b/client/src/locale/fr/common.js
@@ -48,6 +48,8 @@ export default {
   'add': "Ajouter",
   'saving': "Sauvegarde...",
   'saved': "{entity} sauvegardé.",
+  'choose-date': "Choisir cette date",
+  'reset-date': "Réinitialiser la date",
   'actions': "Actions",
   'informations': "Informations",
   'connexion-infos': "Informations de connexion",
@@ -98,6 +100,7 @@ export default {
   'quantity': "Qté stock",
   'quantities': "Quantités",
   'quantity-out-of-order': "Qté en panne",
+  'remaining-quantity': "Qté restante",
   'discountable': "Remisable\u00a0?",
   'material-is-discountable': "Le matériel est «\u00a0remisable\u00a0»\u00a0: une remise peut être appliquée sur ce matériel.",
   'hidden-on-bill': "Caché sur la facture\u00a0?",

diff --git a/client/src/locale/fr/pages.js b/client/src/locale/fr/pages.js
@@ -147,6 +147,8 @@ export default {
     'help': "Vous pouvez choisir un parc, une catégorie ou des étiquettes pour filtrer le matériel.",
     'action-add': "Nouveau matériel",
     'manage-attributes': "Gérer les caractéristiques spéciales",
+    'display-quantities-at-date': "Afficher les quantités à date...",
+    'remaining-quantities-on-date': "Quantités restantes le {date}",
     'add': "Nouveau matériel",
     'edit': "Modifier le matériel «\u00a0{pageSubTitle}\u00a0»",
     'help-edit': "Trouvez un nom assez court, et utilisez plutôt la description pour détailler le matériel si besoin.",

diff --git a/client/src/pages/Categories/index.js b/client/src/pages/Categories/index.js
@@ -27,53 +27,46 @@ export default {
   },
   methods: {
     addCategory() {
-      Alert.Prompt(
-        this.$t,
-        this.$t('page-categories.prompt-add'),
-        'page-categories.category-name',
-        'page-categories.create',
-      ).then(({ value: name }) => {
+      Alert.Prompt(this.$t, 'page-categories.prompt-add', {
+        placeholder: 'page-categories.category-name',
+        confirmText: 'page-categories.create',
+      }).then(({ value: name }) => {
         if (name) {
           this.save('categories', null, name);
         }
       });
     },
 
     editCategory(categoryId, oldName) {
-      Alert.Prompt(
-        this.$t,
-        this.$t('page-categories.prompt-modify'),
-        oldName,
-        'save',
-        oldName,
-      ).then(({ value: newName }) => {
+      Alert.Prompt(this.$t, 'page-categories.prompt-modify', {
+        placeholder: oldName,
+        confirmText: 'save',
+        inputValue: oldName,
+      }).then(({ value: newName }) => {
         if (newName) {
           this.save('categories', categoryId, newName);
         }
       });
     },
 
     addSubCategory(categoryId, categoryName) {
-      Alert.Prompt(
-        this.$t,
-        this.$t('page-subcategories.prompt-add', { categoryName }),
-        'page-subcategories.sub-category-name',
-        'page-subcategories.create',
-      ).then(({ value: name }) => {
+      Alert.Prompt(this.$t, 'page-subcategories.prompt-add', {
+        titleData: { categoryName },
+        placeholder: 'page-subcategories.sub-category-name',
+        confirmText: 'page-subcategories.create',
+      }).then(({ value: name }) => {
         if (name) {
           this.saveNewSubCategory(name, categoryId);
         }
       });
     },
 
     editSubCategory(subCategoryId, oldName) {
-      Alert.Prompt(
-        this.$t,
-        this.$t('page-subcategories.prompt-modify'),
-        oldName,
-        'save',
-        oldName,
-      ).then(({ value: newName }) => {
+      Alert.Prompt(this.$t, 'page-subcategories.prompt-modify', {
+        placeholder: oldName,
+        confirmText: 'save',
+        inputValue: oldName,
+      }).then(({ value: newName }) => {
         if (newName) {
           this.save('subcategories', subCategoryId, newName);
         }

diff --git a/client/src/pages/Materials/Materials.scss b/client/src/pages/Materials/Materials.scss
@@ -7,12 +7,31 @@
     position: relative;
   }
 
-  &__attributes-link {
-    display: block;
+  &__secondary-actions {
     position: absolute;
-    top: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    top: 4px;
+    max-width: calc(100% - 280px);
     right: $content-padding-large-vertical;
     z-index: 1;
+
+    &__button {
+      margin: 0 $content-padding-small-vertical;
+    }
+  }
+
+  &__quantities-date {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    color: $text-base-color;
+    font-weight: 600;
+
+    &__label {
+      flex: 1;
+    }
   }
 
   &__ref,
@@ -36,10 +55,16 @@
   }
 
   &__quantity,
+  &__remaining-quantity,
   &__quantity-out {
     text-align: center !important;
   }
 
+  &__remaining-quantity {
+    color: $text-warning-color !important;
+    font-weight: 800;
+  }
+
   &__tags-list {
     display: flex;
     flex-wrap: wrap;
@@ -87,8 +112,9 @@
       display: table-cell;
     }
 
-    &__attributes-link {
+    &__secondary-actions {
       right: calc(#{$content-padding-large-vertical} + 45px + #{$content-padding-small-vertical});
+      max-width: 100%;
     }
   }
 }