ayanova/src/views/home-search.vue

@@ -1,32 +1,251 @@
 <template>
-  <UnderConstruction />
+  <v-container>
+    <v-row v-if="formState.ready">
+      <v-col>
+        <v-form ref="form">
+          <v-row>
+            <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-select
+                v-model="obj.searchObjectType"
+                :items="selectLists.objectTypes"
+                item-text="name"
+                item-value="id"
+                :label="$ay.t('Translation')"
+              ></v-select>
+            </v-col>
+
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                v-model="obj.searchPhrase"
+                clearable
+                :label="$ay.t('UserEmailAddress')"
+                ref="searchPhrase"
+                append-icon="fa-search"
+              ></v-text-field>
+            </v-col>
+
+            <v-col cols="12">
+              results list
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-import UnderConstruction from "../components/underconstruction.vue";
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
 /**
  * NOTE: In router.js I've made the ayatype parameter OPTIONAL, so make sure to deal with that, it may be undefined, not just zero
+ * NOTE: going to default max results for simplicity, picklists are 100 but this should be higher so maybe 200 by default
  * 	- PUT SEARCH into main menu, it's constantly there like help with the source as part of the data sent with the click	
-		- I.E. source could be widget from list or widget entry form and so user is searching widgets or source could be a main page where there is no source so it's empty and search everything
+    - I.E. source could be widget from list or widget entry form and so user is searching widgets or source could be a main page where there is no source 
+    so it's empty and search everything
 		- User clicks on search, it opens a main search form view which is also accessible under HOME section normally so two ways to get there
 	- PUT SEARCH into HOME section as a main form (make sure it has no search button on *it's* menu)	
 		- Search page allows to select types of objects in an array (maybe, did I code the server that way or single at a time object type)
 		- Also tags can be selected
 		- Object type and tag sb clearable with easy single clicks to speed up searching.
-		- Results are in standard grid list which is sortable or printable or openable to records etc
+    - Results are in standard grid list which is sortable or printable or openable to records etc
+    
+  USE-CASE: No snippet (excerpts) just name and type.  
+    - Excerpt available on demand (user clicks on excerpt button)
+    
+    This search will return both widgets and users:
+    {
+  "phrase": "e*",
+  "nameOnly": false,
+  "typeOnly": 0,
+  "maxResults": 100
+}
  * 
  */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+const FORM_KEY = "home-search";
+const API_BASE_URL = "Search/";
+const FORM_CUSTOM_TEMPLATE_KEY = "home-search";
+
 export default {
-  components: {
-    UnderConstruction
+  created() {
+    let vm = this;
+    initForm(vm)
+      .then(() => {
+        vm.formState.ready = true;
+        window.$gz.eventBus.$on("menu-click", clickHandler);
+
+        // vm.getDataFromApi();
+      })
+      .catch(err => {
+        vm.formState.ready = true;
+        window.$gz.errorHandler.handleFormError(err, vm);
+      });
   },
-  beforeCreate() {
-    window.$gz.eventBus.$emit("menu-change", {
-      isMain: true,
-      icon: "fa-search",
-      title: this.$ay.t("Search"),
-      helpUrl: "form-home-search"
-    });
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  components: {},
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      selectLists: {
+        objectTypes: []
+      },
+      searchPhrase: null,
+      searchObjectType: null,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject()
+    };
+  },
+
+  methods: {
+    getDataFromApi() {
+      let vm = this;
+      vm.formState.loading = true;
+      //always fetch on this form for the current logged in user id
+      let url = API_BASE_URL + vm.$store.state.userId;
+
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+
+      window.$gz.api
+        .get(url)
+        .then(res => {
+          if (res.error != undefined) {
+            //Not found?
+            if (res.error.code == "2010") {
+              //notify not found error then navigate backwards
+              window.$gz.eventBus.$emit(
+                "notify-error",
+                vm.$ay.t("ErrorAPI2010")
+              );
+              // navigate backwards
+              window.$gz._.delay(function() {
+                vm.$router.go(-1);
+              }, 2000);
+            }
+            vm.formState.serverError = res.error;
+            window.$gz.form.setErrorBoxErrors(vm);
+          } else {
+            vm.obj = res.data;
+
+            //Update the form status
+            window.$gz.form.setFormState({
+              vm: vm,
+              dirty: false,
+              valid: true,
+              loading: false,
+              readOnly: res.readOnly ? true : false
+            });
+            //modify the menu as necessary
+            generateMenu(vm);
+          }
+        })
+        .catch(function handleGetDataFromAPIError(error) {
+          //Update the form status
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+          window.$gz.errorHandler.handleFormError(error, vm);
+        });
+    }
   }
 };
+
+/////////////////////////////
+//
+//
+function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  let m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  let menuOptions = {
+    isMain: true,
+    icon: "fa-search",
+    title: vm.$ay.t("Search"),
+    helpUrl: "form-home-search",
+    formData: {
+      ayaType: window.$gz.type.UserOptions
+    },
+    menuItems: []
+  };
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+/////////////////////////////////
+//
+//
+function initForm(vm) {
+  return new Promise(function(resolve, reject) {
+    (async function() {
+      try {
+        await fetchTranslatedText(vm);
+        await populateSelectionLists(vm);
+      } catch (err) {
+        reject(err);
+      }
+      resolve();
+    })();
+  });
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+function fetchTranslatedText(vm) {
+  return window.$gz.translation.fetch([
+    //needs all object types
+    "CurrencyCode",
+    "LanguageCode",
+    "TimeZone",
+    "UserEmailAddress",
+    "Hour12",
+    "UserColor",
+    "Translation"
+  ]);
+}
+
+//////////////////////
+//
+//
+function populateSelectionLists(vm) {
+  //http://localhost:7575/api/v8/Translation/List
+  return window.$gz.api.get("Translation/List").then(res => {
+    if (res.error != undefined) {
+      window.$gz.errorHandler.handleFormError(res.error, vm);
+    } else {
+      vm.selectLists.objectTypes = res.data;
+    }
+  });
+}
 </script>