feat(ui): improve app component

Author: fiftin

web/src/App.vue

@@ -67,6 +67,7 @@
       save-button-text="Create"
       :title="$t('newProject')"
       event-name="i-project"
+      @close="onNewProjectDialogueClosed()"
     >
       <template v-slot:form="{ onSave, onError, needSave, needReset }">
         <ProjectForm
@@ -80,6 +81,35 @@
       </template>
     </EditDialog>
 
+    <EditDialog
+      v-model="subscriptionDialog"
+      :save-button-text="user.admin && !user.has_active_subscription ? 'Activate' : 'Reactivate'"
+      v-if="user"
+      event-name="i-user"
+      dont-close-on-save
+    >
+      <template v-slot:title="{}">
+        <v-icon
+          large
+          class="mr-2"
+          color="#f14668"
+        >
+          mdi-professional-hexagon
+        </v-icon>
+        Subscription details
+      </template>
+
+      <template v-slot:form="{ onSave, onError, needSave, needReset }">
+        <SubscriptionForm
+          item-id="new"
+          @save="onSave(); onSubscriptionKeyUpdates();"
+          @error="onError"
+          :need-save="needSave"
+          :need-reset="needReset"
+        />
+      </template>
+    </EditDialog>
+
     <EditDialog
       v-model="restoreProjectDialog"
       save-button-text="Restore"
@@ -174,8 +204,10 @@
             <v-list-item-content>{{ item.name }}</v-list-item-content>
           </v-list-item>
 
+          <v-divider v-if="user.can_create_project"/>
+
           <v-list-item
-            @click="newProjectDialog = true; newProjectType = '';"
+            @click="showNewProjectDialogue()"
             v-if="user.can_create_project"
             data-testid="sidebar-newProject"
           >
@@ -364,6 +396,25 @@
       <template v-slot:append>
         <v-list class="pa-0">
 
+          <v-list-item
+            key="premium"
+            v-if="user.admin && !user.has_active_subscription"
+            @click="subscriptionDialog = true"
+            class="ActivatePremiumSubscriptionButton"
+          >
+            <v-list-item-content>
+              <v-list-item-title
+              style="font-weight: bold; color: white; font-size: 18px; text-align: center;"
+              >
+                <v-icon
+                  color="white"
+                  x-large
+                >mdi-professional-hexagon</v-icon>
+                Activate Subscription
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+
           <v-list-item>
             <v-switch
               class="DarkModeSwitch"
@@ -458,6 +509,20 @@
 
               <v-divider/>
 
+              <v-list-item
+                key="runners"
+                to="/runners"
+                v-if="user.admin"
+              >
+                <v-list-item-icon>
+                  <v-icon>mdi-cogs</v-icon>
+                </v-list-item-icon>
+
+                <v-list-item-content>
+                  {{ $t('runners') }}
+                </v-list-item-content>
+              </v-list-item>
+
               <v-list-item
                 key="tasks"
                 to="/tasks"
@@ -473,16 +538,21 @@
               </v-list-item>
 
               <v-list-item
-                key="runners"
-                to="/runners"
+                key="subscription"
                 v-if="user.admin"
+                @click="subscriptionDialog = true"
               >
                 <v-list-item-icon>
-                  <v-icon>mdi-cogs</v-icon>
+                  <v-icon
+                    color="#f14668"
+                    style="transform: scale(1.4)"
+                  >
+                    mdi-professional-hexagon
+                  </v-icon>
                 </v-list-item-icon>
 
                 <v-list-item-content>
-                  {{ $t('runners') }}
+                  Subscription details
                 </v-list-item-content>
               </v-list-item>
 
@@ -604,6 +674,32 @@
   <v-app v-else></v-app>
 </template>
 <style lang="scss">
