콘텐츠 등록 - 예약 업로드 추가

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