feat: write how to use bridge on end of life (#880)

components/end-of-life.vue

@@ -2,22 +2,149 @@
   <div>
     <h1>We're moving to time writing in Bridge!</h1>
     <p>
-      The last couple of months the bridge team added multiple features to time writing in Bridge
-      which makes it suitable for us.
+      Did you know the hours tool already syncs to Bridge and is just an interface on top of it?
+      Well, the tooling team took great effort in adjusting Bridge to accommodate the way we write
+      our hours like we do by introducing the new Grid view.
     </p>
     <p>That's why, starting April, we all will use Bridge for time writing.</p>
     <p>Use these contract names to find the right items to write hours in Bridge:</p>
 
-    <b-table class="mb-4" striped :items="contracts" :fields="fields"></b-table>
+    <b-table class="mb-4" striped :items="contracts" :fields="fields">
+      <template #cell(pinlink)="data">
+        <a v-if="data.value" :href="data.value" target="_blank">Pin in Grid view</a>
+      </template>
+    </b-table>
 
     <b-button
       variant="success"
       href="https://bridge.hosted-tools.com/worklogs/calendar/grid"
       target="_blank"
+      class="mb-4"
     >
       Start writing hours in Bridge
       <b-icon icon="box-arrow-up-right" class="ml-1" aria-hidden="true" />
     </b-button>
+    <hr />
+    <h2 class="mt-4">How to write hours</h2>
+    <p>Go to either one of:</p>
+
+    <ul>
+      <li>
+        Bridge
+        <a href="https://bridge.hosted-tools.com/worklogs/calendar/grid">Grid View</a>
+      </li>
+      <li>
+        Bridge
+        <a href="https://bridge.hosted-tools.com/worklogs/calendar">Calendar View</a>
+      </li>
+    </ul>
+    <strong>Grid view instructions:</strong>
+    <ol>
+      <li>
+        <p>
+          Click the + button.
+          <br />
+          <img src="@/assets/images/plus-button.png" alt="Plus Button" width="300" />
+        </p>
+      </li>
+      <li>
+        <p>
+          Select the correct contract
+          <br />
+          <img src="@/assets/images/contract.png" alt="Contract" />
+        </p>
+      </li>
+      <li>
+        <p>
+          Click save (and close modal) or click save & new (to add another contract)
+          <br />
+          <img src="@/assets/images/contract2.png" alt="Contract" />
+        </p>
+      </li>
+      <li>
+        <p>
+          Write hours & enter a description.
+          <br />
+          <img
+            src="@/assets/images/hours-description.png"
+            alt="Hours and Description"
+            width="200"
+          />
+        </p>
+        <div class="warning">
+          ⚠️ Descriptions will show on the invoice of the client.
+          <br />
+          Please use something like “
+          <strong>Client work</strong>
+          ” as the description.
+        </div>
+      </li>
+      <li>
+        <p>Done!</p>
+        <p>
+          For full details, check out Confluence:
+          <a
+            href="https://confluence.hosted-tools.com/display/TOOLINGBRIDGE/Grid+based+week+calendar"
+          >
+            Grid based week calendar
+          </a>
+        </p>
+      </li>
+    </ol>
+    <h3>Guidelines</h3>
+    <p></p>
+    <ul>
+      <li>
+        <strong>Log weekly</strong>
+        at the end of the week (or beginning of the next)
+        <br />
+        <i>
+          This allows for administration to send invoices to some clients on a weekly basis,
+          lowering the workload every first days of the month.
+        </i>
+      </li>
+      <li>
+        <strong>Do not micro-log time</strong>
+        <br />
+        <i>
+          Mainly you work with/for clients. Preferably any short non-client time you write on the
+          client (such as conversation with your manager or colleague, minor IT issues etc.).
+        </i>
+      </li>
+      <li>
+        <strong>Clearly describe</strong>
+        your 'Develop yourself, Improving iO' -time
+        <br />
+        <i>
+          Write a clear description when you do anything other than client work. This helps us
+          improve our reporting. Please still don't micro-log though (&lt; 30 min)!!!
+        </i>
+      </li>
+    </ul>
+    <h3>Tips</h3>
+    <ol>
+      <li>
+        Copy/paste time entries in both calendar and grid view. First copy the entry, by clicking
+        the copy button or selecting the card and cmd + c / ctrl + c. Paste the entry, by clicking
+        the paste button or selecting the day row and cmd + v / ctrl + v.
+        <br />
+        <img src="@/assets/images/copy-paste.png" alt="Copy Paste" />
+      </li>
+
+      <li>
+        Check if you booked correctly or still have to write or quick select a certain week by
+        clicking on the date period.
+        <br />
+        <img src="@/assets/images/date-period.png" alt="Date Period" width="200" />
+      </li>
+
+      <li>
+        Change the order of the grid rows by dragging and dropping using the 3 lines. You can also
+        unpin by clicking the red pin or pin by clicking the grey pin.
+        <br />
+        <img src="@/assets/images/pin-button.png" alt="Pin button" />
+      </li>
+    </ol>
   </div>
 </template>
 
@@ -33,12 +160,32 @@ export default defineComponent({
     const store = useStore<RootStoreState>();
 
     const timesheet = computed(() => store.state.timesheets.weeklyTimesheet);
-    const contracts = computed(() => timesheet.value.projects.map((project) => project.project.contract));
+
+    // Filter first on empty contracts, because they could be empty which leads to an error
+    // Also ignore the 'Intracto - INTERN - Consultancy NL non-billable' contract, because it's not relevant in the new situation
+    const assignedContracts = computed(() => timesheet.value.projects.map((project) => project.project.contract).filter(Boolean).filter((contract) => contract?.project_id !== 9322));
+    const staticContracts = computed(() => [
+      { name: 'Google Day', project_name: 'iO - Consultancy > NL - Campus Initiatives (IOC_0003#1) > Google Days', pinlink: 'https://bridge.hosted-tools.com/worklogs/calendar/grid/pin?logEntityIdToPin=f1bf93ac-d70e-11ee-9590-00505697992f'},
+      { name: 'Team Captain (when assigned)', project_name: 'iO > Coaching > Giving coaching (not client related)', pinlink: 'https://bridge.hosted-tools.com/worklogs/calendar/grid/pin?logEntityIdToPin=c84ddf11-39e0-11ed-890c-005056bfa842' },
+      { name: 'Developer Advocate (when assigned)', project_name: 'CoE > (CNLDA#1) Consultancy NL - Developer Advocacy', pinlink: 'https://bridge.hosted-tools.com/worklogs/calendar/grid/pin?logEntityIdToPin=7138f7e7-4358-11ee-a749-00505697992f' },
+      { name: 'Available or Other', project_name: 'Check-in with your manager where to write this in Bridge' },
+    ]);
 
     return {
-      fields: [{ key: 'name', label: 'Contract' }, { key: 'project_name', label: 'Project' }],
-      contracts,
+      fields: [{ key: 'name', label: 'Time entry' }, { key: 'project_name', label: 'Contract' }, { key: 'pinlink', label: 'Bridge link' }],
+      contracts: [...assignedContracts.value, ...staticContracts.value],
     };
   },
 });
 </script>
+<style scoped>
+.warning {
+  color: #856404;
+  background-color: #fff3cd;
+  border: 1px solid #ffeeba;
+  position: relative;
+  padding: .75rem 1.25rem;
+  margin-bottom: 1rem;
+  border-radius: .25rem;
+}
+</style>