classcard-ui 0.2.242 → 0.2.251

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.242",
+  "version": "0.2.251",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -25,6 +25,7 @@
     "gridjs-selection": "^3.4.0",
     "gridjs-vue": "^3.4.0",
     "lodash-es": "^4.17.21",
+    "uppload": "^3.2.1",
     "v-calendar": "^2.3.2",
     "vue": "^2.6.14",
     "vue-good-table": "^2.21.8",

package/src/components/CCollapsibleSection/CCollapsibleSection.vue

@@ -3,10 +3,13 @@
     <div
       :class="divider || showSection ? 'border-b border-gray-200 pb-2' : ''"
       class="flex flex-row items-center justify-between cursor-pointer"
-      @click="collapse"
+      @click.self="collapse"
     >
       <!-- left and right arrow icon as per opening and closing of collapsible -->
-      <div class="flex flex-row items-center">
+      <div 
+        class="flex flex-row items-center"
+        @click="collapse"
+      >
         <c-icon
           :name="showSection ? 'chevron-down' : 'chevron-right'"
           class="text-gray-900 h-5 w-5"
@@ -81,6 +84,7 @@ export default {
   },
   methods: {
     collapse() {
+      console.log("collapsing")
       this.showSection = !this.showSection;
     },
   },

package/src/components/CSelect/CSelect.vue

@@ -11,39 +11,53 @@
       </div>
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
     </div>
+    
     <div class="relative" :class="label ? 'mt-1' : ''">
-      <button
-        type="button"
+      <input
+        type="text"
+        v-model="selectSearch"
         @click="toggleDropdown = !toggleDropdown"
         @focus="type == 'tertiary' ? (showFocus = true) : ''"
         @blur="close()"
+        @keyup="search()"
         aria-haspopup="listbox"
         aria-expanded="true"
         aria-labelledby="listbox-label"
         :class="classes"
-        class="relative w-full rounded-md pl-2 pr-10 py-2 text-left cursor-pointer focus:outline-none sm:text-sm disabled:opacity-50"
+        class="relative w-full rounded-md pl-3 pr-10 py-2 text-left cursor-pointer focus:outline-none sm:text-sm disabled:opacity-50"
         :disabled="isDisabled"
-      >
+      />
+
+      <div class="absolute top-2 left-3 flex pointer-events-none">
         <span class="flex items-center">
           <c-avatar
-            v-if="showImage"
+            v-if="showImage && !selectSearch"
             size="extraextrasmall"
             image="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
             :rounded="true"
           ></c-avatar>
-          <c-icon v-if="icon" :class="icon.class" :name="icon.name" :type="icon.type"></c-icon>
+          <c-icon 
+            v-if="icon && !selectSearch"
+            :class="icon.class"
+            :name="icon.name"
+            :type="icon.type"
+            >
+          </c-icon>
           <span :class="showImage ? 'ml-3' : ''" class="block truncate">
-            {{ selectedValue ? selectedValue : placeholder }}
+            {{ selectedValue ? selectedValue : 
+              selectSearch && selectSearch.length > 0 ? null : placeholder  
+            }}
           </span>
         </span>
-
-        <span
+      </div>
+      <div class="absolute top-2.5 right-3 flex pointer-events-none">
+        <div
           v-if="type == 'tertiary' ? showFocus : true"
-          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
-        >
+          class="right-0 flex items-center pointer-events-none"
+          >
           <c-icon name="selector" type="solid" class="h-5 w-5"></c-icon>
-        </span>
-      </button>
+        </div>
+      </div>
       <transition
         enter-active-class="transition ease-out duration-100"
         enter-class="transform opacity-0 scale-95"
@@ -75,7 +89,7 @@
               {{ addAction.label }}
             </li>
             <li
-              v-for="(option, index) in options"
+              v-for="(option, index) in renderOptions"
               :key="index"
               id="listbox-option-0"
               role="option"
