wip filters

2019-09-03 13:59:07 +01:00
parent 5f312efdf3
commit 0a363fc24b
6 changed files with 210 additions and 109 deletions
@@ -6444,9 +6444,9 @@
      }
    },
    "material-design-icons-iconfont": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-3.0.3.tgz",
-      "integrity": "sha1-FUoQhAR9Ticjf6f1o34Qdc7qbfI="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-5.0.1.tgz",
+      "integrity": "sha512-Xg6rIdGrfySTqiTZ6d+nQbcFepS6R4uKbJP0oAqyeZXJY/bX6mZDnOmmUJusqLXfhIwirs0c++a6JpqVa8RFvA=="
    },
    "md5.js": {
      "version": "1.3.5",
@@ -7526,6 +7526,11 @@
        "find-up": "^3.0.0"
      }
    },
+    "pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA=="
+    },
    "portfinder": {
      "version": "1.0.20",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -7,7 +7,8 @@
    "build": "vue-cli-service build"
  },
  "dependencies": {
-    "material-design-icons-iconfont": "^3.0.3",
+    "material-design-icons-iconfont": "^5.0.1",
+    "pluralize": "^8.0.0",
    "roboto-fontface": "*",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
@@ -88,6 +88,7 @@ import NewClient from './components/NewClient.vue'
 import NewClientSender from './components/NewClientSender.vue'
 import ClientReceiver from './components/ClientReceiver.vue'
 import ClientSender from './components/ClientSender.vue'
+var pluralize = require('pluralize')

 export default {
  name: 'App',
@@ -7,71 +7,76 @@
      <v-toolbar-title class="text-truncate font-weight-light">Add a new receiver</v-toolbar-title>
    </v-toolbar>
    <v-card-text>
-       <div class="ma-5">
-      <v-layout row wrap align-center>
-        <v-flex xs12>
-          <p class="headline font-weight-light">Account</p>
-          <p class="caption">We first need to know which speckle server the data is coming from.</p>
-          <v-overflow-btn
-            :items="$store.state.accounts"
-            label="Account"
-            editable
-            solo
-            v-model="selectedAccount"
-            item-text="fullName"
-            return-object
-          ></v-overflow-btn>
-        </v-flex>
-      </v-layout>
-      <v-layout row wrap align-center v-if="selectedAccount && selectedAccount.streams.length > 0">
-        <v-flex xs12>
-          <p class="headline font-weight-light">Stream</p>
-          <p
-            class="caption"
-          >If the stream you're looking for doesn't show up here, try refreshing the list and make sure it's shared with you!</p>
-          <v-overflow-btn
-            append-icon="refresh"
-            @click:append="refreshStreamsAtAccount()"
-            :items="selectedAccount.streams"
-            :label="'Streams from ' + selectedAccount.fullName"
-            editable
-            v-model="selectedStream"
-            item-text="fullName"
-            return-object
-          ></v-overflow-btn>
-          <!-- <v-select :items="selectedAccount.streams" item-text="name"></v-select> -->
-        </v-flex>
-        <v-flex xs12 v-if="selectedStream" class="caption">
-          Last updated:
-          <timeago :datetime="selectedStream.updatedAt" :auto-update="60"></timeago>
-        </v-flex>
-      </v-layout>
-      <v-layout row wrap align-center>
-        <v-flex
-          xs12
-          class="text-xs-left"
-          v-if="selectedAccount && selectedAccount.streams.length===0"
-        >Seems like you don't have any streams to receive. Get someone to share some with you, or, even better, create one!</v-flex>
-        <v-flex
-          xs12
-          class="text-xs-left"
-          v-if="!selectedAccount || !selectedAccount.validated"
-        >Could not access that server (is it online?) or no server selected.</v-flex>
-      </v-layout>
-      <v-layout row wrap align-center>
-        <v-btn
-          color="secondary"
-          block
-          :ripple="false"
-          :disabled="selectedStream===null"
-          @click.native="addReceiver()"
-        >Create Receiver</v-btn>
-      </v-layout>
-      <v-alert
-        :value="true"
-        type="info"
-        class="mt-5"
-      >If the stream contains objects that cannot be converted to Revit, they will not be visible in any way.</v-alert>
+      <div class="ma-5">
+        <v-layout row wrap align-center>
+          <v-flex xs12>
+            <p class="headline font-weight-light">Account</p>
+            <p class="caption">We first need to know which speckle server the data is coming from.</p>
+            <v-overflow-btn
+              :items="$store.state.accounts"
+              label="Account"
+              editable
+              solo
+              v-model="selectedAccount"
+              item-text="fullName"
+              return-object
+            ></v-overflow-btn>
+          </v-flex>
+        </v-layout>
+        <v-layout
+          row
+          wrap
+          align-center
+          v-if="selectedAccount && selectedAccount.streams.length > 0"
+        >
+          <v-flex xs12>
+            <p class="headline font-weight-light">Stream</p>
+            <p
+              class="caption"
+            >If the stream you're looking for doesn't show up here, try refreshing the list and make sure it's shared with you!</p>
+            <v-overflow-btn
+              append-icon="refresh"
+              @click:append="refreshStreamsAtAccount()"
+              :items="selectedAccount.streams"
+              :label="'Streams from ' + selectedAccount.fullName"
+              editable
+              v-model="selectedStream"
+              item-text="fullName"
+              return-object
+            ></v-overflow-btn>
+            <!-- <v-select :items="selectedAccount.streams" item-text="name"></v-select> -->
+          </v-flex>
+          <v-flex xs12 v-if="selectedStream" class="caption">
+            Last updated:
+            <timeago :datetime="selectedStream.updatedAt" :auto-update="60"></timeago>
+          </v-flex>
+        </v-layout>
+        <v-layout row wrap align-center>
+          <v-flex
+            xs12
+            class="text-xs-left"
+            v-if="selectedAccount && selectedAccount.streams.length===0"
+          >Seems like you don't have any streams to receive. Get someone to share some with you, or, even better, create one!</v-flex>
+          <v-flex
+            xs12
+            class="text-xs-left"
+            v-if="!selectedAccount || !selectedAccount.validated"
+          >Could not access that server (is it online?) or no server selected.</v-flex>
+        </v-layout>
+        <v-layout row wrap align-center>
+          <v-btn
+            color="secondary"
+            block
+            :ripple="false"
+            :disabled="selectedStream===null"
+            @click.native="addReceiver()"
+          >Create Receiver</v-btn>
+        </v-layout>
+        <v-alert
+          :value="true"
+          type="info"
+          class="mt-5"
+        >If the stream contains objects that cannot be converted to Revit, they will not be visible in any way.</v-alert>
      </div>
    </v-card-text>
  </v-card>
@@ -88,10 +93,7 @@ export default {
    },
    isVisible(val) {
      if (val) {
-        this.selectedAccount = this.$store.state.accounts.find(
-          ac => ac.IsDefault === true
-        );
-        this.selectedStream = null;
+        this.onOpen()
      }
    }
  },
@@ -100,6 +102,12 @@ export default {
    selectedStream: null
  }),
  methods: {
+    onOpen() {
+      this.selectedAccount = this.$store.state.accounts.find(
+        ac => ac.IsDefault === true
+      );
+      this.selectedStream = null;
+    },
    refreshStreamsAtAccount() {
      this.$store.dispatch("getAccountStreams", this.selectedAccount);
    },
@@ -110,6 +118,9 @@ export default {
      });
      this.$emit("close");
    }
