Frontend for adding Book Selections

wp1-frontend/src/components/BookBuilder.vue

@@ -0,0 +1,77 @@
+<template>
+  <BaseBuilder
+    :key="$route.path"
+    :listName="'Book Selection'"
+    :model="'wp1.selection.models.book'"
+    :params="params"
+    :builderId="$route.params.builder_id"
+    :invalidItems="invalidItems"
+    @onBuilderLoaded="onBuilderLoaded"
+    @onBeforeSubmit="onBeforeSubmit"
+    @onValidationError="onValidationError"
+  >
+    <template #create-desc>
+      <p>
+        Use this tool to create an article selection list for the Wikipedia
+        project of your choice, based off a Wikipedia Book that you already
+        created. You must first "save" your book, then enter the URL of the
+        saved book. Your selection will be saved in public cloud storage and can
+        be accessed through URLs that will be provided once it has been saved.
+      </p>
+      <p class="mb-0">
+        For more information on creating a Book selection, see the
+        <a href="https://wp1.readthedocs.io/en/latest/user/selections/"
+          >end user documentation</a
+        >
+      </p>
+    </template>
+    <template #extra-params>
+      <div id="items" class="form-group m-4">
+        <label for="items">URL</label>
+        <input
+          id="bookUrl"
+          ref="bookUrl"
+          class="form-control my-2"
+          v-model="params.url"
+        />
+        <div class="invalid-feedback">Please provide a valid URL</div>
+      </div>
+    </template>
+  </BaseBuilder>
+</template>
+
+<script>
+import BaseBuilder from './BaseBuilder.vue';
+
+export default {
+  components: { BaseBuilder },
+  name: 'BookBuilder',
+  data: function () {
+    return {
+      url: '',
+      invalidItems: '',
+      params: {},
+    };
+  },
+  methods: {
+    validationOnBlur: function (event) {
+      if (event.target.value) {
+        event.target.classList.remove('is-invalid');
+      } else {
+        event.target.classList.add('is-invalid');
+      }
+    },
+    onBuilderLoaded: function (builder) {
+      this.params = builder.params;
+    },
+    onBeforeSubmit: function () {
+      this.$refs.bookUrl.setCustomValidity('');
+    },
+    onValidationError: function (data) {
+      this.$refs.bookUrl.setCustomValidity('URL not valid');
+    },
+  },
+};
+</script>
+
+<style scoped></style>

wp1-frontend/src/components/PetscanBuilder.vue

@@ -48,7 +48,7 @@ import BaseBuilder from './BaseBuilder.vue';
 
 export default {
   components: { BaseBuilder },
-  name: 'SimpleBuilder',
+  name: 'PetscanBuilder',
   data: function () {
     return {
       url: '',

wp1-frontend/src/components/SecondaryNav.vue

@@ -61,6 +61,16 @@
               >Petscan Selection</router-link
             >
           </li>
+          <li
+            :class="
+              'nav-item ' +
+              (this.$route.path.startsWith('/selections/book') ? 'active' : '')
+            "
+          >
+            <router-link class="nav-link" to="/selections/book"
+              >Book Selection</router-link
+            >
+          </li>
         </ul>
       </div>
     </nav>

wp1-frontend/src/main.js

@@ -11,6 +11,7 @@ import VueRouter from 'vue-router';
 
 import App from './App.vue';
 import ArticlePage from './components/ArticlePage.vue';
+import BookBuilder from './components/BookBuilder.vue';
 import PetscanBuilder from './components/PetscanBuilder.vue';
 import SimpleBuilder from './components/SimpleBuilder.vue';
 import SparqlBuilder from './components/SparqlBuilder.vue';
@@ -118,6 +119,13 @@ const routes = [
       title: () => BASE_TITLE + ' - Create Petscan Selection',
     },
   },
+  {
+    path: '/selections/book',
+    component: BookBuilder,
+    meta: {
+      title: () => BASE_TITLE + ' - Create Book Selection',
+    },
+  },
   {
     path: '/selections/simple/:builder_id',
     component: SimpleBuilder,
@@ -139,6 +147,13 @@ const routes = [
       title: () => BASE_TITLE + ' - Edit Petscan Selection',
     },
   },
+  {
+    path: '/selections/book/:builder_id',
+    component: PetscanBuilder,
+    meta: {
+      title: () => BASE_TITLE + ' - Edit Book Selection',
+    },
+  },
   {
     path: '/selections/:builder_id/zim',
     component: ZimFile,