From f4a35cffc25b337a4d4a219de255feeca6a1c04d Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 24 Jun 2019 14:40:18 +0200
Subject: [PATCH] refactor: adjust widgets to library component changes

---
 src/views/Dashboard.vue                       |  6 +-
 src/views/widgets/Widgets.vue                 | 81 ++++++-------------
 .../{WidgetsSocial.vue => WidgetsBrand.vue}   | 32 ++++----
 src/views/widgets/WidgetsDropdown.vue         | 73 ++++++++---------
 4 files changed, 81 insertions(+), 111 deletions(-)
 rename src/views/widgets/{WidgetsSocial.vue => WidgetsBrand.vue} (91%)

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 15faaa59..dbf15ce0 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -82,7 +82,7 @@
         </CRow>
       </CCardFooter>
     </CCard>
-    <WidgetsSocial/>
+    <WidgetsBrand/>
     <CRow>
       <CCol md="12">
         <CCard header-html="Traffic &amp; Sales" body-wrapper>
@@ -451,7 +451,7 @@
 <script>
 import MainChartExample from './charts/MainChartExample'
 import WidgetsDropdown from './widgets/WidgetsDropdown'
-import WidgetsSocial from './widgets/WidgetsSocial'
+import WidgetsBrand from './widgets/WidgetsBrand'
 import CChartLineSimple from './charts/CChartLineSimple'
 
 export default {
@@ -459,7 +459,7 @@ export default {
   components: {
     MainChartExample,
     WidgetsDropdown,
-    WidgetsSocial,
+    WidgetsBrand,
     CChartLineSimple
   },
   data () {
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 999f75e9..668b74dd 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -121,48 +121,6 @@
         </CWidgetIcon>
       </CCol>
     </CRow>
-    <CRow>
-      <CCol col="12" sm="6" lg="3">
-        <CWidgetIcon
-          header="$1.999,50"
-          text="Income"
-          variant="primary"
-          link="#"
-        >
-          <CIcon name="settings" width="24"/>
-        </CWidgetIcon>
-      </CCol>
-      <CCol col="12" sm="6" lg="3">
-        <CWidgetIcon
-          header="$1.999,50"
-          text="Income"
-          variant="info"
-          link="#"
-        >
-          <CIcon name="laptop" width="24"/>
-        </CWidgetIcon>
-      </CCol>
-      <CCol col="12" sm="6" lg="3">
-        <CWidgetIcon
-          header="$1.999,50"
-          text="Income"
-          variant="warning"
-          link="#"
-        >
-          <CIcon name="moon" width="24"/>
-        </CWidgetIcon>
-      </CCol>
-      <CCol col="12" sm="6" lg="3">
-        <CWidgetIcon
-          header="$1.999,50"
-          text="Income"
-          variant="danger"
-          link="#"
-        >
-          <CIcon name="bell" width="24"/>
-        </CWidgetIcon>
-      </CCol>
-    </CRow>
     <CRow>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
@@ -234,10 +192,21 @@
           no-padding
         >
           <CIcon name="moon" class="c-mx-5 " width="24"/>
+          <template #footer>
+            <CCardFooter class="c-card-footer c-px-3 c-py-2">
+              <CLink
+                class="c-font-weight-bold c-font-xs c-btn-block c-text-muted"
+                href="https://coreui.io/"
+              >
+                View more
+                <CIcon name="arrowRight" class="c-float-right" width="16"/>
+              </CLink>
+            </CCardFooter>
+          </template>
         </CWidgetIcon>
       </CCol>
     </CRow>
-    <CRow>
+    <!-- <CRow>
       <CCol col="12" sm="6" lg="4">
         <CWidgetIcon
           header="$1.999,50"
@@ -271,9 +240,9 @@
           <CIcon name="moon" class="c-mx-5" width="24"/>
         </CWidgetIcon>
       </CCol>
-    </CRow>
-    <WidgetsSocial noCharts/>
-    <WidgetsSocial/>
+    </CRow> -->
+    <WidgetsBrand noCharts/>
+    <WidgetsBrand/>
     <CCardGroup class="c-mb-4">
       <CWidgetProgressIcon
         header="87.500"
@@ -473,7 +442,7 @@
     <WidgetsDropdown/>
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidgetSmallText
+        <CWidgetHeaderDetails
           right-header="SALE"
           right-footer="Today 6:43 AM"
           left-header="$1.890,65"
@@ -481,10 +450,10 @@
         >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
-        </CWidgetSmallText>
+        </CWidgetHeaderDetails>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetSmallText
+        <CWidgetHeaderDetails
           variant="success"
           right-header="SALE"
           right-footer="Today 6:43 AM"
@@ -493,10 +462,10 @@
         >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
-        </CWidgetSmallText>
+        </CWidgetHeaderDetails>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetSmallText
+        <CWidgetHeaderDetails
           variant="danger"
           right-header="SALE"
           right-footer="Today 6:43 AM"
@@ -505,10 +474,10 @@
         >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
-        </CWidgetSmallText>
+        </CWidgetHeaderDetails>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetSmallText
+        <CWidgetHeaderDetails
           variant="warning"
           right-header="SALE"
           right-footer="Today 6:43 AM"
@@ -517,7 +486,7 @@
         >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
-        </CWidgetSmallText>
+        </CWidgetHeaderDetails>
       </CCol>
     </CRow>
     <CRow>
@@ -556,7 +525,7 @@
 </template>
 
 <script>
-import WidgetsSocial from './WidgetsSocial'
+import WidgetsBrand from './WidgetsBrand'
 import WidgetsDropdown from './WidgetsDropdown'
 import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
 
@@ -565,7 +534,7 @@ export default {
   components: {
     CChartLineSimple,
     CChartBarSimple,
-    WidgetsSocial,
+    WidgetsBrand,
     WidgetsDropdown
   }
 }
diff --git a/src/views/widgets/WidgetsSocial.vue b/src/views/widgets/WidgetsBrand.vue
similarity index 91%
rename from src/views/widgets/WidgetsSocial.vue
rename to src/views/widgets/WidgetsBrand.vue
index 3bd5f82c..89bb2d38 100644
--- a/src/views/widgets/WidgetsSocial.vue
+++ b/src/views/widgets/WidgetsBrand.vue
@@ -2,7 +2,7 @@
   <CRow>
     <template v-if="!noCharts">
       <CCol md="3" sm="6">
-        <CWidgetSocial
+        <CWidgetBrand
           variant="facebook"
           right-header="89k"
           right-footer="friends"
@@ -22,10 +22,10 @@
             label="Friends"
             labels="months"
           />
-        </CWidgetSocial>
+        </CWidgetBrand>
        </CCol>
        <CCol md="3" sm="6">
-        <CWidgetSocial
+        <CWidgetBrand
           variant="twitter"
           right-header="973k"
           right-footer="followers"
@@ -45,10 +45,10 @@
             label="Followers"
             labels="months"
           />
-        </CWidgetSocial>
+        </CWidgetBrand>
        </CCol>
        <CCol md="3" sm="6">
-        <CWidgetSocial
+        <CWidgetBrand
           variant="linkedin"
           right-header="500+"
           right-footer="contracts"
@@ -68,10 +68,10 @@
             label="Contracts"
             labels="months"
           />
-        </CWidgetSocial>
+        </CWidgetBrand>
        </CCol>
        <CCol md="3" sm="6">
-        <CWidgetSocial
+        <CWidgetBrand
           right-header="12"
           right-footer="events"
           left-header="4"
@@ -91,12 +91,12 @@
             label="Followers"
             labels="months"
           />
-        </CWidgetSocial>
+        </CWidgetBrand>
       </CCol>
     </template>
     <template v-else>
       <CCol md="3" sm="6">
-        <CWidgetSocial
+        <CWidgetBrand
           variant="facebook"
           right-header="89k"
           right-footer="friends"
@@ -108,10 +108,10 @@
             height="56"
             class="c-my-4"
           />
-        </CWidgetSocial>
+        </CWidgetBrand>
        </CCol>
        <CCol md="3" sm="6">
-        <CWidgetSocial
+        <CWidgetBrand
           variant="twitter"
           right-header="973k"
           right-footer="followers"
@@ -123,10 +123,10 @@
             height="56"
             class="c-my-4"
           />
-        </CWidgetSocial>
+        </CWidgetBrand>
        </CCol>
        <CCol md="3" sm="6">
-        <CWidgetSocial
+        <CWidgetBrand
           variant="linkedin"
           right-header="500+"
           right-footer="contracts"
@@ -138,10 +138,10 @@
             height="56"
             class="c-my-4"
           />
-        </CWidgetSocial>
+        </CWidgetBrand>
        </CCol>
       <CCol md="3" sm="6">
-        <CWidgetSocial
+        <CWidgetBrand
           right-header="12"
           right-footer="events"
           left-header="4"
@@ -153,7 +153,7 @@
             height="56"
             class="c-my-4"
           />
-        </CWidgetSocial>
+        </CWidgetBrand>
       </CCol>
     </template>
   </CRow>
diff --git a/src/views/widgets/WidgetsDropdown.vue b/src/views/widgets/WidgetsDropdown.vue
index 1e0e7dc8..4dd04277 100644
--- a/src/views/widgets/WidgetsDropdown.vue
+++ b/src/views/widgets/WidgetsDropdown.vue
@@ -2,7 +2,7 @@
   <CRow>
     <CCol sm="6" lg="3">
       <CWidgetDropdown header="9.823" text="Members online">
-        <template #dropdown>
+        <template #default>
           <CDropdown
             class="c-float-right"
             variant="transparent c-p-0"
@@ -15,20 +15,22 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-        <CChartLineSimple
-          pointed
-          class="c-px-3"
-          style="height:70px"
-          :data-points="[65, 59, 84, 84, 51, 55, 40]"
-          background-color="primary"
-          label="Members"
-          labels="months"
-        />
+        <template #footer>
+          <CChartLineSimple
+            pointed
+            class="c-px-3"
+            style="height:70px"
+            :data-points="[65, 59, 84, 84, 51, 55, 40]"
+            background-color="primary"
+            label="Members"
+            labels="months"
+          />
+        </template>
       </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
       <CWidgetDropdown variant="info" header="9.823" text="Members online">
-        <template #dropdown>
+        <template #default>
           <CDropdown
             class="c-float-right"
             variant="transparent c-p-0"
@@ -42,16 +44,18 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-        <CChartLineSimple
-          pointed
-          class="c-px-3"
-          style="height:70px"
-          :data-points="[1, 18, 9, 17, 34, 22, 11]"
-          background-color="info"
-          :options="{ elements: { line: { tension: 0.00001 }}}"
-          label="Members"
-          labels="months"
-        />
+        <template #footer>
+          <CChartLineSimple
+            pointed
+            class="c-px-3"
+            style="height:70px"
+            :data-points="[1, 18, 9, 17, 34, 22, 11]"
+            background-color="info"
+            :options="{ elements: { line: { tension: 0.00001 }}}"
+            label="Members"
+            labels="months"
+          />
+        </template>
       </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
@@ -60,8 +64,7 @@
         header="9.823"
         text="Members online"
       >
-
-        <template #dropdown>
+        <template #default>
           <CDropdown
             class="c-float-right"
             variant="transparent c-p-0"
@@ -74,6 +77,7 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
+        <template #footer>
           <CChartLineSimple
             style="height:70px"
             background-color="rgba(255,255,255,.2)"
@@ -83,6 +87,7 @@
             label="Members"
             labels="months"
           />
+        </template>
       </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
@@ -91,8 +96,7 @@
         header="9.823"
         text="Members online"
       >
-
-        <template #dropdown>
+        <template #default>
           <CDropdown
             class="c-float-right"
             variant="transparent c-p-0"
@@ -105,12 +109,14 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-        <CChartBarSimple
-          style="height:70px"
-          background-color="rgb(250, 152, 152)"
-          label="Members"
-          labels="months"
-        />
+        <template #footer>
+          <CChartBarSimple
+            style="height:70px"
+            background-color="rgb(250, 152, 152)"
+            label="Members"
+            labels="months"
+          />
+        </template>
       </CWidgetDropdown>
     </CCol>
   </CRow>
@@ -121,11 +127,6 @@ import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
 
 export default {
   name: 'WidgetsDropdown',
-  // data () {
-  //   return {
-  //     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
-  //   }
-  // },
   components: { CChartLineSimple, CChartBarSimple }
 }
 </script>