[17] As a user, I can click a button to toggle display on the create report form

assets/.eslintignore

@@ -0,0 +1,2 @@
+/node_modules/**
+/js/vendor/**

assets/.eslintrc

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "@nimbl3/eslint-config-nimbl3"
+  ],
+  "globals": {
+    "CustomEvent": true,
+    "Event": true,
+    "FileReader": true,
+    "FormData": true,
+    "I18n": true,
+    "Image": true,
+    "noUiSlider": true,
+    "wNumb": true
+  }
+}

assets/css/app.scss

@@ -5,7 +5,6 @@
 
 @import "base/buttons";
 @import "base/card";
-@import "base/forms";
 @import "base/tables";
 
 @import "components/alert";
@@ -14,6 +13,7 @@
 @import "components/table-report";
 @import "components/table-search-result-url";
 @import "components/table-search-result";
+@import "components/upload-report";
 
 @import "layouts/app";
 @import "layouts/landing";

assets/css/base/_buttons.scss

@@ -4,6 +4,10 @@
   &__primary {
     @apply inline-block py-4 px-8 text-white bg-indigo-600 hover:bg-indigo-700 font-semibold rounded shadow;
 
+    &--md {
+      @apply py-2 px-4;
+    }
+
     &--sm {
       @apply py-1 px-2;
     }

assets/css/components/_table-search-result.scss

@@ -48,7 +48,7 @@
     &--cta {
       @apply justify-end;
 
-      .button__secondary {
+      .button__primary {
         @apply ml-2;
       }
     }

assets/css/base/_forms.scss → assets/css/components/_upload-report.scss

@@ -1,5 +1,18 @@
-.form {
-  @apply block;
+.upload-report {
+  @apply flex flex-col;
+}
+
+.upload-report .form-report {
+  @apply invisible opacity-0;
+
+  height: 0;
+  transition: height 0.2s ease, opacity 0.5s ease;
+
+  &.show {
+    @apply visible opacity-100;
+
+    height: 225px;
+  }
 
   &__label {
     @apply block text-gray-700 text-sm font-bold mb-2;
@@ -13,6 +26,10 @@
     }
   }
 
+  &__button {
+    @apply w-min ml-auto;
+  }
+
   &__input {
     @apply block appearance-none w-full py-3 px-4 mb-3 leading-tight text-gray-700 bg-gray-50 focus:bg-white border border-gray-200 focus:border-gray-500 rounded focus:outline-none;
   }

assets/css/screens/_dashboard.scss

@@ -3,7 +3,11 @@ body.dashboard {
     @apply mx-auto max-w-lg mb-6;
   }
 
-  .report-index {
+  .report-list {
     @apply mt-20;
+
+    &__header {
+      @apply flex justify-end pr-16;
+    }
   }
 }

assets/js/app.js

@@ -1,7 +1,7 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import "../css/app.scss"
+import '../css/app.scss';
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -12,4 +12,5 @@ import "../css/app.scss"
 //     import {Socket} from "phoenix"
 //     import socket from "./socket"
 //
-import "phoenix_html"
+import 'phoenix_html';
+import './initializers';

assets/js/initializers/dropdown.js

@@ -0,0 +1,9 @@
+import { Dropdown } from '../vendor/bootstrap';
+
+const SELECTOR = '[data-toggle="dropdown"]';
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll(SELECTOR).forEach((element) => {
+    new Dropdown(element, true);
+  });
+});

assets/js/initializers/index.js

@@ -0,0 +1 @@
+import './dropdown';

assets/js/socket.js

@@ -6,9 +6,9 @@
 //
 // Pass the token on params as below. Or remove it
 // from the params if you are not using authentication.
-import {Socket} from "phoenix"
+import {Socket} from 'phoenix';
 
-let socket = new Socket("/socket", {params: {token: window.userToken}})
+let socket = new Socket('/socket', {params: {token: window.userToken}});
 
 // When you connect, you'll often need to authenticate the client.
 // For example, imagine you have an authentication plug, `MyAuth`,
@@ -52,12 +52,12 @@ let socket = new Socket("/socket", {params: {token: window.userToken}})
 //     end
 //
 // Finally, connect to the socket:
-socket.connect()
+socket.connect();
 
 // Now that you are connected, you can join channels with a topic:
-let channel = socket.channel("topic:subtopic", {})
+let channel = socket.channel('topic:subtopic', {});
 channel.join()
-  .receive("ok", resp => { console.log("Joined successfully", resp) })
-  .receive("error", resp => { console.log("Unable to join", resp) })
+  .receive('ok', resp => { console.log('Joined successfully', resp); })
+  .receive('error', resp => { console.log('Unable to join', resp); });
 
-export default socket
+export default socket;

assets/js/vendor/bootstrap/index.js

@@ -0,0 +1,13 @@
+import bootstrap from 'bootstrap.native/dist/bootstrap-native';
+
+export const Alert = bootstrap.Alert;
+export const Button = bootstrap.Button;
+export const Carousel = bootstrap.Carousel;
+export const Collapse = bootstrap.Collapse;
+export const Dropdown = bootstrap.Dropdown;
+export const Modal = bootstrap.Modal;
+export const Popover = bootstrap.Popover;
+export const ScrollSpy = bootstrap.ScrollSpy;
+export const Tab = bootstrap.Tab;
+export const Toast = bootstrap.Toast;
+export const Tooltip = bootstrap.Tooltip;