RdDate 필터 추가 #20

returnvalues · Jan 18, 2019 · 23afbfb · 23afbfb
1 parent bce33fc
commit 23afbfb
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 3 deletions.
diff --git a/components/SideNav.vue b/components/SideNav.vue
@@ -94,6 +94,14 @@ export default {
             { name: 'Card', to: '/card', icon: 'far fa-id-card' },
             { name: 'Carousel', to: '/carousel', icon: 'far fa-images' },
             { name: 'Collapse', to: '/collapse', icon: 'far fa-caret-square-down' },
+            {
+              name: 'Filters',
+              to: '/filters',
+              icon: 'fas fa-filter',
+              child: [
+                { name: 'Date Filter', to: '/datefilter' }
+              ]
+            },
             {
               name: 'Inputs',
               to: '/inputs',

diff --git a/pages/general/Filters/DateFilter.vue b/pages/general/Filters/DateFilter.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h1>Date filter</h1>
+    <p class="bd-lead">
+      날짜 데이터의 표시 및 변환 필터<br>
+      내부적으로 Moment.js의 포맷을 사용합니다.
+    </p>
+    <h2>Example</h2>
+    <example>
+      <rd-list-group>
+        <rd-list-item> 1546268400000 ms = {{ 1546268400000|RdDate }}</rd-list-item>
+        <rd-list-item> 1546268400 unix timestamp = {{ 1546268400|RdDate('YYYY-MM-DD','X') }}</rd-list-item>
+        <rd-list-item> 1546268400 unix timestamp = {{ 1546268400|RdDate('x','X') }} ms</rd-list-item>
+      </rd-list-group>
+    </example>
+    <highlight
+      :code="`<rd-list-group>
+  <rd-list-item> 1546268400000 ms = {{ 1546268400000|RdDate }}</rd-list-item>
+  <rd-list-item> 1546268400 unix timestamp = {{ 1546268400|RdDate('YYYY-MM-DD','X') }}</rd-list-item>
+  <rd-list-item> 1546268400 unix timestamp = {{ 1546268400|RdDate('x','X') }} ms</rd-list-item>
+</rd-list-group>`"
+    />
+    <h3>Functional Use</h3>
+    <example>
+      <rd-list-group>
+        <rd-list-item> 1546268400000 ms = {{ RdDate(1546268400000) }}</rd-list-item>
+        <rd-list-item> 1546268400 unix timestamp = {{ RdDate(1546268400,'YYYY-MM-DD','X') }}</rd-list-item>
+        <rd-list-item> 1546268400 unix timestamp = {{ RdDate(1546268400,'x','X') }} ms</rd-list-item>
+      </rd-list-group>
+    </example>
+    <highlight
+      :code="`<rd-list-group>
+  <rd-list-item> 1546268400000 ms = {{ RdDate(1546268400000) }}</rd-list-item>
+  <rd-list-item> 1546268400 unix timestamp = {{ RdDate(1546268400,'YYYY-MM-DD','X') }}</rd-list-item>
+  <rd-list-item> 1546268400 unix timestamp = {{ RdDate(1546268400,'x','X') }} ms</rd-list-item>
+</rd-list-group>`"
+    />
+    <h2>Arguments</h2>
+    <properties
+      type="args"
+      :data="args"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: 'DateFilter',
+  data() {
+    return {
+      args: [
+        ['toFormat', '보여줄 날짜 형식', 'String', 'YYYY-MM-DD', ''],
+        ['fromFormat', '입력의 날짜 형식', 'String', '', '']
+      ]
+    };
+  },
+};
+</script>
diff --git a/src/filters.js b/src/filters.js
@@ -1,5 +1,8 @@
 import Web3 from 'web3';
 import Units from 'ethereumjs-units';
+import moment from 'moment';
+
+const momentConstructor = moment().constructor;
 
 export function RdEthAddress(value, length = 26) {
   const val = `${value || ''}`;
@@ -39,6 +42,17 @@ export function RdEthUnits(value, ...args) {
   return Units.convert(`${value}`, from, to);
 }
 
+export function RdDate(v, ...args) {
+  const toFormat = args.shift() || 'YYYY-MM-DD';
+  if (v && v.constructor === momentConstructor) return v.format(toFormat);
+  return moment(v, ...args).format(toFormat);
+}
+export function RdDateLocale(v, locale, ...args) {
+  const toFormat = args.shift() || 'YYYY-MM-DD';
+  if (v && v.constructor === momentConstructor) return v.clone().locale(locale).format(toFormat);
+  return moment(v, ...args).locale(locale).format(toFormat);
+}
+
 export default {
-  RdEthAddress, RdEthHex, RdEthToHex, RdEthUnits
+  RdEthAddress, RdEthHex, RdEthToHex, RdEthUnits, RdDate, RdDateLocale
 };
diff --git a/src/index.js b/src/index.js
@@ -41,11 +41,11 @@ import RdEthInput from './RdEthInput.vue';
 import RdEthQrcode from './RdEthQrcode.vue';
 import RdEthCyptocurrency from './RdEthCyptocurrency.vue';
 import {
-  RdEthAddress, RdEthHex, RdEthToHex, hexFrom, hexTo, RdEthUnits
+  RdEthAddress, RdEthHex, RdEthToHex, hexFrom, hexTo, RdEthUnits, RdDate, RdDateLocale
 } from './filters';
 
 const filters = {
-  RdEthAddress, RdEthHex, RdEthToHex, RdEthUnits
+  RdEthAddress, RdEthHex, RdEthToHex, RdEthUnits, RdDate, RdDateLocale
 };
 export default {
   install(Vue) {