+  },
+  mounted() {
+    this.onOpen()
  }
 };
 </script>
@@ -21,13 +21,13 @@
              label="Account"
              editable
              solo
-              v-model="selectedAccount"
+              v-model="SelectionAccount"
              item-text="fullName"
              return-object
            ></v-overflow-btn>
          </v-flex>
        </v-layout>
-        <v-layout row wrap align-center v-if="selectedAccount">
+        <v-layout row wrap align-center v-if="SelectionAccount">
          <v-flex xs12>
            <p class="headline font-weight-light">Stream Name</p>
            <p class="caption">Something meaningful would do, like 'walls-final-final-2'.</p>
@@ -36,19 +36,64 @@
          <v-flex xs12>
            <p class="headline font-weight-light">Objects</p>
            <p class="caption">Finally, what do you want to send?</p>
-            <v-tabs>
-              <v-tab>Selection</v-tab>
-              <v-tab>Category</v-tab>
-              <v-tab>Family</v-tab>
+            <v-tabs centered grow icons-and-text v-model="tab">
+              <v-tab v-for="filter in $store.state.filters" :key="filter.Name" class="ml-0">
+                {{ filter.Name }}
+                <v-icon small>{{ filter.Icon }}</v-icon>
+              </v-tab>
            </v-tabs>
          </v-flex>
