From 581a3b0e3375611d95a4832b4e95a2b567b01171 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 00:37:16 +0800
Subject: [PATCH] feature: governance list

---
 src/components/ProposalListItem.vue      | 99 ++++++++++++------------
 src/components/ProposalProcess.vue       | 58 +++++---------
 src/layouts/components/DefaultLayout.vue | 60 +++++++-------
 tailwind.config.js                       |  8 +-
 4 files changed, 109 insertions(+), 116 deletions(-)

diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index cef0985c..edfa7c0f 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -6,57 +6,56 @@ import ProposalProcess from './ProposalProcess.vue';
 import type { PropType } from 'vue';
 
 const props = defineProps({
-  proposals: { type: Object as PropType<PaginatedProposals>},
-})
+  proposals: { type: Object as PropType<PaginatedProposals> },
+});
 // const list = computed(()=> proposl)
-const format = useFormatter()
-const staking = useStakingStore()
-const chain = useBlockchain()
-function showType(v: string){
-    if(v) {
-        return v.substring(v.lastIndexOf('.')+1)
-    }
-    return v 
+const format = useFormatter();
+const staking = useStakingStore();
+const chain = useBlockchain();
+function showType(v: string) {
+  if (v) {
+    return v.substring(v.lastIndexOf('.') + 1);
+  }
+  return v;
 }
+
+const statusMap: Record<string, string> = {
+  PROPOSAL_STATUS_VOTING_PERIOD: 'VOTING',
+  PROPOSAL_STATUS_PASSED: 'PASSED',
+  PROPOSAL_STATUS_REJECTED: 'REJECTED',
+};
 </script>
 <template>
-    <VExpansionPanels variant="accordion">
-            <VExpansionPanel v-for="(x, i) in proposals?.proposals">
-              <VExpansionPanelTitle disable-icon-rotate>
-                    <VChip label color="primary" class="mr-2">{{x.proposal_id}}</VChip>
-                    <div class="w-100"><VChip label>{{ showType(x.content['@type']) }}</VChip> {{ x.content?.title }}
-                      <div class="d-flex mt-1">
-                        <small class="text-secondary me-auto"> {{ format.toDay(x.voting_end_time, 'from') }}</small>      
-                        <ProposalProcess style="width:300px;" :pool="staking.pool" :tally="x.final_tally_result"></ProposalProcess> 
-                        <span></span>
-                      </div>              
-                    </div>
-                <template #actions>    
-                  <VIcon
-                    v-if="x.status === 'PROPOSAL_STATUS_PASSED'"
-                    icon="mdi-check"
-                    color="success"
-                    class="ml-2"
-                  />
-                  <VIcon
-                    v-if="x.status === 'PROPOSAL_STATUS_REJECTED'"
-                    icon="mdi-multiply"
-                    color="error"
-                    class="ml-2"
-                  />
-                </template>
-              </VExpansionPanelTitle>
-              <VExpansionPanelText>
-                <VCard class="card-box">         
-                  <VCardText>
-                    <MdEditor :model-value="format.multiLine(x.content?.description)" previewOnly></MdEditor> 
-                  </VCardText>
-                  <div class="text-center w-100 my-2">
-                    <VBtn :to="`/${chain.chainName}/gov/${x.proposal_id}`" color="primary" variant="flat" size="small">Detail</VBtn> 
-                    <VBtn color="primary" variant="flat" class="ml-2" size="small">Vote</VBtn> 
-                  </div>
-                </VCard>
-              </VExpansionPanelText>
-            </VExpansionPanel>
-          </VExpansionPanels>    
-</template>
\ No newline at end of file
+  <div class="bg-[#28334e] rounded text-sm">
+    <RouterLink
+      :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+      v-for="(item, index) in proposals?.proposals"
+      :key="index"
+      class="py-4 px-4 hover:bg-[#353f5a] block rounded cursor-pointer"
+    >
+      <div class="grid grid-cols-6 md:grid-cols-11 flex-1">
+        <div class="text-white mb-3">#{{ item?.proposal_id }}</div>
+
+        <div class="col-span-5 md:pr-10 text-white truncate">
+          {{ item?.content?.title }}
+        </div>
+
+        <div class="col-span-3 mb-3 truncate">
+          <div class="bg-gray-600 text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs">
+            {{ showType(item.content['@type']) }}
+          </div>
+        </div>
+
+        <div class="text-yes flex items-center mb-3">
+          <div class="w-1 h-1 bg-yes rounded-full mr-2"></div>
+          <div class="text-xs">{{ statusMap?.[item?.status] || item?.status }}</div>
+        </div>
+
+        <div class="truncate mb-3 col-span-2 md:col-span-1 text-right md:flex md:justify-start">
+          {{ format.toDay(item.voting_end_time, 'from') }}
+        </div>
+      </div>
+      <ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
+    </RouterLink>
+  </div>
+</template>
diff --git a/src/components/ProposalProcess.vue b/src/components/ProposalProcess.vue
index 82fd26e2..ab6db423 100644
--- a/src/components/ProposalProcess.vue
+++ b/src/components/ProposalProcess.vue
@@ -2,52 +2,36 @@
 import { useFormatter } from '@/stores';
 import type { Tally } from '@/types';
 import { computed } from '@vue/reactivity';
-import { ref, type PropType } from 'vue';
-
+import type { PropType } from 'vue';
 
 const props = defineProps({
-  tally: { type: Object as PropType<Tally>},
+  tally: { type: Object as PropType<Tally> },
   pool: {
     type: Object as PropType<{
-        not_bonded_tokens: string;
-        bonded_tokens: string;
+      not_bonded_tokens: string;
+      bonded_tokens: string;
     }>,
   },
-})
-const total = computed(() => props.pool?.bonded_tokens)
-const format = useFormatter()
-const yes = computed(() => (format.calculatePercent(props.tally?.yes, total.value)))
-const no = computed(() => ref(format.calculatePercent(props.tally?.no, total.value)))
-const abstain = computed(() => (format.calculatePercent(props.tally?.abstain, total.value)))
-const veto = computed(() => (format.calculatePercent(props.tally?.no_with_veto, total.value)))
-
+});
+const total = computed(() => props.pool?.bonded_tokens);
+const format = useFormatter();
+const yes = computed(() => format.calculatePercent(props.tally?.yes, total.value));
+const no = computed(() => format.calculatePercent(props.tally?.no, total.value));
+const abstain = computed(() => format.calculatePercent(props.tally?.abstain, total.value));
+const veto = computed(() => format.calculatePercent(props.tally?.no_with_veto, total.value));
 </script>
