Merge pull request '콘텐츠 등록 - 예약 업로드 추가' (#9) from test into main

Reviewed-on: #9

package-lock.json

@@ -11,7 +11,9 @@
         "core-js": "^3.6.5",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
+        "vue2-datepicker": "^3.11.1",
         "vue2-editor": "^2.10.3",
+        "vue2-timepicker": "^1.1.6",
         "vuedraggable": "^2.24.3",
         "vuejs-datetimepicker": "^1.1.13",
         "vuetify": "2.6.10",
@@ -5171,6 +5173,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
+    "node_modules/date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -14513,6 +14520,17 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue2-datepicker": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.1.tgz",
+      "integrity": "sha512-6PU/+pnp2mgZAfnSXmbdwj9516XsEvTiw61Q5SNrvvdy8W/FCxk1GAe9UZn/m9YfS5A47yK6XkcjMHbp7aFApA==",
+      "dependencies": {
+        "date-format-parse": "^0.2.7"
+      },
+      "peerDependencies": {
+        "vue": "^2.5.0"
+      }
+    },
     "node_modules/vue2-editor": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/vue2-editor/-/vue2-editor-2.10.3.tgz",
@@ -14521,6 +14539,14 @@
         "quill": "^1.3.6"
       }
     },
+    "node_modules/vue2-timepicker": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.6.tgz",
+      "integrity": "sha512-DhO2UH4CTer/lMWxg+jqxn/+h6g2vZrsM6vCe9u7/Ie+Pej9yA+8mQA3C3VPApZ+LauKc43WxCspOXb6SGBOTw==",
+      "peerDependencies": {
+        "vue": "^2.6.5"
+      }
+    },
     "node_modules/vuedraggable": {
       "version": "2.24.3",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
@@ -19750,6 +19776,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
+    "date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -27255,6 +27286,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue2-datepicker": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.1.tgz",
+      "integrity": "sha512-6PU/+pnp2mgZAfnSXmbdwj9516XsEvTiw61Q5SNrvvdy8W/FCxk1GAe9UZn/m9YfS5A47yK6XkcjMHbp7aFApA==",
+      "requires": {
+        "date-format-parse": "^0.2.7"
+      }
+    },
     "vue2-editor": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/vue2-editor/-/vue2-editor-2.10.3.tgz",
@@ -27263,6 +27302,12 @@
         "quill": "^1.3.6"
       }
     },
+    "vue2-timepicker": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.6.tgz",
+      "integrity": "sha512-DhO2UH4CTer/lMWxg+jqxn/+h6g2vZrsM6vCe9u7/Ie+Pej9yA+8mQA3C3VPApZ+LauKc43WxCspOXb6SGBOTw==",
+      "requires": {}
+    },
     "vuedraggable": {
       "version": "2.24.3",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",

package.json

@@ -13,7 +13,9 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "vue2-datepicker": "^3.11.1",
     "vue2-editor": "^2.10.3",
+    "vue2-timepicker": "^1.1.6",
     "vuedraggable": "^2.24.3",
     "vuejs-datetimepicker": "^1.1.13",
     "vuetify": "2.6.10",

src/views/Content/ContentList.vue

@@ -62,6 +62,9 @@
                   <th class="text-center">
                     등록일
                   </th>
+                  <th class="text-center">
+                    오픈 예정일
+                  </th>
                   <th class="text-center">
                     관리
                   </th>
@@ -111,6 +114,7 @@
                     />
                   </td>
                   <td>{{ item.date }}</td>
+                  <td>{{ item.releaseDate }}</td>
                   <td>
                     <v-row>
                       <v-col>
@@ -367,6 +371,46 @@
               </v-col>
             </v-row>
           </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                예약 공개
+              </v-col>
+              <v-col
+                cols="8"
+                align="left"
+              >
+                <input
+                  v-model="is_active_reservation"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+            <v-row
+              v-if="is_active_reservation"
+              align="center"
+            >
+              <v-col cols="4">
+                예약 날짜와 시간
+              </v-col>
+              <v-col
+                cols="8"
+                align="left"
+              >
+                <DatePicker
+                  v-model="reservation_date"
+                  value-type="format"
+                />
+                &nbsp;&nbsp;
+                <vue-timepicker
+                  v-model="reservation_time"
+                  format="HH:mm"
+                  input-class="skip-error-style"
+                  :minute-interval="15"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
           <v-card-text>
             <v-row align="center">
               <v-col cols="4">
@@ -526,15 +570,25 @@
 <script>
 import * as api from '@/api/audio_content'
 import VuetifyAudio from 'vuetify-audio'
+// Main JS (in UMD format)
+import VueTimepicker from 'vue2-timepicker'
+import DatePicker from 'vue2-datepicker';
+
+import 'vue2-datepicker/index.css';
+// CSS
+import 'vue2-timepicker/dist/VueTimepicker.css'
 
 export default {
   name: "AudioContentList",
 
-  components: {VuetifyAudio},
+  components: {VuetifyAudio, VueTimepicker, DatePicker},
 
   data() {
     return {
       is_loading: false,
+      is_active_reservation: false,
+      reservation_date: '',
+      reservation_time: '',
       show_create_dialog: false,
       show_modify_dialog: false,
       show_delete_confirm_dialog: false,
@@ -605,6 +659,9 @@ export default {
         is_adult: false,
         is_comment_available: true,
       }
+      this.reservation_time = ''
+      this.reservation_time = ''
+      this.is_active_reservation = false
       this.show_create_dialog = false
       this.show_modify_dialog = false
       this.show_delete_confirm_dialog = false
@@ -700,6 +757,16 @@ export default {
           isCommentAvailable: this.audio_content.is_comment_available
         }
 
+        if (this.is_active_reservation === true) {
+          if (this.reservation_date.trim() === '' || this.reservation_time.trim() === '') {
+            this.notifyError("오픈 예정 날짜와 시간을 선택해 주세요.")
+            this.is_loading = false
+            return
+          }
+
+          request.releaseDate = this.reservation_date + ' ' + this.reservation_time
+        }
+
         let previewStartTime = this.audio_content.preview_start_time;
         let previewEndTime = this.audio_content.preview_end_time;
 
@@ -716,6 +783,7 @@ export default {
             !this.isValidTimeFormat(previewEndTime)
           ) {
             this.notifyError("미리 듣기 시간 형식은 00:30:00 과 같아야 합니다")
+            this.is_loading = false
             return
           }
 
@@ -728,6 +796,7 @@ export default {
 
           if (timeDifference < 30) {
             this.notifyError("미리 듣기의 최소 시간은 30초 입니다.")
+            this.is_loading = false
             return
           }
 
@@ -739,6 +808,7 @@ export default {
             (previewEndTime !== undefined && previewEndTime.trim() !== '')
           ) {
             this.notifyError("미리 듣기 시작 시간과 종료 시간 둘 다 입력을 하거나 둘 다 입력 하지 않아야 합니다.")
+            this.is_loading = false
             return
           }
         }
@@ -747,6 +817,8 @@ export default {
         formData.append("contentFile", this.audio_content.content_file)
         formData.append("request", JSON.stringify(request))
 
+        console.log(request)
+
         const res = await api.createAudioContent(formData)
         if (res.status === 200 && res.data.success === true) {
           this.is_loading = false