fix css

assets/css/global.scss

@@ -16,3 +16,12 @@ header .v-toolbar__content{
 .margin-bottom-20{
   margin-bottom: 20px;
 }
+
+.form_main_title{
+  width: 100%;
+  .editBtn{
+    float: right;
+    margin-right: 20px;
+  }
+
+}

components/Form/BottomSheetComponent.vue

@@ -10,12 +10,11 @@
         <slot></slot>
 
         <v-btn
-          class="mt-6"
           text
           color="error"
           @click="$emit('close-bottom-sheet', false)"
         >
-          close
+          Fermer
         </v-btn>
       </v-sheet>
     </v-bottom-sheet>

components/Form/ExpansionPanelComponent.vue

@@ -30,9 +30,16 @@
 
 <style scoped>
   .icon{
-    width: 30px;
-    height: 30px;
+    width: 47px;
+    height: 47px;
     padding: 10px;
+    margin-right: 10px;
     flex: none;
   }
+  .v-expansion-panel-header{
+    padding: 0px;
+  }
+  .v-expansion-panel--active > .v-expansion-panel-header{
+    min-height: 47px;
+  }
 </style>

components/Form/FormComponent.vue

@@ -6,9 +6,19 @@
   >
     <slot name="form.input" v-bind="{entry}"></slot>
 <!--{{entry}}-->
-    <v-btn v-if="!readOnly" class="mr-4 submitBtn ot_green ot_white--text" @click="submit">
-      Enregistrer
-    </v-btn>
+
+    <v-container fluid class="container">
+      <v-row>
+        <v-col cols="12" sm="12">
+          <v-btn v-if="!readOnly" class="mr-4 submitBtn ot_green ot_white--text" @click="submit">
+            Enregistrer
+          </v-btn>
+          <v-btn v-if="!readOnly" class="mr-4 submitBtn ot_danger ot_white--text" @click="submit">
+            Annuler
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
   </v-form>
 </template>
 
@@ -47,7 +57,7 @@
 
       const {store} = useContext();
       const readOnly = computed(() => {
-        useRepositoryHelper.getReadOnly(repository.value)
+        return useRepositoryHelper.getReadOnly(repository.value)
       })
 
       const entry = computed(() => {

pages/organization/edit.vue

@@ -3,10 +3,10 @@
     <template>
       <v-card class="margin-bottom-20">
         <v-toolbar flat class="ot_light_grey" dark>
-          <v-toolbar-title class="ot_dark_grey--text">
+          <v-toolbar-title class="ot_dark_grey--text form_main_title">
             Description de l'organisation
-            <v-btn @click="edit" class="ot_green editBtn">
-              <v-icon class="ot_white--text" small>fa-pencil-alt</v-icon>
+            <v-btn @click="edit" v-if="readOnly" class="ot_green editBtn">
+              Modifier
             </v-btn>
           </v-toolbar-title>
         </v-toolbar>
@@ -213,7 +213,8 @@
                 </template>
 
                 <template v-slot:sheet.content="{itemId}">
-                  <v-container fluid class="container">
+                  <v-container class="container sheetBottomContainer">
+                    <h2 class="sheet_bottom_title">Adresse postale</h2>
                     <FormComponent :repository="repositories.addressRepository" :id="itemId" :query="queries.addressQuery()">
                       <template v-slot:form.input="{entry: addressEntry }">
                         <v-row>
@@ -254,7 +255,7 @@
 
       <!--  Point de Contact-->
       <ExpansionPanelComponent :title="$t('contact_point')"  icon="fa-phone">
-        <v-container fluid class="container">
+        <v-container class="container">
           <v-row>
             <v-col cols="12" sm="12">
               <DataTableComponent
@@ -265,7 +266,8 @@
                 :headers="datatableHeaders.headersContactPoint"
               >
                 <template v-slot:sheet.content="{itemId }">
-                  <v-container fluid class="container">
+                  <v-container class="container sheetBottomContainer">
+                    <h2 class="sheet_bottom_title">Point de contact</h2>
                     <FormComponent :repository="repositories.contactPointRepository" :query="queries.contactPointQuery()" :id="itemId">
                       <template v-slot:form.input="{entry: contactPointEntry }">
                         <v-row>
@@ -294,7 +296,7 @@
 
       <!-- IBAN -->
       <ExpansionPanelComponent :title="$t('bank_account')"  icon="fa-euro-sign">
-        <v-container fluid class="container">
+        <v-container class="container">
           <v-row>
             <v-col cols="12" sm="12">
               <DataTableComponent
@@ -305,7 +307,8 @@
                 :headers="datatableHeaders.headersBankAccount"
               >
                 <template v-slot:sheet.content="{itemId}">
-                  <v-container fluid class="container">
+                  <v-container class="container sheetBottomContainer">
+                    <h2 class="sheet_bottom_title">IBAN</h2>
                     <FormComponent :repository="repositories.bankAccountRepository" :id="itemId" :query="queries.bankAccountQuery()">
                       <template v-slot:form.input="{entry: bankAccountEntry }">
                         <v-row>
@@ -367,6 +370,10 @@
       const {siretError, siretErrorMessage, checkSiret} = Utils.useHandleSiret()
       //onUnmounted( useRepositoryHelper.cleanRepository(repository) )
 
+      const readOnly = computed(() => {
+        return useRepositoryHelper.getReadOnly(repositories.organizationRepository)
+      })
+
       return {
         repositories,
         queries: getQueries(),
@@ -380,6 +387,7 @@
         siretErrorMessage,
         checkSiret,
         panel:null,
+        readOnly
       }
     },
 
@@ -449,4 +457,13 @@
   .v-icon.v-icon{
     font-size: 14px;
   }
+  .sheet_bottom_title{
+    text-align: left;
+    border-bottom: 1px solid #1ead8d;
+    margin-bottom: 35px;
+  }
+  .sheetBottomContainer{
+    padding: 20px;
+    padding-top: 30px;
+  }
 </style>