[#701] Scheduler 컴포넌트 개발

################ - 스케쥴러의 X축, Y축 라벨자체를 배열로 받아서 그려주는 로직으로 변경. props값을 복잡한 object가 아닌 단순 colLabels, rowLabels로만 받도록 단순화 작업 진행 - DOCS > 스케쥴러 md 설명 수정 - EVUI DOCS 레이아웃 수정
ex-em · Nov 4, 2020 · 7bd13d4 · 7bd13d4
1 parent 7cf4670
commit 7bd13d4
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 85 deletions.
diff --git a/docs/App.vue b/docs/App.vue
@@ -1,14 +1,13 @@
 <template>
   <div
+    class="evui-wrapper"
     :class="['evui-docs', docsTheme]"
   >
-    <div class="evui-wrapper">
-      <MainHeader
-        v-model="docsTheme"
-      />
-      <MainNav />
-      <MainContent />
-    </div>
+    <MainHeader
+      v-model="docsTheme"
+    />
+    <MainNav />
+    <MainContent />
   </div>
 </template>
 
@@ -40,6 +39,14 @@ $file-path: './assets/fonts/';
 
 @import './style/index.scss';
 
+body,
+#app {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 @font-face {
   font-family: 'Roboto';
   src: url($file-path + 'Roboto-Bold.ttf') format('trutype');

diff --git a/docs/components/Content.vue b/docs/components/Content.vue
@@ -14,7 +14,10 @@ export default {
 @import '../style/index.scss';
 
 .evui-content {
-  position: relative;
+  position: fixed;
+  width: calc(100% - 320px);
+  height: calc(100% - 60px);
+  overflow: auto;
   padding: 30px 40px;
 }
 </style>
diff --git a/docs/views/scheduler/api/scheduler.md b/docs/views/scheduler/api/scheduler.md
@@ -10,17 +10,15 @@
 ```
 
  - <스케쥴러> 컴포넌트는 2차원 요소 내부에서 범위를 지정할 때 사용한다.
+ - X축, Y축 라벨 클릭 시 해당 행 또는 열이 전체 선택된다.
+ - 전체선택은 해당 행 또는 열의 첫번째 인덱스의 값의 반대 값으로 채운다.
 
 >### Props
 | 이름 | 타입 | 디폴트 | 설명 | 종류 |
 |------|--------|------|------|------|
 | v-model | Array | [] | <스케쥴러>에서 선택된 값 | |
-| widthOptions | Object | { count: 7, labels: \['<span style="color: #FF0000">SUN</span>', 'MON', 'TUE', 'WED', 'THU', 'FRI', '<span style="color: #0006F9">SAT</span>'\] } | 캘린더 Width(Column)의 옵션 |  |
-|  |  | count | 가로 칸 개수 | default: 7 (Number) |
-|  |  | labels | 가로 칸 HTML 텍스트 | default: \['<span style="color: #FF0000">SUN</span>', 'MON', 'TUE', 'WED', 'THU', 'FRI', '<span style="color: #0006F9">SAT</span>'\] |
-| heightOptions | Object | { count: 24, labels: \['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', ... , '23:00''\] } | 캘린더 Height(Row)의 옵션 |  |
-|  |  | count | 세로 칸 개수 | default: 24 (Number) |
-|  |  | labels | 가로 칸 HTML 텍스트 | default: \['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', ... , '23:00''\] |
+| colLabels | Array | \['<span style="color: #FF0000">SUN</span>', 'MON', 'TUE', 'WED', 'THU', 'FRI', '<span style="color: #0006F9">SAT</span>'\] | 가로 칸 HTML 텍스트 |  |
+| rowLabels | Array | \['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', ... , '23:00''\] | 가로 칸 HTML 텍스트 | |
 
 >### Event
  | 이름 | 파라미터 | 설명 |

diff --git a/docs/views/scheduler/example/Default.vue b/docs/views/scheduler/example/Default.vue
@@ -18,8 +18,8 @@
     <p class="case-title">Custom</p>
     <ev-scheduler
       v-model="checkVal2"
-      :width-options="widthOptions"
-      :height-options="heightOptions"
+      :col-labels="widthLabels()"
+      :row-labels="heightLabels()"
     />
     <div class="description">
       {{ checkVal2 }}
@@ -30,39 +30,36 @@
 <script>
 import { ref } from 'vue';
 
+/**
+ * 월, 일을 두자리 숫자로 보정
+ * @param num
+ * @returns {string|*}
+ */
+const lpadToTwoDigits = (num) => {
+  if (num === null) {
+    return '00';
+  } else if (+num < 10) {
+    return `0${num}`;
+  }
+  return num;
+};
+
 export default {
   setup() {
     const checkVal1 = ref([]);
+    const clearVal1 = () => { checkVal1.value = []; };
 
     const checkVal2 = ref([]);
-    const widthLabels = (cnt) => {
+    const widthLabels = () => {
       const result = [];
-      for (let i = 0; i < cnt; i++) {
+      for (let i = 0; i < 15; i++) {
         result.push(`+${i + 1}일`);
       }
       return result;
     };
-    const widthOptions = ref({
-      count: 15,
-      labels: widthLabels(15),
-    });
-
-    /**
-     * 월, 일을 두자리 숫자로 보정
-     * @param num
-     * @returns {string|*}
-     */
-    const lpadToTwoDigits = (num) => {
-      if (num === null) {
-        return '00';
-      } else if (+num < 10) {
-        return `0${num}`;
-      }
-      return num;
-    };
-    const heightLabels = (cnt) => {
+    const heightLabels = () => {
       const result = [];
-      for (let i = 0; i < cnt; i++) {
+      for (let i = 0; i < 48; i++) {
         if (i % 2) {
           result.push(`${lpadToTwoDigits(Math.floor(i / 2))}:30`);
         } else {
@@ -71,19 +68,13 @@ export default {
       }
       return result;
     };
-    const heightOptions = ref({
-      count: 48,
-      labels: heightLabels(48),
-    });
-
-    const clearVal1 = () => { checkVal1.value = []; };
 
     return {
       checkVal1,
-      checkVal2,
-      widthOptions,
-      heightOptions,
       clearVal1,
+      checkVal2,
+      widthLabels,
+      heightLabels,
     };
   },
 };

diff --git a/docs/views/scheduler/props.js b/docs/views/scheduler/props.js
@@ -7,7 +7,7 @@ export default {
   mdText,
   components: {
     Default: {
-      description: '스케쥴피커는 일주일 내 시간 스케쥴을 선택하는 컴포넌트입니다.',
+      description: '스케쥴러는 정해진 날짜 내 시간 스케쥴을 선택하는 컴포넌트입니다.',
       component: Default,
       parsedData: parseComponent(DefaultRaw),
     },

diff --git a/src/components/scheduler/Scheduler.vue b/src/components/scheduler/Scheduler.vue
@@ -7,28 +7,28 @@
       <tr class="ev-scheduler-header">
         <td />
         <td
-          v-for="(wItem, wIdx) in widthOptions.count"
+          v-for="(wItem, wIdx) in colLabels.length"
           :key="`${wItem}_${wIdx}_header`"
           class="ev-scheduler-header-label"
           @click="selectColumn(wIdx)"
-          v-html="widthOptions.labels[wIdx]"
+          v-html="colLabels[wIdx]"
         />
       </tr>
     </thead>
     <tbody @mouseleave="mouseleaveBoxArea">
       <tr
-        v-for="(hItem, hIdx) in heightOptions.count"
+        v-for="(hItem, hIdx) in rowLabels.length"
         :key="`${hItem}_${hIdx}_body`"
         class="ev-scheduler-body"
       >
         <td
-          :key="`${hItem}_${hIdx}_${heightOptions.labels[hIdx]}`"
+          :key="`${hItem}_${hIdx}_${rowLabels[hIdx]}`"
           class="ev-scheduler-body-label"
           @click="selectRow(hIdx)"
-          v-html="heightOptions.labels[hIdx]"
+          v-html="rowLabels[hIdx]"
         />
         <td
-          v-for="(wItem, wIdx) in widthOptions.count"
+          v-for="(wItem, wIdx) in colLabels.length"
           :key="`${wItem}_${hIdx}_${wIdx}_body`"
           class="ev-scheduler-body-box"
           :class="{ selected: mv[hIdx][wIdx] }"
@@ -53,36 +53,23 @@ export default {
       type: Array,
       default: () => [],
     },
-    widthOptions: {
-      type: Object,
-      default: () => ({
-        count: 7,
-        labels: ['<span style="color: #FF0000">SUN</span>',
-          'MON', 'TUE', 'WED', 'THU', 'FRI',
-          '<span style="color: #0006F9">SAT</span>',
-        ],
-      }),
-      validator: ({ count, labels }) =>
-        (count ? typeof count === 'number' && count > 0 : true)
-        && (labels ? Array.isArray(labels) && labels.length === count : true),
+    colLabels: {
+      type: Array,
+      default: () => (['<span style="color: #FF0000">SUN</span>',
+        'MON', 'TUE', 'WED', 'THU', 'FRI',
+        '<span style="color: #0006F9">SAT</span>']),
     },
-    heightOptions: {
-      type: Object,
-      default: () => ({
-        count: 24,
-        labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
-      }),
-      validator: ({ count, labels }) =>
-        (count ? typeof count === 'number' && count > 0 : true)
-        && (labels ? Array.isArray(labels) && labels.length === count : true),
+    rowLabels: {
+      type: Array,
+      default: () => (['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+        '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+        '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+        '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']),
     },
   },
   emits: {
     'update:modelValue': Array,
-    change: null,
+    change: Array,
   },
   setup() {
     const {
@@ -139,6 +126,13 @@ export default {
   }
 }
 
+.ev-scheduler-header-label,
+.ev-scheduler-body-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ev-scheduler-body-box {
   border: 1px solid #CCCCCC;
 

diff --git a/src/components/scheduler/uses.js b/src/components/scheduler/uses.js
@@ -9,11 +9,11 @@ export const useModel = () => {
 
   const mv = computed({
     get: () => {
-      if (props.modelValue.length !== props.heightOptions.count
+      if (props.modelValue.length !== props.rowLabels.length
         || !props.modelValue[0]
-        || props.modelValue[0].length !== props.widthOptions.count
+        || props.modelValue[0].length !== props.colLabels.length
       ) {
-        return getMatrixArr(props.heightOptions.count, props.widthOptions.count);
+        return getMatrixArr(props.rowLabels.length, props.colLabels.length);
       }
       return props.modelValue;
     },
@@ -27,11 +27,11 @@ export const useModel = () => {
    * 초기값 배열의 length와 options의 count가 안맞는 경우 valid체크하는 로직
    */
   const validateValue = () => {
-    if (props.modelValue.length !== props.heightOptions.count
+    if (props.modelValue.length !== props.rowLabels.length
       || !props.modelValue[0]
-      || props.modelValue[0].length !== props.widthOptions.count
+      || props.modelValue[0].length !== props.colLabels.length
     ) {
-      mv.value = [...getMatrixArr(props.heightOptions.count, props.widthOptions.count)];
+      mv.value = [...getMatrixArr(props.rowLabels.length, props.colLabels.length)];
     }
   };