+          <v-flex xs12>
+            <v-tabs-items v-model="tab">
+              <v-tab-item v-for="filter in $store.state.filters" :key="filter.Name">
+                <v-card flat tile>
+                  <!-- SELECTION -->
+                  <v-card-text v-if="filter.Type==='SpeckleUiBase.ElementsSelectionFilter'">
+                    <p>
+                      Add the current object selection to this stream.
+                      <br />You currently have
+                      <kbd>{{filter.Count}}</kbd>
+                      {{pluralize('object', filter.Count)}} selected.
+                    </p>
+                  </v-card-text>
+                  <!-- LIST -->
+                  <v-card-text v-else-if="filter.Type==='SpeckleUiBase.ListSelectionFilter'">
+                    <p>
+                      Add objects to this stream by {{filter.Name.toLowerCase()}}.
+                      <br />You currently have
+                      <kbd>{{filter.Selection.length}}</kbd>
+                      {{pluralize(filter.Name.toLowerCase(), filter.Selection.length)}} selected:
+                    </p>
+                    <v-select v-model="filter.Selection" :items="filter.Values" multiple chips>
+                      <template v-slot:prepend-item>
+                        <v-list-item ripple @click="toggle(filter)">
+                          <v-list-item-action>
+                            <v-icon
+                              :color="filter.Selection.length > 0 ? 'indigo darken-4' : ''"
+                            >{{ icon(filter) }}</v-icon>
+                          </v-list-item-action>
+                          <v-list-item-content>
+                            <v-list-item-title>Select All</v-list-item-title>
+                          </v-list-item-content>
+                        </v-list-item>
+                        <v-divider class="mt-2"></v-divider>
+                      </template>
+                    </v-select>
+                    <v-select v-model="filter.Selection" :items="filter.Values" multiple></v-select>
+
+                    <!-- CUSTOM -->
+                  </v-card-text>
+                </v-card>
+              </v-tab-item>
+            </v-tabs-items>
+          </v-flex>
        </v-layout>
        <v-layout row wrap align-center>
          <v-flex
            xs12
            class="text-xs-left"
-            v-if="!selectedAccount || !selectedAccount.validated"
-          >Could not access that server (is it online?) or no server selected.</v-flex>
+            v-if="!SelectionAccount || !SelectionAccount.validated"
+          >Could not access that server (is it online?) or no server Selection.</v-flex>
        </v-layout>
        <br />
        <v-layout row wrap align-center>
@@ -75,6 +120,8 @@
  </v-card>
 </template>
 <script>
