implement AD code manager done

diff --git a/src/newslash_web/public/js/ad-codes-editor.js b/src/newslash_web/public/js/ad-codes-editor.js
index 58040a6..5fe93f2 100644 (file)
--- a/src/newslash_web/public/js/ad-codes-editor.js
+++ b/src/newslash_web/public/js/ad-codes-editor.js
@@ -7,43 +7,61 @@ editor.run = function run (params) {
     message: '',
     adCodes: [],
     selected: {},
+    edited: true,
   };
+  const watch = {
+  };
+  
   const computed = {};
   const methods = {
-    editItem: function editItem(item) {
-      item.editing = true;
-      item.edited = true;
-    },
-    deleteItem: function deleteItem() {
-      const target = [];
-      for (var i = 0; i < this.boxItems.length; i++) {
-        if (this.boxItems[i].selected) {
-          target.push({id: this.boxItems[i].id, index: i});
+    saveItem: function saveItem(target) {
+      if (!target.ad_id && target.ad_id !== 0) {
+        this.message = "save_failed";
+        return;
+      }
+        
+      const reqData = {
+        name: target.name,
+        description: target.description,
+        status: target.status,
+        content: target.content,
+      };
+      if (target.ad_id) {
+        reqData.ad_id = target.ad_id;
+      }
+
+      newslash.admin.updateADCodes(reqData).then(
+        (resp) => { // success
+          target.ad_id = resp.id;
+          this.message = "saved";
+        },
+        (resp) => { // fail
+          this.message = "save_failed";
         }
-      }          
-      if (target.length == 0) {
+      );
+    },
+
+    deleteItem: function deleteItem(target) {
+      if (!target.ad_id && target.ad_id !== 0) {
+        this.message = "save_failed";
         return;
       }
-      const msg = "delete " + target.length + " item(s)?";
-      const result = window.confirm(msg);
-      if (result) {
-        // delete items
-        target.reverse();
-        target.forEach(item => {
-          newslash.admin.deleteBox(item.id).then(
-            (response) => { // success
-              if (response.error) {
-                this.message = "error: " + response.message;
-                return;
-              }
-              this.boxItems.splice(item.index, 1);
-            },
-            (response) => { // fail
-              this.message = "error";
-            }
-          );
-        });
+      const pos = this.adCodes.indexOf(target);
+      if (target.ad_id === 0) {
+        this.adCodes.splice(pos, 1);
+        this.message = "deleted";
+        return;
       }
+
+      newslash.admin.deleteADCodes(target.ad_id).then(
+        (resp) => { // success
+          this.adCodes.splice(pos, 1);
+          this.message = "deleted";
+        },
+        (resp) => { // fail
+          this.message = "delete_failed";
+        }
+      );
     },
     addItem: function addItem() {
       const item = {
@@ -54,7 +72,7 @@ editor.run = function run (params) {
         status: 'enabled',
         content: '',
       };
-      const it = this.adCodes.push(item);
+      this.adCodes.push(item);
     },
   };
 
@@ -68,6 +86,7 @@ editor.run = function run (params) {
                 data: data,
                 computed: computed,
                 methods: methods,
+                watch: watch,
 
                 created: function onCreate() {
                   newslash.admin.getADCodes().then(

diff --git a/src/newslash_web/templates/admin/ads/index.html.tt2 b/src/newslash_web/templates/admin/ads/index.html.tt2
index 1e6c374..e37db13 100644 (file)
--- a/src/newslash_web/templates/admin/ads/index.html.tt2
+++ b/src/newslash_web/templates/admin/ads/index.html.tt2
@@ -2,37 +2,48 @@
 
 <div class="app-frame" id="ad-code-manager">
   <h3>AD Code Manager</h3>
-  <div v-text="message">
-  </div>
-  <form>
+
+  <div class="alert alert-danger" v-if="message == 'save_failed'">保存に失敗しました</div>
+  <div class="alert alert-success" v-else-if="message == 'saved'">保存しました</div>
+  <div class="alert alert-danger" v-else-if="message == 'delete_failed'">削除に失敗しました</div>
+  <div class="alert alert-success" v-else-if="message == 'deleted'">削除しました</div>
+  <div class="alert alert-danger" v-else-if="message">エラー</div>
+
+  <form class="form">
     <div id="forms-wrapper">
       <div id="ad-codes-selector">
-        <select size="30" v-for="code in adCodes" v-model="selected">
-          <option :value="code" v-text="code.name"></option>
+        <select size="30" v-model="selected">
+          <option v-for="code in adCodes" :value="code" v-text="code.name"></option>
         </select>
-        <button class="btn btn-default" type="button" v-on:click="addItem">新規作成</button>
+        <button type="button" @click="addItem">新規作成</button>
+        <button type="button" @click="deleteItem(selected)" :disabled="!selected.ad_id && selected.ad_id !== 0">削除</button>
       </div>
       
       <div id="ad-codes-editor">
         <div>
-          <label>AD_CODE_ID<input v-model="selected.ad_id" /></label>
+          <label>AD_CODE_ID：<input class="inline" v-model="selected.ad_id" disabled/></label>
         </div>
         <div>
-          <label>名称<input v-model="selected.name" /></label>
+          <label>ステータス：
+            <select v-model="selected.status">
+              <option value="enabled" >有効</option>
+              <option value="disabled">無効</option>
+            </select>
+          </label>
         </div>
         <div>
-          <label>説明<input v-model="selected.description"/></label>
+          <label>名称：<input v-model="selected.name" /></label>
         </div>
         <div>
-          <label>有効<input type="checkbox" v-model="selected.enabled"/></label>
+          <label>説明：<input v-model="selected.description"/></label>
         </div>
         <div>
           <label>広告コード：
-            <textarea></textarea>
+            <textarea class="tallest" v-model="selected.content"></textarea>
           </label>
         </div>
         <div>
-          <button class="btn btn-default" type="button">保存</button>
+          <button type="button" :disabled="!selected.ad_id && selected.ad_id !== 0" @click="saveItem(selected)">保存</button>
         </div>
       </div>
     </div>