fix(profile):Fix Dividing components | JIRA PT-201

src/assets/css/form.scss

@@ -29,7 +29,6 @@ body {
     .el-overlay-dialog {
       @apply overflow-hidden #{!important};
     }
-
   }
   // Notification - Form popup
   .el-dialog.sign-in {
@@ -41,7 +40,6 @@ body {
     .el-dialog__header {
       @apply hidden;
     }
-
   }
 
   // Shadow form
@@ -91,7 +89,6 @@ body {
     }
   }
   .authentication-form {
-
     .el-form-item__error {
       @apply font-bold;
     }
@@ -112,7 +109,7 @@ body {
         @apply rounded h-4 w-4 border-0 shadow #{!important};
       }
       .el-checkbox__inner::after {
-        @apply border-2 w-0.5	h-[5px] mt-0.5 ml-0.5  #{!important};
+        @apply border-[3px] w-0.5	h-[5px] mt-0.5 ml-0.5  #{!important};
       }
     }
     .el-checkbox.is-checked {

src/assets/css/grid.scss

@@ -0,0 +1,5 @@
+body {
+  .grid-items {
+    @apply p-3 my-1 bg-[#fff] border border-slate-200 rounded drop-shadow-[0_4px_16px_rgba(0,0,0,0.10)] shadow-[0_0_0_1px_rgb(0,0,0,0.10)] text-left text-sm text-[#393f49] border-0 font-normal;
+  }
+}

src/components/element-plus.ts

@@ -5,6 +5,7 @@ import 'assets/css/el-popper.scss'
 import 'assets/css/el-breadcrumb.scss'
 import 'assets/css/notifications.scss'
 import 'assets/css/form.scss'
+import 'assets/css/grid.scss'
 
 import 'assets/css/el-progress.scss'
 import 'assets/css/el-loading.scss'

src/modules/grid/views/components/OneColumnWidth.vue

@@ -1,16 +1,14 @@
 <template>
   <div class="w-full">
-    <div>
-      <div class="flex gap-4 text-center mb-6">
-        <div class="grid-items flex-auto">1 of 3</div>
-        <div class="grid-items flex-auto w-2/4">2 of 3 (wider)</div>
-        <div class="grid-items flex-auto">3 of 3</div>
-      </div>
-      <div class="flex gap-4 text-center">
-        <div class="grid-items flex-auto">1 of 3</div>
-        <div class="grid-items flex-auto w-2/5">2 of 3 (wider)</div>
-        <div class="grid-items flex-auto">3 of 3</div>
-      </div>
+    <div class="flex gap-4 text-center mb-6">
+      <div class="grid-items flex-auto">1 of 3</div>
+      <div class="grid-items flex-auto w-2/4">2 of 3 (wider)</div>
+      <div class="grid-items flex-auto">3 of 3</div>
+    </div>
+    <div class="flex gap-4 text-center">
+      <div class="grid-items flex-auto">1 of 3</div>
+      <div class="grid-items flex-auto w-2/5">2 of 3 (wider)</div>
+      <div class="grid-items flex-auto">3 of 3</div>
     </div>
   </div>
 </template>
@@ -22,9 +20,3 @@ export default defineComponent({
   name: 'OneColumnWidth',
 })
 </script>
-
-<style scoped>
-.grid-items {
-  @apply p-3 my-1 bg-[#fff] border border-slate-200 rounded drop-shadow-[0_4px_16px_rgba(0,0,0,0.10)] shadow-[0_0_0_1px_rgb(0,0,0,0.10)] text-left text-sm text-[#393f49] border-0 font-normal;
-}
-</style>

src/modules/profile/views/components/FormCard.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="w-full">
+    <el-card class="items-center border-white">
+      <template #header>
+        <div class="flex justify-between py-2">
+          <h3>Edit Profile</h3>
+          <el-button class="text-sky-700" size="small" type="primary">Settings</el-button>
+        </div>
+      </template>
+      <!-- USER INFORMATION -->
+      <div class="user-info">
+        <div class="user-form">
+          <!-- form title -->
+          <h6 class="text-xs text-muted py-1 -tracking-tighter uppercase mb-6 leading-6">
+            USER INFORMATION
+          </h6>
+          <div class="lg:pl-6">
+            <el-form :model="userForm" label-position="top">
+              <el-form-item label="Name">
+                <el-input v-model="userForm.name" placeholder="Admin" />
+              </el-form-item>
+              <el-form-item label="Email">
+                <el-input v-model="userForm.mail" placeholder="admin@argon.com" />
+              </el-form-item>
+
+              <el-form-item label="Profile photo">
+                <el-upload class="w-full" action="#">
+                  <el-input placeholder="demo.png" class="input-upload">
+                    <template #append>Browse</template>
+                  </el-input>
+                </el-upload>
+              </el-form-item>
+            </el-form>
+            <div class="flex justify-center mt-[50px]">
+              <el-button type="success">Save</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- Password -->
+      <div class="pass-info">
+        <div class="pass-form">
+          <!-- Form title -->
+          <h6 class="text-xs text-muted py-1 -tracking-tighter uppercase mb-6 leading-6">
+            PASSWORD
+          </h6>
+          <div class="lg:pl-6">
+            <el-form :model="passForm" label-position="top" show-password>
+              <el-form-item label="Current Password">
+                <el-input
+                  v-model="passForm.oldPass"
+                  type="password"
+                  placeholder="Current Password"
+                />
+              </el-form-item>
+              <el-form-item label="New Password">
+                <el-input v-model="passForm.newPass" type="password" placeholder="New Password" />
+              </el-form-item>
+              <el-form-item label="Confirm New Password">
+                <el-input
+                  v-model="passForm.confirmPass"
+                  type="password"
+                  placeholder="Confirm New Password"
+                />
+              </el-form-item>
+            </el-form>
+            <div class="flex justify-center mt-[50px]">
+              <el-button type="success">Change password</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive } from 'vue'
+
+export default defineComponent({
+  name: 'FormCard',
+  setup() {
+    const userForm = reactive({
+      name: '',
+      mail: '',
+    })
+
+    const passForm = reactive({
+      oldPass: '',
+      newPass: '',
+      confirmPass: '',
+    })
+
+    return {
+      userForm,
+      passForm,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-input.el-input--default.el-input-group.el-input-group--append):focus-within {
+  @apply border border-blue-500 rounded #{!important};
+  &.input-upload .el-input__inner {
+    @apply focus:border-t-0 focus:border-l-0 focus:border-b-0;
+  }
+  &.input-upload .el-input-group__append {
+    @apply border-0 #{!important};
+  }
+}
+</style>

src/modules/profile/views/components/LeftIndicator.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="w-full">
+    <el-card class="border-white indicator bg-gradient-to-r from-info to-blue-410 border-0">
+      <div class="flex flex-wrap">
+        <div class="basis-0 grow">
+          <div class="card-header">
+            <h5 class="font-semibold text-0.8125 text-white mb-0">TOTAL TRAFFIC</h5>
+          </div>
+          <h2 class="text-xl text-white font-semibold mb-0 leading-7.5">350,897</h2>
+        </div>
+        <div
+          class="w-12 h-12 text-center inline-flex items-center justify-center rounded-full text-black bg-white"
+        >
+          <font-awesome-icon :icon="['fas', 'hand-point-up']" size="lg" />
+        </div>
+      </div>
+      <p class="mt-4 mb-0 text-sm">
+        <span class="text-white mr-2 inline">
+          <ArrowUpIcon class="inline pb-1 h-5 w-4" aria-hidden="true" />
+          3.48%
+        </span>
+        <span class="whitespace-nowrap text-light">Since last month</span>
+      </p>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { ArrowUpIcon } from '@heroicons/vue/solid'
+
+export default defineComponent({
+  name: 'LeftIndicator',
+  components: {
+    ArrowUpIcon,
+  },
+})
+</script>

src/modules/profile/views/components/Progress.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="w-full">
+    <el-card class="border-none">
+      <template #header>
+        <h3 class="cursor-auto mb-0 text-primary">Progress track</h3>
+      </template>
+      <div class="flex flex-col my-[-16px]">
+        <div class="flex gap-7 progress items-center">
+          <el-link
+            :underline="false"
+            class="card-avatar-profile block flex-none h-12 w-12 overflow-hidden border-[0.2px] rounded-full"
+          >
+            <el-avatar
+              :size="!isHover ? 48 : 48"
+              @mouseover="hoverCheck(true)"
+              @mouseleave="hoverCheck(false)"
+              :src="bootstrapLogo"
+              class="transition-all border-white border-0"
+            />
+          </el-link>
+
+          <div class="flex-auto">
+            <h5 class="mb-2">Argon Design System</h5>
+            <el-progress :percentage="59" :show-text="false" :color="customColors" />
+          </div>
+        </div>
+        <div class="flex gap-7 progress items-center">
+          <el-link
+            :underline="false"
+            class="card-avatar-profile block flex-none h-12 w-12 overflow-hidden border-[0.2px] rounded-full"
+          >
+            <el-avatar
+              :size="!isHover ? 48 : 48"
+              @mouseover="hoverCheck(true)"
+              @mouseleave="hoverCheck(false)"
+              :src="angularLogo"
+              class="transition-all border-white border-0"
+            />
+          </el-link>
+
+          <div class="flex-auto">
+            <h5 class="mb-2">Angular Now UI Kit PRO</h5>
+            <el-progress :percentage="100" :show-text="false" :color="customColors" />
+          </div>
+        </div>
+        <div class="flex gap-7 progress items-center">
+          <el-link
+            :underline="false"
+            class="card-avatar-profile block flex-none h-12 w-12 overflow-hidden border-[0.2px] rounded-full"
+          >
+            <el-avatar
+              :size="!isHover ? 48 : 48"
+              @mouseover="hoverCheck(true)"
+              @mouseleave="hoverCheck(false)"
+              :src="sketchLogo"
+              class="transition-all border-white border-0"
+            />
+          </el-link>
+
+          <div class="flex-auto">
+            <h5 class="mb-2">Black Dashboard</h5>
+            <el-progress :percentage="70" :show-text="false" :color="customColors" />
+          </div>
+        </div>
+        <div class="flex gap-7 progress items-center">
+          <el-link
+            :underline="false"
+            class="card-avatar-profile block flex-none h-12 w-12 overflow-hidden border-[0.2px] rounded-full"
+          >
+            <el-avatar
+              :size="!isHover ? 48 : 48"
+              @mouseover="hoverCheck(true)"
+              @mouseleave="hoverCheck(false)"
+              :src="reactLogo"
+              class="transition-all border-white border-0"
+            />
+          </el-link>
+
+          <div class="flex-auto">
+            <h5 class="mb-2">React Material Dashboard</h5>
+            <el-progress :percentage="82" :show-text="false" :color="customColors" />
+          </div>
+        </div>
+        <div class="flex gap-7 progress items-center">
+          <el-link
+            :underline="false"
+            class="card-avatar-profile block flex-none h-12 w-12 overflow-hidden border-[0.2px] rounded-full"
+          >
+            <el-avatar
+              :size="!isHover ? 48 : 48"
+              @mouseover="hoverCheck(true)"
+              @mouseleave="hoverCheck(false)"
+              :src="vueLogo"
+              class="transition-all border-white border-0"
+            />
+          </el-link>
+
+          <div class="flex-auto">
+            <h5 class="mb-2">Vue Paper UI Kit PRO</h5>
+            <el-progress :percentage="100" :show-text="false" :color="customColors" />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+import reactLogo from '@/assets/images/react.jpg'
+import sketchLogo from '@/assets/images/sketch.jpg'
+import bootstrapLogo from '@/assets/images/bootstrap.jpg'
+import vueLogo from '@/assets/images/vue.jpg'
+import angularLogo from '@/assets/images/angular.jpg'
+
+export default defineComponent({
+  name: 'Progress',
+  setup(_) {
+    const isHover = ref(false)
+    const hoverCheck = (b: boolean) => {
+      isHover.value = b
+    }
+
+    const customColors = [
+      { color: '#fb6340', percentage: 60 },
+      { color: '#f5365c', percentage: 80 },
+      { color: '#11cdef', percentage: 85 },
+      { color: '#2dce89', percentage: 100 },
+    ]
+
+    return {
+      customColors,
+      bootstrapLogo,
+      reactLogo,
+      sketchLogo,
+      vueLogo,
+      angularLogo,
+      isHover,
+      hoverCheck,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.progress) .el-link--inner {
+  @apply border-0 #{!important};
+}
+
+.el-card__body .progress {
+  @apply border-b py-5 border-b-[#e9ecef] #{!important};
+}
+.el-card__body .progress:last-child {
+  @apply border-0 border-b-[#e9ecef] #{!important};
+}
+</style>