From 57e94c33b528d0f67da56bae2ca34f3c786a8cc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivan=20Ordo=C3=B1ez?= <ivaneliasordonez@outlook.com>
Date: Wed, 22 Jul 2020 22:24:32 -0400
Subject: [PATCH] Unify Checks, Notes and Signatures, Support inner actions in
 Home Cards (#66)

* Checklist, Notes and signature in the same tab

* adjust options for editing reports on index cards
---
 src/ClientApp/pages/Reports/_id/index.vue | 150 +++++++++++++---------
 src/ClientApp/pages/Reports/index.vue     |   2 +-
 src/ClientApp/pages/index.vue             |  41 +++++-
 3 files changed, 123 insertions(+), 70 deletions(-)

diff --git a/src/ClientApp/pages/Reports/_id/index.vue b/src/ClientApp/pages/Reports/_id/index.vue
index 07962cab..43303786 100644
--- a/src/ClientApp/pages/Reports/_id/index.vue
+++ b/src/ClientApp/pages/Reports/_id/index.vue
@@ -103,29 +103,38 @@
     </v-row>
     <v-row>
       <v-col cols="12">
-        <v-tabs v-model="tabs" fixed-tabs>
+        <v-tabs v-model="tabs" fixed-tabs icons-and-text>
           <v-tabs-slider></v-tabs-slider>
           <v-tab href="#checklists" class="primary--text">
-            <v-icon>mdi-check</v-icon>
+            Report Details
+            <v-icon>mdi-message-bulleted</v-icon>
           </v-tab>
 
-          <v-tab href="#notes" class="primary--text">
+          <v-tab v-if="false" href="#notes" class="primary--text">
             <v-icon>mdi-message-bulleted</v-icon>
           </v-tab>
 
           <v-tab href="#photos" class="primary--text">
+            Photo Record
             <v-icon>mdi-folder-multiple-image</v-icon>
           </v-tab>
-          <v-tab href="#signatures" class="primary--text">
+          <v-tab v-if="false" href="#signatures" class="primary--text">
             <v-icon>mdi-signature-freehand</v-icon>
           </v-tab>
         </v-tabs>
         <v-tabs-items v-model="tabs">
           <v-tab-item key="checklists" value="checklists">
-            <v-card flat>
-              <v-card-text>
-                <v-list subheader two-line flat dense>
-                  <v-subheader>Items &amp; Params</v-subheader>
+            <v-expansion-panels
+          multiple
+          focusable
+          :value="[0,1,2]"
+        >
+          <v-expansion-panel>
+            <v-expansion-panel-header>
+              <span>Check List</span>
+            </v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-list subheader two-line flat dense>
                   <v-list-item
                     v-for="(item, checkListIndex) in currentReport.checkList"
                     :key="item.id"
@@ -204,20 +213,23 @@
                     </template>
                   </v-list-item>
                 </v-list>
-              </v-card-text>
-            </v-card>
-          </v-tab-item>
-          <v-tab-item key="notes" value="notes">
-            <v-card flat>
-              <v-card-text>
-                  <v-row>
-                      <v-btn class="mx-2" x-small
-                        fab dark color="primary"
-                        title="Add note"
-                        @click="addNote">
-                        <v-icon dark>mdi-plus</v-icon>
-                        </v-btn>
-                  </v-row>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+          <v-expansion-panel>
+            <v-expansion-panel-header>
+              Notes
+            </v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-row justify="end" align="end" class="text-right">
+                <v-col cols="12">
+                  <v-btn class="mx-2" x-small
+                            fab dark color="primary"
+                            title="Add note"
+                            @click="addNote">
+                            <v-icon dark>mdi-plus</v-icon>
+                  </v-btn>
+                </v-col>
+              </v-row>
                 <div v-for="(note, index) in currentReport.notes" :key="index">
                   <v-row dense align="center" justify="space-around">
                       <v-col cols="1">
@@ -239,11 +251,56 @@
                     <v-col cols="2">
                         <v-checkbox v-model="note.checked" :disabled="currentReport.isClosed" @change="saveNote(note)" :label="note.needsCheck ? '(Check Required)':''" />
                     </v-col>
+                    <v-col>
+                      
+                    </v-col>
                   </v-row>
                 </div>
-
-              </v-card-text>
-            </v-card>
+                <v-row class="mt-10">
+                    
+                </v-row>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+          <v-expansion-panel>
+            <v-expansion-panel-header>
+              Signatures
+            </v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <div v-for="(signature, index) in currentReport.signatures" :key="index">
+                  <v-row>
+                      <v-col class="text-left">
+                          <h3>{{ signature.title }}</h3>
+                          <h5>{{ signature.annotation }}</h5>
+                          <v-chip v-if="signature.principal">Principal Sign</v-chip>
+                      </v-col>
+                  </v-row>
+                  <v-row align="center" justify="space-around">
+                    <v-col cols="6" md="3">
+                        <v-select 
+                        v-model="signature.responsable.type" 
+                        :readonly="currentReport.isClosed"
+                        :items="responsableTypes" 
+                        label="Responsable Type" />
+                    </v-col>
+                    <v-col cols="6" md="3">
+                      <v-text-field v-model="signature.responsable.name" :readonly="currentReport.isClosed" label="Responsable" />
+                    </v-col>
+                    <v-col cols="12" md="4">
+                      <v-text-field v-model="signature.designation" :readonly="currentReport.isClosed" label="Designation" />
+                    </v-col>
+                    <v-col cols="12" md="2">
+                      <DatePickerBase v-model="signature.date" :disabled="currentReport.isClosed" label="Date" max="" />
+                    </v-col>
+                  </v-row>
+                  <v-row>
+                      <v-col>
+                          <v-text-field v-model="signature.remarks" :readonly="currentReport.isClosed" label="Remarks (if any)" />
+                      </v-col>
+                  </v-row>
+                </div>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </v-expansion-panels>
           </v-tab-item>
           <v-tab-item key="photos" value="photos">
             <v-card flat>
@@ -346,47 +403,14 @@
                 </v-row>
             </v-card>
           </v-tab-item>
-          <v-tab-item key="signatures" value="signatures">
-            <v-card flat>
-              <v-card-text>
-                  <div v-for="(signature, index) in currentReport.signatures" :key="index">
-                  <v-row>
-                      <v-col class="text-left">
-                          <h3>{{ signature.title }}</h3>
-                          <h5>{{ signature.annotation }}</h5>
-                          <v-chip v-if="signature.principal">Principal Sign</v-chip>
-                      </v-col>
-                  </v-row>
-                  <v-row align="center" justify="space-around">
-                    <v-col cols="6" md="3">
-                        <v-select 
-                        v-model="signature.responsable.type" 
-                        :readonly="currentReport.isClosed"
-                        :items="responsableTypes" 
-                        label="Responsable Type" />
-                    </v-col>
-                    <v-col cols="6" md="3">
-                      <v-text-field v-model="signature.responsable.name" :readonly="currentReport.isClosed" label="Responsable" />
-                    </v-col>
-                    <v-col cols="12" md="4">
-                      <v-text-field v-model="signature.designation" :readonly="currentReport.isClosed" label="Designation" />
-                    </v-col>
-                    <v-col cols="12" md="2">
-                      <DatePickerBase v-model="signature.date" :disabled="currentReport.isClosed" label="Date" max="" />
-                    </v-col>
-                  </v-row>
-                  <v-row>
-                      <v-col>
-                          <v-text-field v-model="signature.remarks" :readonly="currentReport.isClosed" label="Remarks (if any)" />
-                      </v-col>
-                  </v-row>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-tab-item>
         </v-tabs-items>
       </v-col>
     </v-row>
+    <v-row>
+      <v-col>
+        
+      </v-col>
+    </v-row>
     <v-dialog v-if="currentPhoto" v-model="showCarousel">
       <v-carousel v-model="currentPhoto" height="80%">
         <v-carousel-item v-for="(photo, index) in currentReport.photoRecords" :key="index" :src="`${hostName}${photo.fileName}`">
diff --git a/src/ClientApp/pages/Reports/index.vue b/src/ClientApp/pages/Reports/index.vue
index fd0289c2..6155efcf 100644
--- a/src/ClientApp/pages/Reports/index.vue
+++ b/src/ClientApp/pages/Reports/index.vue
@@ -49,7 +49,7 @@
           class="mr-2"
           @click="$router.push({ name: 'Reports-id', params: { id: item.id} })"
         >
-          mdi-file-chart
+          mdi-pencil
         </v-icon>
         <v-icon
           small
diff --git a/src/ClientApp/pages/index.vue b/src/ClientApp/pages/index.vue
index 0da1500f..6da1f5e6 100644
--- a/src/ClientApp/pages/index.vue
+++ b/src/ClientApp/pages/index.vue
@@ -3,8 +3,8 @@
   <v-row>
     <new-report-dialog v-model="dialog" @report-created="goToNewReport($event)" />
     <v-col cols="12" lg="3" md="3" v-for="(option, index) in cardOptions" :key="index">
-      <v-card min-height="250" min-width="200" max-height="250" class="pt-10" @click="onCardClick(option)">
-        <v-btn fab :class="option.color" dark>
+      <v-card min-height="250" min-width="200" class="pt-10" :ripple="option.innerActions ? false:true" @click="option.innerActions ? 0:onCardClick(option)">
+        <v-btn v-if="!option.innerActions" fab :class="option.color" dark>
           <v-icon>
             {{ option.icon }}
           </v-icon>
@@ -23,6 +23,18 @@
             </v-col>
           </v-row>
         </v-card-subtitle>
+        <v-card-actions>
+          <v-row>
+            <v-col cols="6" v-for="(action, index) in option.innerActions" :key="index">
+              <v-btn :color="action.color" tile :block="$vuetify.breakpoint.smAndDown" @click.stop="action.action()">
+                <v-icon>
+                  {{ action.icon }}
+                </v-icon>
+                {{ action.text }}
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card-actions>
       </v-card>
     </v-col>
   </v-row>
@@ -52,17 +64,34 @@ export default class IndexPage extends Vue{
     },
     {
       text: 'Edit Report',
-      helpText: 'Edit or remove a previously created report from a list and optionally allows to go directly to the last created or edited report by current user',
+      helpText: 'Click one of the Options bellow',
       icon: 'mdi-pencil',
       color: 'accent',
       path: () => { 
         if (this.$auth.user.lastEditedReport)
-          if(confirm('Do you wanna edit the last edited report?'))
+          if(confirm('Click one of the Options bellow'))
             return `/reports/${this.$auth.user.lastEditedReport}` 
           else return `/reports`
         else
           return `/reports`
-      }
+      },
+      innerActions: [
+        {
+          text: 'Edit Last',
+          color: 'primary',
+          action: () => {
+            if (this.$auth.user.lastEditedReport)
+              window.$nuxt.$router.push(`/reports/${this.$auth.user.lastEditedReport}`) 
+          }
+        },
+        {
+          text: 'List All',
+          color: 'primary',
+          action: () => {
+            window.$nuxt.$router.push(`/reports`) 
+          }
+        }
+      ]
     },
     {
       text: 'View or Export Report',
@@ -76,7 +105,7 @@ export default class IndexPage extends Vue{
       helpText: 'Allows to Configure reports check lists, signatures, titles and names',
       icon: 'mdi-cog-outline',
       color: 'accent',
-      path: '/configurations'
+      path: '/configurations?configurationonly=true'
     }
   ]