Start building UI for default retro and poker settings

StevenWeathers · Oct 15, 2024 · 0f2a70f · 0f2a70f
1 parent 669efc6
commit 0f2a70f
Show file tree

Hide file tree

Showing 5 changed files with 297 additions and 1 deletion.
diff --git a/ui/src/components/poker/PokerSettings.svelte b/ui/src/components/poker/PokerSettings.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import Table from '../table/Table.svelte';
+  import TableNav from '../table/TableNav.svelte';
+  import HeadCol from '../table/HeadCol.svelte';
+  import RowCol from '../table/RowCol.svelte';
+  import TableRow from '../table/TableRow.svelte';
+  import TableContainer from '../table/TableContainer.svelte';
+  import { validateUserIsAdmin } from '../../validationUtils';
+  import { user } from '../../stores';
+
+  export let xfetch;
+  export let notifications;
+  export let eventTag;
+  export let organizationId;
+  export let teamId;
+  export let departmentId;
+  export let apiPrefix = '/api';
+  export let isEntityAdmin = false;
+
+  $: isAdmin = validateUserIsAdmin($user);
+
+  let defaultSettings = {
+    id: '',
+    autoFinishVoting: false,
+    pointAverageRounding: 0,
+    hideVoterIdentity: false,
+    estimationScaleId: '',
+    joinCode: '',
+    facilitatorCode: '',
+  };
+  let showCreateDefaultSettings = false;
+  let showUpdateDefaultSettings = false;
+
+  function toggleCreateDefaultSettings() {
+    showCreateDefaultSettings = !showCreateDefaultSettings;
+  }
+
+  function toggleUpdateDefaultSettings() {
+    showUpdateDefaultSettings = !showUpdateDefaultSettings;
+  }
+
+  async function getDefaultSettings() {
+    const response = await xfetch(`${apiPrefix}/poker-settings`);
+    if (response.ok) {
+      defaultSettings = await response.json();
+    } else {
+      notifications.error('Failed to get default poker settings');
+    }
+  }
+
+  getDefaultSettings();
+</script>
+
+<div class="w-full">
+  <TableContainer>
+    <TableNav
+      title="Default Poker Settings"
+      createBtnEnabled="{isAdmin || isEntityAdmin}"
+      createBtnText="{defaultSettings.id !== ''
+        ? 'Update'
+        : 'Create'} Default Settings"
+      createButtonHandler="{defaultSettings.id !== ''
+        ? toggleUpdateDefaultSettings
+        : toggleCreateDefaultSettings}"
+      createBtnTestId="poker-settings-{defaultSettings.id !== ''
+        ? 'update'
+        : 'create'}-btn"
+    />
+    <Table>
+      <tr slot="header">
+        <HeadCol>AutoFinishVoting</HeadCol>
+        <HeadCol>PointAverageRounding</HeadCol>
+        <HeadCol>HideVoterIdentity</HeadCol>
+        <HeadCol>Estimation Scale ID</HeadCol>
+        <HeadCol>Join Code</HeadCol>
+        <HeadCol>Facilitator Code</HeadCol>
+      </tr>
+      <tbody slot="body">
+        {#if defaultSettings.id !== ''}
+          <TableRow>
+            <RowCol>
+              {defaultSettings.autoFinishVoting ? 'Yes' : 'No'}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.pointAverageRounding}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.hideVoterIdentity ? 'Yes' : 'No'}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.estimationScaleId}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.joinCode}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.facilitatorCode}
+            </RowCol>
+          </TableRow>
+        {/if}
+      </tbody>
+    </Table>
+  </TableContainer>
+</div>
diff --git a/ui/src/components/retro/RetroSettings.svelte b/ui/src/components/retro/RetroSettings.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+  import Table from '../table/Table.svelte';
+  import TableNav from '../table/TableNav.svelte';
+  import HeadCol from '../table/HeadCol.svelte';
+  import RowCol from '../table/RowCol.svelte';
+  import TableRow from '../table/TableRow.svelte';
+  import TableContainer from '../table/TableContainer.svelte';
+  import { validateUserIsAdmin } from '../../validationUtils';
+  import { user } from '../../stores';
+
+  export let xfetch;
+  export let notifications;
+  export let eventTag;
+  export let organizationId;
+  export let teamId;
+  export let departmentId;
+  export let apiPrefix = '/api';
+  export let isEntityAdmin = false;
+
+  $: isAdmin = validateUserIsAdmin($user);
+
+  let defaultSettings = {
+    id: '',
+    maxVotes: false,
+    allowMultipleVotes: 0,
+    brainstormVisibility: false,
+    phaseTimeLimit: 0,
+    phaseAutoAdvance: false,
+    allowCumulativeVoting: false,
+    templateId: '',
+    joinCode: '',
+    facilitatorCode: '',
+  };
+  let showCreateDefaultSettings = false;
+  let showUpdateDefaultSettings = false;
+
+  function toggleCreateDefaultSettings() {
+    showCreateDefaultSettings = !showCreateDefaultSettings;
+  }
+
+  function toggleUpdateDefaultSettings() {
+    showUpdateDefaultSettings = !showUpdateDefaultSettings;
+  }
+
+  async function getDefaultSettings() {
+    const response = await xfetch(`${apiPrefix}/retro-settings`);
+    if (response.ok) {
+      defaultSettings = await response.json();
+    } else {
+      notifications.error('Failed to get default retro settings');
+    }
+  }
+
+  getDefaultSettings();
+</script>
+
+<div class="w-full">
+  <TableContainer>
+    <TableNav
+      title="Default Retrospective Settings"
+      createBtnEnabled="{isAdmin || isEntityAdmin}"
+      createBtnText="{defaultSettings.id !== ''
+        ? 'Update'
+        : 'Create'} Default Settings"
+      createButtonHandler="{defaultSettings.id !== ''
+        ? toggleUpdateDefaultSettings
+        : toggleCreateDefaultSettings}"
+      createBtnTestId="retro-settings-{defaultSettings.id !== ''
+        ? 'update'
+        : 'create'}-btn"
+    />
+    <Table>
+      <tr slot="header">
+        <HeadCol>AllowMultipleVotes</HeadCol>
+        <HeadCol>BrainstormVisibility</HeadCol>
+        <HeadCol>PhaseTimeLimit</HeadCol>
+        <HeadCol>PhaseAutoAdvance</HeadCol>
+        <HeadCol>AllowCumulativeVoting</HeadCol>
+        <HeadCol>TemplateId</HeadCol>
+        <HeadCol>Join Code</HeadCol>
+        <HeadCol>Facilitator Code</HeadCol>
+      </tr>
+      <tbody slot="body">
+        {#if defaultSettings.id !== ''}
+          <TableRow>
+            <RowCol>
+              {defaultSettings.allowMultipleVotes ? 'Yes' : 'No'}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.brainstormVisibility ? 'Yes' : 'No'}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.phaseTimeLimit}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.phaseAutoAdvance ? 'Yes' : 'No'}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.allowCumulativeVoting ? 'Yes' : 'No'}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.templateId}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.joinCode}
+            </RowCol>
+            <RowCol>
+              {defaultSettings.facilitatorCode}
+            </RowCol>
+          </TableRow>
+        {/if}
+      </tbody>
+    </Table>
+  </TableContainer>
+</div>
diff --git a/ui/src/pages/team/Department.svelte b/ui/src/pages/team/Department.svelte
@@ -34,6 +34,9 @@
   let organization = {
     id: organizationId,
     name: '',
+    createdDate: '',
+    updateDate: '',
+    subscribed: false,
   };
   let department = {
     id: departmentId,

diff --git a/ui/src/pages/team/Organization.svelte b/ui/src/pages/team/Organization.svelte
@@ -39,6 +39,8 @@
   } from '../../components/team/metrics';
   import FeatureSubscribeBanner from '../../components/global/FeatureSubscribeBanner.svelte';
   import RetroTemplatesList from '../../components/retrotemplate/RetroTemplatesList.svelte';