+
 <template>
-<div class="progress">
-  <div class="progress-bar bg-success" :style="`width: ${yes}`"> {{ yes }}</div>
-  <div class="progress-bar bg-error" :style="`width: ${no}`">{{ no }} </div>
-  <div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"> {{ veto }} </div>
-  <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"> </div>
-</div>
+  <div class="progress rounded-full h-1 text-xs">
+    <div class="h-1 bg-yes" :style="`width: ${yes}`"></div>
+    <div class="h-1 bg-no" :style="`width: ${no}`"></div>
+    <div class="h-1" :style="`width: ${veto}; background-color: #B71C1C;`"></div>
+    <div class="h-1 bg-secondary" :style="`width: ${abstain}`"></div>
+  </div>
 </template>
 <style scoped>
 .progress {
-    height: 0.8rem;
-    overflow: hidden;
-    background-color: rgba(128, 128, 128, 0.178);
+  overflow: hidden;
+  background-color: rgba(128, 128, 128, 0.178);
 }
-.progress-bar {
-    display: inline-block;
-    height: 100%;
-}
-.progress :first-child {
-    border-radius: 0px !important;
-    border-top-right-radius: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-top-left-radius: 0;
-}
-.progress :last-child {
-    border-radius: 0px !important;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index b4373bf3..309525fc 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -1,41 +1,42 @@
 <script lang="ts" setup>
-import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfig'
+import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfig';
 
 // Components
-import Footer from '@/layouts/components/Footer.vue'
-import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
-import UserProfile from '@/layouts/components/ChainProfile.vue'
+import Footer from '@/layouts/components/Footer.vue';
+import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
+import UserProfile from '@/layouts/components/ChainProfile.vue';
 
-import { useDashboard } from '@/stores/useDashboard'
+import { useDashboard } from '@/stores/useDashboard';
 
 // @layouts plugin
-import { VerticalNavLayout } from '@layouts'
-import NavBarI18n from './NavBarI18n.vue'
-import NavSearchBar from './NavSearchBar.vue'
-import NavBarNotifications from './NavBarNotifications.vue'
-import TheCustomizer from '@/plugins/vuetify/@core/components/TheCustomizer.vue'
-import Breadcrumbs from './Breadcrumbs.vue'
-import { useBlockchain } from '@/stores'
+import { VerticalNavLayout } from '@layouts';
+import NavBarI18n from './NavBarI18n.vue';
+import NavSearchBar from './NavSearchBar.vue';
+import NavBarNotifications from './NavBarNotifications.vue';
+import TheCustomizer from '@/plugins/vuetify/@core/components/TheCustomizer.vue';
+import Breadcrumbs from './Breadcrumbs.vue';
+import { useBlockchain } from '@/stores';
 
-const { appRouteTransition, isLessThanOverlayNavBreakpoint, isVerticalNavCollapsed } = useThemeConfig()
-const { width: windowWidth } = useWindowSize()
+const { appRouteTransition, isLessThanOverlayNavBreakpoint, isVerticalNavCollapsed } =
+  useThemeConfig();
+const { width: windowWidth } = useWindowSize();
 
 // ℹ️ Provide animation name for vertical nav collapse icon.
-const verticalNavHeaderActionAnimationName = ref<null | 'rotate-180' | 'rotate-back-180'>(null)
+const verticalNavHeaderActionAnimationName = ref<null | 'rotate-180' | 'rotate-back-180'>(null);
 
 watch(isVerticalNavCollapsed, val => {
-  verticalNavHeaderActionAnimationName.value = val ? 'rotate-180' : 'rotate-back-180'
-})
+  verticalNavHeaderActionAnimationName.value = val ? 'rotate-180' : 'rotate-back-180';
+});
 
