classcard-ui 0.2.241 → 0.2.250

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.241",
+  "version": "0.2.250",
   "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/CTable/CTable.vue

@@ -106,7 +106,7 @@
       >
       <template slot="table-column" slot-scope="props">
         <!-- custom sorting icon -->
-        <span v-if="props.column.sortable && sorting" class="flex">
+        <span v-if="props.column.sortable || sorting" class="flex">
           <div>
             {{ props.column.label }}
           </div>

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/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,