Affiche en ligne : MAJ design volet appro

frontend/src/components/CanteenPublication/EditableCommentsField.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-col v-if="!editDescription && (value || editable)" cols="12" sm="6" class="px-0 pb-2">
+    <div v-if="value">
+      <h2 class="fr-text grey--text text--darken-4 mb-6">
+        {{ label }}
+      </h2>
+      <div class="ml-n8">
+        <DsfrHighlight>
+          <p>
+            {{ value }}
+          </p>
+        </DsfrHighlight>
+      </div>
+    </div>
+    <v-btn
+      v-if="editable"
+      @click="
+        editDescription = true
+        oldComments = value
+      "
+      outlined
+      small
+      color="primary"
+      class="fr-btn--tertiary px-2 mt-4"
+    >
+      <v-icon primary x-small class="mr-1">mdi-pencil-outline</v-icon>
+      {{ cta || "Modifier" }}
+    </v-btn>
+  </v-col>
+  <v-col v-else-if="editable" cols="12" sm="6">
+    <v-form v-model="formIsValid" ref="commentsForm">
+      <DsfrTextarea
+        v-model="canteen[valueKey]"
+        :counter="charLimit"
+        :rules="[validators.maxChars(charLimit)]"
+        rows="5"
+        class="mt-2"
+      >
+        <template v-slot:label>
+          <span class="fr-label mb-1">{{ label }}</span>
+          <span v-if="helpText" class="fr-hint-text mb-2">
+            {{ helpText }}
+          </span>
+          <slot name="help-text" />
+        </template>
+      </DsfrTextarea>
+      <v-btn @click="saveDescription" class="primary">Enregistrer</v-btn>
+    </v-form>
+  </v-col>
+</template>
+
+<script>
+import DsfrTextarea from "@/components/DsfrTextarea"
+import DsfrHighlight from "@/components/DsfrHighlight"
+import validators from "@/validators"
+
+export default {
+  name: "EditableCommentsField",
+  props: {
+    canteen: Object,
+    valueKey: String,
+    editable: Boolean,
+    label: String,
+    helpText: String,
+    cta: String,
+    charLimit: Number,
+  },
+  components: { DsfrTextarea, DsfrHighlight },
+  data() {
+    return {
+      editDescription: false,
+      formIsValid: true,
+      oldComments: this.canteen[this.valueKey],
+    }
+  },
+  computed: {
+    validators() {
+      return validators
+    },
+    value() {
+      return this.canteen[this.valueKey]
+    },
+  },
+  methods: {
+    saveDescription() {
+      if (this.canteen[this.valueKey] === this.oldComments) {
+        this.editDescription = false
+        return
+      }
+      this.$refs.commentsForm.validate()
+      if (!this.formIsValid) {
+        this.$store.dispatch("notifyRequiredFieldsError")
+        return
+      }
+      const payload = {}
+      payload[this.valueKey] = this.canteen[this.valueKey]
+      this.$store
+        .dispatch("updateCanteen", {
+          id: this.canteen.id,
+          payload,
+        })
+        .then(() => {
+          this.$store.dispatch("notify", {
+            status: "success",
+            message: "Commentaires mises à jour",
+          })
+          this.editDescription = false
+        })
+        .catch(() => {
+          this.$store.dispatch("notifyServerError")
+        })
+    },
+  },
+}
+</script>
+
+<style></style>

frontend/src/components/CanteenPublication/ResultsComponents/CentralKitchenInfo.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- TODO: use DsfrCallout instead -->
+  <v-card outlined elevation="0" color="primary lighten-5" class="d-flex mb-6" v-if="usesCentralKitchenDiagnostics">
+    <v-icon class="ml-4" color="primary">$information-fill</v-icon>
+
+    <v-card-text>
+      <p class="mb-0">
+        La cantine « {{ canteen.name }} » sert des repas cuisinés dans la cuisine centrale
+        <span v-if="centralKitchen.publicationStatus === 'published'">
+          <router-link
+            :to="{
+              name: 'CanteenPage',
+              params: { canteenUrlComponent: this.$store.getters.getCanteenUrlComponent(centralKitchen) },
+            }"
+          >
+            « {{ centralKitchen.name }} »
+          </router-link>
+          .
+        </span>
+        <span v-else>« {{ centralKitchen.name }} ».</span>
+        Les valeurs ci-dessous sont celles du lieu de production des repas.
+      </p>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "CentralKitchenInfo",
+  props: {
+    canteen: Object,
+  },
+  computed: {
+    centralKitchen() {
+      return this.canteen.centralKitchen
+    },
+    usesCentralKitchenDiagnostics() {
+      return (
+        this.canteen.productionType === "site_cooked_elsewhere" && this.canteen.centralKitchenDiagnostics?.length > 0
+      )
+    },
+  },
+}
+</script>