+var pluralize = require('pluralize')
+console.log(pluralize('house', 5))
 export default {
  name: 'NewClient',
  props: {
@@ -84,18 +131,8 @@ export default {
  },
  watch: {
    isVisible(val) {
-      console.log(this.$store.state.filters)
      if (val) {
-        if (this.isEdit) {
-
-          let t = this.senderClient.account.Token
-          this.selectedAccount = this.$store.state.accounts.find(ac => ac.Token === t)
-          this.newStreamName = this.senderClient.name
-        }
-        else {
-          this.selectedAccount = this.$store.state.accounts.find(ac => ac.IsDefault === true)
-        }
-
+        this.onOpen()
      }
    }
  },
@@ -104,36 +141,64 @@ export default {
      if (this.newStreamName !== null)
        return true
      return false
-    }
+    },
+
  },
  data: () => ({
-    selectedAccount: null,
+    SelectionAccount: null,
    newStreamName: null,
-    selectedObjects: []
+    SelectionObjects: [],
+    tab: null,
  }),
  methods: {
-    // async refreshSelection() {
-    //   let res = await UiBindings.getObjectSelection()
-    //   if (res) {
-    //     this.selectedObjects = JSON.parse(res)
-    //   } else
-    //     this.selectedObjects = []
-    // },
+    pluralize(text, count) {
+      return pluralize(text, count)
+    },
+    checkedAllItems(filter) {
+      console.log("filter")
+      console.log(filter)
+      return filter.Selection.length === filter.Values.length
+    },
+    checkedSomeItems(filter) {
+      return filter.Selection.length > 0 && filter.Selection.length < filter.Values.length
+    },
+    icon(filter) {
+      if (this.checkedAllItems(filter)) return 'check_box'
+      if (this.checkedSomeItems(filter)) return 'indeterminate_check_box'
+      return 'check_box_outline_blank'
+    },
+    toggle(filter) {
+      this.$nextTick(() => {
+        if (this.checkedAllItems(filter)) {
+          filter.Selection = []
+        } else {
+          filter.Selection = filter.Values.slice()
+        }      })    },
+    onOpen() {
+      if (this.isEdit) {
+
+        let t = this.senderClient.account.Token
+        this.SelectionAccount = this.$store.state.accounts.find(ac => ac.Token === t)
+        this.newStreamName = this.senderClient.name
+      }
+      else {
+        this.SelectionAccount = this.$store.state.accounts.find(ac => ac.IsDefault === true)
+      }
+    },
    refreshStreamsAtAccount() {
-      this.$store.dispatch('getAccountStreams', this.selectedAccount)
+      this.$store.dispatch('getAccountStreams', this.SelectionAccount)
    },
    async addSender() {
-      let res = await this.$store.dispatch('addSenderClient', { account: this.selectedAccount, streamName: this.newStreamName, objects: this.selectedObjects })
+      let res = await this.$store.dispatch('addSenderClient', { account: this.SelectionAccount, streamName: this.newStreamName, objects: this.SelectionObjects })
      this.$emit("close")
    },
    async updateSender() {
-      let res = await this.$store.dispatch('updateSenderClient', { client: this.senderClient, streamName: this.newStreamName, objects: this.selectedObjects })
+      let res = await this.$store.dispatch('updateSenderClient', { client: this.senderClient, streamName: this.newStreamName, objects: this.SelectionObjects })
      this.$emit("close")
    }
  },
  mounted() {
-    // this.refreshSelection()
-
+    this.onOpen()
  }
 }
 </script>
@@ -8,11 +8,13 @@ export default new Vuex.Store({
  state: {
    test: {},
    accounts: [],
+    filters: [],
    clients: [],
    hostAppName: null,
    currentFileName: null,
    errors: [],
-    selectionCount: 0
+    selectionCount: 0,
+    slackInviteUrl: "https://speckle-works.slack.com/join/shared_invite/enQtNjY5Mzk2NTYxNTA4LTU4MWI5ZjdhMjFmMTIxZDIzOTAzMzRmMTZhY2QxMmM1ZjVmNzJmZGMzMDVlZmJjYWQxYWU0MWJkYmY3N2JjNGI"
  },
  mutations: {
    ADD_CLIENT(state, client) {
@@ -51,6 +53,10 @@ export default new Vuex.Store({
      state.accounts = accounts
    },

+    SET_FILTERS(state, filters) {
+      state.filters = filters
+    },
+
    SET_ACCOUNT_DATA(state, props) {
      let found = state.accounts.find(a => a.AccountId === props.AccountId)
      Object.keys(props).forEach(key => {
@@ -117,6 +123,11 @@ export default new Vuex.Store({
      client.name = streamName
      client.objects = objects

+      await Axios.put(`${client.account.RestApi}/streams/${client.streamId}`, { name: streamName }, { headers: { Authorization: client.account.Token } })
+        .catch(err => {
+          console.warn(err)
+        })
+
      context.commit('UPDATE_CLIENT', client)

      console.log('Sending this to ui bindings to add as a sender')
@@ -241,6 +252,13 @@ export default new Vuex.Store({
      console.log(res.data)
      let tempClient = { _id: client._id, children: res.data.parent.children }
      context.commit('SET_CLIENT_DATA', tempClient)
-    })
+    }),
+
+    getFilters: (context) => new Promise(async (resolve, reject) => {
+      let res = await UiBindings.getFilters()
+      let filters = JSON.parse(res)
+
+      context.commit('SET_FILTERS', filters)
+    }),
  }
 })