+  import PokerSettings from '../../components/poker/PokerSettings.svelte';
+  import RetroSettings from '../../components/retro/RetroSettings.svelte';
 
   export let xfetch;
   export let router;
@@ -587,6 +589,23 @@
   />
 
   {#if AppConfig.FeaturePoker}
+    <div class="mt-8">
+      {#if !AppConfig.SubscriptionsEnabled || (AppConfig.SubscriptionsEnabled && organization.subscribed)}
+        <PokerSettings
+          xfetch="{xfetch}"
+          eventTag="{eventTag}"
+          notifications="{notifications}"
+          isEntityAdmin="{isAdmin}"
+          apiPrefix="{orgPrefix}"
+          organizationId="{organizationId}"
+        />
+      {:else}
+        <FeatureSubscribeBanner
+          salesPitch="Optimize your Organization's estimation workflow with customized default Planning Poker settings."
+        />
+      {/if}
+    </div>
+
     <div class="mt-8">
       {#if !AppConfig.SubscriptionsEnabled || (AppConfig.SubscriptionsEnabled && organization.subscribed)}
         <EstimationScalesList
@@ -612,6 +631,23 @@
   {/if}
 
   {#if AppConfig.FeatureRetro}
+    <div class="mt-8">
+      {#if !AppConfig.SubscriptionsEnabled || (AppConfig.SubscriptionsEnabled && organization.subscribed)}
+        <RetroSettings
+          xfetch="{xfetch}"
+          eventTag="{eventTag}"
+          notifications="{notifications}"
+          isEntityAdmin="{isAdmin}"
+          apiPrefix="{orgPrefix}"
+          organizationId="{organizationId}"
+        />
+      {:else}
+        <FeatureSubscribeBanner
+          salesPitch="Enhance your Organization's reflection process with customized default Retrospective settings."
+        />
+      {/if}
+    </div>
+
     <div class="mt-8">
       {#if !AppConfig.SubscriptionsEnabled || (AppConfig.SubscriptionsEnabled && organization.subscribed)}
         <RetroTemplatesList

diff --git a/ui/src/pages/team/Team.svelte b/ui/src/pages/team/Team.svelte
@@ -33,6 +33,8 @@
   import BooleanDisplay from '../../components/global/BooleanDisplay.svelte';
   import FeatureSubscribeBanner from '../../components/global/FeatureSubscribeBanner.svelte';
   import RetroTemplatesList from '../../components/retrotemplate/RetroTemplatesList.svelte';
+  import PokerSettings from '../../components/poker/PokerSettings.svelte';
+  import RetroSettings from '../../components/retro/RetroSettings.svelte';
 
   export let xfetch;
   export let router;
@@ -105,6 +107,8 @@
     ? `${orgPrefix}/teams/${teamId}`
     : `${apiPrefix}/teams/${teamId}`;
 
+  const teamOnlyPrefix = `${apiPrefix}/teams/${teamId}`;
+
   $: currentPageUrl = teamPrefix
     .replace('/api', '')
     .replace('organizations', 'organization')
@@ -635,7 +639,7 @@
                 <HeadCol>{$LL.comments()}</HeadCol>
                 <HeadCol />
               </tr>
-              <tbody slot="body" let:class="{className}" class="{className}">
+              <tbody slot="body">
                 {#each retroActions as item, i}
                   <TableRow itemIndex="{i}">
                     <RowCol>
@@ -780,6 +784,23 @@
   />
 
   {#if FeaturePoker}
+    <div class="mt-8">
+      {#if !AppConfig.SubscriptionsEnabled || (AppConfig.SubscriptionsEnabled && (team.subscribed || organization.subscribed))}
+        <PokerSettings
+          xfetch="{xfetch}"
+          eventTag="{eventTag}"
+          notifications="{notifications}"
+          isEntityAdmin="{isAdmin}"
+          apiPrefix="{teamOnlyPrefix}"
+          organizationId="{organizationId}"
+        />
+      {:else}
+        <FeatureSubscribeBanner
+          salesPitch="Optimize your Team's estimation workflow with customized default Planning Poker settings."
+        />
+      {/if}
+    </div>
+
     <div class="mt-8">
       {#if !AppConfig.SubscriptionsEnabled || (AppConfig.SubscriptionsEnabled && (team.subscribed || organization.subscribed))}
         <EstimationScalesList
@@ -807,6 +828,23 @@
   {/if}
 
   {#if AppConfig.FeatureRetro}
+    <div class="mt-8">
+      {#if !AppConfig.SubscriptionsEnabled || (AppConfig.SubscriptionsEnabled && (team.subscribed || organization.subscribed))}
+        <RetroSettings
+          xfetch="{xfetch}"
+          eventTag="{eventTag}"
+          notifications="{notifications}"
+          isEntityAdmin="{isAdmin}"
+          apiPrefix="{teamOnlyPrefix}"
+          organizationId="{organizationId}"
+        />
+      {:else}
+        <FeatureSubscribeBanner
+          salesPitch="Enhance your Team's reflection process with customized default Retrospective settings."
+        />
+      {/if}
+    </div>
+
     <div class="mt-8">
       {#if !AppConfig.SubscriptionsEnabled || (AppConfig.SubscriptionsEnabled && (team.subscribed || organization.subscribed))}
         <RetroTemplatesList