新增已传图库

Mattoids · Jul 1, 2024 · 2bb86ce · 2bb86ce
1 parent 2697980
commit 2bb86ce
Show file tree

Hide file tree

Showing 7 changed files with 211 additions and 5 deletions.
diff --git a/extend.php b/extend.php
@@ -17,6 +17,7 @@
 use Mattoid\Store\Controller\BuyGoodsController;
 use Mattoid\Store\Controller\DeleteStoreController;
 use Mattoid\Store\Controller\ListGoodsController;
+use Mattoid\Store\Controller\ListIconController;
 use Mattoid\Store\Controller\ListStoreController;
 use Mattoid\Store\Controller\PostStoreController;
 use Mattoid\Store\Controller\PutStoreController;
@@ -45,6 +46,7 @@
     (new Extend\Routes('api'))
         ->get('/store/list', 'store.list', ListStoreController::class)
         ->get('/store/goods', 'store.goods.list', ListGoodsController::class)
+        ->get('/store/icon/list', 'store.icon.list', ListIconController::class)
         ->put('/store/goods', 'store.goods.put', PutStoreController::class)
         ->delete('/store/goods', 'store.goods.delete', DeleteStoreController::class)
         ->post('/store/upload/icon', 'store.upload.icon', StoreUpdateIconController::class)