@@ -184,6 +198,8 @@ export default {
       selectedValue: this.value !== null && this.value.option ? this.value.option : this.value,
       showSelectedValue: false,
       showFocus: false,
+      selectSearch: null,
+      renderOptions: this.options
     };
   },
   computed: {
@@ -200,7 +216,7 @@ export default {
   },
   methods: {
     handleSelect(event, option) {
-      this.selectedValue = option.option;
+      this.selectedValue = option[this.renderOptionName];
       this.$emit("onChangeValue", option);
       this.toggleDropdown = false;
     },
@@ -211,6 +227,16 @@ export default {
       this.toggleDropdown = false;
       this.type === "tertiary" ? (this.showFocus = false) : "";
     },
+    search() {
+      if(!this.selectSearch && this.selectSearch == '') {
+          this.renderOptions = this.options;
+      }
+      let options = [...this.options];
+      this.renderOptions = options.filter((option) => {
+        return option[this.renderOptionName].toLowerCase().includes(this.selectSearch.toLowerCase());
+      });
+      console.log(this.renderOptions);
+    }
   },
   watch: {
     value() {

package/src/components/CUpload/CUpload.vue

@@ -2,31 +2,15 @@
   <div>
     <div v-if="type === 'default'">
       <slot></slot>
-      <div class="flex justify-between">
-        <label class="block text-sm font-medium text-gray-900">
-          {{ label }}
-        </label>
-        <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-      </div>
       <div
         :class="errorClasses"
-        class="w-full mt-2 flex justify-center px-6 py-14 border-2 rounded-md"
+        class=""
+        id="c-file-area"
+        @click="uploader.open()"
       >
-        <div class="space-y-1 text-center">
-          <div class="flex text-sm text-gray-600">
-            <c-icon
-              type="solid"
-              class="h-5 w-5 text-indigo-600"
-              name="arrow-up"
-            ></c-icon>
-            <label
-              class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500 ml-1"
-            >
-              <span>Upload</span>
-              <input type="file" class="sr-only" />
-            </label>
-          </div>
-        </div>
+        <button type="white" class="inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 focus:ring-indigo-600 ">
+          {{buttonText}}
+        </button>
       </div>
     </div>
     <div
@@ -41,14 +25,14 @@
 </template>
 
 <script>
-import CIcon from "../CIcon/CIcon.vue";
 import * as filestack from "filestack-js";
+import { Uppload, Local, xhrUploader, en, Crop, Unsplash } from "uppload";
 
 export default {
   name: "CUpload",
-  components: { CIcon },
+  components: {  },
   props: {
-    label: {
+    buttonText: {
       type: String,
     },
     fileSize: {
@@ -78,6 +62,11 @@ export default {
       default: 1,
     },
   },
+  data() {
+    return {
+      uploader: null
+    }
+  },
   methods: {
     initFilestack() {
       const client = filestack.init(this.filestackApiKey);
@@ -91,6 +80,36 @@ export default {
       const picker = client.picker(options);
       picker.open();
     },
+    initUppload() {
+      // Uppload library
+      this.uploader = new Uppload({
+        lang: en,
+        compression: 0.4,
+        compressionToMime: "image/jpeg",
+        maxSize: [500, 1000],
+        uploader: xhrUploader({
+          endpoint: `https://reportcard.tech/api/saveImage/`,
+          fileKeyName: "image",
+          // settingsFunction: (xmlHttp) => {
+          //   xmlHttp.setRequestHeader("Authorization", `Bearer ${token}`);
+          // },
+          responseFunction: (response) => {
+            console.log(response);
+          },
+        }),
+        // bind: document.querySelector("#imagePreview"),
+      });
+      this.uploader.use([
+        new Local(),
+        new Unsplash("hXfo-C0svXV4IDCncBo7s-ySQpVJVeZrGuWxwwgC7qw"),
+        new Crop({ aspectRatio: 23 / 45 }),
+      ]);
+
+      // Uppload Error Handle
+      this.uploader.on("error", (error) => {
+        console.log("The error message is", error);
+      });
+    }
   },
   computed: {
     errorClasses() {
@@ -104,6 +123,8 @@ export default {
   mounted() {
     if (this.type === "filestack") {
       this.initFilestack();
+    } else if(this.type == "default") {
+      this.initUppload();
     }
   },
 };

package/src/stories/CSelect.stories.js

@@ -32,7 +32,7 @@ Default.args = {
   helpText: "This information is displayed on booking page",
   hint: "Optional",
   showImage: true,
-  value: {},
+  value: null,
   renderOptionName: "code",
   options: [
     { code: "one", value: "onee" },

package/src/stories/CUpload.stories.js

@@ -26,7 +26,7 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-  label: "Name",
+  buttonText: "Select File",
   hint: "Optional",
   fileSize: "10",
   isValidate: true,