시그니처 관리

- 수정/삭제 추가

src/views/Can/CanSignature.vue

@@ -52,9 +52,32 @@
                 max-width="200"
                 max-height="200"
                 align="center"
-                aspect-ratio="1"
+                class="center-image"
               />
             </template>
+
+            <template v-slot:item.management="{ item }">
+              <v-row>
+                <v-col />
+                <v-col>
+                  <v-btn
+                    :disabled="is_loading"
+                    @click="showModifyDialog(item)"
+                  >
+                    수정
+                  </v-btn>
+                </v-col>
+                <v-col>
+                  <v-btn
+                    :disabled="is_loading"
+                    @click="showDeleteConfirm(item)"
+                  >
+                    삭제
+                  </v-btn>
+                </v-col>
+                <v-col />
+              </v-row>
+            </template>
           </v-data-table>
         </v-col>
       </v-row>
@@ -76,10 +99,7 @@
         persistent
       >
         <v-card>
-          <v-card-title v-if="selected_signature_can !== null">
-            시그니처 캔 수정
-          </v-card-title>
-          <v-card-title v-else>
+          <v-card-title>
             시그니처 캔 등록
           </v-card-title>
 
@@ -147,20 +167,109 @@
               취소
             </v-btn>
             <v-btn
-              v-if="selected_signature_can !== null"
+              color="blue darken-1"
+              text
+              @click="validate"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+    <v-row>
+      <v-dialog
+        v-model="show_modify_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>
+            시그니처 캔 수정
+          </v-card-title>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                캔
+              </v-col>
+              <v-col cols="8">
+                {{ selected_signature_can.can }} 캔
+              </v-col>
+            </v-row>
+          </v-card-text>
+
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                이미지
+              </v-col>
+              <v-col cols="8">
+                <div class="image-select">
+                  <label for="image">
+                    이미지 불러오기
+                  </label>
+                  <v-file-input
+                    id="image"
+                    v-model="image"
+                    @change="imageAdd"
+                  />
+                </div>
+                <img
+                  v-if="image_url"
+                  :src="image_url"
+                  alt=""
+                  class="image-preview"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
               color="blue darken-1"
               text
               @click="modifySignatureCan"
             >
               수정
             </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+    <v-row>
+      <v-dialog
+        v-model="show_delete_confirm_dialog"
+        max-width="400px"
+        persistent
+      >
+        <v-card>
+          <v-card-text />
+          <v-card-text>
+            삭제하시겠습니까?
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
             <v-btn
-              v-else
               color="blue darken-1"
               text
-              @click="validate"
+              @click="cancel"
             >
-              등록
+              취소
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="deleteSignature"
+            >
+              확인
             </v-btn>
           </v-card-actions>
         </v-card>
@@ -178,8 +287,9 @@ export default {
   data() {
     return {
       is_loading: false,
-      is_modify: false,
       show_write_dialog: false,
+      show_modify_dialog: false,
+      show_delete_confirm_dialog: false,
 
       signature_list: [],
 
@@ -191,7 +301,7 @@ export default {
       image_url: null,
       creator_id: null,
       is_active: null,
-      selected_signature_can: null,
+      selected_signature_can: {},
 
       headers: [
         {
@@ -218,6 +328,12 @@ export default {
           sortable: false,
           value: 'image',
         },
+        {
+          text: '관리',
+          align: 'center',
+          sortable: false,
+          value: 'management',
+        },
       ],
     }
   },
@@ -250,10 +366,14 @@ export default {
     },
 
     showModifyDialog(item) {
-      this.selected_signature_can = item
-      this.is_active = item.is_active
       this.image_url = item.image;
-      this.show_write_dialog = true
+      this.selected_signature_can = item
+      this.show_modify_dialog = true
+    },
+
+    showDeleteConfirm(item) {
+      this.selected_signature_can = item
+      this.show_delete_confirm_dialog = true
     },
 
     validate() {
@@ -270,12 +390,13 @@ export default {
 
     cancel() {
       this.show_write_dialog = false
+      this.show_modify_dialog = false
+      this.show_delete_confirm_dialog = false
       this.image = null
       this.image_url = null
-      this.creator_id = null
       this.can = 0
       this.is_active = null
-      this.selected_signature_can = null
+      this.selected_signature_can = {}
     },
 
     async getSignatureList() {
@@ -333,6 +454,11 @@ export default {
     },
 
     async modifySignatureCan() {
+      if (this.image === null) {
+        this.notifyError('수정사항이 없습니다.')
+        return;
+      }
+
       if (this.is_loading) return;
 
       this.is_loading = true
@@ -340,14 +466,7 @@ export default {
       try {
         const formData = new FormData()
         formData.append("id", this.selected_signature_can.id)
-
-        if (this.image !== null) {
-          formData.append("image", this.image)
-        }
-
-        if (this.selected_signature_can.isActive !== this.is_active) {
-          formData.append("isActive", this.is_active)
-        }
+        formData.append("image", this.image)
 
         const res = await api.modifySignature(formData)
         if (res.status === 200 && res.data.success === true) {
@@ -367,6 +486,35 @@ export default {
       }
     },
 
+    async deleteSignature() {
+      if (this.is_loading) return;
+
+      this.is_loading = true
+
+      try {
+        const formData = new FormData()
+        formData.append("id", this.selected_signature_can.id)
+        formData.append("isActive", false)
+
+        const res = await api.modifySignature(formData)
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel()
+          this.notifySuccess(res.data.message || '등록되었습니다.')
+
+          this.page = 1
+          await this.getSignatureList()
+        } else {
+          this.is_loading = false
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      } finally {
+        this.is_loading = false
+      }
+    },
+
     async next() {
       await this.getSignatureList();
     }
@@ -415,8 +563,8 @@ export default {
 
 }
 
-td img {
+.center-image {
   display: block;
-  margin: 10px auto;
+  margin: 0 auto;
 }
 </style>