diff --git a/js/dist/admin.js b/js/dist/admin.js
diff --git a/js/dist/admin.js.map b/js/dist/admin.js.map
diff --git a/js/src/admin/components/StoreGoodsDetailModal.tsx b/js/src/admin/components/StoreGoodsDetailModal.tsx
@@ -7,6 +7,8 @@ import Select from "flarum/common/components/Select";
 
 export default class StoreGoodsDetailModal extends Modal {
 
+  private moreResults: boolean = false
+  private iconList: Array = [];
   private method: string = 'POST';
   private params: object = {
     status: Stream(1),
@@ -29,6 +31,7 @@ export default class StoreGoodsDetailModal extends Modal {
     super.oninit(vnode);
 
     this.method = 'POST';
+    this.moreResults = false;
     this.params.code = Stream(this.attrs.code || '');
     this.params.title = Stream(this.attrs.title || '');
 
@@ -60,11 +63,26 @@ export default class StoreGoodsDetailModal extends Modal {
     return this.params.title();
   }
 
+  onModalReady() {
+    const _this = this;
+    const closeButton = $(".Modal-close .Button");
+    $(closeButton).prop('id', 'storeCloseButton');
+
+    const closeButtonClone = closeButton.clone();
+    $(closeButtonClone).prop('id', 'storeCloseIconButton');
+    $(closeButtonClone).css('display', 'none');
+    $(".Modal-close").append(closeButtonClone);
+
+    $(closeButtonClone).on("click", function(){
+      _this.closeIcon();
+    });
+  }
+
   content() {
     return (
-      <div className="Modal-body">
+      <div className="Modal-body" oncreate={this.onModalReady.bind(this)}>
         <div className="Form">
-          <div className="Form-group">
+          <div id="StoreGoods" className="Form-group">
             <div style="text-align: left;">
               <div class="spacing" style="display: flex; align-items: center;">
                 <span>{app.translator.trans("mattoid-store.admin.settings.goods-status")}</span>
@@ -178,14 +196,18 @@ export default class StoreGoodsDetailModal extends Modal {
                     <Button
                       className="Button Button--primary"
                       onclick={(e) => {
-
+                        this.showIcon(e);
                       }}>
                       {app.translator.trans('mattoid-store.admin.settings.show-icon-button')}
                     </Button>
                   </div>
                 </div>
               </div>
 
+              <div className="spacing" style={this.params.icon() ? '' : 'display: none'}>
+                <img className="icon-size" src={this.params.icon()} />
+              </div>
+
               <div className="spacing">
                 <div style="width: 200px; display: inline-block;">
                   <Switch
@@ -225,11 +247,96 @@ export default class StoreGoodsDetailModal extends Modal {
               )}
             </div>
           </div>
+
+          <div id="StoreIcon" className="Form-group" style="display: none">
+            <div>
+              {
+                this.iconList.map((item) => {
+                  return (
+                    <div className="icon-frame inlineBlock" onclick={() => this.selectIconItem(item.attributes.url)}>
+                      <img className="icon-size" src={item.attributes.url}/>
+                    </div>
+                  )
+                })
+              }
+            </div>
+            {!this.loading && this.iconList.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>
+            )}
+
+            {this.loading && <div className="Store-loadMore">{this.loading}</div>}
+          </div>
         </div>
       </div>
     );
   }
 
+  loadIconList(offset = 0) {
+    this.loading = true;
+
+    return app.store
+      .find("/store/icon/list", {
+        page: {
+          offset,
+        },
+      })
+      .catch(() => {})
+      .then(this.parseResults.bind(this));
+  }
+
+  parseResults(results) {
+    this.moreResults = !!results.payload.links && !!results.payload.links.next;
+    [].push.apply(this.iconList, results.payload.data);
+    this.loading = false;
+    m.redraw();
+
+    return results;
+  }
+
+  loadMore() {
+    this.loading = true;
+    this.loadIconList(this.iconList.length);
+  }
+
+  hasMoreResults() {
+    return this.moreResults;
+  }
+
+
+  closeIcon() {
+    $("#StoreGoods").css("display","block");
+    $("#storeCloseButton").css("display","block");
+    $("#StoreIcon").css("display","none");
+    $("#storeCloseIconButton").css("display","none");
+  }
+
+  selectIconItem(url){
+    $("#StoreGoods").css("display","block");
+    $("#storeCloseButton").css("display","block");
+    $("#StoreIcon").css("display","none");
+    $("#storeCloseIconButton").css("display","none");
+    this.params.icon(url);
+  }
+
+  showIcon(event) {
+    $("#StoreGoods").css("display","none");
+    $("#storeCloseButton").css("display","none");
+    $("#StoreIcon").css("display","block");
+    $("#storeCloseIconButton").css("display","block");
+    this.params.title = Stream(app.translator.trans('mattoid-store.admin.settings.show-icon-button'));
+    this.iconList = [];
+    this.loadIconList();
+  }
 
   uploadIcon(event) {
     event.preventDefault();

diff --git a/less/admin.less b/less/admin.less
@@ -55,6 +55,16 @@
   margin-bottom: 10px;
 }
 
+.icon-frame {
+  width: 170px;
+  height: 150px;
+  border: 1px dotted var(--control-color);
+  padding-top: 35px;
+  padding-bottom: 35px;
+  padding-left: 45px;
+  padding-right: 45px;
+  margin: 5px;
+}
 
 .storeButton--gray {background-color:#ddd;color:var(--button-color);padding-left:20px;padding-right:20px;}
 .storeButton--gray:focus {background-color:#ddd;color:var(--button-color)}

diff --git a/src/Controller/ListIconController.php b/src/Controller/ListIconController.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Mattoid\Store\Controller;
+
+use Flarum\Api\Controller\AbstractListController;
+use Flarum\User\Exception\PermissionDeniedException;
+use Mattoid\Store\Model\StoreGoodsIconModel;
+use Mattoid\Store\Serializer\IconSerializer;
+use Psr\Http\Message\ServerRequestInterface;
+use Flarum\Http\RequestUtil;
+use Flarum\Http\UrlGenerator;
+use Flarum\Locale\Translator;
+use Tobscure\JsonApi\Document;
+use Flarum\User\UserRepository;
+
+
+class ListIconController extends AbstractListController
+{
+
+    /**
+     * {@inheritdoc}
+     */
+    public $serializer = IconSerializer::class;
+
+    public function __construct(UserRepository $repository, UrlGenerator $url, Translator $translator)
+    {
+        $this->url = $url;
+        $this->translator = $translator;
+        $this->repository = $repository;
+    }
+
+    protected function data(ServerRequestInterface $request, Document $document) {
+        $actor = RequestUtil::getActor($request);
+        $params = $request->getQueryParams();
+        $limit = $this->extractLimit($request);
+        $offset = $this->extractOffset($request);
+
+        if (!$actor->can('mattoid-store.group-view')) {
+            throw new PermissionDeniedException();
+        }
+
+        $list = StoreGoodsIconModel::query()
+            ->skip($offset)
+            ->take($limit + 1)
+            ->orderByDesc('created_at')
+            ->get();
+
+        $results = $limit > 0 && $list->count() > $limit;
+        if($results){
+            $list->pop();
+        }
+        $document->addPaginationLinks(
+            $this->url->to('api')->route('store.icon.list'),
+            $params,
+            $offset,
+            $limit,
+            $results ? null : 0
+        );
+
+        return $list;
+    }
+
+}
diff --git a/src/Serializer/IconSerializer.php b/src/Serializer/IconSerializer.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Mattoid\Store\Serializer;
+
+use Flarum\Api\Serializer\AbstractSerializer;
+use Flarum\Locale\Translator;
+
+class IconSerializer extends AbstractSerializer
+{
+
+    public function __construct(Translator $translator)
+    {
+        $this->translator = $translator;
+    }
+
+    protected function getDefaultAttributes($data) {
+        return [
+            'uuid' => $data->uuid,
+            'url' => $data->url,
+            'count' => $data->count,
+            'createdAt' => $data->created_at,
+        ];
+    }
+}