new component

components/Ui/Input/TextArea.vue

@@ -0,0 +1,76 @@
+<!--
+Champs de saisie de bloc texte
+
+@see https://vuetifyjs.com/en/components/textareas/
+-->
+
+<template>
+  <v-textarea
+      outlined
+      :value="data"
+      :label="$t(label_field)"
+      :rules="rules"
+      :disabled="readonly"
+      :error="error || violations"
+      :error-messages="errorMessage"
+      @change="onChange($event)"
+    />
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+import {$useError} from "~/use/form/useError";
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    field: {
+      type: String,
+      required: false,
+      default: null
+    },
+    data: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    readonly: {
+      type: Boolean,
+      required: false
+    },
+    rules: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    error: {
+      type: Boolean,
+      required: false
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  setup (props, {emit}) {
+    const {error: violations, onChange} = $useError(props.field, emit)
+
+    return {
+      label_field: props.label ?? props.field,
+      violations,
+      onChange
+    }
+  }
+})
+</script>
+
+<style>
+  input:read-only{
+    color: #666 !important;
+  }
+</style>

components/Ui/SubList.vue → components/Ui/SubResource.vue

@@ -1,4 +1,4 @@
-<!-- ? -->
+<!-- Permet de requêter une subResource et de donner son contenu à un slot -->
 
 <template>
   <main>

components/Ui/Template/DataTable.vue

@@ -0,0 +1,65 @@
+<!--
+Tableau interactif
+
+@see https://vuetifyjs.com/en/components/data-tables/
+-->
+
+<template>
+  <v-col
+    cols="12"
+    sm="12"
+  >
+    <v-data-table
+      :headers="headersWithItem"
+      :items="items"
+      locale="fr-FR"
+      class="elevation-1"
+      :footer-props="{
+        'items-per-page-text':  $t('itemsPerPage'),
+        'items-per-page-all-text':  $t('allResult')
+      }"
+    >
+      <template v-for="header in headersWithItem" v-slot:[header.item]="props">
+        <slot :name="header.item" v-bind="props">
+          {{ props.item[header.value] }}
+        </slot>
+      </template>
+
+      <template v-slot:[`footer.page-text`]="items">
+        {{ items.pageStart }} - {{ items.pageStop }} {{$t('of')}} {{ items.itemsLength }}
+      </template>
+
+    </v-data-table>
+  </v-col>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, toRefs, Ref } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    headers: {
+      type: Array,
+      required: true
+    }
+  },
+  setup (props) {
+    const { headers } = toRefs(props)
+
+    const headersWithItem = computed(() => {
+      return headers.value.map((header:any) => {
+        header.item = 'item.' + header.value
+        return header
+      })
+    })
+
+    return {
+      headersWithItem
+    }
+  }
+})
+</script>

components/Ui/Template/Date.vue

@@ -0,0 +1,34 @@
+<!--
+template date formatée
+-->
+
+<template>
+  <span>{{datesFormatted}}</span>
+</template>
+
+<script lang="ts">
+import { defineComponent, useContext, computed, ComputedRef } from '@nuxtjs/composition-api'
+import DatesUtils from '~/services/utils/datesUtils'
+
+export default defineComponent({
+  props: {
+    data: {
+      type: [String, Array],
+      required: false,
+      default: null
+    }
+  },
+  setup (props) {
+    const { $moment } = useContext()
+    const dateUtils = new DatesUtils($moment)
+
+    const datesFormatted: ComputedRef<string> = computed(() => {
+      return dateUtils.formattedDate(props.data, 'DD/MM/YYYY')
+    })
+
+    return {
+      datesFormatted
+    }
+  }
+})
+</script>