Allow toggling menu dropdowns (#251)

* Allow toggling menu dropdowns * Update client/src/components/Nav.svelte
fairnesscoop · Apr 22, 2022 · 4f55177 · 4f55177
1 parent f39d068
commit 4f55177
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 6 deletions.
diff --git a/client/src/components/Nav.svelte b/client/src/components/Nav.svelte
@@ -12,11 +12,20 @@
   import CRMIcon from './icons/CRMIcon.svelte';
   import AccountingIcon from './icons/AccountingIcon.svelte';
   import ChevronDownIcon from './icons/ChevronDownIcon.svelte';
+  import ChevronUpIcon from './icons/ChevronUpIcon.svelte';
 
   const { session } = stores();
 
   export let segment;
 
+  const dropdowns = {
+    fairCalendar: true,
+    accounting: true,
+    human_resources: true,
+  };
+
+  const toggleDropdown = (key) => dropdowns[key] = !dropdowns[key];
+
   const userRoles = [ROLE_COOPERATOR, ROLE_EMPLOYEE];
 
   const activeClass =
@@ -66,18 +75,25 @@
         <li class="relative px-6 py-3">
           <button
             class={segment === 'crm' ? activeLinkClass : linkClass}
-            aria-haspopup="true">
+            aria-haspopup="true"
+            on:click={toggleDropdown("fairCalendar")}
+          >
             {#if segment === 'crm'}
               <span class={activeClass} aria-hidden="true" />
             {/if}
             <span class="inline-flex items-center">
               <CRMIcon className={'w-5 h-5'} />
               <span class="ml-4">{$_('crm.breadcrumb')}</span>
             </span>
-            <ChevronDownIcon className={'w-4 h-4'} />
+            {#if dropdowns.accounting}
+              <ChevronDownIcon className={'w-4 h-4'} />
+            {:else}
+              <ChevronUpIcon className={'w-4 h-4'} />
+            {/if}
           </button>
           <ul
             class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
+            class:hidden={!dropdowns.fairCalendar}
             aria-label="submenu">
             {#if userRoles.includes($session.user.scope)}
               <li class={subLinkClass}>
@@ -105,15 +121,22 @@
             {/if}
             <button
               class={segment === 'accounting' ? activeLinkClass : linkClass}
-              aria-haspopup="true">
+              aria-haspopup="true"
+              on:click={toggleDropdown("accounting")}
+            >
               <span class="inline-flex items-center">
                 <AccountingIcon className={'w-5 h-5'} />
                 <span class="ml-4">{$_('accounting.breadcrumb')}</span>
               </span>
-              <ChevronDownIcon className={'w-4 h-4'} />
+              {#if dropdowns.accounting}
+                <ChevronDownIcon className={'w-4 h-4'} />
+              {:else}
+                <ChevronUpIcon className={'w-4 h-4'} />
+              {/if}
             </button>
             <ul
               class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
+              class:hidden={!dropdowns.accounting}
               aria-label="submenu">
               <li class={subLinkClass}>
                 <a
@@ -141,18 +164,25 @@
         <li class="relative px-6 py-3">
           <button
             class={segment === 'human_resources' ? activeLinkClass : linkClass}
-            aria-haspopup="true">
+            aria-haspopup="true"
+            on:click={toggleDropdown("human_resources")}
+          >
             {#if segment === 'human_resources'}
               <span class={activeClass} aria-hidden="true" />
             {/if}
             <span class="inline-flex items-center">
               <UsersIcon className={'w-5 h-5'} />
               <span class="ml-4">{$_('human_resources.breadcrumb')}</span>
             </span>
-            <ChevronDownIcon className={'w-4 h-4'} />
+            {#if dropdowns.human_resources}
+              <ChevronDownIcon className={'w-4 h-4'} />
+            {:else}
+              <ChevronUpIcon className={'w-4 h-4'} />
+            {/if}
           </button>
           <ul
             class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 rounded-md shadow-inner bg-gray-50 dark:text-gray-400 dark:bg-gray-900"
+            class:hidden={!dropdowns.human_resources}
             aria-label="submenu">
             {#if userRoles.includes($session.user.scope)}
               <li class={subLinkClass}>

diff --git a/client/src/components/icons/ChevronUpIcon.svelte b/client/src/components/icons/ChevronUpIcon.svelte
@@ -0,0 +1,16 @@
+<script>
+  export let className;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  fill="currentColor"
+  viewBox="0 0 20 20"
+>
+  <path
+    fill-rule="evenodd"
+    d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
+    clip-rule="evenodd"
+  />
+</svg>
diff --git a/docs/dev.md b/docs/dev.md
@@ -0,0 +1,7 @@
+# dev
+
+## Icons
+
+Les icônes sont tirées de https://heroicons.com/
+
+Pour ajouter une nouvelle icône, créer un fichier `.svelte` en utilisant le SVG tiré de HeroIcons.
diff --git a/docs/prod.md b/docs/prod.md
@@ -0,0 +1,43 @@
+# prod
+
+_This document describes Fairness' production deployment of Permacoop. It is meant for Fairness team members._
+
+## Deployment
+
+The current deployment process is manual. It is as follows.
+
+1. Connect to the remote server via SSH.
+1. `cd /var/www/permacoop`
+1. Update client and server:
+
+    ```
+    git pull
+    ```
+
+1. Re-build apps:
+
+    ```
+    cd server && npm run build
+    cd client && npm run build
+    ```
+
+1. Restart `pm2` if need be: if `pm2 status` shows an instance as `error`, restart it using:
+
+    ```bash
+    pm2 reload <INSTANCE_ID>
+    ```
+
+## Troubleshooting
+
+### `502 Bad Gateway` after a deploy
+
+If the server responds with `502 Bad Gateway` after deploying, it may be that the client and/or API servers failed to boot.
+
+Restart `pm2`:
+
+```bash
+$ pwd
+/var/www/permacoop
+$ cd server && pm2 start server.config.js
+$ cd client && pm2 start server.config.js
+```