Added 'add publisher' functionality

daemon/ui/src/locales/en.json

@@ -8,7 +8,8 @@
     "loading": "Loading Publishers",
     "publishers": "Publishers",
     "search": "Search publishers...",
-    "empty": "There are currently no publishers to display"
+    "add": "Add Publisher",
+    "retire": "Retire Publisher"
   },
   "publisherDetails": {
     "loading": "Loading {handle}",

daemon/ui/src/services/APIService.js

@@ -39,5 +39,12 @@ export default {
   },
   getEndpoint(uri) {
     return apiClient.get(uri);
+  },
+  addPublisher(handle, uri, token) {
+    return apiClient.post('/api/v1/publishers', {
+      handle: handle,
+      base_uri: uri,
+      token: token
+    })
   }
 }

daemon/ui/src/views/Login.vue

@@ -18,7 +18,7 @@
     </el-row>
     <el-row type="flex" class="alert-row" justify="center">
       <el-col :span="10">
-        <el-alert type="error" v-if="error">{{error}}</el-alert>
+        <el-alert type="error" v-if="error" :closable="false">{{error}}</el-alert>
       </el-col>
     </el-row>
     <div class="route-left">

daemon/ui/src/views/PublisherDetails.vue

@@ -11,35 +11,43 @@
           <el-breadcrumb-item :to="{ path: '/' }">{{ $t("publishers.publishers") }}</el-breadcrumb-item>
           <el-breadcrumb-item>{{ handle }}</el-breadcrumb-item>
         </el-breadcrumb>
-        <el-button
-          class="retire"
-          icon="el-icon-delete"
-          type="primary"
-          circle
-          @click="confirmRetirePublisher"
-        ></el-button>
+        <div class="retire">
+          <el-form :inline="true">
+            <el-form-item>
+              <el-button
+                class="retire"
+                icon="el-icon-delete"
+                type="primary"
+                round
+                size="mini"
+                @click="confirmRetirePublisher"
+              >{{ $t("publishers.retire") }}</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
       </div>
       <div class="text item">
-        Base URI:
-        <a :href="publisher.base_uri" target="_blank">{{ publisher.base_uri }}</a>
-        <br>
-        RFC 8181: {{ publisher.rfc8181 }}
-        <br>
-        Retired: {{ publisher.retired }}
-        <br>Links:
-        <ul>
-          <li v-for="link in publisher.links" :key="link.link">
-            <a href="#" @click="getFile(link.link)">{{ link.rel }}</a>
-          </li>
-        </ul>
-        <br>Publisher Data:
+
+        <el-table v-if="!loading && publisher" :data="[publisher]" style="width: 100%">
+          <el-table-column prop="base_uri" label="Base URI"></el-table-column>
+          <el-table-column prop="rfc8181" label="RFC 8181"></el-table-column>
+          <el-table-column label="Deactivated">
+            <template slot-scope="scope">
+              <i class="el-icon-check" v-if="[publisher][scope.$index].deactivated"></i>
+              <i class="el-icon-close" v-if="![publisher][scope.$index].deactivated"></i>
+            </template>
+          </el-table-column>
+        </el-table>
+
         <i class="el-icon-loading" v-if="loading"></i>
-        <ul v-if="!loadingPublisherData && publisherData.elements">
-          <li v-for="element in publisherData.elements" :key="element.hash">
-            <a :href="element.uri" target="_blank">{{ element.uri }}</a>
-            - {{ element.hash }}
-          </li>
-        </ul>
+
+        <div v-if="!loadingPublisherData && publisherData.elements" class="publisher-data">Publisher Data</div>
+
+        <el-table v-if="!loadingPublisherData && publisherData.elements" :data="publisherData.elements" style="width: 100%">
+          <el-table-column prop="uri" label="URI"></el-table-column>
+          <el-table-column prop="hash" label="Hash"></el-table-column>
+        </el-table>
+
         <div
           v-if="!loadingPublisherData && publisherData.elements == null"
         >{{ $t("publisherDetails.nopublisherdata") }}</div>
@@ -117,5 +125,14 @@ a {
 }
 .retire {
   float: right;
+  margin-top: -10px;
+}
+
+.publisher-data {
+  font-size: 14px;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #F9EADD;
 }
 </style>

