HelloCSV/index.html at main · Masava-Team/HelloCSV · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./dist/bundled/hello-csv.css" />
    <script type="importmap">
      {
        "imports": {
          "hello-csv": "./dist/bundled/index.es.js"
        }
      }
    </script>
  </head>

  <body>
    <div id="app"></div>

    <script type="module">
      import { renderImporter } from 'hello-csv';

      const onComplete = async (data, onProgress) => {
        await new Promise((resolve) => setTimeout(resolve, 200));
        onProgress(20);
        await new Promise((resolve) => setTimeout(resolve, 200));
        onProgress(50);
        await new Promise((resolve) => setTimeout(resolve, 200));
        onProgress(100);
        console.log(data);
        setReady(true);
      };

      document.addEventListener('DOMContentLoaded', () => {
        const appElement = document.querySelector('#app');

        if (!appElement) {
          console.error('Could not find #app element!');
          return;
        }

        try {
          renderImporter(appElement, {
            sheets: [
              {
                id: 'employees',
                label: 'Employees',
                columns: [
                  {
                    label: 'Employee ID',
                    id: 'employee_id',
                    type: 'number',
                    validators: [
                      { validate: 'required' },
                      {
                        validate: 'unique',
                        error: 'This employee ID is not unique',
                      },
                      {
                        validate: 'is_integer',
                        error: 'This value must be a number',
                      },
                    ],
                  },
                  {
                    label: 'Email',
                    id: 'email',
                    type: 'string',
                    validators: [
                      { validate: 'required' },
                      { validate: 'unique', error: 'This email is not unique' },
                      {
                        validate: 'email',
                        error: 'This email is not valid',
                      },
                    ],
                  },
                  {
                    label: 'Phone Number',
                    id: 'phone_number',
                    type: 'string',
                    validators: [{ validate: 'required' }],
                  },
                  {
                    label: 'Address',
                    id: 'address',
                    type: 'string',
                    validators: [{ validate: 'required' }],
                  },
                  { label: 'City', id: 'city', type: 'string' },
                  {
                    label: 'State',
                    id: 'state',
                    type: 'string',
                    transformers: [{ transformer: 'state_code' }],
                  },
                  {
                    label: 'Zip Code',
                    id: 'zip_code',
                    type: 'string',
                    validators: [{ validate: 'required' }],
                  },
                ],
              },
            ],
            onDataColumnsMapped: (dataColumns) => {
              console.log('Data columns mapped:', dataColumns);
              return dataColumns;
            },
            onComplete: onComplete,
            preventUploadOnValidationErrors: true,
          });
        } catch (error) {
          console.error('Error calling renderImporter:', error);
        }
      });
    </script>
  </body>
</html>