Display add Destination PCard if no deployments

posit-dev · Dec 14, 2023 · 6c5e7ad · 6c5e7ad
1 parent 635fb82
commit 6c5e7ad
Showing 1 changed file with 32 additions and 2 deletions.
diff --git a/web/src/views/project-page/ProjectPage.vue b/web/src/views/project-page/ProjectPage.vue
@@ -12,20 +12,45 @@
       </h2>
 
       <PButton
+        v-if="hasDeployments"
         hierarchy="primary"
         :to="{ name: 'addNewDeployment' }"
       >
         Add Destination
       </PButton>
     </div>
 
-    <div class="card-grid">
+    <div
+      v-if="hasDeployments"
+      class="card-grid"
+    >
       <DeploymentCard
         v-for="deployment in deployments"
         :key="deployment.id"
         :deployment="deployment"
       />
     </div>
+    <div v-else>
+      <PCard
+        :to="{ name: 'addNewDeployment' }"
+      >
+        <div class="flex column items-center">
+          <q-icon
+            name="add"
+            size="2rem"
+          />
+          <h3 class="text-body1 text-weight-medium q-mt-sm">
+            Add a New Destination
+          </h3>
+          <p class="q-mt-xs text-low-contrast">
+            This project hasn't been published yet.
+          </p>
+          <p class="text-low-contrast">
+            Get started by adding a destination.
+          </p>
+        </div>
+      </PCard>
+    </div>
 
     <h2 class="text-h6">
       Configurations
@@ -46,7 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useApi } from 'src/api';
 import { Deployment, isDeploymentError } from 'src/api/types/deployments';
@@ -55,11 +80,16 @@ import ConfigCard from './ConfigCard.vue';
 import DeploymentCard from './DeploymentCard.vue';
 import FileTree from 'src/components/FileTree.vue';
 import PButton from 'src/components/PButton.vue';
+import PCard from 'src/components/PCard.vue';
 
 const api = useApi();
 const deployments = ref<Deployment[]>([]);
 const configurations = ref<Array<Configuration | ConfigurationError>>([]);
 
+const hasDeployments = computed(() => {
+  return deployments.value.length > 0;
+});
+
 async function getDeployments() {
   const response = (await api.deployments.getAll()).data;
   deployments.value = response.filter<Deployment>((d): d is Deployment => {