增加基础功能

js/src/admin/components/AddStoreCommodity.tsx

@@ -5,21 +5,13 @@ import React from "react";
 import AddStoreCommodityDetail from "./AddStoreCommodityDetail";
 
 export default class AddStoreCommodity extends Modal {
-  private _list: any[]
-  get list(): any[] {
-    return this._list;
-  }
-
-  set list(value: any[]) {
-    this._list = value;
-  }
+  private commodityList: any = []
+  private moreResults: boolean = false
 
   oninit(vnode) {
     super.oninit(vnode);
 
-    this.request().then(res => {
-      this.list = res.data || []
-    })
+    this.loadResults()
   }
 
   title() {
@@ -31,41 +23,83 @@ export default class AddStoreCommodity extends Modal {
   }
 
   content() {
-    if (!this.list || this.list.length == 0) {
-      return (
-        <div className="body">
-          <span className="text">暂无可用商品</span>
-        </div>
-      )
-    }
     return (
       <div>
-        {this.list.map((item: object, index: number) => (
-          <div className="ExtensionPage-body">
-            <div className="ExtensionPage-settings FlarumBadgesPage">
-              <div className="container">
-                <span>{item.attributes.name}</span>
-                <Button
-                  className="Button"
-                  onclick={() => {
-                    app.modal.show(AddStoreCommodityDetail, { code: item.attributes.code, title: item.attributes.name});
-                  }}
-                >
-                  { app.translator.trans('mattoid-store.admin.settings.add-store-commodity') }
-                </Button>
+        {this.commodityList.map((item: object, index: number) => (
+          <div className="storeItemContainer" style="margin: 10px">
+            <div className="ExtensionPage-body">
+              <div className="ExtensionPage-settings FlarumBadgesPage" style="margin-top: 10px">
+                <div className="container">
+                  <span className="leftAligned" style="padding: 8px">{item.attributes.name}</span>
+                  <Button
+                    className="Button rightAligned"
+                    onclick={() => {
+                      app.modal.show(AddStoreCommodityDetail, {
+                        code: item.attributes.code,
+                        title: item.attributes.name
+                      });
+                    }}
+                  >
+                    {app.translator.trans('mattoid-store.admin.settings.add-store-commodity')}
+                  </Button>
+                </div>
               </div>
             </div>
           </div>
         ))}
+
+        {!this.loading && this.commodityList.length === 0 && (
+          <div>
+            <div
+              style="font-size:1.4em;color: var(--muted-more-color);text-align: center;line-height: 100px;">{app.translator.trans("mattoid-store.lib.list-empty")}</div>
+          </div>
+        )}
+
+        {!this.loading && this.hasMoreResults() && (
+          <div style="text-align:center;padding:20px">
+            <Button className={'Button Button--primary'} disabled={this.loading} loading={this.loading}
+                    onclick={() => this.loadMore()}>
+              {app.translator.trans('mattoid-store.lib.list-load-more')}
+            </Button>
+          </div>
+        )}
+
       </div>
     )
   }
 
-  request() {
-    return app.request<{ userMatchCount: number }>({
-      method: 'GET',
-      url: app.forum.attribute('apiUrl') + '/store/commodity',
-    });
+
+  hasMoreResults() {
+    return this.moreResults;
+  }
+
+  loadMore() {
+    this.loading = true;
+    this.loadResults(this.commodityList.length);
+  }
+
+  parseResults(results) {
+    this.moreResults = !!results.payload.links && !!results.payload.links.next;
+    [].push.apply(this.commodityList, results.payload.data);
+    this.loading = false;
+    m.redraw();
+
+    return results;
+  }
+
+  loadResults(offset = 0) {
+    const filters = {
+    };
+
+    return app.store
+      .find("/store/commodity", {
+        filter:filters,
+        page: {
+          offset,
+        },
+      })
+      .catch(() => {})
+      .then(this.parseResults.bind(this));
   }
 
 }

js/src/admin/components/AddStoreCommodityDetail.tsx

@@ -66,9 +66,9 @@ export default class AddStoreCommodityDetail extends Modal<ISubscriptionModalAtt
                   </span>
                 </div>
                 <div class="decorationStoreSettingsLabel" style="display: flex; align-items: center;">
-                  <span>{app.translator.trans("mattoid-store.admin.settings.commodity-code")}  </span>
+                  <span>{app.translator.trans("mattoid-store.admin.settings.commodity-code")}</span>
                   <span
-                    style="font-weight: normal; cursor: pointer; border-bottom: 2px dotted;"> {this.attrs.code} </span>
+                    style="font-weight: normal; cursor: pointer; border-bottom: 2px dotted; margin-left: 15px;"> {this.attrs.code} </span>
                 </div>
                 <div class="decorationStoreSettingsLabel" style="align-items: center;">
                   <div
@@ -109,7 +109,12 @@ export default class AddStoreCommodityDetail extends Modal<ISubscriptionModalAtt
                   <div
                     style="width: 40px; display: inline-block; margin-left: 26px;">{app.translator.trans("mattoid-store.admin.settings.commodity-discount-limit-unit")}</div>
                   {Select.component({
-                    options: {'day': '天', 'hour': '小时', 'minute': '分钟', 'second': '秒'},
+                    options: {
+                      'day': app.translator.trans("mattoid-store.lib.item-limit-unit-day"),
+                      'hour': app.translator.trans("mattoid-store.lib.item-limit-unit-hour"),
+                      'minute': app.translator.trans("mattoid-store.lib.item-limit-unit-minute"),
+                      'second': app.translator.trans("mattoid-store.lib.item-limit-unit-second")
+                    },
                     value: this.params.limitUnit,
                     onchange: (val) => {
                       this.params.limitUnit = val
@@ -120,7 +125,10 @@ export default class AddStoreCommodityDetail extends Modal<ISubscriptionModalAtt
                 <div className="spacing">
                   <div style="width: 60px; display: inline-block;">{app.translator.trans("mattoid-store.admin.settings.commodity-type")}</div>
                   {Select.component({
-                    options: {'permanent': '永久有效', 'limit': '限时有效'},
+                    options: {
+                      'permanent': app.translator.trans("mattoid-store.lib.item-type-permanent"),
+                      'limit':  app.translator.trans("mattoid-store.lib.item-type-limit")
+                    },
                     value: this.params.type,
                     onchange: (val) => {
                       this.params.type = val

js/src/admin/components/StoreListItem.tsx

@@ -0,0 +1,46 @@
+import app from 'flarum/admin/app';
+import Component from "flarum/Component";
+
+export default class StoreListItem extends Component {
+  private storeData: object = {}
+
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    this.storeData = this.attrs.item.attributes
+    this.storeData.id = this.attrs.item.id
+  }
+
+  view() {
+    return (
+      <div id={this.storeData.id} className="storeItemContainer">
+        <div className="leftAligned">
+          <div>
+            {app.translator.trans('mattoid-store.lib.item-id')}: {this.storeData.id} | &nbsp;
+            {app.translator.trans('mattoid-store.lib.item-title')}: {this.storeData.title}
+          </div>
+          <div>
+            {app.translator.trans('mattoid-store.lib.item-desc')}: {this.storeData.desc}
+          </div>
+          <div>
+            {app.translator.trans('mattoid-store.lib.item-status')}: <span className={this.storeData.status === 0 ? 'red': 'green'}>{ app.translator.trans('mattoid-store.lib.item-status-' + this.storeData.status) }</span> |&nbsp;
+            {app.translator.trans('mattoid-store.lib.item-price')}: {this.storeData.price} |&nbsp;
+            {app.translator.trans('mattoid-store.lib.item-stock')}: {this.storeData.stock} |&nbsp;
+            {app.translator.trans('mattoid-store.lib.item-discount')}: {this.storeData.discount || '无'} |&nbsp;
+            {app.translator.trans('mattoid-store.lib.item-discount_limit')}: {this.storeData.discountLimit || 0}&nbsp;{this.storeData.discountLimitUnit}
+          </div>
+          <div>
+            {app.translator.trans('mattoid-store.lib.item-type')}: {app.translator.trans('mattoid-store.lib.item-type-' + this.storeData.type)} |&nbsp;
+            {app.translator.trans('mattoid-store.lib.item-created-at')}: {this.storeData.createdAt}
+          </div>
+        </div>
+        <div className="rightAligned icon-size">
+        <img src={this.storeData.icon}/>
+        </div>
+      </div>
+    )
+  }
+
+
+
+}

js/src/admin/components/StoreListPage.tsx

@@ -1,12 +1,24 @@
 import app from 'flarum/admin/app';
 import ExtensionPage from 'flarum/admin/components/ExtensionPage';
 import Button from 'flarum/common/components/Button';
-import type Mithril from 'mithril';
+import  Mithril from 'mithril';
 import AddStoreCommodity from "./AddStoreCommodity";
+import Select from "flarum/common/components/Select";
+import Stream from 'flarum/common/utils/Stream';
+import StoreListItem from "./StoreListItem";
 
 export default class StoreListPage extends ExtensionPage {
+
+  private storeList: any = []
+  private moreResults: boolean = false
+
   oninit(vnode: Mithril.Vnode) {
     super.oninit(vnode);
+
+    this.status = Stream('-1');
+    this.type = Stream('-1');
+
+    this.loadResults();
   }
 
   content() {
@@ -24,10 +36,10 @@ export default class StoreListPage extends ExtensionPage {
               })}
               {this.buildSettingComponent({
                 type: 'string',
-                setting: 'mattoid-store.decorationStoreTimezone',
-                label: app.translator.trans('mattoid-store.admin.settings.decorationStoreTimezone'),
+                setting: 'mattoid-store.storeTimezone',
+                label: app.translator.trans('mattoid-store.admin.settings.store-timezone'),
                 placeholder: 'Asia/Shanghai',
-                help: app.translator.trans('mattoid-store.admin.settings.decorationStoreTimezone-requirement'),
+                help: app.translator.trans('mattoid-store.admin.settings.store-timezone-requirement'),
               })}
               {this.submitButton()}
             </form>
@@ -41,8 +53,109 @@ export default class StoreListPage extends ExtensionPage {
                 }, app.translator.trans('mattoid-store.admin.settings.add-store-commodity')));
             })}
           </div>
+          <div className="container">
+            <div className="spacing" style="overflow: auto">
+              <div style="display: inline-block;">
+                <Select
+                  value={this.status()}
+                  disabled={this.loading}
+                  options={{
+                    '-1': app.translator.trans('mattoid-store.lib.item-status-all'),
+                    '1': app.translator.trans('mattoid-store.lib.item-status-up'),
+                    '0': app.translator.trans('mattoid-store.lib.item-status-down')
+                  }}
+                  buttonClassName="Button"
+                  onchange={(e) => {
+                    this.status(e)
+                    this.storeList = []
+                    this.loadResults()
+                  }}
+                />
+              </div>
+              <div style=" display: inline-block; margin-left: 26px;">
+                <Select
+                  value={this.type()}
+                  disabled={this.loading}
+                  options={{
+                    '-1': app.translator.trans('mattoid-store.lib.item-type-all'),
+                    'permanent': app.translator.trans('mattoid-store.lib.item-type-permanent'),
+                    'limit': app.translator.trans('mattoid-store.lib.item-type-limit'),
+                  }}
+                  buttonClassName="Button"
+                  onchange={(e) => {
+                    this.type(e)
+                    this.storeList = []
+                    this.loadResults()
+                  }}
+                />
+              </div>
+            </div>
+            <ul style="padding:0px;list-style-type: none;">
+              {
+                this.storeList.map((item) => {
+                  return (
+                    <li style="margin-top:5px;background: var(--body-bg);">
+                      {StoreListItem.component({ item })}
+                    </li>
+                  );
+                })
+              }
+            </ul>
+
+            {!this.loading && this.storeList.length === 0 && (
+              <div>
+                <div style="font-size:1.4em;color: var(--muted-more-color);text-align: center;line-height: 100px;">
+                  {app.translator.trans('mattoid-store.lib.list-empty')}
+                </div>
+              </div>
+            )}
+
+            {!this.loading && this.hasMoreResults() && (
+              <div style="text-align:center;padding:20px">
+                <Button className={'Button Button--primary'} disabled={this.loading} loading={this.loading} onclick={() => this.loadMore()}>
+                  {app.translator.trans('mattoid-store.lib.list-load-more')}
+                </Button>
+              </div>
+            )}
+
+          </div>
         </div>
       </div>
     )
   }
+
+  hasMoreResults() {
+    return this.moreResults;
+  }
+
+  loadMore() {
+    this.loading = true;
+    this.loadResults(this.storeList.length);
+  }
+
+  parseResults(results) {
+    this.moreResults = !!results.payload.links && !!results.payload.links.next;
+    [].push.apply(this.storeList, results.payload.data);
+    this.loading = false;
+    m.redraw();
+
+    return results;
+  }
+
+  loadResults(offset = 0) {
+    const filters = {
+      type: this.type(),
+      status: this.status()
+    };
+
+    return app.store
+      .find("/store/list", {
+        filter:filters,
+        page: {
+          offset,
+        },
+      })
+      .catch(() => {})
+      .then(this.parseResults.bind(this));
+  }
 }

js/src/admin/index.tsx

@@ -1,5 +1,6 @@
 import app from 'flarum/admin/app';
 import StoreListPage from './components/StoreListPage';
+import StorePage from "./components/StorePage";
 
 app.initializers.add('mattoid-store', () => {
   app.extensionData.for("mattoid-store")