classcard-ui 0.2.188 → 0.2.192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.188",
+  "version": "0.2.192",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -20,6 +20,7 @@
     "@tailwindcss/forms": "^0.2.1",
     "core-js": "^3.18.0",
     "dayjs": "^1.10.7",
+    "filestack-js": "^3.25.0",
     "gridjs-selection": "^3.4.0",
     "gridjs-vue": "^3.4.0",
     "lodash-es": "^4.17.21",
@@ -35,10 +36,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/vue": "^6.3.12",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/vue": "^6.4.0",
     "@tailwindcss/postcss7-compat": "^2.2.14",
     "@types/lodash-es": "^4.17.5",
     "@vue/cli-plugin-babel": "^4.5.13",

package/src/components/CTable/CTable.vue

@@ -287,6 +287,7 @@ export default {
       showLoader: this.isLoading,
       searchTerm: "",
       paginationRecords: this.paginationData,
+      reorderedArray: [...this.rows],
     };
   },
   methods: {
@@ -299,22 +300,15 @@ export default {
     },
     // array of rows after drag and drop
     rearrange(oldIndex, newIndex) {
-      // var reorderedArray = [];
-      // this.rows.forEach(function (row) {
-      //   reorderedArray.push({ oldSortOrder: row.id });
-      // });
-      const movedItem = this.rows.find((item, index) => index === oldIndex);
-      const remainingItems = this.rows.filter((item, index) => index !== oldIndex);
+      const movedItem = this.reorderedArray.find((item, index) => index === oldIndex);
+      const remainingItems = this.reorderedArray.filter((item, index) => index !== oldIndex);
       const reorderedItems = [
         ...remainingItems.slice(0, newIndex),
         movedItem,
         ...remainingItems.slice(newIndex),
       ];
-      // reorderedItems.forEach(function (row, index) {
-      //   reorderedArray[index].newSortOrder = row.id;
-      // });
-      this.$emit('reordered', reorderedItems);
-      return reorderedItems;
+      this.reorderedArray = [...reorderedItems];
+      this.$emit('reordered', this.reorderedArray);
     },
     // listing functions
     sortChange(params) {

package/src/components/CUpload/CUpload.vue

@@ -1,28 +1,39 @@
 <template>
   <div>
-    <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"
-    >
-      <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 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"
+      >
+        <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>
       </div>
     </div>
+    <div
+      v-if="type === 'filestack'"
+      :class="filestackClasses"
+      id="filestack-uploader"
+    ></div>
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
     </p>
@@ -31,6 +42,8 @@
 
 <script>
 import CIcon from "../CIcon/CIcon.vue";
+import * as filestack from "filestack-js";
+
 export default {
   name: "CUpload",
   components: { CIcon },
@@ -48,6 +61,31 @@ export default {
     errorMessage: {
       type: String,
     },
+    type: {
+      type: String,
+      default: "default",
+    },
+    filestackApiKey: {
+      type: String,
+      default: "",
+    },
+    filestackClasses: {
+      type: String,
+      default: "w-96 h-96",
+    },
+  },
+  methods: {
+    initFilestack() {
+      const client = filestack.init(this.filestackApiKey);
+      const options = {
+        displayMode: "inline",
+        container: "#filestack-uploader",
+        uploadInBackground: false,
+        onUploadDone: (res) => this.$emit("filestack-uploaded", res),
+      };
+      const picker = client.picker(options);
+      picker.open();
+    },
   },
   computed: {
     errorClasses() {
@@ -58,6 +96,11 @@ export default {
       };
     },
   },
+  mounted() {
+    if (this.type === "filestack") {
+      this.initFilestack();
+    }
+  },
 };
 </script>
 

package/src/stories/CTable.stories.js

@@ -29,18 +29,14 @@ export const Default = Template.bind({});
 Default.args = {
   cols: [
     { label: "", field: "drag", hidden: false },
+    { label: "Payment mode", field: "mode", hidden: false },
     {
-      label: "Make",
-      field: "make",
+      label: "",
+      field: "menuOptions",
       hidden: false,
-      sortable: true,
-      direction: null,
-    },
-    { label: "Model", field: "modal", hidden: false, sortable: true, direction: null },
-    { label: "Staff", field: "staff", hidden: false },
-    { label: "CRR", field: "crr", hidden: false, sortable: true, direction: null, type: "decimal" },
-    { label: "Switch", field: "switch", hidden: false },
-    { label: "Icon", field: "color", hidden: false },
+      customizeColumn: true,
+      width: "60px"
+    }
   ],
   showHideColumnList: [
     { label: "", field: "drag", hidden: false },
@@ -68,50 +64,7 @@ Default.args = {
     { label: "Switch", field: "switch", hidden: false },
     { label: "Icon", field: "color", hidden: false },
   ],
-  rows: [
-    {
-      type: "",
-      id: 1,
-      make: "Baleno",
-      modal: "Fusion",
-      switch: "",
-      staff: {
-        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",
-        name: "Manager",
-      },
-      crr: "0.00",
-      color: { name: "trash", type: "solid", class: "h-5 w-5" },
-    },
-    {
-      type: "",
-      id: 2,
-      make: "Test",
-      modal: "Cruz",
-      switch: "",
-      staff: {
-        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",
-        name: "Manager",
-      },
-      crr: "9.56",
-      color: { name: "trash", type: "solid", class: "h-5 w-5" },
-    },
-    {
-      type: "",
-      id: 3,
-      make: "Honda City",
-      modal: "Maruti",
-      switch: "",
-      staff: {
-        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",
-        name: "Manager",
-      },
-      crr: "3.28",
-      color: { name: "trash", type: "solid", class: "h-5 w-5" },
-    },
-  ],
+  rows: [{"id":5,"mode":"ATM Machine 1","sort_order":2,"status":1,"rcInstitutionID":82,"created_at":"2020-09-02T12:53:09.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":11,"mode":"QA 1","sort_order":3,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T09:57:47.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":7,"mode":"ATM Machine 2","sort_order":4,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T09:45:47.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":18,"mode":"QA 3","sort_order":8,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T10:05:15.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":12,"mode":"QA 2","sort_order":21,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T09:57:55.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":15,"mode":"QA 4","sort_order":22,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T10:00:23.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":162,"mode":"Yes bank","sort_order":62,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:22:43.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":163,"mode":"SBI bank","sort_order":63,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:33:17.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":164,"mode":"BOB bank","sort_order":64,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:35:12.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":165,"mode":"PNB bank","sort_order":65,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:55:16.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"}],
   pagination: true,
   sorting: false,
   searching: true,

package/src/stories/CUpload.stories.js

@@ -1,14 +1,20 @@
-import CUpload from '../components/CUpload/CUpload.vue';
-import './utils.css'
+import CUpload from "../components/CUpload/CUpload.vue";
+import "./utils.css";
 
 export default {
-  title: 'CUpload',
+  title: "CUpload",
   component: CUpload,
   argTypes: {
     label: String,
     hint: String,
     fileSize: String,
-    isValidate: Boolean
+    isValidate: Boolean,
+    type: {
+      control: {
+        type: "inline-radio",
+        options: ["default", "filestack", "uppload"],
+      },
+    },
   },
 };
 
@@ -20,8 +26,10 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = {
- label: 'Name',
- hint: 'Optional',
- fileSize: '10',
- isValidate: false
+  label: "Name",
+  hint: "Optional",
+  fileSize: "10",
+  isValidate: true,
+  type: "default",
+  filestackApiKey: "",
 };