+.NewProSubscriptionMenuItem {
+  transition: 0.2s transform;
+  .v-list-item__content, .v-list-item__icon {
+    transition: 0.5s transform;
+  }
+  &:hover {
+
+    transform: scale(1.05) translateY(-1px);
+
+    // .v-list-item__content {
+    //   transform: scale(1.05) translateX(2px);
+    // }
+    .v-list-item__icon {
+      // transform: rotate(-360deg);
+    }
+  }
+}
+.ActivatePremiumSubscriptionButton {
+  background: hsl(348deg, 86%, 61%);
+  transform: rotate(-5deg) scale(0.95);
+  border-radius: 6px;
+  transition: 0.2s transform;
+  &:hover {
+    transform: rotate(-5deg) scale(1);
+  }
+}
 
 .theme--dark {
   --highlighted-card-bg-color: #262626;
@@ -827,6 +923,8 @@ import ProjectForm from '@/components/ProjectForm.vue';
 import UserForm from '@/components/UserForm.vue';
 import EventBus from '@/event-bus';
 import socket from '@/socket';
+
+import SubscriptionForm from '@/components/SubscriptionForm.vue';
 import RestoreProjectForm from '@/components/RestoreProjectForm.vue';
 import YesNoDialog from '@/components/YesNoDialog.vue';
 import TaskLogDialog from '@/components/TaskLogDialog.vue';
@@ -907,6 +1005,7 @@ function getSystemLang() {
 export default {
   name: 'App',
   components: {
+    SubscriptionForm,
     TaskLogDialog,
     YesNoDialog,
     RestoreProjectForm,
@@ -929,6 +1028,9 @@ export default {
       newProjectType: '',
       userDialog: null,
       hideUserDialogButtons: false,
+
+      subscriptionDialog: null,
+
       restoreProjectDialog: null,
       restoreProjectResult: null,
       restoreProjectResultDialog: null,
@@ -956,8 +1058,14 @@ export default {
     async projects(val) {
       if (val.length === 0
         && this.$route.path.startsWith('/project/')
-        && this.$route.path !== '/project/new') {
-        await this.$router.push({ path: '/project/new' });
+        && this.$route.path !== '/project/new'
+        && this.$route.path !== '/project/premium'
+      ) {
+        if (this.$route.query.new_project === 'premium') {
+          await this.$router.push({ path: '/project/premium' });
+        } else {
+          await this.$router.push({ path: '/project/new' });
+        }
       }
     },
 
@@ -970,6 +1078,10 @@ export default {
           EventBus.$emit('i-show-task', { taskId });
         }
       }
+
+      if ((this.projects || []).length > 0 && this.$route.query.new_project) {
+        EventBus.$emit('i-new-project', { projectType: this.$route.query.new_project });
+      }
     },
 
     darkMode(val) {
@@ -1058,6 +1170,12 @@ export default {
       this.drawer = true;
     });
 
+    EventBus.$on('i-new-project', (e) => {
+      setTimeout(() => {
+        this.showNewProjectDialogue(e.projectType);
+      }, 500);
+    });
+
     EventBus.$on('i-show-task', async (e) => {
       if (parseInt(this.$route.query.t || '', 10) !== e.taskId) {
         const query = { ...this.$route.query, t: e.taskId };
@@ -1147,7 +1265,7 @@ export default {
       switch (e.action) {
         case 'new':
         case 'restore':
-          await this.selectProject(e.item.id);
+          await this.selectProject(e.item.id, { new_project: undefined });
           break;
         case 'delete':
           if (this.projectId === e.item.id && this.projects.length > 0) {
@@ -1171,11 +1289,21 @@ export default {
       await this.loadUserInfo();
     },
 
+    showNewProjectDialogue(projectType = '') {
+      this.newProjectDialog = true;
+      this.newProjectType = projectType;
+    },
+
     selectLanguage(lang) {
       localStorage.setItem('lang', lang);
       window.location.reload();
     },
 
+    async onNewProjectDialogueClosed() {
+      const query = { ...this.$route.query, new_project: undefined };
+      await this.$router.replace({ query });
+    },
+
     async onTaskLogDialogClosed() {
       const query = { ...this.$route.query, t: undefined };
       await this.$router.replace({ query });
@@ -1237,7 +1365,7 @@ export default {
       }
     },
 
-    async selectProject(projectId) {
+    async selectProject(projectId, overriderQuery = {}) {
       this.userRole = (await axios({
         method: 'get',
         url: `/api/project/${projectId}/role`,
@@ -1249,7 +1377,25 @@ export default {
         return;
       }
 
-      await this.$router.push({ path: `/project/${projectId}` });
+      let query = {};
+
+      switch (this.$route.path) {
+        case '/project/new':
+          query.new_project = '';
+          break;
+        default:
+          break;
+      }
+
+      query = {
+        ...query,
+        ...overriderQuery,
+      };
+
+      await this.$router.push({
+        path: `/project/${projectId}${window.location.search}`,
+        query,
+      });
     },
 
     async loadProjects() {