Tab views

conf/tasks/es6-build.js

@@ -12,9 +12,34 @@ gulp.task('es6-build', done => {
     'front-end',
     'ndm',
     'ndm-updater',
+    'npm-runner',
     done);
 });
 
+gulp.task('npm-runner', () => {
+
+  return rollup({
+    'entry': `${paths.lib}js/npm/npm-runner.js`,
+    'plugins': [
+      rollupJSON(),
+      rollupBabel({
+        'presets': [
+          'es2015-rollup'
+        ]
+      })
+    ]
+  }).then(bundle => {
+
+    return bundle.write({
+      'format': 'iife',
+      'moduleId': 'npm-ui-ng',
+      'moduleName': 'npm-ui-ng',
+      'sourceMap': true,
+      'dest': `${paths.tmp}/npm-runner.js`
+    });
+  });
+});
+
 gulp.task('ndm', () => {
 
   return rollup({

lib/content.pug

@@ -1,6 +1,7 @@
-include ./top.pug
-.content(ng-controller='ContentController as content')
-  .row.home.bg-ultralight(ng-hide="content.loading || content.packageInformations", ng-show="content.goBackHome")
+.content(ng-controller="ContentController as content")
+  span(npm-loading)
+  include ./npm-doctor-log.pug
+  .row.home.bg-ultralight(ng-show="content.tabs.length <= 0")
     div
       .separator10
       small.color-black
@@ -9,59 +10,66 @@ include ./top.pug
       .separator10
       button.home-button(ng-click="shell.openChooser()")
         | Add projects
-  .row.table-loader.bg-lighter(ng-show="content.loading", ng-hide='!content.loading || content.loaded')
-    img(src='img/loading.svg', width='22')
-    | Loading ...
-    .separator10
-    .color-black
-      small May take some time
-  div(ng-show='content.loaded && !content.goBackHome')
-    .row.table-header
-      .col-xs-4.clickable(ng-click="content.sortTableBy('name')")
-        | Package
-        i(class="fa", ng-class="{'fa-sort': !content.tableOrderBy.includes('-name') || !content.tableOrderBy.includes('name'), 'fa-sort-down': content.tableOrderBy.includes('-name'), 'fa-sort-up': content.tableOrderBy.includes('name')}")
-      .col-xs-2
-        | Current
-      .col-xs-2
-        | Wanted
-      .col-xs-2
-        | Latest
-      .col-xs-2.clickable(ng-click="content.sortTableBy('kind')")
-        | Env
-        i(class="fa", ng-class="{'fa-sort': !content.tableOrderBy.includes('-kind') || !content.tableOrderBy.includes('kind'), 'fa-sort-down': content.tableOrderBy.includes('-kind'), 'fa-sort-up': content.tableOrderBy.includes('kind')}")
-    .table-body(ng-table-keyboard)
-      <!-- show disabled npm global row if in globals-->
-      .row.table-row.disabled(ng-repeat='aPackage in content.packageInformations', ng-if="content.isGlobalProject && aPackage.name === 'npm'", title="Do not perform npm global actions from here")
-        .col-xs-4 {{ aPackage.name }}
+  .tab(npm-tabs, ng-repeat="tab in content.tabs", npm-tab-id="{{tab}}", ng-show="content.activeTab === tab && tab")
+    .tab-menu
+      span.tab-button(ng-repeat="tab in content.tabs", ng-class="{'active': content.activeTab === tab}", ng-click="content.activeTab = tab")
+        spanner(ng-if="tab === '<global>'")
+          img(src="img/npm-logo-cube.svg", width="16")
+          | Globals
+        spanner(ng-if="tab !== '<global>'")
+          | {{ tab | lastNameInPath}}
+        a(ng-click="content.closeProjectTab(tab)")
+          i(class="fa fa-remove")
+    include ./top.pug
+    div(ng-show="tab")
+      .row.table-header
+        .col-xs-4.clickable(ng-click="sortTableBy('name')")
+          | Package
+          i(class="fa", ng-class="{'fa-sort': !tableOrderBy.includes('-name') || !tableOrderBy.includes('name'), 'fa-sort-down': tableOrderBy.includes('-name'), 'fa-sort-up': tableOrderBy.includes('name')}")
         .col-xs-2
-          span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
-            | {{ aPackage.current }}
+          | Current
         .col-xs-2
-          i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
-          | {{ aPackage.wanted }}
+          | Wanted
         .col-xs-2
-          b(ng-if="aPackage.latest")
-            | {{ aPackage.latest }}
-          i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
-        .col-xs-2
-          | {{ aPackage.kind }}
-      <!-- show all packages except for npm global-->
-      .row.table-row(ng-repeat='aPackage in content.packageInformations | orderBy: content.tableOrderBy', id="table-item-{{$index}}", ng-table-keyboard-selected-items="content.selectedPackages", ng-if="!content.isGlobalProject ||  content.isGlobalProject && aPackage.name !== 'npm'", selection-model, selection-model-mode="'multiple'", selection-model-selected-items="content.selectedPackages", ng-click="shell.selectPackages(content.selectedPackages)", ng-class="{'active': content.selectedPackages.includes(aPackage), 'table-row-loading': shell.currentSelectedPackages.includes(aPackage) && content.showLoadingSelectedRow}")
-        .col-xs-4 {{ aPackage.name }}
-        .col-xs-2
-          span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
-            | {{ aPackage.current }}
-        .col-xs-2
-          i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
-          | {{ aPackage.wanted }}
-        .col-xs-2
-          b(ng-if="aPackage.latest")
-            | {{ aPackage.latest }}
-          i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
-        .col-xs-2
-          | {{ aPackage.kind }}
-    div(ng-show="content.packageInformations && content.packageInformations.length > 0")
-      h6
-        | Packages informations
-      div.table-infos
-        include ./package-informations.pug
+          | Latest
+        .col-xs-2.clickable(ng-click="sortTableBy('kind')")
+          | Env
+          i(class="fa", ng-class="{'fa-sort': !tableOrderBy.includes('-kind') || !tableOrderBy.includes('kind'), 'fa-sort-down': tableOrderBy.includes('-kind'), 'fa-sort-up': tableOrderBy.includes('kind')}")
+      .table-body(ng-table-keyboard, ng-class="{'freezed': showLoadingSelectedRow}")
+        .table-loader(ng-show="loading && !loaded")
+          .table-loader-content
+            img(src='img/loading.svg')
+            | Loading packages...
+        <!-- show disabled npm global row if in globals-->
+        .row.table-row.disabled(ng-repeat='aPackage in packageInformations', ng-if="isGlobalProject && aPackage.name === 'npm'", title="Do not perform npm global actions from here")
+          .col-xs-4 {{ aPackage.name }}
+          .col-xs-2
+            span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
+              | {{ aPackage.current }}
+          .col-xs-2
+            i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
+            | {{ aPackage.wanted }}
+          .col-xs-2
+            b(ng-if="aPackage.latest")
+              | {{ aPackage.latest }}
+            i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
+          .col-xs-2
+            | {{ aPackage.kind }}
+        <!-- show all packages except for npm global-->
+        .row.table-row(ng-repeat='aPackage in packageInformations | orderBy: tableOrderBy', ng-hide="!packageInformations", id="table-item-{{$index}}", ng-table-keyboard-selected-items="selectedPackages", ng-if="!isGlobalProject ||  isGlobalProject && aPackage.name !== 'npm'", selection-model, selection-model-mode="'multiple'", selection-model-selected-items="selectedPackages", ng-click="selectPackages(selectedPackages)", ng-class="{'active': selectedPackages.includes(aPackage), 'table-row-loading': currentSelectedPackages.includes(aPackage) && showLoadingSelectedRow}")
+          .col-xs-4 {{ aPackage.name }}
+          .col-xs-2
+            span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
+              | {{ aPackage.current }}
+          .col-xs-2
+            i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
+            | {{ aPackage.wanted }}
+          .col-xs-2
+            b(ng-if="aPackage.latest")
+              | {{ aPackage.latest }}
+            i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
+          .col-xs-2
+            | {{ aPackage.kind }}
+      div
+        div.table-infos
+          include ./package-informations.pug

lib/footer.pug

@@ -7,17 +7,18 @@
       | v{{shell.npmCurrentVersionBadge}}
     button.button-global(type="button", title="Enable ndm in global folder",  ng-show="shell.globalDisabled", ng-click="shell.enableGlobal()")
       i.fa.fa-globe.color-primary
-      | Enable
+      | Enable globals
     button.button-update(type="button", ng-show="!shell.globalDisabled && shell.npmCurrentVersionBadge", title="Update npm", ng-click="shell.activeClickedLink('update'); shell.updateNpm()")
       i.fa.fa-history
-      | Update
-    button.button-update(type="button", title="Run doctor", ng-click="shell.activeClickedLink('doctor'); shell.runDoctor()")
-      i.fa.fa-doctor
-      | Doctor
-  span(class="npm-status", ng-mouseenter="shell.checkRegistryStatus()")
+      | Update npm
+  span(class="npm-status pull-right", ng-mouseenter="shell.checkRegistryStatus()")
     i.fa.fa-disk(title="npm registry is available", ng-show="!shell.loadingRegistryStatus && shell.registryStatus")
     i.fa.fa-disk(title="npm registry checking ...", ng-show="shell.loadingRegistryStatus")
     i.fa.fa-disk(title="npm registry is unavailable", ng-show="!shell.loadingRegistryStatus && !shell.registryStatus")
     div.loader(ng-class="{'loading': shell.loadingRegistryStatus}")
       i.fa.fa-circle(ng-class="{'available': !shell.loadingRegistryStatus && shell.registryStatus}")
       i.fa.fa-circle(ng-class="{'unavailable': !shell.loadingRegistryStatus && !shell.registryStatus}")
+  span(class="pull-right")
+    button.button-doctor(type="button", title="Run doctor", ng-click="shell.activeClickedLink('doctor'); shell.runDoctor()")
+      i.fa.fa-doctor
+      | Doctor

lib/index.pug

@@ -8,7 +8,6 @@ html
     link(rel='stylesheet', href='css/index.css', media='screen', charset='utf-8')
 
     script(type='text/javascript', src='../node_modules/angular/angular.min.js')
-    script(type='text/javascript', src='../node_modules/angular-ui-router/release/angular-ui-router.min.js')
     script(type='text/javascript', src='../node_modules/selection-model/dist/selection-model.min.js')
     script(type='text/javascript', src='../node_modules/ace-builds/src-min-noconflict/ace.js')
 
@@ -20,6 +19,7 @@ html
         | Loading
     .page
       include ./left.pug
-      .right-column(ui-view)
+      .right-column
+        include ./content.pug
     <!-- do not touch indentation-->
     include ./footer.pug

lib/install-new-package-version.pug

@@ -1,29 +1,30 @@
-div.dialog.prompt(ng-if="shell.activeLink === '4'", ng-init="topMenu.versionPackageVersion = undefined")
-  form(ng-submit='topMenu.installVersionPackage(shell.currentSelectedPackages[0], topMenu.versionPackageVersion)')
+div.dialog.prompt(ng-show="showSpecificVersionPrompt && currentSelectedPackages.length === 1", ng-init="versionPackageVersion = undefined")
+  form(ng-submit='installVersionPackage(currentSelectedPackages[0], versionPackageVersion)')
     input(placeholder='Package name',
       type='text',
       readonly,
       disabled,
-      ng-value="shell.currentSelectedPackages[0].name")
+      ng-value="currentSelectedPackages[0].name")
     = " "
     input(class="hide",
       placeholder='@version',
       ng-autofocus,
       type='text',
-      ng-model='topMenu.versionPackageVersion',
-      ng-value="topMenu.versionPackageVersion")
+      ng-model='versionPackageVersion',
+      ng-value="versionPackageVersion")
     = " "
     span(class="prompt-kind")
-      select(name="packageVersionSelect", ng-model="topMenu.pkgVersionModel", ng-change="topMenu.versionPackageVersion = topMenu.pkgVersionModel")
+      select(name="packageVersionSelect", ng-model="pkgVersionModel", ng-change="versionPackageVersion = pkgVersionModel")
         option(value="", selected)
           | -
-        option(ng-repeat="pkgVersion in shell.selectedPackageViewInfos.versions | orderBy : pkgVersion : 'reverse' track by $index", ng-value="pkgVersion")
+        option(ng-repeat="pkgVersion in selectedPackageViewInfos.versions | orderBy : pkgVersion : 'reverse' track by $index", ng-value="pkgVersion")
           | {{pkgVersion}}
-    button
-      span(ng-show="!topMenu.installingPackageVersion")
+    button(ng-disabled="installingPackageVersion")
+      span(ng-show="!installingPackageVersion")
         | Install
-      span(ng-show="topMenu.installingPackageVersion")
+      span(ng-show="installingPackageVersion")
         img(src="img/loading.svg", width="13")
     = " "
     = " "
-    i(class="fa fa-times-circle-o button-close-prompt", ng-click="shell.activeLink = undefined;")
+    button(class="button-close-prompt pull-right", type="button", ng-click="hideInstallVersionPrompt();")
+      i(class="fa fa-remove")

lib/install-new-package.pug

@@ -1,32 +1,33 @@
-div.dialog.prompt(ng-if="shell.activeLink === '1'")
-  form(ng-submit='topMenu.installPackage(topMenu.packageName, topMenu.newPackageKind)')
+div.dialog.prompt(ng-show="showInstallPrompt")
+  form(ng-submit='installPackage(packageName, newPackageKind)')
     <!--do not remove placeholder even if it's not an input-->
-    div(class="tags-input", ng-tag-input, ng-autofocus, ng-model="topMenu.packageName", ng-keyup="topMenu.search(topMenu.packageName[topMenu.packageName.length - 1].name)", contenteditable="true", ng-attr-disabled="{{topMenu.installingPackage ? 'disabled' : ''}}" placeholder="package<@version> ...")
+    div(class="tags-input", ng-tag-input, tab-path-id="{{tab}}" ng-autofocus, ng-model="packageName", ng-keyup="search(packageName[packageName.length - 1].name)", contenteditable="true", ng-attr-disabled="{{installingPackage ? 'disabled' : ''}}" placeholder="package<@version> ...")
     <!-- this input holds search keywords, do not remove it -->
-    input(ng-hide="true", ng-model="topMenu.searchKeywords", ng-bind="topMenu.packageName")
+    input(ng-hide="true", ng-model="searchKeywords", ng-bind="packageName")
     = " "
     span(class="prompt-kind")
-      input(type="checkbox", ng-model='topMenu.newPackageKind', ng-disabled='shell.globalSelected')
+      input(type="checkbox", ng-model='newPackageKind', ng-disabled='shell.globalSelected')
       = " "
       = " "
       | dev
       = " "
     <!--do not remove id="" from the button-->
-    button(id="install-new-packages-button", ng-class="{'disabled': topMenu.installingPackage || !topMenu.packageName}")
-      span(ng-show="!topMenu.installingPackage")
+    button(id="install-new-packages-button", ng-disabled="installingPackage || !packageName")
+      span(ng-show="!installingPackage")
         | Install
-      span(ng-show="topMenu.installingPackage")
+      span(ng-show="installingPackage")
         img(src="img/loading.svg", width="13")
     = " "
     = " "
-    i(class="fa fa-times-circle-o button-close-prompt", ng-click="shell.activeLink = undefined")
-  .prompt-search
+    button(class="button-close-prompt pull-right", type="button", ng-click="hideInstallPrompt();")
+      i(class="fa fa-remove")
+  .prompt-search(ng-hide="installingPackage")
     .prompt-search-content
-      .prompt-search-item(ng-repeat="item in topMenu.searchResults.objects", ng-click="topMenu.searchChoosePackage(item.package.name)")
+      .prompt-search-item(ng-repeat="item in searchResults.objects", ng-click="searchChoosePackage(item.package.name)")
         h5
           | {{item.package.name}}
         div
           | {{item.package.description}}
-      .prompt-search-loader(ng-show="topMenu.searchingNpm")
+      .prompt-search-loader(ng-show="searchingNpm")
         img(src="img/loading.svg")
         | Loading results ...

lib/js/directives/ng-table-keyboard.js

@@ -7,7 +7,7 @@ angular.module(moduleName, [])
     return (scope, element) => {
 
     const onArrowDown = () => {
-        let tableRows = element[0].querySelectorAll('.table-row:not(.disabled)')
+        let tableRows = element[0].querySelectorAll('.tab:not(.ng-hide) .table-row:not(.disabled)')
           , clickedElement;
 
         if (tableRows && tableRows.length > 0) {

lib/js/directives/ng-tag-input.js

@@ -7,7 +7,8 @@ angular.module(moduleName, [])
   return {
     'require': '?ngModel',
     'link': (scope, element, attrs, ngModel) => {
-      let documentRange
+      let ngTagInputIdentifier = attrs.tabPathId
+        , documentRange
         , windowSelection
         , focusTheEnd = () => {
           try {
@@ -117,20 +118,26 @@ angular.module(moduleName, [])
           return event.preventDefault();
         }
         , updateOnSearchChoosenPackage = $rootScope.$on('top-menu:search-choosen-package', (eventInformation, data) => {
-          let newInputValue = '';
+          if (data &&
+          data.data &&
+          data.tabPath &&
+          data.tabPath === ngTagInputIdentifier) { //if search input is showing on this specific tab
 
-          data.forEach(pkg => {
-            newInputValue += pkg.name;
-            if (pkg.version &&
-              pkg.version.length > 0) {
-                newInputValue += `@${pkg.version}`;
-            }
-            newInputValue += ' '; //leave a blank space at the end of the string to split into tags again
-          });
+            let newInputValue = '';
 
-          element[0].innerText = newInputValue;
-          createTags();
-          updateModel();
+            data.data.forEach(pkg => {
+              newInputValue += pkg.name;
+              if (pkg.version &&
+                pkg.version.length > 0) {
+                  newInputValue += `@${pkg.version}`;
+              }
+              newInputValue += ' '; //leave a blank space at the end of the string to split into tags again
+            });
+
+            element[0].innerText = newInputValue;
+            createTags();
+            updateModel();
+          }
         });
 
       element.on('mousedown', onTrigger);

lib/js/filters.js

@@ -6,6 +6,25 @@ angular.module(moduleName, [])
   return string => {
     return string.replace(/<\/?[^>]+(>|$)/g, '');
   };
+})
+.filter('lastNameInPath', () => {
+  return string => {
+    let toReturn
+      , split;
+
+    if (string.includes('\\')) {
+      //on windows
+      split = string.split('\\');
+      toReturn = split[split.length - 1];
+    }
+
+    if (string.includes('/')) {
+      //on linux and mac
+      split = string.split('/');
+      toReturn = split[split.length - 1];
+    }
+    return toReturn ? toReturn : string;
+  };
 });
 
 export default moduleName;