-const dashboard = useDashboard()
-dashboard.initial()
-const blockchain = useBlockchain()
+const dashboard = useDashboard();
+dashboard.initial();
+const blockchain = useBlockchain();
 // blockchain.initial()
 blockchain.$subscribe((m, s) => {
-  if(!Array.isArray(m.events) && m.events.key === 'chainName') {
-    blockchain.initial()
+  if (!Array.isArray(m.events) && m.events.key === 'chainName') {
+    blockchain.initial();
   }
-})
+});
 </script>
 
 <template>
@@ -43,8 +44,11 @@ blockchain.$subscribe((m, s) => {
     <!-- 👉 navbar -->
     <template #navbar="{ toggleVerticalOverlayNavActive }">
       <div class="d-flex h-100 align-center">
-        <IconBtn v-if="isLessThanOverlayNavBreakpoint(windowWidth)" class="ms-n3"
-          @click="toggleVerticalOverlayNavActive(true)">
+        <IconBtn
+          v-if="isLessThanOverlayNavBreakpoint(windowWidth)"
+          class="ms-n3"
+          @click="toggleVerticalOverlayNavActive(true)"
+        >
           <VIcon icon="mdi-menu" />
         </IconBtn>
 
@@ -52,9 +56,9 @@ blockchain.$subscribe((m, s) => {
 
         <VSpacer />
         <!-- <NavSearchBar />-->
-        <NavBarNotifications />
-        <NavBarI18n />
-        <NavbarThemeSwitcher />
+        <NavBarNotifications class="hidden md:inline-block" />
+        <NavBarI18n class="hidden md:inline-block" />
+        <NavbarThemeSwitcher class="hidden md:inline-block" />
       </div>
     </template>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 55d1fb97..1008089b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,13 @@ module.exports = {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        main: '#5973fe',
+        yes: '#3fb68b',
+        no: '#ff5353',
+      },
+    },
   },
   plugins: [],
 }