daemon/ui/src/views/Publishers.vue

@@ -11,40 +11,92 @@
           <el-breadcrumb-item :to="{ path: '/' }">{{ $t("publishers.publishers") }}</el-breadcrumb-item>
         </el-breadcrumb>
         <div class="search-input">
-          <el-input
-            size="mini"
-            :placeholder="$t('publishers.search')"
-            prefix-icon="el-icon-search"
-            v-model="search"
-            clearable
-          ></el-input>
+          <el-form :inline="true">
+            <el-form-item>
+              <el-input
+                size="mini"
+                :placeholder="$t('publishers.search')"
+                prefix-icon="el-icon-search"
+                v-model="search"
+                clearable
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button
+                class="retire"
+                icon="el-icon-plus"
+                type="primary"
+                round
+                size="mini"
+                @click="dialogFormVisible = true"
+              >{{ $t("publishers.add") }}</el-button>
+            </el-form-item>
+          </el-form>
         </div>
       </div>
       <div class="text item">
-         <el-alert v-if="filteredPublishers.length === 0"
-          :title="$t('publishers.empty')"
-          type="info">
-        </el-alert>
-        <ul>
-          <li v-for="publisher in sortPublishers(filteredPublishers)" :key="publisher.handle">
-            <router-link :to="{ name: 'publisherDetails', params: { handle: publisher.id }}">
-              <el-button type="text">{{ publisher.id }}</el-button>
-            </router-link>
-          </li>
-        </ul>
+        <el-table
+          v-if="filteredPublishers"
+          :data="filteredPublishers"
+          @row-click="loadPublisher"
+          style="width: 100%"
+        >
+          <el-table-column label="Handle">
+            <template slot-scope="scope">
+              <router-link
+                :to="{ name: 'publisherDetails', params: { handle: filteredPublishers[scope.$index].id }}"
+              >
+                <el-button type="text">{{ filteredPublishers[scope.$index].id }}</el-button>
+              </router-link>
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
     </el-card>
+
+    <el-dialog :title="$t('publishers.add')" :visible.sync="dialogFormVisible">
+      <el-form :model="form">
+        <el-form-item label="Handle" :label-width="formLabelWidth">
+          <el-input v-model="form.handle" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="URI" :label-width="formLabelWidth">
+          <el-input v-model="form.uri" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="Token" :label-width="formLabelWidth">
+          <el-input v-model="form.token" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-alert type="error" v-if="error" :closable="false">{{error}}</el-alert>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">Cancel</el-button>
+        <el-button
+          type="primary"
+          @click="addPublisher"
+          :disabled="form.handle == '' || form.uri == '' || form.token == ''"
+        >Confirm</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import router from "@/router";
 import APIService from "@/services/APIService.js";
 export default {
   data() {
     return {
       loading: false,
       publishers: [],
-      search: ""
+      search: "",
+      dialogFormVisible: false,
+      error: "",
+      form: {
+        handle: "",
+        token: "",
+        uri: ""
+      },
+      formLabelWidth: "120px"
     };
   },
   computed: {
@@ -57,10 +109,7 @@ export default {
   },
   created() {
     this.loading = true;
-    APIService.getPublishers().then(response => {
-      this.loading = false;
-      this.publishers = response.data.publishers;
-    });
+    this.loadPublishers();
   },
   methods: {
     sortPublishers: function(publishers) {
@@ -75,6 +124,26 @@ export default {
         }
         return 0;
       });
+    },
+    loadPublishers: function() {
+      APIService.getPublishers().then(response => {
+        this.loading = false;
+        this.publishers = response.data.publishers;
+      });
+    },
+    loadPublisher: function(row) {
+      router.push("/publishers/" + row.id);
+    },
+    addPublisher: function() {
+      const self = this;
+      APIService.addPublisher(this.form.handle, this.form.uri, this.form.token)
+        .then(response => {
+          this.dialogFormVisible = false;
+          this.loadPublishers();
+        })
+        .catch(function(error) {
+          self.error = error;
+        });
     }
   }
 };
@@ -86,7 +155,6 @@ export default {
 }
 .search-input {
   float: right;
-  width: 200px;
-  margin-top: -20px;
+  margin-top: -27px;
 }
 </style>